header styling

calblueprint · Dec 7, 2024 · d00313e · d00313e
1 parent 6ad71c1
commit d00313e
Show file tree

Hide file tree

Showing 8 changed files with 200 additions and 47 deletions.
diff --git a/src/assets/images/back-arrow.svg b/src/assets/images/back-arrow.svg
diff --git a/src/navigation/BottomTabNavigator.tsx b/src/navigation/BottomTabNavigator.tsx
@@ -1,22 +1,21 @@
 import * as React from 'react';
+import { View } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import GreyHealingResourcesIcon from 'src/assets/images/healing-resources-grey.svg';
 import OrangeHealingResourcesIcon from 'src/assets/images/healing-resources-orange.svg';
 import GreyHelpResourcesIcon from 'src/assets/images/help-resources-grey.svg';
 import OrangeHelpResourcesIcon from 'src/assets/images/help-resources-orange.svg';
 import GreyHomeIcon from 'src/assets/images/home-grey.svg';
 import OrangeHomeIcon from 'src/assets/images/home-orange.svg';
+import Logo from 'src/assets/images/logo.svg';
 import GreyPREAIcon from 'src/assets/images/prea-grey.svg';
 import OrangePREAIcon from 'src/assets/images/prea-orange.svg';
 import HomeScreen from 'src/screens/Home/';
 import { colors } from 'src/styles/colors';
-import Logo from 'src/assets/images/logo.svg';
 import HealingResourcesNavigator from './stacks/HealingResourcesNavigator';
 import LegalRightsNavigator from './stacks/LegalRightsNavigator';
 import SeekHelpNavigator from './stacks/SeekHelpNavigator';
 import { BottomTabParams } from './types';
-import {View} from 'react-native';
-
 
 const initialRouteName = 'Healing';
 
@@ -28,25 +27,7 @@ export default function NavigationBar() {
       initialRouteName={initialRouteName}
       screenOptions={{
         tabBarActiveTintColor: colors.orange,
-        tabBarInactiveTintColor: colors.grey,
-        headerShown: true,
-        headerStyle: {
-          backgroundColor: "#F7F9FC",
-        },
-        headerTitleAlign: 'left', 
-        headerTitleStyle: {
-          fontSize: 20,
-
-          fontWeight: 'bold',
-          color: colors.orange,
-          marginLeft: '2%', 
-        },
-        headerRight: () => (
-          <View style={{ paddingRight:  '2%'}}>
-          <Logo/>
-          </View>
-        ),
-
+        headerShown: false,
       }}
     >
       <Tab.Screen
@@ -56,16 +37,28 @@ export default function NavigationBar() {
           headerTitle: '',
           tabBarIcon: ({ focused }) =>
             focused ? <OrangeHomeIcon /> : <GreyHomeIcon />,
+          headerStyle: {
+            backgroundColor: '#F7F9FC',
+          },
+          headerShown: true,
+          headerTitleAlign: 'left',
+          headerTitleStyle: {
+            fontSize: 20,
+            fontWeight: 'bold',
+            color: colors.orange,
+            marginLeft: '2%',
+          },
+          headerRight: () => (
+            <View style={{ paddingRight: '2%' }}>
+              <Logo />
+            </View>
+          ),
         }}
-
       />
       <Tab.Screen
         name="Healing"
         component={HealingResourcesNavigator}
-
         options={{
-          headerTitle: 'Healing Resources',
-
           tabBarIcon: ({ focused }) =>
             focused ? (
               <OrangeHealingResourcesIcon />
@@ -78,7 +71,6 @@ export default function NavigationBar() {
         name="Legal"
         component={LegalRightsNavigator}
         options={{
-          headerTitle: 'Legal Rights',
           tabBarLabel: 'Legal Rights',
           tabBarIcon: ({ focused }) =>
             focused ? <OrangePREAIcon /> : <GreyPREAIcon />,

diff --git a/src/navigation/MainNavigator.tsx b/src/navigation/MainNavigator.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import BottomTabNavigator from './BottomTabNavigator';
 
+const Stack = createNativeStackNavigator();
+
 export default function AppNavigator() {
   return (
     <NavigationContainer>

diff --git a/src/navigation/stacks/HealingResourcesNavigator.tsx b/src/navigation/stacks/HealingResourcesNavigator.tsx
@@ -1,9 +1,15 @@
 import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import BackArrow from 'src/assets/images/back-arrow.svg';
+import Logo from 'src/assets/images/logo.svg';
+import { colors } from 'src/styles/colors';
 import HealingResources from '@/screens/HealingResources';
 import HealingCatalogue from '@/screens/HealingResources/HealingCatalogue';
 import HopeHealingGuide from '@/screens/HealingResources/HopeHealingGuide/';
 import { HealingStackParams } from '../types';
+import styles from './styles';
 
 const HealingStack = createNativeStackNavigator<HealingStackParams>();
 
@@ -13,18 +19,73 @@ export default function HealingResourcesNavigator() {
       <HealingStack.Screen
         name="HealingResources"
         component={HealingResources}
-
+        options={{
+          headerShown: true,
+          headerTitleAlign: 'left',
+          headerTitle: '',
+          headerStyle: {
+            backgroundColor: colors.background,
+          },
+          headerLeft: () => (
+            <Text
+              style={{
+                fontSize: 20,
+                fontWeight: 'bold',
+                color: colors.orange,
+                marginLeft: 10,
+              }}
+            >
+              Healing Resources
+            </Text>
+          ),
+          headerRight: () => (
+            <View style={{ paddingRight: '2%' }}>
+              <Logo />
+            </View>
+          ),
+        }}
       />
       <HealingStack.Screen
         name="HealingCatalogue"
         component={HealingCatalogue}
-
+        options={{
+          headerBackTitle: 'Healing Resources',
+          headerTitle: '',
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <View style={{ paddingRight: '2%' }}>
+              <Logo />
+            </View>
+          ),
+        }}
       />
       <HealingStack.Screen
         name="HopeForHealingGuide"
         component={HopeHealingGuide}
-
+        options={{
+          headerBackTitle: 'Healing Resources',
+          headerTitle: '',
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <View style={{ paddingRight: '2%' }}>
+              <Logo />
+            </View>
+          ),
+        }}
       />
     </HealingStack.Navigator>
   );
+  function BackButton() {
+    const navigation = useNavigation();
+
+    return (
+      <TouchableOpacity
+        onPress={() => navigation.goBack()}
+        style={styles.backContainer}
+      >
+        <BackArrow />
+        <Text style={styles.backText}>Healing Resources</Text>
+      </TouchableOpacity>
+    );
+  }
 }
diff --git a/src/navigation/stacks/LegalRightsNavigator.tsx b/src/navigation/stacks/LegalRightsNavigator.tsx
@@ -1,25 +1,74 @@
 import React from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import BackArrow from 'src/assets/images/back-arrow.svg';
+import Logo from 'src/assets/images/logo.svg';
+import { colors } from 'src/styles/colors';
 import LegalRights from '@/screens/LegalRights';
 import VideoPage from '@/screens/LegalRights/VideoPage';
 import { LegalStackParams } from '../types';
+import styles from './styles';
 
 const LegalStack = createNativeStackNavigator<LegalStackParams>();
 
 export default function LegalRightsNavigator() {
   return (
-    <LegalStack.Navigator>
-      <LegalStack.Screen 
-      name="LegalRights" 
-      component={LegalRights}
-
-      />
-
-      <LegalStack.Screen 
-      name="VideoPage" 
-      component={VideoPage} 
-
+    <LegalStack.Navigator
+      screenOptions={{
+        headerShown: true,
+        headerTitleAlign: 'left',
+        headerTitle: '',
+        headerStyle: {
+          backgroundColor: colors.background,
+        },
+        headerLeft: () => (
+          <Text
+            style={{
+              fontSize: 20,
+              fontWeight: 'bold',
+              color: colors.orange,
+              marginLeft: 10,
+            }}
+          >
+            Legal Rights
+          </Text>
+        ),
+        headerRight: () => (
+          <View style={{ paddingRight: '2%' }}>
+            <Logo />
+          </View>
+        ),
+      }}
+    >
+      <LegalStack.Screen name="LegalRights" component={LegalRights} />
+      <LegalStack.Screen
+        name="VideoPage"
+        component={VideoPage}
+        options={{
+          headerBackTitle: 'Legal Rights',
+          headerTitle: '',
+          headerLeft: () => <BackButton />,
+          headerRight: () => (
+            <View style={{ paddingRight: '2%' }}>
+              <Logo />
+            </View>
+          ),
+        }}
       />
     </LegalStack.Navigator>
   );
+  function BackButton() {
+    const navigation = useNavigation();
+
+    return (
+      <TouchableOpacity
+        onPress={() => navigation.goBack()}
+        style={styles.backContainer}
+      >
+        <BackArrow />
+        <Text style={styles.backText}>Legal Rights</Text>
+      </TouchableOpacity>
+    );
+  }
 }
diff --git a/src/navigation/stacks/SeekHelpNavigator.tsx b/src/navigation/stacks/SeekHelpNavigator.tsx
@@ -1,18 +1,45 @@
 import React from 'react';
+import { Text, View } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import Logo from 'src/assets/images/logo.svg';
+import { colors } from 'src/styles/colors';
 import SeekHelp from '@/screens/SeekHelp';
 import { SeekHelpStackParams } from '../types';
 
 const SeekHelpStack = createNativeStackNavigator<SeekHelpStackParams>();
 
 export default function SeekHelpNavigator() {
   return (
-    <SeekHelpStack.Navigator>
-      <SeekHelpStack.Screen 
-      name="SeekHelp" 
-      component={SeekHelp} 
-
-      />
+    <SeekHelpStack.Navigator
+      screenOptions={{
+        headerShown: true,
+        headerTitleAlign: 'left',
+        headerTitle: '',
+
+        headerLeft: () => (
+          <Text
+            style={{
+              fontSize: 20,
+              fontWeight: 'bold',
+              color: colors.orange,
+              marginLeft: 10,
+            }}
+          >
+            Seek Help
+          </Text>
+        ),
+        headerStyle: {
+          backgroundColor: colors.background,
+        },
+
+        headerRight: () => (
+          <View style={{ paddingRight: '2%' }}>
+            <Logo />
+          </View>
+        ),
+      }}
+    >
+      <SeekHelpStack.Screen name="SeekHelp" component={SeekHelp} />
     </SeekHelpStack.Navigator>
   );
 }
diff --git a/src/navigation/stacks/styles.ts b/src/navigation/stacks/styles.ts
@@ -0,0 +1,17 @@
+import { StyleSheet } from 'react-native';
+import { colors } from 'src/styles/colors';
+
+export default StyleSheet.create({
+  backContainer: {
+    position: 'absolute',
+    left: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 0,
+  },
+
+  backText: {
+    fontSize: 17,
+    color: colors.grey,
+  },
+});
diff --git a/src/styles/colors.ts b/src/styles/colors.ts
@@ -1,4 +1,5 @@
 export const colors = {
   orange: '#E37F1D',
   grey: '#757575',
+  background: '#F7F9FC',
 };