From bcd54389acb9db9b3948a9f1f105b7cffdbe2acf Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Wed, 2 Jun 2021 12:55:43 -0400
Subject: Cleanup code

---
 src/assets/images/plus-icon-thin.png     | Bin 0 -> 2169 bytes
 src/components/profile/ProfileBadges.tsx |  70 +++++++++++++++----------------
 2 files changed, 35 insertions(+), 35 deletions(-)
 create mode 100644 src/assets/images/plus-icon-thin.png

(limited to 'src')

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
Binary files /dev/null and b/src/assets/images/plus-icon-thin.png differ
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;
-- 
cgit v1.2.3-70-g09d2