From 2f27eabe700fc8d4d16f9500a05fe40ded9eac1e Mon Sep 17 00:00:00 2001
From: Filipe Santos <48060475+fc-santos@users.noreply.github.com>
Date: Mon, 7 Oct 2024 08:38:21 -0400
Subject: [PATCH] ui: refactor des styles de la bottom nav (#139)

Signed-off-by: fc-santos <filipesantos@live.ca>
---
 app/App.tsx                     |  5 +----
 app/src/navigators/TabStack.tsx | 11 +++++------
 app/src/theme.ts                |  3 ++-
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/app/App.tsx b/app/App.tsx
index 62e4004a..192ba88a 100644
--- a/app/App.tsx
+++ b/app/App.tsx
@@ -21,7 +21,6 @@ import { useTranslation } from 'react-i18next'
 import { StatusBar } from 'react-native'
 import { isTablet } from 'react-native-device-info'
 import Orientation from 'react-native-orientation-locker'
-import { SafeAreaProvider } from 'react-native-safe-area-context'
 import SplashScreen from 'react-native-splash-screen'
 import Toast from 'react-native-toast-message'
 import { container } from 'tsyringe'
@@ -83,9 +82,7 @@ const App = () => {
                     overlayColor={'black'}
                     overlayOpacity={0.7}
                   >
-                    <SafeAreaProvider>
-                      <RootStack />
-                    </SafeAreaProvider>
+                    <RootStack />
                   </TourProvider>
                   <Toast topOffset={15} config={toastConfig} />
                 </NetworkProvider>
diff --git a/app/src/navigators/TabStack.tsx b/app/src/navigators/TabStack.tsx
index 5411e96b..fcde10e9 100644
--- a/app/src/navigators/TabStack.tsx
+++ b/app/src/navigators/TabStack.tsx
@@ -38,10 +38,10 @@ const TabStack: React.FC = () => {
 
   const tabBarIconContainerStyles = (focused: boolean): ViewStyle => ({
     ...TabTheme.tabBarContainerStyle,
-    borderTopWidth: focused ? 4 : 0,
-    borderTopColor: ColorPallet.brand.primary,
+    borderTopWidth: 4,
+    borderTopColor: focused ? ColorPallet.brand.primary : ColorPallet.brand.primaryBackground,
     width: '100%',
-    justifyContent: showLabels ? 'flex-end' : 'center',
+    justifyContent: 'center',
   })
 
   const tabs = [
@@ -88,7 +88,7 @@ const TabStack: React.FC = () => {
             <View
               style={{
                 position: 'absolute',
-                top: props.focused ? 2 : 10,
+                top: 2,
                 left: '55%',
                 width: 16,
                 height: 16,
@@ -96,7 +96,6 @@ const TabStack: React.FC = () => {
                 backgroundColor: ColorPallet.brand.primary,
                 justifyContent: 'center',
                 alignItems: 'center',
-                borderWidth: 1,
               }}
             >
               <Text
@@ -116,7 +115,7 @@ const TabStack: React.FC = () => {
   }
 
   return (
-    <SafeAreaView style={{ flex: 1, backgroundColor: ColorPallet.brand.primary }}>
+    <SafeAreaView edges={['top']} style={{ flex: 1, backgroundColor: ColorPallet.brand.primary }}>
       <Tab.Navigator
         initialRouteName={TabStacks.HomeStack}
         screenOptions={{
diff --git a/app/src/theme.ts b/app/src/theme.ts
index e4933f0c..896f4a83 100644
--- a/app/src/theme.ts
+++ b/app/src/theme.ts
@@ -431,7 +431,7 @@ export const ListItems = StyleSheet.create({
 
 export const TabTheme = {
   tabBarStyle: {
-    height: 72,
+    height: 80,
     backgroundColor: ColorPallet.brand.secondaryBackground,
     shadowOffset: { width: 0, height: -3 },
     shadowRadius: 6,
@@ -439,6 +439,7 @@ export const TabTheme = {
     shadowOpacity: 0.1,
     borderTopWidth: 0,
     paddingBottom: 0,
+    elevation: 6,
   },
   tabBarContainerStyle: {
     flex: 1,