1 files changed, 36 insertions, 19 deletions
diff --git a/src/screens/badge/BadgeItem.tsx b/src/screens/badge/BadgeItem.tsx
index adf74026..3141e662 100644
--- a/src/screens/badge/BadgeItem.tsx
+++ b/src/screens/badge/BadgeItem.tsx
@@ -2,7 +2,11 @@ import React from 'react';
 import {View, Text, StyleSheet, Image, ImageSourcePropType} from 'react-native';
 import {SCREEN_WIDTH, normalize} from '../../utils';
 import LinearGradient from 'react-native-linear-gradient';
-import {BADGE_GRADIENT_FIRST, BADGE_GRADIENT_REST} from '../../constants';
+import {
+  BACKGROUND_GRADIENT_MAP,
+  BADGE_GRADIENT_FIRST,
+  BADGE_GRADIENT_REST,
+} from '../../constants';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 
 interface BadgeItemProps {
@@ -21,32 +25,45 @@ const BadgeItem: React.FC<BadgeItemProps> = ({
   onSelection,
 }) => {
   return (
-    <TouchableOpacity onPress={() => onSelection(title)}>
-      <LinearGradient
-        colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST}
-        useAngle={true}
-        angle={136.69}
-        style={styles.item}>
-        <View
-          style={
-            selected ? styles.selectedDetailContainer : styles.detailContainer
-          }>
-          <Image source={resourcePath} style={styles.imageStyles} />
-          <View style={styles.textContainer}>
-            <Text style={styles.title}>{title}</Text>
+    <LinearGradient
+      colors={
+        selected ? BACKGROUND_GRADIENT_MAP[0] : ['transparent', 'transparent']
+      }
+      useAngle={true}
+      angle={136.69}
+      style={styles.border}>
+      <TouchableOpacity
+        onPress={() => onSelection(title)}
+        style={{alignSelf: 'center', marginTop: 3}}>
+        <LinearGradient
+          colors={index === 0 ? BADGE_GRADIENT_FIRST : BADGE_GRADIENT_REST}
+          // BACKGROUND_GRADIENT_MAP
+          useAngle={true}
+          angle={136.69}
+          style={styles.item}>
+          <View style={styles.detailContainer}>
+            <Image source={resourcePath} style={styles.imageStyles} />
+            <View style={styles.textContainer}>
+              <Text style={styles.title}>{title}</Text>
+            </View>
           </View>
-        </View>
-      </LinearGradient>
-    </TouchableOpacity>
+        </LinearGradient>
+      </TouchableOpacity>
+    </LinearGradient>
   );
 };
 
 const styles = StyleSheet.create({
+  border: {
+    width: SCREEN_WIDTH / 3 - 20 + 6,
+    height: 146,
+    marginLeft: 10,
+    marginBottom: 12,
+    borderRadius: 8,
+  },
   item: {
     width: SCREEN_WIDTH / 3 - 20,
     height: 140,
-    marginLeft: 15,
-    marginBottom: 12,
     borderRadius: 8,
   },
   detailContainer: {