Badge view changes

3 files changed, 23 insertions, 47 deletions

diff --git a/src/components/profile/FriendsCount.tsx b/src/components/profile/FriendsCount.tsx
index 4790743b..18cd1400 100644
--- a/src/components/profile/FriendsCount.tsx
+++ b/src/components/profile/FriendsCount.tsx
@@ -62,6 +62,7 @@ const styles = StyleSheet.create({
     fontSize: normalize(14),
   },
   label: {
+    marginTop: 10,
     fontWeight: '500',
     fontSize: normalize(14),
   },
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index a17d9f6f..061bbd0d 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -40,47 +40,6 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [showBadgeView, setBadgeViewVisible] = useState(false);
   const [firstName, lastName] = [...name.split(' ')];
-  const [selectedBadges, setSelectedBadges] = useState<UniversityBadge[]>([]);
-  const [selectedBadgesWithImage, setSelectedBadgesWithImage] = useState<any[]>(
-    [],
-  );
-
-  const fetchBadges = async () => {
-    const uid = userXId ? userXId : userId;
-    if (uid) {
-      const response = await getSuggestedPeopleProfile(uid);
-      if (response) {
-        const data = response.badges;
-        let extractedBadgeNames: UniversityBadge[] = [];
-        data.forEach((badge) => {
-          extractedBadgeNames.push(badge);
-        });
-        setSelectedBadges(extractedBadgeNames);
-      }
-    }
-  };
-
-  useEffect(() => {
-    fetchBadges();
-  }, []);
-
-  useEffect(() => {
-    let badgesWithImage = [];
-    selectedBadges.forEach((e) => {
-      const uniData = BADGE_DATA[e.university];
-      const categoryData = uniData.filter((u) => {
-        return u.title === e.category;
-      });
-      const badgeData = categoryData[0].data.filter((c) => {
-        return c.badgeName === e.name;
-      });
-      badgeData.forEach((c) => {
-        const obj = {...e, badgeImage: c.badgeImage};
-        badgesWithImage.push(obj);
-      });
-    });
-    setSelectedBadgesWithImage(badgesWithImage);
-  }, [selectedBadges]);
 
   return (
     <View style={styles.container}>
@@ -111,13 +70,14 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
           <View style={styles.friendsAndUniversity}>
             <FriendsCount screenType={screenType} userXId={userXId} />
             <TouchableOpacity onPress={() => setBadgeViewVisible(true)}>
-              <UniversityIcon {...{university, university_class}} />
+              <UniversityIcon
+                {...{university, university_class, needsShadow: true}}
+              />
             </TouchableOpacity>
             {showBadgeView && (
               <BadgeDetailView
                 isEditable={userXName === username}
                 name={name}
-                selectedBadges={selectedBadgesWithImage}
                 setBadgeViewVisible={setBadgeViewVisible}
               />
             )}
diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx
index 4cb1abe6..f1451f83 100644
--- a/src/components/profile/UniversityIcon.tsx
+++ b/src/components/profile/UniversityIcon.tsx
@@ -8,6 +8,7 @@ export interface UniversityIconProps extends ViewProps {
   university: UniversityType;
   university_class?: number;
   imageStyle?: StyleProp<ImageStyle>;
+  needsShadow?: boolean;
 }
 
 /**
@@ -18,13 +19,16 @@ const UniversityIcon: React.FC<UniversityIconProps> = ({
   university,
   university_class,
   imageStyle,
+  needsShadow = false,
 }) => {
   return (
     <View style={[styles.container, style]}>
-      <Image
-        source={getUniversityBadge(university, 'Crest')}
-        style={[styles.icon, imageStyle]}
-      />
+      <View style={needsShadow && styles.shadowStyle}>
+        <Image
+          source={getUniversityBadge(university, 'Crest')}
+          style={[styles.icon, imageStyle]}
+        />
+      </View>
       {university_class && (
         <Text style={styles.univClass}>
           {getUniversityClass(university_class)}
@@ -50,6 +54,17 @@ const styles = StyleSheet.create({
     width: normalize(17),
     height: normalize(19),
   },
+  shadowStyle: {
+    padding: 5,
+    borderRadius: 30,
+    shadowOffset: {
+      width: 1,
+      height: 1,
+    },
+    shadowOpacity: 1,
+    shadowRadius: 3,
+    backgroundColor: 'white',
+  },
 });
 
 export default UniversityIcon;