notification view changes

5 files changed, 79 insertions, 11 deletions

diff --git a/src/assets/images/empty_notifications.png b/src/assets/images/empty_notifications.png
new file mode 100644
index 00000000..5a5828e4
--- /dev/null
+++ b/src/assets/images/empty_notifications.png
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index f58aa686..611fd748 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -75,6 +75,8 @@ export const AVATAR_GRADIENT = {
   end: '#215151',
 };
 
+export const NOTIFICATION_GRADIENT = ['rgba(247, 248, 248, 1)', 'rgba(247, 248, 248, 0)']
+
 export const SOCIAL_FONT_COLORS = {
   INSTAGRAM: INSTAGRAM_FONT_COLOR,
   FACEBOOK: FACEBOOK_FONT_COLOR,
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index 9680320a..3d8cbfe7 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -53,4 +53,8 @@ export const UPLOAD_MOMENT_PROMPT_ONE_MESSAGE = 'Post your first moment to\n con
 export const UPLOAD_MOMENT_PROMPT_THREE_HEADER = 'Continue to build your profile';
 export const UPLOAD_MOMENT_PROMPT_THREE_MESSAGE = 'Continue to personalize your own digital space in\nthis community by filling your profile with\ncategories and moments!';
 export const UPLOAD_MOMENT_PROMPT_TWO_HEADER = 'Create a new category';
-export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!';
\ No newline at end of file
+export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!';
+
+//Notifications
+export const UP_TO_DATE = 'Up-to-Date!';
+export const NO_NEW_NOTIFICATIONS = 'You have no new notifications';
\ No newline at end of file
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 266ba3f9..6fa1a272 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,
@@ -29,6 +30,7 @@ const NotificationsScreen: React.FC = () => {
     (state: RootState) => state.user,
   );
   const [refreshing, setRefreshing] = useState(false);
+  const [noActivity, setNoActivity] = useState(false);
   // used for figuring out which ones are unread
   const [lastViewed, setLastViewed] = useState<moment.Moment | undefined>(
     undefined,
@@ -128,6 +130,9 @@ const NotificationsScreen: React.FC = () => {
       {title: 'Yesterday', data: yesterdays},
       {title: 'This Week', data: thisWeeks},
     ]);
+    setNoActivity(
+      todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0,
+    );
   }, [lastViewed, notifications]);
 
   const renderNotification = ({item}: {item: NotificationType}) => (
@@ -152,16 +157,24 @@ const NotificationsScreen: React.FC = () => {
         <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} />
-        }
-      />
+      {noActivity === true && (
+        <View style={styles.emptyViewContainer}>
+          <EmptyNotificationView />
+        </View>
+      )}
+
+      {noActivity === false && (
+        <SectionList
+          contentContainerStyle={styles.container}
+          sections={sectionedNotifications}
+          keyExtractor={(item, index) => index.toString()}
+          renderItem={renderNotification}
+          renderSectionHeader={renderSectionHeader}
+          refreshControl={
+            <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+          }
+        />
+      )}
     </SafeAreaView>
   );
 };
@@ -195,6 +208,9 @@ const styles = StyleSheet.create({
     marginBottom: '2%',
     fontSize: 15,
   },
+  emptyViewContainer: {
+    marginTop: '22%',
+  },
 });
 
 export default NotificationsScreen;
diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx
new file mode 100644
index 00000000..194b16d0
--- /dev/null
+++ b/src/screens/main/notification/EmptyNotificationView.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {UP_TO_DATE, NO_NEW_NOTIFICATIONS} from '../../../constants/strings';
+import {NOTIFICATION_GRADIENT} from '../../../constants/constants';
+const EmptyNotificationView: React.FC = () => {
+  return (
+    <View style={style.container}>
+      <LinearGradient
+        style={{borderRadius: 135.5}}
+        useAngle={true}
+        angle={180}
+        colors={NOTIFICATION_GRADIENT}>
+        <Image
+          source={require('../../../assets/images/empty_notifications.png')}
+        />
+      </LinearGradient>
+      <View style={style.topMargin}>
+        <Text style={style.upperTextStyle}>{UP_TO_DATE}</Text>
+      </View>
+      <View>
+        <Text style={style.bottomTextStyle}>{NO_NEW_NOTIFICATIONS}</Text>
+      </View>
+    </View>
+  );
+};
+
+const style = StyleSheet.create({
+  container: {alignItems: 'center'},
+  topMargin: {marginTop: 43},
+  upperTextStyle: {
+    fontWeight: '700',
+    fontSize: 23,
+    fontStyle: 'normal',
+    lineHeight: 40,
+  },
+  bottomTextStyle: {
+    color: '#2D3B45',
+    fontWeight: '600',
+    fontSize: 20,
+    fontStyle: 'normal',
+    lineHeight: 40,
+  },
+});
+
+export default EmptyNotificationView;