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

2 files changed, 74 insertions, 10 deletions

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;