From b73e1bcad5386fbe1e0f4c7abae7d524d0045f77 Mon Sep 17 00:00:00 2001
From: ngomesodent <101274479+ngomesodent@users.noreply.github.com>
Date: Thu, 4 Apr 2024 16:21:07 +0200
Subject: [PATCH] ui/bottom-navigation (#130)

* feat(front): add safe area for mobile

* fix(front): reduce safe area size

* fix(front): remove padding bottom from safe area and resize bottom nav

* style: updated color palette

* refactor: moved Button colors inside color palette

* feat: integrated tabs from Figma mockup

* refactor: optimized code by propagating props and fixed color palette

* refactor: deleted useless pages and moved SafeAreaProvider and IconContextProvider inside root layout instead of tabs root layout

* fix: annoying scroll issue

---------

Co-authored-by: MAXOUXAX <24844231+MAXOUXAX@users.noreply.github.com>
---
 expo/app/(tabs)/_layout.tsx | 99 +++++++++++++++++++++++--------------
 expo/app/AddMusic.tsx       |  9 ----
 expo/app/_layout.tsx        | 33 ++++++++++---
 expo/app/modal.tsx          | 13 -----
 expo/components/Button.tsx  |  7 +--
 expo/constants/Colors.ts    | 18 +++----
 6 files changed, 98 insertions(+), 81 deletions(-)
 delete mode 100644 expo/app/AddMusic.tsx
 delete mode 100644 expo/app/modal.tsx

diff --git a/expo/app/(tabs)/_layout.tsx b/expo/app/(tabs)/_layout.tsx
index c6432d0c..303900b3 100644
--- a/expo/app/(tabs)/_layout.tsx
+++ b/expo/app/(tabs)/_layout.tsx
@@ -1,12 +1,14 @@
 import { Redirect, Tabs } from "expo-router";
 import * as WebBrowser from "expo-web-browser";
-import House from "phosphor-react-native/src/icons/House";
+import HouseLine from "phosphor-react-native/src/icons/HouseLine";
 import MusicNote from "phosphor-react-native/src/icons/MusicNote";
 import User from "phosphor-react-native/src/icons/User";
 import Users from "phosphor-react-native/src/icons/Users";
-import { useColorScheme } from "react-native";
+import { ActivityIndicator } from "react-native";
 
 import { Text } from "../../components/Tamed";
+import { View } from "../../components/Themed";
+import Colors from "../../constants/Colors";
 import { useSupabaseUserHook } from "../../lib/useSupabaseUser";
 
 WebBrowser.maybeCompleteAuthSession();
@@ -19,10 +21,9 @@ function TabBarLabel(props: {
   return (
     <Text
       style={{
-        // color: props.color,
-        fontWeight: props.focused ? "bold" : "normal",
+        color: props.color,
         fontSize: 20,
-        fontFamily: "Outfit-Regular",
+        fontFamily: props.focused ? "Outfit-Bold" : "Outfit-Medium",
       }}
     >
       {props.children}
@@ -30,29 +31,53 @@ function TabBarLabel(props: {
   );
 }
 export default function TabLayout() {
-  WebBrowser.maybeCompleteAuthSession(); // required for web only
-
-  const colorScheme = useColorScheme();
+  // This is only required for web
+  // This is used to close the authentication popup on web
+  WebBrowser.maybeCompleteAuthSession();
 
   const user = useSupabaseUserHook();
 
-  if (user === undefined) return <Text>Loading..</Text>;
+  if (user === undefined)
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          gap: 16,
+        }}
+      >
+        <ActivityIndicator size={64} color={Colors.light.text} />
+        <Text style={{ textAlign: "center" }}>
+          Chargement de l'application en cours...
+        </Text>
+      </View>
+    );
 
   if (!user) return <Redirect href="/auth/" />;
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: "black",
+        tabBarActiveTintColor: Colors.light.tabIconSelected,
+        tabBarInactiveTintColor: Colors.light.tabIconDefault,
         tabBarStyle: {
-          height: 100,
+          height: 87,
+          overflow: "hidden",
+        },
+        tabBarLabelPosition: "below-icon",
+        tabBarIconStyle: {
+          minHeight: 32,
+          minWidth: 32,
         },
         tabBarItemStyle: {
           flexDirection: "column",
-          height: 85,
+          height: 87,
           display: "flex",
           paddingHorizontal: 4,
-          paddingVertical: 10,
+          paddingTop: 10,
+          gap: 10,
+          justifyContent: "center",
           alignItems: "center",
         },
       }}
@@ -62,13 +87,13 @@ export default function TabLayout() {
         name="index"
         options={{
           title: "Accueil",
-          tabBarLabel: ({ color, focused, children }) => (
-            <TabBarLabel color={color} focused={focused}>
-              {children}
-            </TabBarLabel>
-          ),
+          tabBarLabel: (props) => <TabBarLabel {...props} />,
           tabBarIcon: ({ color, focused }) => (
-            <House size={32} weight={focused ? "fill" : "regular"} />
+            <HouseLine
+              color={color}
+              size={32}
+              weight={focused ? "fill" : "regular"}
+            />
           ),
         }}
       />
@@ -77,13 +102,13 @@ export default function TabLayout() {
         options={{
           title: "Salles",
           headerShown: false,
-          tabBarLabel: ({ color, focused, children }) => (
-            <TabBarLabel color={color} focused={focused}>
-              {children}
-            </TabBarLabel>
-          ),
+          tabBarLabel: (props) => <TabBarLabel {...props} />,
           tabBarIcon: ({ color, focused }) => (
-            <MusicNote size={32} weight={focused ? "fill" : "regular"} />
+            <MusicNote
+              color={color}
+              size={32}
+              weight={focused ? "fill" : "regular"}
+            />
           ),
         }}
       />
@@ -91,13 +116,13 @@ export default function TabLayout() {
         name="Friends"
         options={{
           title: "Amis",
-          tabBarLabel: ({ color, focused, children }) => (
-            <TabBarLabel color={color} focused={focused}>
-              {children}
-            </TabBarLabel>
-          ),
+          tabBarLabel: (props) => <TabBarLabel {...props} />,
           tabBarIcon: ({ color, focused }) => (
-            <Users size={32} weight={focused ? "fill" : "regular"} />
+            <Users
+              color={color}
+              size={32}
+              weight={focused ? "fill" : "regular"}
+            />
           ),
         }}
       />
@@ -106,13 +131,13 @@ export default function TabLayout() {
         options={{
           title: "Profil",
           headerShown: false,
-          tabBarLabel: ({ color, focused, children }) => (
-            <TabBarLabel color={color} focused={focused}>
-              {children}
-            </TabBarLabel>
-          ),
+          tabBarLabel: (props) => <TabBarLabel {...props} />,
           tabBarIcon: ({ color, focused }) => (
-            <User size={32} weight={focused ? "fill" : "regular"} />
+            <User
+              color={color}
+              size={32}
+              weight={focused ? "fill" : "regular"}
+            />
           ),
         }}
       />
diff --git a/expo/app/AddMusic.tsx b/expo/app/AddMusic.tsx
deleted file mode 100644
index b38d9cf7..00000000
--- a/expo/app/AddMusic.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { View, Text } from "react-native";
-
-export default function AddMusic() {
-  return (
-    <View>
-      <Text>Ajoueter une musique</Text>
-    </View>
-  );
-}
diff --git a/expo/app/_layout.tsx b/expo/app/_layout.tsx
index 80ec534e..4737980f 100644
--- a/expo/app/_layout.tsx
+++ b/expo/app/_layout.tsx
@@ -1,10 +1,13 @@
 import FontAwesome from "@expo/vector-icons/FontAwesome";
 import { useFonts } from "expo-font";
 import { SplashScreen, Stack, router } from "expo-router";
+import { IconContext } from "phosphor-react-native/src/lib";
 import { useEffect } from "react";
 import { MenuProvider } from "react-native-popup-menu";
+import { SafeAreaProvider } from "react-native-safe-area-context";
 
 import { Text, View } from "../components/Themed";
+import Colors from "../constants/Colors";
 import { supabase } from "../lib/supabase";
 
 export const unstable_settings = {
@@ -78,14 +81,28 @@ function RootLayoutNav() {
           borderRadius: 40,
         }}
       >
-        <MenuProvider>
-          <Stack>
-            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-            <Stack.Screen name="auth" options={{ headerShown: false }} />
-            <Stack.Screen name="modal" options={{ presentation: "modal" }} />
-            <Stack.Screen name="ask-name" options={{ headerShown: false }} />
-          </Stack>
-        </MenuProvider>
+        <IconContext.Provider
+          value={{
+            color: Colors.light.text,
+            size: 32,
+            weight: "regular",
+          }}
+        >
+          <SafeAreaProvider
+            style={{ backgroundColor: Colors.light.background }}
+          >
+            <MenuProvider>
+              <Stack>
+                <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+                <Stack.Screen name="auth" options={{ headerShown: false }} />
+                <Stack.Screen
+                  name="ask-name"
+                  options={{ headerShown: false }}
+                />
+              </Stack>
+            </MenuProvider>
+          </SafeAreaProvider>
+        </IconContext.Provider>
       </View>
     </View>
   );
diff --git a/expo/app/modal.tsx b/expo/app/modal.tsx
deleted file mode 100644
index a405acb1..00000000
--- a/expo/app/modal.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { StatusBar } from "expo-status-bar";
-import { Platform, StyleSheet, Text, View } from "react-native";
-
-export default function ModalScreen() {
-  return (
-    <View>
-      <Text>Modal</Text>
-      <View />
-      {/* Use a light status bar on iOS to account for the black space above the modal */}
-      <StatusBar style={Platform.OS === "ios" ? "light" : "auto"} />
-    </View>
-  );
-}
diff --git a/expo/components/Button.tsx b/expo/components/Button.tsx
index 431c323f..ca196a24 100644
--- a/expo/components/Button.tsx
+++ b/expo/components/Button.tsx
@@ -11,15 +11,16 @@ import {
 } from "react-native";
 
 import { Text } from "./Tamed";
+import Colors from "../constants/Colors";
 
 const BUTTON_COLORS = ["primary", "success", "danger"] as const;
 
 type ButtonColor = (typeof BUTTON_COLORS)[number];
 
 const COLOR_PALETTE: Record<ButtonColor, string> = {
-  primary: "#1A1A1A",
-  success: "#13863C",
-  danger: "#F33F33",
+  primary: Colors.light.text,
+  success: Colors.light.success,
+  danger: Colors.light.danger,
 };
 
 export type ButtonProps = {
diff --git a/expo/constants/Colors.ts b/expo/constants/Colors.ts
index 32674d87..58e6f7e5 100644
--- a/expo/constants/Colors.ts
+++ b/expo/constants/Colors.ts
@@ -1,19 +1,15 @@
 const tintColorLight = "#2f95dc";
-const tintColorDark = "#fff";
+const fakeBlack = "#1A1A1A";
 
 export default {
   light: {
-    text: "#000",
+    success: "#13863C",
+    danger: "#F33F33",
+    text: fakeBlack,
+    black: fakeBlack,
     background: "#f2f2f2",
     tint: tintColorLight,
-    tabIconDefault: "#ccc",
-    tabIconSelected: tintColorLight,
-  },
-  dark: {
-    text: "#fff",
-    background: "#000",
-    tint: tintColorDark,
-    tabIconDefault: "#ccc",
-    tabIconSelected: tintColorDark,
+    tabIconDefault: fakeBlack,
+    tabIconSelected: fakeBlack,
   },
 };