From 1916dcf97b2942b2cbaf5afd3cadbdfcda6f1efb Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 17 Feb 2021 11:47:43 -0800
Subject: created mutual friends preview and drawer

---
 src/components/suggestedPeople/MutualFriends.tsx | 206 +++++++++++++++++++++++
 1 file changed, 206 insertions(+)
 create mode 100644 src/components/suggestedPeople/MutualFriends.tsx

(limited to 'src/components/suggestedPeople/MutualFriends.tsx')

diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx
new file mode 100644
index 00000000..91f72254
--- /dev/null
+++ b/src/components/suggestedPeople/MutualFriends.tsx
@@ -0,0 +1,206 @@
+import React, {useState} from 'react';
+import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
+import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
+import {useSelector} from 'react-redux';
+import {ScreenType} from '../../types';
+import {BottomDrawer, TabsGradient} from '../../components';
+import {RootState} from '../../store/rootReducer';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {ProfilePreview} from '../profile';
+import {normalize} from 'react-native-elements';
+
+const MutualFriends: React.FC = () => {
+  const userXId = '53a7df9c-c3b2-4b1c-b197-7b1149ecfc8d';
+
+  let {friends} = userXId
+    ? useSelector((state: RootState) => state.userX[ScreenType.Search][userXId])
+    : useSelector((state: RootState) => state.friends);
+
+  const friendsPreview = friends.slice(0, 5);
+  const username = '@' + 'username';
+  const count = 4;
+
+  const [drawerVisible, setDrawerVisible] = useState(false);
+
+  return (
+    <>
+      <SafeAreaView>
+        <View style={styles.body}>
+          <Text style={styles.title}>Mutual Friends</Text>
+          <View style={styles.previewProfilesContainer}>
+            {friendsPreview.map((profilePreview) => (
+              <ProfilePreview
+                previewType={'Suggested People Screen'}
+                screenType={ScreenType.SuggestedPeople}
+                profilePreview={profilePreview}
+              />
+            ))}
+            {friends && friends.length > 0 && (
+              <TouchableOpacity onPress={() => setDrawerVisible(true)}>
+                <View style={styles.mutualFriendsButton}>
+                  <Text style={styles.plusSign}>+</Text>
+                  <Text style={styles.count}>{count}</Text>
+                </View>
+              </TouchableOpacity>
+            )}
+            <BottomDrawer
+              initialSnapPosition={'38%'}
+              showHeader={false}
+              isOpen={drawerVisible}
+              setIsOpen={setDrawerVisible}>
+              <View style={styles.mainContainer}>
+                <View style={styles.headerContainer}>
+                  <View style={styles.headerTextContainer}>
+                    <Text style={styles.headerTitle}>Mutual Friends</Text>
+                    <Text style={styles.headerDescription} numberOfLines={2}>
+                      {username} and you are both friends with
+                    </Text>
+                  </View>
+                </View>
+                <View style={styles.scrollViewContainer}>
+                  <ScrollView
+                    contentContainerStyle={styles.scrollView}
+                    horizontal>
+                    {friends.map((profilePreview) => (
+                      <ProfilePreview
+                        previewType={'Suggested People Drawer'}
+                        screenType={ScreenType.SuggestedPeople}
+                        profilePreview={profilePreview}
+                      />
+                    ))}
+                  </ScrollView>
+                </View>
+                <TouchableOpacity
+                  style={styles.cancelButton}
+                  onPress={() => setDrawerVisible(false)}>
+                  <Text style={styles.cancelButtonText}>Cancel</Text>
+                </TouchableOpacity>
+              </View>
+            </BottomDrawer>
+          </View>
+        </View>
+      </SafeAreaView>
+      <TabsGradient />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  background: {
+    backgroundColor: 'white',
+    height: '100%',
+  },
+  body: {
+    marginTop: HeaderHeight,
+    width: SCREEN_WIDTH * 0.9,
+    height: SCREEN_HEIGHT * 0.08,
+    flexDirection: 'column',
+    justifyContent: 'space-around',
+  },
+  title: {
+    fontSize: normalize(12),
+    lineHeight: normalize(14),
+    color: '#fff',
+    fontWeight: 'bold',
+    letterSpacing: normalize(0.1),
+  },
+  mutualFriendsButton: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  plusSign: {
+    fontSize: normalize(16),
+    lineHeight: normalize(18),
+    color: '#fff',
+    fontWeight: 'bold',
+    letterSpacing: normalize(0.1),
+  },
+  count: {
+    fontSize: normalize(13),
+    lineHeight: normalize(16),
+    color: '#fff',
+    fontWeight: 'bold',
+    letterSpacing: normalize(0.1),
+  },
+  previewProfilesContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  mainContainer: {
+    flexDirection: 'column',
+    backgroundColor: '#f9f9f9',
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT * 0.4,
+    borderTopRightRadius: normalize(13),
+    borderTopLeftRadius: normalize(13),
+    borderWidth: 0.5,
+    borderColor: '#fff',
+  },
+  headerContainer: {
+    width: SCREEN_WIDTH + 2,
+    height: '28%',
+    borderTopRightRadius: normalize(13),
+    borderTopLeftRadius: normalize(13),
+    borderWidth: 1,
+    borderColor: '#fff',
+    backgroundColor: '#fff',
+    shadowColor: '#7D7D7D',
+    shadowOffset: {width: 3, height: 3},
+    shadowRadius: 5,
+    shadowOpacity: 0.15,
+    marginBottom: 5.5,
+    alignSelf: 'center',
+  },
+  headerTextContainer: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    height: '100%',
+    width: '90%',
+    alignSelf: 'center',
+    marginTop: '4%',
+  },
+  headerTitle: {
+    fontSize: normalize(16),
+    fontWeight: '700',
+    lineHeight: normalize(20.29),
+    marginBottom: '0.5%',
+    letterSpacing: normalize(0.1),
+  },
+  headerDescription: {
+    fontSize: normalize(13),
+    lineHeight: normalize(15),
+    fontWeight: '600',
+    color: '#828282',
+    paddingTop: '2%',
+    letterSpacing: normalize(0.05),
+  },
+  scrollViewContainer: {
+    height: 130,
+    shadowColor: 'rgb(125, 125, 125)',
+    marginTop: '1%',
+  },
+  scrollView: {
+    backgroundColor: '#F9F9F9',
+    height: '95%',
+    padding: 0,
+    marginHorizontal: '5%',
+  },
+  cancelButton: {
+    backgroundColor: '#F0F0F0',
+    height: '50%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cancelButtonText: {
+    color: '#698DD3',
+    fontSize: normalize(17),
+    fontWeight: '700',
+    lineHeight: normalize(20),
+    letterSpacing: normalize(0.1),
+  },
+});
+
+export default MutualFriends;
-- 
cgit v1.2.3-70-g09d2


From d250fcf73c5636f8d53a1a0c996b52f27ea24395 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 17 Feb 2021 12:44:03 -0800
Subject: cosmetic fixes - keeps all devices consistent

---
 src/components/profile/ProfilePreview.tsx        |  2 +-
 src/components/suggestedPeople/MutualFriends.tsx | 30 +++++++++++-------------
 2 files changed, 15 insertions(+), 17 deletions(-)

(limited to 'src/components/suggestedPeople/MutualFriends.tsx')

diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index cdbf2dab..41792724 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -365,7 +365,7 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingRight: SCREEN_WIDTH * 0.03,
+    paddingRight: 25,
     backgroundColor: 'transparent',
   },
   suggestedPeopleAvatar: {
diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx
index 91f72254..df4e3ccd 100644
--- a/src/components/suggestedPeople/MutualFriends.tsx
+++ b/src/components/suggestedPeople/MutualFriends.tsx
@@ -5,7 +5,7 @@ import {useSelector} from 'react-redux';
 import {ScreenType} from '../../types';
 import {BottomDrawer, TabsGradient} from '../../components';
 import {RootState} from '../../store/rootReducer';
-import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 import {ProfilePreview} from '../profile';
 import {normalize} from 'react-native-elements';
 
@@ -16,8 +16,8 @@ const MutualFriends: React.FC = () => {
     ? useSelector((state: RootState) => state.userX[ScreenType.Search][userXId])
     : useSelector((state: RootState) => state.friends);
 
-  const friendsPreview = friends.slice(0, 5);
-  const username = '@' + 'username';
+  const friendsPreview = friends.slice(0, 4);
+  const username = '@' + '12345678901234';
   const count = 4;
 
   const [drawerVisible, setDrawerVisible] = useState(false);
@@ -44,7 +44,7 @@ const MutualFriends: React.FC = () => {
               </TouchableOpacity>
             )}
             <BottomDrawer
-              initialSnapPosition={'38%'}
+              initialSnapPosition={isIPhoneX() ? '38%' : '45%'}
               showHeader={false}
               isOpen={drawerVisible}
               setIsOpen={setDrawerVisible}>
@@ -60,7 +60,8 @@ const MutualFriends: React.FC = () => {
                 <View style={styles.scrollViewContainer}>
                   <ScrollView
                     contentContainerStyle={styles.scrollView}
-                    horizontal>
+                    horizontal
+                    showsHorizontalScrollIndicator={false}>
                     {friends.map((profilePreview) => (
                       <ProfilePreview
                         previewType={'Suggested People Drawer'}
@@ -86,23 +87,20 @@ const MutualFriends: React.FC = () => {
 };
 
 const styles = StyleSheet.create({
-  background: {
-    backgroundColor: 'white',
-    height: '100%',
-  },
   body: {
-    marginTop: HeaderHeight,
     width: SCREEN_WIDTH * 0.9,
-    height: SCREEN_HEIGHT * 0.08,
+    height: isIPhoneX() ? SCREEN_HEIGHT * 0.065 : SCREEN_HEIGHT * 0.08,
     flexDirection: 'column',
-    justifyContent: 'space-around',
+    justifyContent: 'flex-start',
+    marginBottom: isIPhoneX() ? 25 : 5,
   },
   title: {
     fontSize: normalize(12),
-    lineHeight: normalize(14),
+    lineHeight: normalize(12),
     color: '#fff',
     fontWeight: 'bold',
     letterSpacing: normalize(0.1),
+    paddingBottom: '3.5%',
   },
   mutualFriendsButton: {
     flexDirection: 'row',
@@ -139,7 +137,7 @@ const styles = StyleSheet.create({
   },
   headerContainer: {
     width: SCREEN_WIDTH + 2,
-    height: '28%',
+    height: isIPhoneX() ? '28%' : '35%',
     borderTopRightRadius: normalize(13),
     borderTopLeftRadius: normalize(13),
     borderWidth: 1,
@@ -175,6 +173,7 @@ const styles = StyleSheet.create({
     color: '#828282',
     paddingTop: '2%',
     letterSpacing: normalize(0.05),
+    textAlign: 'center',
   },
   scrollViewContainer: {
     height: 130,
@@ -182,7 +181,6 @@ const styles = StyleSheet.create({
     marginTop: '1%',
   },
   scrollView: {
-    backgroundColor: '#F9F9F9',
     height: '95%',
     padding: 0,
     marginHorizontal: '5%',
@@ -191,10 +189,10 @@ const styles = StyleSheet.create({
     backgroundColor: '#F0F0F0',
     height: '50%',
     flexDirection: 'row',
-    alignItems: 'center',
     justifyContent: 'center',
   },
   cancelButtonText: {
+    top: isIPhoneX() ? '6%' : '5%',
     color: '#698DD3',
     fontSize: normalize(17),
     fontWeight: '700',
-- 
cgit v1.2.3-70-g09d2


From d63929ef08530544ca238b15089b48f063301a0e Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 17 Feb 2021 12:53:28 -0800
Subject: displays correct +count val

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

(limited to 'src/components/suggestedPeople/MutualFriends.tsx')

diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx
index df4e3ccd..6e5280ec 100644
--- a/src/components/suggestedPeople/MutualFriends.tsx
+++ b/src/components/suggestedPeople/MutualFriends.tsx
@@ -18,7 +18,7 @@ const MutualFriends: React.FC = () => {
 
   const friendsPreview = friends.slice(0, 4);
   const username = '@' + '12345678901234';
-  const count = 4;
+  const count = friends.length - friendsPreview.length;
 
   const [drawerVisible, setDrawerVisible] = useState(false);
 
@@ -35,7 +35,7 @@ const MutualFriends: React.FC = () => {
                 profilePreview={profilePreview}
               />
             ))}
-            {friends && friends.length > 0 && (
+            {friends && friends.length > 4 && (
               <TouchableOpacity onPress={() => setDrawerVisible(true)}>
                 <View style={styles.mutualFriendsButton}>
                   <Text style={styles.plusSign}>+</Text>
-- 
cgit v1.2.3-70-g09d2


From 24bc662227b19ce6209d8f5325c04febe0ad82d5 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 17 Feb 2021 13:02:23 -0800
Subject: minor cosmetic changes

---
 src/components/profile/ProfilePreview.tsx        | 5 +++--
 src/components/suggestedPeople/MutualFriends.tsx | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

(limited to 'src/components/suggestedPeople/MutualFriends.tsx')

diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index 41792724..02ab94e7 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -18,6 +18,7 @@ import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
 import {
   checkIfUserIsBlocked,
   fetchUserX,
+  isIPhoneX,
   normalize,
   SCREEN_WIDTH,
   userXInStore,
@@ -365,8 +366,8 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingRight: 25,
-    backgroundColor: 'transparent',
+    marginRight: 25,
+    width: isIPhoneX() ? 80 : 65,
   },
   suggestedPeopleAvatar: {
     alignSelf: 'center',
diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx
index 6e5280ec..bc0889fd 100644
--- a/src/components/suggestedPeople/MutualFriends.tsx
+++ b/src/components/suggestedPeople/MutualFriends.tsx
@@ -44,7 +44,7 @@ const MutualFriends: React.FC = () => {
               </TouchableOpacity>
             )}
             <BottomDrawer
-              initialSnapPosition={isIPhoneX() ? '38%' : '45%'}
+              initialSnapPosition={isIPhoneX() ? '40%' : '45%'}
               showHeader={false}
               isOpen={drawerVisible}
               setIsOpen={setDrawerVisible}>
@@ -176,7 +176,7 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
   scrollViewContainer: {
-    height: 130,
+    height: isIPhoneX() ? 153 : 135,
     shadowColor: 'rgb(125, 125, 125)',
     marginTop: '1%',
   },
-- 
cgit v1.2.3-70-g09d2


From 0c618a852836d146a5e01687eb11b831f3f5e6ba Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 17 Feb 2021 13:07:30 -0800
Subject: comments

---
 src/components/suggestedPeople/MutualFriends.tsx      | 7 +++++++
 src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 4 +++-
 2 files changed, 10 insertions(+), 1 deletion(-)

(limited to 'src/components/suggestedPeople/MutualFriends.tsx')

diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx
index bc0889fd..32efd4a0 100644
--- a/src/components/suggestedPeople/MutualFriends.tsx
+++ b/src/components/suggestedPeople/MutualFriends.tsx
@@ -10,14 +10,21 @@ import {ProfilePreview} from '../profile';
 import {normalize} from 'react-native-elements';
 
 const MutualFriends: React.FC = () => {
+  // Requires user id of profile being viewed
   const userXId = '53a7df9c-c3b2-4b1c-b197-7b1149ecfc8d';
 
+  // Fetch mutual friends of user X
   let {friends} = userXId
     ? useSelector((state: RootState) => state.userX[ScreenType.Search][userXId])
     : useSelector((state: RootState) => state.friends);
 
+  // Getting list of first 4 friends to display on suggested people screen
   const friendsPreview = friends.slice(0, 4);
+
+  // Extract username of user whose profile is being viewed
   const username = '@' + '12345678901234';
+
+  // Count to be displayed after + symbol
   const count = friends.length - friendsPreview.length;
 
   const [drawerVisible, setDrawerVisible] = useState(false);
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 5db4e5b6..4d8607a4 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -84,7 +84,9 @@ const SuggestedPeopleScreen: React.FC = () => {
               profileBodyHeight={0}
               screenType={screenType}
             />
-            {/* TODO: Pass mutual friends to component and render only if mutual friends exist / display no mutual friends */}
+            {/* 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>
         </View>
-- 
cgit v1.2.3-70-g09d2


From 8e0c670ff6bac6af6a74cbf2b952b79233ee8e12 Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Wed, 17 Feb 2021 17:26:52 -0800
Subject: displaying mutual friends only if they exist

---
 src/components/suggestedPeople/MutualFriends.tsx | 110 ++++++++++++-----------
 1 file changed, 56 insertions(+), 54 deletions(-)

(limited to 'src/components/suggestedPeople/MutualFriends.tsx')

diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx
index 32efd4a0..d8b37bca 100644
--- a/src/components/suggestedPeople/MutualFriends.tsx
+++ b/src/components/suggestedPeople/MutualFriends.tsx
@@ -31,63 +31,65 @@ const MutualFriends: React.FC = () => {
 
   return (
     <>
-      <SafeAreaView>
-        <View style={styles.body}>
-          <Text style={styles.title}>Mutual Friends</Text>
-          <View style={styles.previewProfilesContainer}>
-            {friendsPreview.map((profilePreview) => (
-              <ProfilePreview
-                previewType={'Suggested People Screen'}
-                screenType={ScreenType.SuggestedPeople}
-                profilePreview={profilePreview}
-              />
-            ))}
-            {friends && friends.length > 4 && (
-              <TouchableOpacity onPress={() => setDrawerVisible(true)}>
-                <View style={styles.mutualFriendsButton}>
-                  <Text style={styles.plusSign}>+</Text>
-                  <Text style={styles.count}>{count}</Text>
-                </View>
-              </TouchableOpacity>
-            )}
-            <BottomDrawer
-              initialSnapPosition={isIPhoneX() ? '40%' : '45%'}
-              showHeader={false}
-              isOpen={drawerVisible}
-              setIsOpen={setDrawerVisible}>
-              <View style={styles.mainContainer}>
-                <View style={styles.headerContainer}>
-                  <View style={styles.headerTextContainer}>
-                    <Text style={styles.headerTitle}>Mutual Friends</Text>
-                    <Text style={styles.headerDescription} numberOfLines={2}>
-                      {username} and you are both friends with
-                    </Text>
+      {friends && friends.length > 0 && (
+        <SafeAreaView>
+          <View style={styles.body}>
+            <Text style={styles.title}>Mutual Friends</Text>
+            <View style={styles.previewProfilesContainer}>
+              {friendsPreview.map((profilePreview) => (
+                <ProfilePreview
+                  previewType={'Suggested People Screen'}
+                  screenType={ScreenType.SuggestedPeople}
+                  profilePreview={profilePreview}
+                />
+              ))}
+              {friends && friends.length > 4 && (
+                <TouchableOpacity onPress={() => setDrawerVisible(true)}>
+                  <View style={styles.mutualFriendsButton}>
+                    <Text style={styles.plusSign}>+</Text>
+                    <Text style={styles.count}>{count}</Text>
                   </View>
-                </View>
-                <View style={styles.scrollViewContainer}>
-                  <ScrollView
-                    contentContainerStyle={styles.scrollView}
-                    horizontal
-                    showsHorizontalScrollIndicator={false}>
-                    {friends.map((profilePreview) => (
-                      <ProfilePreview
-                        previewType={'Suggested People Drawer'}
-                        screenType={ScreenType.SuggestedPeople}
-                        profilePreview={profilePreview}
-                      />
-                    ))}
-                  </ScrollView>
-                </View>
-                <TouchableOpacity
-                  style={styles.cancelButton}
-                  onPress={() => setDrawerVisible(false)}>
-                  <Text style={styles.cancelButtonText}>Cancel</Text>
                 </TouchableOpacity>
-              </View>
-            </BottomDrawer>
+              )}
+              <BottomDrawer
+                initialSnapPosition={isIPhoneX() ? '40%' : '45%'}
+                showHeader={false}
+                isOpen={drawerVisible}
+                setIsOpen={setDrawerVisible}>
+                <View style={styles.mainContainer}>
+                  <View style={styles.headerContainer}>
+                    <View style={styles.headerTextContainer}>
+                      <Text style={styles.headerTitle}>Mutual Friends</Text>
+                      <Text style={styles.headerDescription} numberOfLines={2}>
+                        {username} and you are both friends with
+                      </Text>
+                    </View>
+                  </View>
+                  <View style={styles.scrollViewContainer}>
+                    <ScrollView
+                      contentContainerStyle={styles.scrollView}
+                      horizontal
+                      showsHorizontalScrollIndicator={false}>
+                      {friends.map((profilePreview) => (
+                        <ProfilePreview
+                          previewType={'Suggested People Drawer'}
+                          screenType={ScreenType.SuggestedPeople}
+                          profilePreview={profilePreview}
+                        />
+                      ))}
+                    </ScrollView>
+                  </View>
+                  <TouchableOpacity
+                    style={styles.cancelButton}
+                    onPress={() => setDrawerVisible(false)}>
+                    <Text style={styles.cancelButtonText}>Cancel</Text>
+                  </TouchableOpacity>
+                </View>
+              </BottomDrawer>
+            </View>
           </View>
-        </View>
-      </SafeAreaView>
+        </SafeAreaView>
+      )}
       <TabsGradient />
     </>
   );
-- 
cgit v1.2.3-70-g09d2


From 032bfc5d4d48eca542d2622df22ad353b594ef0b Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Thu, 18 Feb 2021 10:25:07 -0800
Subject: iPhone 8 container height increased (cosmetic)

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

(limited to 'src/components/suggestedPeople/MutualFriends.tsx')

diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx
index d8b37bca..3f9df4cd 100644
--- a/src/components/suggestedPeople/MutualFriends.tsx
+++ b/src/components/suggestedPeople/MutualFriends.tsx
@@ -52,7 +52,7 @@ const MutualFriends: React.FC = () => {
                 </TouchableOpacity>
               )}
               <BottomDrawer
-                initialSnapPosition={isIPhoneX() ? '40%' : '45%'}
+                initialSnapPosition={isIPhoneX() ? '40%' : '46%'}
                 showHeader={false}
                 isOpen={drawerVisible}
                 setIsOpen={setDrawerVisible}>
@@ -138,7 +138,7 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     backgroundColor: '#f9f9f9',
     width: SCREEN_WIDTH,
-    height: SCREEN_HEIGHT * 0.4,
+    height: isIPhoneX() ? SCREEN_HEIGHT * 0.4 : SCREEN_HEIGHT * 0.46,
     borderTopRightRadius: normalize(13),
     borderTopLeftRadius: normalize(13),
     borderWidth: 0.5,
-- 
cgit v1.2.3-70-g09d2


From 6fb6afbf091457aaa5b7116cdc635f75162bcf5f Mon Sep 17 00:00:00 2001
From: Shravya Ramesh <shravs1208@gmail.com>
Date: Thu, 18 Feb 2021 10:54:28 -0800
Subject: restyled cancel button to match EditProfile drawer

---
 src/components/suggestedPeople/MutualFriends.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/components/suggestedPeople/MutualFriends.tsx')

diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx
index 3f9df4cd..f99279c0 100644
--- a/src/components/suggestedPeople/MutualFriends.tsx
+++ b/src/components/suggestedPeople/MutualFriends.tsx
@@ -52,7 +52,7 @@ const MutualFriends: React.FC = () => {
                 </TouchableOpacity>
               )}
               <BottomDrawer
-                initialSnapPosition={isIPhoneX() ? '40%' : '46%'}
+                initialSnapPosition={isIPhoneX() ? '43%' : '50%'}
                 showHeader={false}
                 isOpen={drawerVisible}
                 setIsOpen={setDrawerVisible}>
@@ -138,7 +138,7 @@ const styles = StyleSheet.create({
     flexDirection: 'column',
     backgroundColor: '#f9f9f9',
     width: SCREEN_WIDTH,
-    height: isIPhoneX() ? SCREEN_HEIGHT * 0.4 : SCREEN_HEIGHT * 0.46,
+    height: SCREEN_HEIGHT * 0.46,
     borderTopRightRadius: normalize(13),
     borderTopLeftRadius: normalize(13),
     borderWidth: 0.5,
@@ -196,14 +196,14 @@ const styles = StyleSheet.create({
   },
   cancelButton: {
     backgroundColor: '#F0F0F0',
-    height: '50%',
+    height: 100,
     flexDirection: 'row',
     justifyContent: 'center',
   },
   cancelButtonText: {
-    top: isIPhoneX() ? '6%' : '5%',
+    top: isIPhoneX() ? '6%' : '7%',
     color: '#698DD3',
-    fontSize: normalize(17),
+    fontSize: normalize(16),
     fontWeight: '700',
     lineHeight: normalize(20),
     letterSpacing: normalize(0.1),
-- 
cgit v1.2.3-70-g09d2

