1 files changed, 34 insertions, 18 deletions
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 266ba3f9..511680ea 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -13,6 +13,7 @@ import {
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch, useSelector} from 'react-redux';
 import {Notification} from '../../components/notifications';
+import EmptyNotificationView from './notification/EmptyNotificationView';
 import {
   loadUserNotifications,
   updateNewNotificationReceived,
@@ -20,6 +21,7 @@ import {
 import {RootState} from '../../store/rootReducer';
 import {NotificationType, ScreenType} from '../../types';
 import {getDateAge, SCREEN_HEIGHT} from '../../utils';
+import {normalize} from '../../utils';
 
 const NotificationsScreen: React.FC = () => {
   const {moments: loggedInUserMoments} = useSelector(
@@ -29,6 +31,7 @@ const NotificationsScreen: React.FC = () => {
     (state: RootState) => state.user,
   );
   const [refreshing, setRefreshing] = useState(false);
+  const [noNotification, setNoNotification] = useState(false);
   // used for figuring out which ones are unread
   const [lastViewed, setLastViewed] = useState<moment.Moment | undefined>(
     undefined,
@@ -128,6 +131,9 @@ const NotificationsScreen: React.FC = () => {
       {title: 'Yesterday', data: yesterdays},
       {title: 'This Week', data: thisWeeks},
     ]);
+    setNoNotification(
+      todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0,
+    );
   }, [lastViewed, notifications]);
 
   const renderNotification = ({item}: {item: NotificationType}) => (
@@ -150,18 +156,25 @@ const NotificationsScreen: React.FC = () => {
       <StatusBar barStyle={'dark-content'} />
       <View style={styles.header}>
         <Text style={styles.headerText}>Notifications</Text>
-        <View style={styles.underline} />
       </View>
-      <SectionList
-        contentContainerStyle={styles.container}
-        sections={sectionedNotifications}
-        keyExtractor={(item, index) => index.toString()}
-        renderItem={renderNotification}
-        renderSectionHeader={renderSectionHeader}
-        refreshControl={
-          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
-        }
-      />
+      {noNotification && (
+        <View style={styles.emptyViewContainer}>
+          <EmptyNotificationView />
+        </View>
+      )}
+
+      {!noNotification && (
+        <SectionList
+          contentContainerStyle={styles.container}
+          sections={sectionedNotifications}
+          keyExtractor={(item, index) => index.toString()}
+          renderItem={renderNotification}
+          renderSectionHeader={renderSectionHeader}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          }
+        />
+      )}
     </SafeAreaView>
   );
 };
@@ -174,12 +187,9 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
   },
   headerText: {
-    fontWeight: 'bold',
-    fontSize: 16,
-  },
-  underline: {
-    borderWidth: 2,
-    borderColor: '#8F01FF',
+    fontWeight: '700',
+    fontSize: normalize(18),
+    lineHeight: normalize(21),
   },
   container: {
     paddingBottom: '20%',
@@ -193,7 +203,13 @@ const styles = StyleSheet.create({
     marginLeft: '8%',
     marginTop: '5%',
     marginBottom: '2%',
-    fontSize: 15,
+    fontWeight: '600',
+    fontSize: normalize(12),
+    lineHeight: normalize(14),
+    color: '#828282',
+  },
+  emptyViewContainer: {
+    marginTop: '22%',
   },
 });