Merge pull request #243 from shravyaramesh/tma628-mutual-friends

[TMA-628] Mutual friends

1 files changed, 60 insertions, 0 deletions

diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index fad3ec09..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,
@@ -188,6 +189,17 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
       usernameStyle = styles.friendUsername;
       nameStyle = styles.friendName;
       break;
+    case 'Suggested People Drawer':
+      containerStyle = styles.suggestedPeopleContainer;
+      avatarStyle = styles.suggestedPeopleAvatar;
+      nameContainerStyle = styles.suggestedPeopleNameContainer;
+      usernameToDisplay = '@' + username;
+      usernameStyle = styles.suggestedPeopleUsername;
+      nameStyle = styles.suggestedPeopleName;
+      break;
+    case 'Suggested People Screen':
+      avatarStyle = styles.suggestedPeopleScreenAvatar;
+      break;
     default:
       containerStyle = styles.searchResultContainer;
       avatarStyle = styles.searchResultAvatar;
@@ -229,6 +241,16 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
             <Text style={nameStyle}>{first_name.concat(' ', last_name)}</Text>
           </>
         )}
+        {previewType === 'Suggested People Drawer' && (
+          <>
+            <Text style={styles.suggestedPeopleName} numberOfLines={2}>
+              {first_name} {last_name}
+            </Text>
+            <Text
+              style={styles.suggestedPeopleUsername}
+              numberOfLines={1}>{`@${username}`}</Text>
+          </>
+        )}
       </View>
     </TouchableOpacity>
   );
@@ -340,6 +362,44 @@ const styles = StyleSheet.create({
     color: '#6C6C6C',
     letterSpacing: normalize(0.1),
   },
+  suggestedPeopleContainer: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: 25,
+    width: isIPhoneX() ? 80 : 65,
+  },
+  suggestedPeopleAvatar: {
+    alignSelf: 'center',
+    height: normalize(60),
+    width: normalize(60),
+    borderRadius: 60,
+  },
+  suggestedPeopleUsername: {
+    fontSize: normalize(10),
+    lineHeight: normalize(15),
+    fontWeight: '500',
+    color: '#828282',
+    textAlign: 'center',
+  },
+  suggestedPeopleNameContainer: {
+    justifyContent: 'space-evenly',
+    alignSelf: 'stretch',
+    marginTop: 10,
+  },
+  suggestedPeopleName: {
+    fontSize: normalize(12),
+    lineHeight: normalize(15),
+    fontWeight: '700',
+    color: '#3C3C3C',
+    textAlign: 'center',
+  },
+  suggestedPeopleScreenAvatar: {
+    height: normalize(33.5),
+    width: normalize(33.5),
+    marginRight: 15,
+    borderRadius: 50,
+  },
 });
 
 export default ProfilePreview;