3 files changed, 62 insertions, 42 deletions
diff --git a/src/components/suggestedPeople/BadgeIcon.tsx b/src/components/suggestedPeople/BadgeIcon.tsx
new file mode 100644
index 00000000..e8425308
--- /dev/null
+++ b/src/components/suggestedPeople/BadgeIcon.tsx
@@ -0,0 +1,57 @@
+import {useNavigation} from '@react-navigation/core';
+import React from 'react';
+import {Image, ImageSourcePropType, StyleSheet} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
+import {UniversityBadge} from '../../types';
+import {normalize} from '../../utils';
+
+interface BadgeIconProps {
+  badge: UniversityBadge;
+  img: ImageSourcePropType;
+}
+
+const BadgeIcon: React.FC<BadgeIconProps> = ({badge, img}) => {
+  const navigation = useNavigation();
+  return (
+    <TouchableOpacity
+      style={styles.badgeButton}
+      onPress={() => {
+        navigation.navigate('MutualBadgeHolders', {
+          badge_id: badge.id,
+          badge_title: badge.name,
+          badge_img: img,
+        });
+      }}>
+      <LinearGradient
+        colors={['#4E3629', '#EC2027']}
+        useAngle={true}
+        angle={154.72}
+        angleCenter={{x: 0.5, y: 0.5}}
+        style={styles.badgeBackground}>
+        <Image source={img} style={styles.icon} />
+      </LinearGradient>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  badgeBackground: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 50,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  badgeButton: {
+    width: normalize(30),
+    height: normalize(30),
+    borderRadius: 30,
+  },
+  icon: {
+    width: '60%',
+    height: '60%',
+  },
+});
+
+export default BadgeIcon;
diff --git a/src/components/suggestedPeople/BadgesDropdown.tsx b/src/components/suggestedPeople/BadgesDropdown.tsx
index 0d4725d9..50f924e4 100644
--- a/src/components/suggestedPeople/BadgesDropdown.tsx
+++ b/src/components/suggestedPeople/BadgesDropdown.tsx
@@ -5,7 +5,7 @@ import {TouchableOpacity} from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
 import Animated, {Easing} from 'react-native-reanimated';
 import {UniversityType, UniversityBadge} from '../../types';
-import {UniversityIcon} from '..';
+import {BadgeIcon, UniversityIcon} from '..';
 import {normalize, SCREEN_WIDTH} from '../../utils';
 import UniversityIconClicked from './UniversityIconClicked';
 
@@ -105,30 +105,7 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
                 zIndex: -1 * badge.id,
               },
             ]}>
-            <TouchableOpacity
-              style={styles.badgeButton}
-              onPress={() => {
-                navigation.navigate('MutualBadgeHolders', {
-                  badge_id: badge.id,
-                  badge_title: badge.name,
-                  badge_img: img,
-                });
-              }}>
-              <LinearGradient
-                colors={['#4E3629', '#EC2027']}
-                useAngle={true}
-                angle={154.72}
-                angleCenter={{x: 0.5, y: 0.5}}
-                style={styles.badgeBackground}>
-                <Image
-                  source={img}
-                  style={{
-                    width: SCREEN_WIDTH * 0.04,
-                    height: SCREEN_WIDTH * 0.04,
-                  }}
-                />
-              </LinearGradient>
-            </TouchableOpacity>
+            <BadgeIcon badge={badge} img={img} />
           </Animated.View>
         ))}
     </Animated.View>
@@ -136,18 +113,6 @@ const BadgesDropdown: React.FC<BadgesDropdownProps> = ({
 };
 
 const styles = StyleSheet.create({
-  badgeBackground: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    borderRadius: 50,
-    borderColor: 'transparent',
-    borderWidth: 1,
-    alignSelf: 'center',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
   badgesContainer: {
     flexDirection: 'column',
     justifyContent: 'space-between',
@@ -156,12 +121,9 @@ const styles = StyleSheet.create({
     left: '5%',
     paddingBottom: '2%',
   },
-  badgeButton: {
-    width: 30,
-    height: 30,
-    borderRadius: 15,
+  animatedBadgeView: {
+    position: 'absolute',
   },
-  animatedBadgeView: {position: 'absolute'},
   universityIconContainer: {
     width: normalize(31),
     height: normalize(38),
diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts
index 339c9ae0..14c2eb71 100644
--- a/src/components/suggestedPeople/index.ts
+++ b/src/components/suggestedPeople/index.ts
@@ -1,3 +1,4 @@
 export {default as MutualFriends} from './MutualFriends';
 export {default as BadgesDropdown} from './BadgesDropdown';
 export {default as SPTaggsBar} from './SPTaggsBar';
+export {default as BadgeIcon} from './BadgeIcon';