Merge branch 'master' into tma626-people-tutorial

# Conflicts:
#	src/screens/suggestedPeople/SuggestedPeopleScreen.tsx

3 files changed, 87 insertions, 18 deletions

diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 266ba3f9..511680ea 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,
@@ -20,6 +21,7 @@ import {
 import {RootState} from '../../store/rootReducer';
 import {NotificationType, ScreenType} from '../../types';
 import {getDateAge, SCREEN_HEIGHT} from '../../utils';
+import {normalize} from '../../utils';
 
 const NotificationsScreen: React.FC = () => {
   const {moments: loggedInUserMoments} = useSelector(
@@ -29,6 +31,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 +131,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}) => (
@@ -150,18 +156,25 @@ const NotificationsScreen: React.FC = () => {
       <StatusBar barStyle={'dark-content'} />
       <View style={styles.header}>
         <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>
   );
 };
@@ -174,12 +187,9 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
   },
   headerText: {
-    fontWeight: 'bold',
-    fontSize: 16,
-  },
-  underline: {
-    borderWidth: 2,
-    borderColor: '#8F01FF',
+    fontWeight: '700',
+    fontSize: normalize(18),
+    lineHeight: normalize(21),
   },
   container: {
     paddingBottom: '20%',
@@ -193,7 +203,13 @@ const styles = StyleSheet.create({
     marginLeft: '8%',
     marginTop: '5%',
     marginBottom: '2%',
-    fontSize: 15,
+    fontWeight: '600',
+    fontSize: normalize(12),
+    lineHeight: normalize(14),
+    color: '#828282',
+  },
+  emptyViewContainer: {
+    marginTop: '22%',
   },
 });
 
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;
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index e56a6cca..ab4dda6a 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -12,6 +12,7 @@ import Animated from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {useSelector} from 'react-redux';
 import {TabsGradient, TaggsBar} from '../../components';
+import {MutualFriends} from '../../components/suggestedPeople';
 import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
@@ -71,6 +72,10 @@ const SuggestedPeopleScreen: React.FC = () => {
                 <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
               </View>
             </TouchableOpacity>
+            {/* TODO: Pass mutual friends to component and render only if mutual friends exist / display no mutual friends
+             * Needs to be displayed only if userX !user himself
+             */}
+            <MutualFriends />
           </View>
           <TaggsBar
             y={y}