Merge pull request #240 from ankit-thanekar007/tma551-gradient-notification-page

[TMA-551] Change the gradient of notifications page to match the rest of the application

5 files changed, 82 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..3c43fb6c 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -75,6 +75,11 @@ 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..5a9be5fc 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -44,13 +44,15 @@ export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pi
 export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed 😓';
 export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`;
 export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones';
+export const NO_NEW_NOTIFICATIONS = 'You have no new notifications';
 export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on';
 export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} 🎉`;
 export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!';
 export const SUCCESS_PWD_RESET = 'Your password was reset successfully!';
 export const SUCCESS_VERIFICATION_CODE_SENT = 'New verification code sent! Check your phone messages for your code';
+export const UP_TO_DATE = 'Up-to-Date!';
 export const UPLOAD_MOMENT_PROMPT_ONE_MESSAGE = 'Post your first moment to\n continue building your digital\nidentity!';
 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!';
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 266ba3f9..ca921f75 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 [noNotification, setNoNotification] = 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},
     ]);
+    setNoNotification(
+      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} />
-        }
-      />
+      {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>
   );
 };
@@ -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..f43cfb2a
--- /dev/null
+++ b/src/screens/main/notification/EmptyNotificationView.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import {Image, Text, StyleSheet, 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';
+import {SCREEN_HEIGHT, normalize} from '../../../utils';
+const EmptyNotificationView: React.FC = () => {
+  return (
+    <View style={styles.container}>
+      <LinearGradient
+        style={styles.backgroundLinearView}
+        useAngle={true}
+        angle={180}
+        colors={NOTIFICATION_GRADIENT}>
+        <Image
+          source={require('../../../assets/images/empty_notifications.png')}
+        />
+      </LinearGradient>
+      <View style={styles.topMargin}>
+        <Text style={styles.upperTextStyle}>{UP_TO_DATE}</Text>
+      </View>
+      <View>
+        <Text style={styles.bottomTextStyle}>{NO_NEW_NOTIFICATIONS}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {alignItems: 'center'},
+  topMargin: {marginTop: SCREEN_HEIGHT * 0.025},
+  upperTextStyle: {
+    fontWeight: '700',
+    fontSize: normalize(23),
+    lineHeight: normalize(40),
+  },
+  bottomTextStyle: {
+    color: '#2D3B45',
+    fontWeight: '600',
+    fontSize: normalize(20),
+    lineHeight: normalize(40),
+  },
+  backgroundLinearView: {
+    borderRadius: 135.5,
+  },
+});
+
+export default EmptyNotificationView;