Merge pull request #233 from IvanIFChen/hotfix-header-refactor

[FIX] [TMA-590] Header Refactor

5 files changed, 108 insertions, 124 deletions

diff --git a/src/assets/icons/back-arrow.svg b/src/assets/icons/back-arrow.svg
index aa203dea..16beae5a 100644
--- a/src/assets/icons/back-arrow.svg
+++ b/src/assets/icons/back-arrow.svg
@@ -1 +1 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 385.86 696.76"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:77.17px;}</style></defs><polyline class="cls-1" points="347.28 38.58 38.58 351.69 347.28 658.17"/></svg>
\ No newline at end of file
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 385.86 696.76"><defs><style>.cls-1{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:77.17px;}</style></defs><polyline class="cls-1" points="347.28 38.58 38.58 351.69 347.28 658.17" stroke="currentColor"/></svg>
\ No newline at end of file
diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx
index c7f56e2d..243a551d 100644
--- a/src/components/common/FriendsButton.tsx
+++ b/src/components/common/FriendsButton.tsx
@@ -78,7 +78,6 @@ const styles = StyleSheet.create({
     borderRadius: 3,
     marginRight: '2%',
     marginLeft: '1%',
-    padding: 0,
     backgroundColor: 'transparent',
   },
   requestedButtonTitle: {
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 37f9bef8..99446432 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -2,6 +2,9 @@ import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationOptions} from '@react-navigation/stack';
 import React, {useState} from 'react';
+import {StyleSheet, Text} from 'react-native';
+import {normalize} from 'react-native-elements';
+import BackIcon from '../../assets/icons/back-arrow.svg';
 import {
   CaptionScreen,
   CategorySelection,
@@ -67,21 +70,6 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
     }
   })();
 
-  const modalStyle: StackNavigationOptions = {
-    cardStyle: {backgroundColor: 'rgba(80,80,80,0.9)'},
-    gestureDirection: 'vertical',
-    cardOverlayEnabled: true,
-    cardStyleInterpolator: ({current: {progress}}) => ({
-      cardStyle: {
-        opacity: progress.interpolate({
-          inputRange: [0, 0.5, 0.9, 1],
-          outputRange: [0, 0.25, 0.7, 1],
-        }),
-      },
-    }),
-  };
-
-  console.log('screenType: ', screenType);
   return (
     <MainStack.Navigator
       screenOptions={{
@@ -93,16 +81,9 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
       <MainStack.Screen
         name="Profile"
         component={ProfileScreen}
+        initialParams={{screenType}}
         options={{
-          headerShown: true,
-          headerTransparent: true,
-          headerBackTitleVisible: false,
-          headerTitle: '',
-          headerTintColor: 'white',
-          headerStyle: {height: AvatarHeaderHeight},
-        }}
-        initialParams={{
-          screenType,
+          ...headerBarOptions('white', ''),
         }}
       />
       {isSearchTab &&
@@ -136,94 +117,133 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
       <MainStack.Screen
         name="CaptionScreen"
         component={CaptionScreen}
-        options={{...modalStyle, gestureEnabled: false}}
+        options={{
+          ...modalStyle,
+          gestureEnabled: false,
+        }}
       />
       <MainStack.Screen
         name="SocialMediaTaggs"
         component={SocialMediaTaggs}
+        initialParams={{screenType}}
         options={{
-          headerShown: true,
-          headerTransparent: true,
-          headerBackTitleVisible: false,
-          headerTitle: '',
-          headerTintColor: 'white',
+          ...headerBarOptions('white', ''),
           headerStyle: {height: AvatarHeaderHeight},
         }}
-        initialParams={{screenType}}
       />
       <MainStack.Screen
         name="CategorySelection"
         component={CategorySelection}
         options={{
-          headerShown: true,
-          headerTransparent: true,
-          headerBackTitleVisible: false,
-          headerTintColor: 'white',
-          headerTitle: '',
+          ...headerBarOptions('white', ''),
         }}
       />
       <MainStack.Screen
         name="CreateCustomCategory"
         component={CreateCustomCategory}
         options={{
-          headerShown: true,
-          headerTransparent: true,
-          headerBackTitleVisible: false,
-          headerTintColor: 'white',
-          headerTitle: '',
+          ...headerBarOptions('white', ''),
         }}
       />
       <MainStack.Screen
         name="IndividualMoment"
         component={IndividualMoment}
+        initialParams={{screenType}}
         options={{
+          ...modalStyle,
           gestureEnabled: false,
-          cardStyle: {
-            backgroundColor: 'rgba(0, 0, 0, 0.6)',
-          },
-          cardOverlayEnabled: true,
-          cardStyleInterpolator: ({current: {progress}}) => ({
-            cardStyle: {
-              opacity: progress.interpolate({
-                inputRange: [0, 0.5, 0.9, 1],
-                outputRange: [0, 0.25, 0.7, 1],
-              }),
-            },
-          }),
         }}
-        initialParams={{screenType}}
       />
       <MainStack.Screen
         name="MomentCommentsScreen"
         component={MomentCommentsScreen}
         initialParams={{screenType}}
+        options={{
+          ...headerBarOptions('black', 'Comments'),
+        }}
       />
       <MainStack.Screen
         name="MomentUploadPrompt"
         component={MomentUploadPromptScreen}
+        initialParams={{screenType}}
         options={{
           ...modalStyle,
         }}
-        initialParams={{screenType}}
       />
       <MainStack.Screen
         name="FriendsListScreen"
         component={FriendsListScreen}
         initialParams={{screenType}}
+        options={{
+          ...headerBarOptions('black', 'Friends'),
+        }}
       />
       <MainStack.Screen
         name="EditProfile"
         component={EditProfile}
         options={{
-          headerShown: true,
-          headerTitle: 'Edit Profile',
-          headerTransparent: true,
-          headerBackTitleVisible: false,
-          headerTintColor: 'white',
+          ...headerBarOptions('white', 'Edit Profile'),
         }}
       />
     </MainStack.Navigator>
   );
 };
 
+export const headerBarOptions: (
+  color: 'white' | 'black',
+  title: string,
+) => StackNavigationOptions = (color, title) => ({
+  headerShown: true,
+  headerTransparent: true,
+  headerBackTitleVisible: false,
+  headerBackImage: () => (
+    <BackIcon
+      height={normalize(18)}
+      width={normalize(18)}
+      color={color}
+      style={styles.backButton}
+    />
+  ),
+  headerTitle: () => (
+    <Text style={[styles.headerTitle, {color: color}]}>{title}</Text>
+  ),
+});
+
+const modalStyle: StackNavigationOptions = {
+  cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'},
+  gestureDirection: 'vertical',
+  cardOverlayEnabled: true,
+  cardStyleInterpolator: ({current: {progress}}) => ({
+    cardStyle: {
+      opacity: progress.interpolate({
+        inputRange: [0, 0.5, 0.9, 1],
+        outputRange: [0, 0.25, 0.7, 1],
+      }),
+    },
+  }),
+};
+
+const styles = StyleSheet.create({
+  backButton: {
+    marginLeft: 30,
+  },
+  headerTitle: {
+    fontSize: normalize(16),
+    letterSpacing: normalize(1.3),
+    fontWeight: '700',
+  },
+  whiteHeaderTitle: {
+    fontSize: normalize(16),
+    letterSpacing: normalize(1.3),
+    fontWeight: '700',
+    color: 'white',
+  },
+  blackHeaderTitle: {
+    fontSize: normalize(16),
+    letterSpacing: normalize(1.3),
+    fontWeight: '700',
+    color: 'black',
+  },
+});
+
 export default MainStackScreen;
diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx
index b2123f44..1cfef058 100644
--- a/src/screens/profile/FriendsListScreen.tsx
+++ b/src/screens/profile/FriendsListScreen.tsx
@@ -1,21 +1,14 @@
+import {RouteProp} from '@react-navigation/native';
 import React from 'react';
-import {RouteProp, useNavigation} from '@react-navigation/native';
-import {TabsGradient, Friends} from '../../components';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {ProfileStackParams} from '../../routes';
+import {SafeAreaView, StyleSheet, View} from 'react-native';
 import {useSelector} from 'react-redux';
+import {Friends, TabsGradient} from '../../components';
+import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootReducer';
-import BackIcon from '../../assets/icons/back-arrow.svg';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 type FriendsListScreenRouteProp = RouteProp<
-  ProfileStackParams,
+  MainStackParams,
   'FriendsListScreen'
 >;
 interface FriendsListScreenProps {
@@ -24,7 +17,6 @@ interface FriendsListScreenProps {
 
 const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
   const {userXId, screenType} = route.params;
-  const navigation = useNavigation();
 
   const {friends} = userXId
     ? useSelector((state: RootState) => state.userX[screenType][userXId])
@@ -33,17 +25,9 @@ const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
   return (
     <>
       <SafeAreaView>
-        <View style={styles.header}>
-          <TouchableOpacity
-            style={styles.headerButton}
-            onPress={() => {
-              navigation.pop();
-            }}>
-            <BackIcon height={'100%'} width={'100%'} color={'white'} />
-          </TouchableOpacity>
-          <Text style={styles.headerText}>Friends</Text>
+        <View style={styles.body}>
+          <Friends result={friends} screenType={screenType} userId={userXId} />
         </View>
-        <Friends result={friends} screenType={screenType} userId={userXId} />
       </SafeAreaView>
       <TabsGradient />
     </>
@@ -55,31 +39,11 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     height: '100%',
   },
-  header: {
-    flexDirection: 'column',
-    justifyContent: 'center',
-    height: SCREEN_HEIGHT * 0.05,
-    padding: '3%',
-    paddingBottom: 0,
-    marginTop: '1%',
-  },
-  headerText: {
-    position: 'absolute',
-    alignSelf: 'center',
-    fontSize: normalize(18),
-    fontWeight: '700',
-    lineHeight: normalize(21.48),
-    letterSpacing: normalize(1.3),
-  },
-  headerButton: {
-    width: '5%',
-    aspectRatio: 1,
-    padding: 0,
-    marginLeft: '5%',
-    alignSelf: 'flex-start',
-    marginBottom: '1%',
+  backButton: {
+    marginLeft: 10,
   },
   body: {
+    marginTop: HeaderHeight,
     width: SCREEN_WIDTH,
     height: SCREEN_HEIGHT * 0.8,
   },
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index ec193db5..b0208f6f 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -1,15 +1,19 @@
 import {RouteProp, useNavigation} from '@react-navigation/native';
-import React, {useState} from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import React, {useEffect, useState} from 'react';
+import {StyleSheet, View} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
-import BackIcon from '../../assets/icons/back-arrow.svg';
 import {TabsGradient} from '../../components';
 import {AddComment} from '../../components/';
 import CommentsContainer from '../../components/comments/CommentsContainer';
 import {ADD_COMMENT_TEXT} from '../../constants/strings';
-import {MainStackParams} from '../../routes/main';
+import {headerBarOptions, MainStackParams} from '../../routes/main';
 import {CommentType} from '../../types';
-import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+  HeaderHeight,
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
 
 /**
  * Comments Screen for an image uploaded
@@ -39,19 +43,15 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
     CommentType | undefined
   >(undefined);
 
+  useEffect(() => {
+    navigation.setOptions({
+      ...headerBarOptions('black', `${commentsLength} Comments`),
+    });
+  }, [commentsLength, navigation]);
+
   return (
     <View style={styles.background}>
       <SafeAreaView>
-        <View style={styles.header}>
-          <TouchableOpacity
-            style={styles.headerButton}
-            onPress={() => {
-              navigation.pop();
-            }}>
-            <BackIcon height={'100%'} width={'100%'} color={'white'} />
-          </TouchableOpacity>
-          <Text style={styles.headerText}>{commentsLength + ' Comments'}</Text>
-        </View>
         <View style={styles.body}>
           <CommentsContainer
             objectId={moment_id}
@@ -110,6 +110,7 @@ const styles = StyleSheet.create({
     fontWeight: '400',
   },
   body: {
+    marginTop: HeaderHeight,
     width: SCREEN_WIDTH * 0.9,
     height: SCREEN_HEIGHT * 0.8,
     paddingTop: '3%',