refactored header styles

# Conflicts:
#	src/components/common/FriendsButton.tsx
#	src/screens/profile/FriendsListScreen.tsx
#	src/screens/profile/MomentCommentsScreen.tsx

1 files changed, 54 insertions, 5 deletions

diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index c0cef3ea..0141a418 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -20,6 +20,10 @@ import {
 import {ScreenType} from '../../types';
 import {AvatarHeaderHeight, SCREEN_WIDTH} from '../../utils';
 import {MainStack, MainStackParams} from './MainStackNavigator';
+import BackIcon from '../../assets/icons/back-arrow.svg';
+import {StyleSheet, Text} from 'react-native';
+import {normalize} from 'react-native-elements';
+import {StackHeaderOptions} from '@react-navigation/stack/lib/typescript/src/types';
 
 /**
  * Profile : To display the logged in user's profile when the userXId passed in to it is (undefined | null | empty string) else displays profile of the user being visited.
@@ -185,6 +189,9 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         name="MomentCommentsScreen"
         component={MomentCommentsScreen}
         initialParams={{screenType}}
+        options={{
+          ...headerBarOptions('black', 'Comments'),
+        }}
       />
       <MainStack.Screen
         name="MomentUploadPrompt"
@@ -198,20 +205,62 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         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 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;