Cleanup code

2 files changed, 35 insertions, 35 deletions

diff --git a/src/assets/images/plus-icon-thin.png b/src/assets/images/plus-icon-thin.png
new file mode 100644
index 00000000..6f0a305e
--- /dev/null
+++ b/src/assets/images/plus-icon-thin.png
diff --git a/src/components/profile/ProfileBadges.tsx b/src/components/profile/ProfileBadges.tsx
index 978211da..5ce776c2 100644
--- a/src/components/profile/ProfileBadges.tsx
+++ b/src/components/profile/ProfileBadges.tsx
@@ -1,10 +1,9 @@
 import {useNavigation} from '@react-navigation/core';
-import React, {useEffect, useState} from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import React, {FC, useEffect, useState} from 'react';
+import {Image, StyleSheet, Text, View} from 'react-native';
 import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
 import {useSelector} from 'react-redux';
 import {BadgeIcon} from '..';
-import PlusIcon from '../../assets/icons/plus_icon-01.svg';
 import {BADGE_LIMIT} from '../../constants';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType, UniversityBadgeDisplayType} from '../../types';
@@ -31,6 +30,26 @@ const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
     setDisplayBadges(badgesToDisplayBadges(badges));
   }, [badges]);
 
+  const PlusIcon: FC = () => (
+    <TouchableOpacity
+      onPress={() => navigation.navigate('BadgeSelection', {editing: true})}>
+      <Image
+        source={require('../../assets/images/plus-icon-thin.png')}
+        style={styles.plus}
+      />
+    </TouchableOpacity>
+  );
+
+  const CloseIcon: FC = () => (
+    <TouchableOpacity onPress={() => setIsEditBadgeModalVisible(true)}>
+      {/* TODO: needs to be grey :shrug: */}
+      <Image
+        source={require('../../assets/images/plus-icon-thin.png')}
+        style={styles.close}
+      />
+    </TouchableOpacity>
+  );
+
   return (
     <>
       {/* Tutorial text */}
@@ -48,17 +67,7 @@ const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
           contentContainerStyle={styles.badgeContainer}
           scrollEnabled={false}
           horizontal>
-          <TouchableOpacity
-            onPress={() =>
-              navigation.navigate('BadgeSelection', {editing: true})
-            }>
-            <PlusIcon
-              width={normalize(31)}
-              height={normalize(31)}
-              color={'black'}
-              style={{transform: [{scale: 1.2}]}}
-            />
-          </TouchableOpacity>
+          <PlusIcon />
           {Array(BADGE_LIMIT)
             .fill(0)
             .map(() => (
@@ -77,19 +86,7 @@ const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
             <BadgeIcon key={displayBadge.id} badge={displayBadge} />
           ))}
           {/* Plus icon */}
-          {displayBadges.length < BADGE_LIMIT && isOwnProfile && (
-            <TouchableOpacity
-              onPress={() =>
-                navigation.navigate('BadgeSelection', {editing: true})
-              }>
-              <PlusIcon
-                width={normalize(31)}
-                height={normalize(31)}
-                color={'black'}
-                style={{transform: [{scale: 1.2}]}}
-              />
-            </TouchableOpacity>
-          )}
+          {displayBadges.length < BADGE_LIMIT && isOwnProfile && <PlusIcon />}
           {/* Empty placeholders for space-between styling */}
           {Array(BADGE_LIMIT + 1)
             .fill(0)
@@ -99,14 +96,7 @@ const ProfileBadges: React.FC<ProfileBadgesProps> = ({userXId, screenType}) => {
             ))}
           {/* X button */}
           {displayBadges.length === BADGE_LIMIT && isOwnProfile && (
-            <TouchableOpacity onPress={() => setIsEditBadgeModalVisible(true)}>
-              <PlusIcon
-                width={normalize(31)}
-                height={normalize(31)}
-                color={'grey'}
-                style={{transform: [{scale: 1.2}, {rotate: '45deg'}]}}
-              />
-            </TouchableOpacity>
+            <CloseIcon />
           )}
         </ScrollView>
       )}
@@ -148,6 +138,16 @@ const styles = StyleSheet.create({
   grey: {
     backgroundColor: '#c4c4c4',
   },
+  plus: {
+    width: normalize(31),
+    height: normalize(31),
+  },
+  close: {
+    width: normalize(31),
+    height: normalize(31),
+    color: 'grey',
+    transform: [{rotate: '45deg'}],
+  },
 });
 
 export default ProfileBadges;