From ef2c8f57971b6ca55a6a3ef58609b0c80fe55869 Mon Sep 17 00:00:00 2001
From: ankit-thanekar007 <ankit.thanekar007@gmail.com>
Date: Mon, 3 May 2021 10:23:01 -0700
Subject: tma-822-base UI changes

---
 src/components/common/EmptyContentView.tsx | 129 +++++++++++++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 src/components/common/EmptyContentView.tsx

(limited to 'src/components/common/EmptyContentView.tsx')

diff --git a/src/components/common/EmptyContentView.tsx b/src/components/common/EmptyContentView.tsx
new file mode 100644
index 00000000..1416c556
--- /dev/null
+++ b/src/components/common/EmptyContentView.tsx
@@ -0,0 +1,129 @@
+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,
+  FIRST_MESSAGE,
+  START_CHATTING,
+} from '../../constants/strings';
+import {NOTIFICATION_GRADIENT} from '../../constants/constants';
+import {SCREEN_HEIGHT, normalize, SCREEN_WIDTH} from '../../utils';
+import {EmptyViewProps} from '../../types/index';
+
+const EmptyNotificationView: React.FC<EmptyViewProps> = ({viewType}) => {
+  const _getNotificationImage = () => {
+    return (
+      <LinearGradient
+        style={styles.backgroundLinearView}
+        useAngle={true}
+        angle={180}
+        colors={NOTIFICATION_GRADIENT}>
+        <Image
+          source={require('../../assets/images/empty_notifications.png')}
+        />
+      </LinearGradient>
+    );
+  };
+
+  const _getChatImage = () => {
+    return (
+      <LinearGradient
+        style={styles.backgroundLinearView}
+        useAngle={true}
+        angle={180}
+        colors={NOTIFICATION_GRADIENT}>
+        <Image
+          style={styles.imageStyles}
+          source={require('../../assets/images/no_chats.png')}
+        />
+      </LinearGradient>
+    );
+  };
+
+  const _getImageForType = () => {
+    switch (viewType) {
+      case 'Notification':
+        return _getNotificationImage();
+      case 'ChatList':
+        return _getChatImage();
+    }
+  };
+
+  const _getTextForNotification = () => {
+    return (
+      <>
+        <View style={styles.topMargin}>
+          <Text style={styles.upperTextStyle}>{UP_TO_DATE}</Text>
+        </View>
+        <View>
+          <Text style={styles.bottomTextStyle}>{NO_NEW_NOTIFICATIONS}</Text>
+        </View>
+      </>
+    );
+  };
+
+  const _getTextForChat = () => {
+    return (
+      <View style={styles.chatTextStyles}>
+        <View style={styles.topMargin}>
+          <Text style={styles.upperTextStyle}>{START_CHATTING}</Text>
+        </View>
+        <View>
+          <Text style={styles.bottomTextStyle}>{FIRST_MESSAGE}</Text>
+        </View>
+      </View>
+    );
+  };
+
+  const _getTextForType = () => {
+    switch (viewType) {
+      case 'Notification':
+        return _getTextForNotification();
+      case 'ChatList':
+        return _getTextForChat();
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      {_getImageForType()}
+      {_getTextForType()}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  topMargin: {marginTop: SCREEN_HEIGHT * 0.025},
+  upperTextStyle: {
+    textAlign: 'center',
+    fontWeight: '700',
+    fontSize: normalize(23),
+    lineHeight: normalize(40),
+  },
+  chatTextStyles: {
+    width: '85%',
+  },
+  bottomTextStyle: {
+    textAlign: 'center',
+    color: '#2D3B45',
+    fontWeight: '600',
+    fontSize: normalize(20),
+    lineHeight: normalize(40),
+  },
+  imageStyles: {
+    width: SCREEN_WIDTH * 0.72,
+    height: SCREEN_WIDTH * 0.72,
+  },
+  backgroundLinearView: {
+    borderRadius: (SCREEN_WIDTH * 0.72) / 2,
+  },
+});
+
+export default EmptyNotificationView;
-- 
cgit v1.2.3-70-g09d2


From 2abe11e6b231410c7bd531adabfe9158109411cb Mon Sep 17 00:00:00 2001
From: ankit-thanekar007 <ankit.thanekar007@gmail.com>
Date: Mon, 3 May 2021 12:16:35 -0700
Subject: File name changes

---
 src/components/common/EmptyContentView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/common/EmptyContentView.tsx')

diff --git a/src/components/common/EmptyContentView.tsx b/src/components/common/EmptyContentView.tsx
index 1416c556..e3aaf621 100644
--- a/src/components/common/EmptyContentView.tsx
+++ b/src/components/common/EmptyContentView.tsx
@@ -11,7 +11,7 @@ import {NOTIFICATION_GRADIENT} from '../../constants/constants';
 import {SCREEN_HEIGHT, normalize, SCREEN_WIDTH} from '../../utils';
 import {EmptyViewProps} from '../../types/index';
 
-const EmptyNotificationView: React.FC<EmptyViewProps> = ({viewType}) => {
+const EmptyContentView: React.FC<EmptyViewProps> = ({viewType}) => {
   const _getNotificationImage = () => {
     return (
       <LinearGradient
@@ -126,4 +126,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default EmptyNotificationView;
+export default EmptyContentView;
-- 
cgit v1.2.3-70-g09d2


From 355829d9983b839db342881011cc3fe9ff3792f4 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Tue, 4 May 2021 07:45:08 -0700
Subject: style to look more like figma

---
 src/components/common/EmptyContentView.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

(limited to 'src/components/common/EmptyContentView.tsx')

diff --git a/src/components/common/EmptyContentView.tsx b/src/components/common/EmptyContentView.tsx
index e3aaf621..14ad4af1 100644
--- a/src/components/common/EmptyContentView.tsx
+++ b/src/components/common/EmptyContentView.tsx
@@ -100,7 +100,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  topMargin: {marginTop: SCREEN_HEIGHT * 0.025},
+  topMargin: {
+    marginTop: SCREEN_HEIGHT * 0.025,
+    paddingBottom: '5%',
+  },
   upperTextStyle: {
     textAlign: 'center',
     fontWeight: '700',
@@ -112,10 +115,10 @@ const styles = StyleSheet.create({
   },
   bottomTextStyle: {
     textAlign: 'center',
-    color: '#2D3B45',
+    color: '#808080',
     fontWeight: '600',
     fontSize: normalize(20),
-    lineHeight: normalize(40),
+    lineHeight: normalize(30),
   },
   imageStyles: {
     width: SCREEN_WIDTH * 0.72,
-- 
cgit v1.2.3-70-g09d2