Added university icon to suggested people

2 files changed, 38 insertions, 26 deletions

diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx
index 95aef8b9..48cfe3dc 100644
--- a/src/components/profile/UniversityIcon.tsx
+++ b/src/components/profile/UniversityIcon.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import {StyleSheet, ViewProps} from 'react-native';
+import {ImageStyle, StyleProp, StyleSheet, ViewProps} from 'react-native';
 import {Image, Text, View} from 'react-native-animatable';
 import {getUniversityClass, normalize} from '../../utils';
 
 export interface UniversityIconProps extends ViewProps {
   university: string;
-  university_class: number;
+  university_class?: number;
+  imageStyle?: StyleProp<ImageStyle>;
 }
 
 /**
@@ -15,6 +16,7 @@ const UniversityIcon: React.FC<UniversityIconProps> = ({
   style,
   university,
   university_class,
+  imageStyle,
 }) => {
   var universityIcon;
   switch (university) {
@@ -28,10 +30,12 @@ const UniversityIcon: React.FC<UniversityIconProps> = ({
 
   return (
     <View style={[styles.container, style]}>
-      <Image source={universityIcon} style={styles.icon} />
-      <Text style={styles.univClass}>
-        {getUniversityClass(university_class)}
-      </Text>
+      <Image source={universityIcon} style={[styles.icon, imageStyle]} />
+      {university_class && (
+        <Text style={styles.univClass}>
+          {getUniversityClass(university_class)}
+        </Text>
+      )}
     </View>
   );
 };
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index 16b5ae9b..21e86f14 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -12,8 +12,8 @@ import {
   ScreenType,
   SuggestedPeopleDataType,
 } from '../../types';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import UniversityIcon from '../../components/profile';
+import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import UniversityIcon from '../../components/profile/UniversityIcon';
 interface SPBodyProps {
   item: SuggestedPeopleDataType;
   index: number;
@@ -87,24 +87,22 @@ const SPBody: React.FC<SPBodyProps> = ({
     <View>
       {backgroundImage}
       <View style={styles.mainContainer}>
-        <Text style={styles.title}>{firstItem && 'Suggested People'}</Text>
-        <TouchableOpacity
-          style={{
-            backgroundColor: 'indianred',
-            width: 60,
-            height: 60,
-            borderRadius: 30,
-            borderWidth: 1,
-            borderColor: 'transparent',
-          }}
-          onPress={() =>
-            navigation.navigate('MutualBadgeHolders', {
-              badge_id: 40,
-              badge_title: 'Brown University Football',
-            })
-          }>
-          {/* <UniversityIcon university="brown" /> */}
-        </TouchableOpacity>
+        <View style={styles.topContainer}>
+          <Text style={styles.title}>{firstItem && 'Suggested People'}</Text>
+          <TouchableOpacity
+            onPress={() =>
+              navigation.navigate('MutualBadgeHolders', {
+                badge_id: 40,
+                badge_title: 'Brown University Football',
+              })
+            }>
+            <UniversityIcon
+              university="brown"
+              style={styles.universityIconContainer}
+              imageStyle={{width: normalize(31), height: normalize(38)}}
+            />
+          </TouchableOpacity>
+        </View>
         <View style={styles.body}>
           <View style={styles.marginManager}>
             <View style={styles.addUserContainer}>
@@ -149,6 +147,16 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignSelf: 'center',
   },
+  topContainer: {
+    height: isIPhoneX() ? SCREEN_HEIGHT * 0.11 : SCREEN_HEIGHT * 0.13,
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+  },
+  universityIconContainer: {
+    width: normalize(31),
+    height: normalize(38),
+    left: '5%',
+  },
   marginManager: {marginHorizontal: '5%'},
   image: {
     position: 'absolute',