From 2a6035061a8a8a37dc74905180928aa75d92983f Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Wed, 7 Jul 2021 16:57:41 -0400
Subject: Add more styling to choosing category

---
 src/constants/constants.ts                     |  1 +
 src/screens/profile/ChoosingCategoryScreen.tsx | 80 ++++++++++++++++++--------
 2 files changed, 57 insertions(+), 24 deletions(-)

(limited to 'src')

diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index f4ffd750..13a73208 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -66,6 +66,7 @@ export const YOUTUBE_FONT_COLOR: string = '#FCA4A4';
 
 export const TAGG_PURPLE = '#8F01FF';
 export const TAGG_DARK_BLUE = '#4E699C';
+export const TAGG_DARK_PURPLEISH_BLUE = '#4755A1';
 export const TAGG_LIGHT_BLUE: string = '#698DD3';
 export const TAGG_LIGHT_BLUE_2: string = '#6EE7E7';
 export const TAGG_LIGHT_PURPLE = '#F4DDFF';
diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx
index a591cd69..daf7642d 100644
--- a/src/screens/profile/ChoosingCategoryScreen.tsx
+++ b/src/screens/profile/ChoosingCategoryScreen.tsx
@@ -2,19 +2,27 @@ import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {RouteProp, useNavigation} from '@react-navigation/native';
 import React, {FC} from 'react';
 import {
+  Image,
   ScrollView,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
 } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {useSelector} from 'react-redux';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
 import {SearchBackground} from '../../components';
+import {TAGGS_GRADIENT, TAGG_DARK_PURPLEISH_BLUE} from '../../constants';
 import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootReducer';
-import {normalize, SCREEN_HEIGHT, StatusBarHeight} from '../../utils';
+import {
+  getMomentCategoryIconInfo,
+  normalize,
+  SCREEN_HEIGHT,
+  StatusBarHeight,
+} from '../../utils';
 
 type ChoosingCategoryScreenRouteProps = RouteProp<
   MainStackParams,
@@ -38,28 +46,32 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
   const MomentItem: FC<{
     title: string;
     onPress: () => void;
-  }> = ({title, onPress}) => (
-    <TouchableOpacity onPress={onPress} style={styles.itemContainer}>
-      <View style={styles.row}>
-        <View
-          style={{
-            height: normalize(35),
-            width: normalize(35),
-            backgroundColor: 'red',
-          }}
-        />
-        {/* <Image style={styles.tagIcon} source={imageUri} /> */}
-        <Text style={styles.itemTitle}>{title}</Text>
-      </View>
-      <View style={styles.row}>
-        <FrontArrow
-          width={normalize(13)}
-          height={normalize(13)}
-          color={'white'}
-        />
-      </View>
-    </TouchableOpacity>
-  );
+  }> = ({title, onPress}) => {
+    const icon = getMomentCategoryIconInfo(title).icon;
+    return (
+      <TouchableOpacity onPress={onPress} style={styles.itemContainer}>
+        <View style={styles.row}>
+          <LinearGradient
+            style={styles.gradientIcon}
+            colors={[TAGGS_GRADIENT.start, TAGGS_GRADIENT.end]}
+            useAngle={true}
+            angle={-45}>
+            <View style={styles.iconBackground}>
+              <Image style={styles.icon} source={icon} />
+            </View>
+          </LinearGradient>
+          <Text style={styles.itemTitle}>{title}</Text>
+        </View>
+        <View style={styles.row}>
+          <FrontArrow
+            width={normalize(13)}
+            height={normalize(13)}
+            color={'white'}
+          />
+        </View>
+      </TouchableOpacity>
+    );
+  };
 
   return (
     <SearchBackground>
@@ -69,6 +81,7 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
           contentContainerStyle={{paddingBottom: tabBarHeight}}>
           {momentCategories.map((title) => (
             <MomentItem
+              key={title}
               title={title}
               onPress={() =>
                 navigation.navigate('CaptionScreen', {
@@ -92,7 +105,26 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom: normalize(20),
+    marginVertical: normalize(20),
+    borderRadius: 4,
+  },
+  gradientIcon: {
+    width: normalize(40),
+    height: normalize(40),
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+  },
+  iconBackground: {
+    height: '85%',
+    width: '85%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: TAGG_DARK_PURPLEISH_BLUE,
+  },
+  icon: {
+    height: normalize(25),
+    width: normalize(25),
   },
   itemTitle: {
     color: 'white',
-- 
cgit v1.2.3-70-g09d2