cosmetic fixes - keeps all devices consistent

2 files changed, 15 insertions, 17 deletions

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',