added create button

1 files changed, 16 insertions, 45 deletions

diff --git a/src/screens/profile/CategorySelection.tsx b/src/screens/profile/CategorySelection.tsx
index c3e45e98..c02eef0d 100644
--- a/src/screens/profile/CategorySelection.tsx
+++ b/src/screens/profile/CategorySelection.tsx
@@ -3,7 +3,6 @@ import {StackNavigationProp} from '@react-navigation/stack';
 import React, {useEffect, useState} from 'react';
 import {
   Alert,
-  Platform,
   StatusBar,
   StyleSheet,
   Text,
@@ -14,13 +13,13 @@ import {ScrollView} from 'react-native-gesture-handler';
 import {useDispatch, useSelector} from 'react-redux';
 import PlusIcon from '../../assets/icons/plus_icon-01.svg';
 import {Background, MomentCategory} from '../../components';
-import {MOMENT_CATEGORIES} from '../../constants';
+import {MOMENT_CATEGORIES, TAGG_LIGHT_BLUE_2} from '../../constants';
 import {ERROR_SOMETHING_WENT_WRONG} from '../../constants/strings';
 import {MainStackParams} from '../../routes';
 import {updateMomentCategories} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {BackgroundGradientType} from '../../types';
-import {SCREEN_WIDTH} from '../../utils';
+import {normalize, SCREEN_WIDTH} from '../../utils';
 
 type CategorySelectionRouteProps = RouteProp<
   MainStackParams,
@@ -41,6 +40,7 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
   route,
   navigation,
 }) => {
+  const dispatch = useDispatch();
   const {newCustomCategory} = route.params;
   const {momentCategories = []} = useSelector(
     (state: RootState) => state.momentCategories,
@@ -64,7 +64,13 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
     (mc) => !MOMENT_CATEGORIES.includes(mc),
   );
 
-  const dispatch = useDispatch();
+  navigation.setOptions({
+    headerRight: () => (
+      <TouchableOpacity onPress={handleButtonPress}>
+        <Text style={styles.createLabel}>Create</Text>
+      </TouchableOpacity>
+    ),
+  });
 
   useEffect(() => {
     if (newCustomCategory) {
@@ -204,11 +210,6 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
               />
             ))}
           </View>
-          <TouchableOpacity
-            onPress={handleButtonPress}
-            style={styles.finalAction}>
-            <Text style={styles.finalActionLabel}>Create</Text>
-          </TouchableOpacity>
         </View>
       </Background>
     </ScrollView>
@@ -222,16 +223,6 @@ const styles = StyleSheet.create({
     justifyContent: 'space-around',
     marginBottom: '10%',
   },
-  wizard: {
-    ...Platform.select({
-      ios: {
-        top: 50,
-      },
-      android: {
-        bottom: 40,
-      },
-    }),
-  },
   linkerContainer: {
     flex: 1,
     flexDirection: 'row',
@@ -240,13 +231,6 @@ const styles = StyleSheet.create({
     alignContent: 'center',
     marginBottom: '10%',
   },
-  header: {
-    color: '#fff',
-    fontSize: 22,
-    fontWeight: '600',
-    textAlign: 'center',
-    marginBottom: '4%',
-  },
   subtext: {
     color: '#fff',
     fontSize: 20,
@@ -256,22 +240,6 @@ const styles = StyleSheet.create({
     marginHorizontal: '10%',
     marginTop: '15%',
   },
-  finalAction: {
-    backgroundColor: 'white',
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: 150,
-    height: 40,
-    borderRadius: 5,
-    borderWidth: 1,
-    borderColor: 'white',
-    marginBottom: '25%',
-  },
-  finalActionLabel: {
-    fontSize: 16,
-    fontWeight: '500',
-    color: 'black',
-  },
   createCategory: {
     backgroundColor: '#53329B',
     width: SCREEN_WIDTH * 0.9,
@@ -288,15 +256,18 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: '500',
   },
-  plusIcon: {
-    color: 'white',
-  },
   divider: {
     borderColor: 'white',
     borderBottomWidth: 1,
     width: SCREEN_WIDTH * 0.9,
     marginVertical: '2%',
   },
+  createLabel: {
+    color: TAGG_LIGHT_BLUE_2,
+    marginRight: 20,
+    fontSize: normalize(15),
+    fontWeight: '800',
+  },
 });
 
 export default CategorySelection;