2 files changed, 51 insertions, 23 deletions

diff --git a/src/components/suggestedPeople/BadgeIcon.tsx b/src/components/suggestedPeople/BadgeIcon.tsx
index e8425308..8f576a43 100644
--- a/src/components/suggestedPeople/BadgeIcon.tsx
+++ b/src/components/suggestedPeople/BadgeIcon.tsx
@@ -1,6 +1,12 @@
 import {useNavigation} from '@react-navigation/core';
 import React from 'react';
-import {Image, ImageSourcePropType, StyleSheet} from 'react-native';
+import {
+  Image,
+  ImageSourcePropType,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
 import {UniversityBadge} from '../../types';
@@ -9,13 +15,14 @@ import {normalize} from '../../utils';
 interface BadgeIconProps {
   badge: UniversityBadge;
   img: ImageSourcePropType;
+  style?: StyleProp<ViewStyle>;
 }
 
-const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img}) => {
+const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img, style}) => {
   const navigation = useNavigation();
   return (
     <TouchableOpacity
-      style={styles.badgeButton}
+      style={[styles.badgeButton, style]}
       onPress={() => {
         navigation.navigate('MutualBadgeHolders', {
           badge_id: badge.id,
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index 352e4433..9708a652 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -1,17 +1,11 @@
 import {useNavigation} from '@react-navigation/native';
 import React, {Fragment, useEffect, useMemo, useState} from 'react';
-import {
-  ImageSourcePropType,
-  ScrollView,
-  StyleSheet,
-  Text,
-  View,
-} from 'react-native';
+import {ImageSourcePropType, StyleSheet, Text, View} from 'react-native';
 import {Image} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import RequestedButton from '../../assets/ionicons/requested-button.svg';
-import {SPTaggsBar} from '../../components';
-import {BadgesDropdown, MutualFriends} from '../../components/suggestedPeople';
+import {UniversityIcon} from '../../components';
+import {BadgeIcon, MutualFriends} from '../../components/suggestedPeople';
 import {BADGE_DATA} from '../../constants/badges';
 import {
   ProfilePreviewType,
@@ -34,7 +28,6 @@ const SPBody: React.FC<SPBodyProps> = ({
     user,
     university,
     mutual_friends,
-    social_links,
     suggested_people_url,
     friendship,
     badges,
@@ -130,8 +123,7 @@ const SPBody: React.FC<SPBodyProps> = ({
             userXId: loggedInUserId === user.id ? undefined : user.id,
             screenType,
           });
-        }}
-        style={styles.nameInfoContainer}>
+        }}>
         <Text style={styles.firstName}>{user.first_name}</Text>
         <Text style={styles.username}>@{user.username}</Text>
       </TouchableOpacity>
@@ -144,20 +136,35 @@ const SPBody: React.FC<SPBodyProps> = ({
       <View style={styles.mainContainer}>
         <View style={styles.topContainer}>
           <Text style={styles.title}>{firstItem && 'Suggested People'}</Text>
-          {localBadges && <BadgesDropdown {...{university, localBadges}} />}
+          <UniversityIcon
+            university={university}
+            style={styles.universityIcon}
+            imageStyle={styles.universityIcon}
+          />
         </View>
-        <View style={styles.body}>
+        <View>
           <View style={styles.marginManager}>
             <View style={styles.addUserContainer}>
               <NamePlate />
               {user.id !== loggedInUserId && <FriendButton />}
             </View>
           </View>
-          <SPTaggsBar
-            userXId={user.id === loggedInUserId ? undefined : user.id}
-            screenType={screenType}
-            linkedSocials={social_links}
-          />
+          {localBadges.length !== 0 && (
+            // Badges aligned left and spaced as if there are 5 items
+            <View style={styles.badgeContainer}>
+              {localBadges.map(({badge, img}, index) => (
+                <BadgeIcon
+                  key={index}
+                  badge={badge}
+                  img={img}
+                  style={styles.badge}
+                />
+              ))}
+              {[0, 0, 0, 0, 0].splice(localBadges.length, 5).map((_, index) => (
+                <View key={index} style={styles.badge} />
+              ))}
+            </View>
+          )}
           <View style={styles.marginManager}>
             <MutualFriends user={user} friends={mutual_friends} />
           </View>
@@ -223,7 +230,6 @@ const styles = StyleSheet.create({
     textShadowRadius: normalize(2),
     letterSpacing: normalize(2),
   },
-  nameInfoContainer: {},
   addButton: {
     justifyContent: 'center',
     alignItems: 'center',
@@ -271,6 +277,21 @@ const styles = StyleSheet.create({
     shadowOffset: {width: 2, height: 2},
     shadowOpacity: 0.5,
   },
+  universityIcon: {
+    left: '5%',
+    width: normalize(31),
+    height: normalize(38),
+  },
+  badgeContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    marginBottom: 25,
+  },
+  badge: {
+    width: normalize(52),
+    height: normalize(52),
+    borderWidth: 1,
   },
 });