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

1 files changed, 48 insertions, 0 deletions

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;