From 60d8797273c474474f0be06906ad495ac424f37d Mon Sep 17 00:00:00 2001
From: LBlend <leanderfurumo@protonmail.com>
Date: Wed, 3 Apr 2024 03:22:15 +0200
Subject: [PATCH] initial nav titlebar restyling

---
 src/Navigation.js | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/Navigation.js b/src/Navigation.js
index 870077f..5307be5 100644
--- a/src/Navigation.js
+++ b/src/Navigation.js
@@ -12,9 +12,22 @@ import Login from './modules/login/Login';
 import About from './modules/about/About';
 import UserRegister from './modules/register/UserRegister';
 
+import theme from './theme';
+
+// This looks ugly, even though it's a recommended style from the branding profile.
+// TODO: Change this
+// also TODO: make sure battery indicator etc. is visible
+defaultNaviationStyle = {
+  headerTintColor: theme.colors.neufOrange,
+  headerTitleAlign: 'center',
+  headerStyle: {
+    backgroundColor: theme.colors.neufPurple,
+  },
+};
+
 const EventStack = createNativeStackNavigator();
 const EventStackScreen = () => (
-  <EventStack.Navigator initialRouteName="EventList">
+  <EventStack.Navigator initialRouteName="EventList" screenOptions={{ ...defaultNaviationStyle }}>
     <EventStack.Screen
       name="EventList"
       component={EventList}
@@ -32,7 +45,7 @@ const EventStackScreen = () => (
 
 const UserStack = createNativeStackNavigator();
 const UserStackScreen = () => (
-  <UserStack.Navigator initialRouteName="Membership">
+  <UserStack.Navigator initialRouteName="Membership" screenOptions={{ ...defaultNaviationStyle }}>
     <UserStack.Screen name="Membership" component={Membership} options={{ title: 'Medlemskap' }} />
     <UserStack.Screen name="Login" component={Login} options={{ title: 'Logg inn' }} />
     <UserStack.Screen
@@ -45,6 +58,13 @@ const UserStackScreen = () => (
   </UserStack.Navigator>
 );
 
+const AboutStack = createNativeStackNavigator();
+const AboutStackScreen = () => (
+  <AboutStack.Navigator initialRouteName="About" screenOptions={{ ...defaultNaviationStyle }}>
+    <AboutStack.Screen name="About" component={About} options={{ title: 'Om oss' }} />
+  </AboutStack.Navigator>
+);
+
 const HomeTabs = createBottomTabNavigator();
 const EventIcon = ({ color, size }) => <Icon name="event" size={size} color={color} style={{ marginTop: 5 }} />;
 const UserIcon = ({ color, size }) => <Icon name="user" size={size} color={color} style={{ marginTop: 5 }} />;
@@ -72,10 +92,11 @@ const Navigation = () => (
       />
       <HomeTabs.Screen
         name="About"
-        component={About}
+        component={AboutStackScreen}
         options={{
-          title: 'Om oss',
-          tabBarIcon: AboutIcon,
+          headerShown: false,
+          tabBarLabel: 'Om oss',
+          tabBarIcon: UserIcon,
         }}
       />
     </HomeTabs.Navigator>