From c581f1511f667885d0f134eaa0ee0c398e2b4d82 Mon Sep 17 00:00:00 2001
From: Rochas <thibaut.rochas@etudiant.univ-rennes1.fr>
Date: Sat, 6 Dec 2025 22:33:01 +0100
Subject: [PATCH] =?UTF-8?q?selection=20chantier=20(animation,correction)?=
 =?UTF-8?q?=20;=20ajustement=20et=20am=C3=A9lioration=20du=20th=C3=A8me=20?=
 =?UTF-8?q?;=20chantier=20provider?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/(tabs)/bonjourFL.tsx         |  58 +++++----
 app/Context.tsx                  |  36 ++++++
 app/_layout.tsx                  |  39 ++++--
 components/example.tsx           |  68 ++++++++++
 components/selectChantier.tsx    | 214 +++++++++++++++++--------------
 components/themed-button.tsx     |  17 ++-
 components/themed-textinpute.tsx |   3 +-
 components/themed-view.tsx       |  17 ++-
 constants/theme.ts               |  20 +--
 9 files changed, 321 insertions(+), 151 deletions(-)
 create mode 100644 app/Context.tsx
 create mode 100644 components/example.tsx

diff --git a/app/(tabs)/bonjourFL.tsx b/app/(tabs)/bonjourFL.tsx
index 0b5d690..914f809 100644
--- a/app/(tabs)/bonjourFL.tsx
+++ b/app/(tabs)/bonjourFL.tsx
@@ -6,6 +6,11 @@ import { useLocalSearchParams, useRouter } from 'expo-router';
 import React, { useMemo, useState } from 'react';
 import { Button, FlatList, Image, StyleSheet, Text } from 'react-native';
 import rawConcerts from '../../data/concerts.json';
+import Constants from 'expo-constants' //pour connaître la taille de la barre menu de l'OS en haut
+
+import Example from '@/components/example';
+import { useChantier } from '../Context';
+
 
 type Concert = {
   group: string;
@@ -23,6 +28,8 @@ export default function BonjourScreen() {
   const router = useRouter();
   const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
   const [search, setSearch] = useState('');
+  const { chantier, setChantier } = useChantier();
+
 
 
   const concertsData: Concert[] = Array.isArray(rawConcerts)
@@ -44,9 +51,9 @@ export default function BonjourScreen() {
       return null;
     }
     return(
-    <ThemedView lvl={2} border={5} style={styles.card}>
+    <ThemedView lvl={1} shadow={true} style={styles.card}>
       <Image source={{ uri: item.Image }} style={styles.image} />
-      <ThemedView lvl={2} style={styles.info}>
+      <ThemedView lvl={1} style={styles.info}>
         <ThemedText style={styles.group}>{item.group}</ThemedText>
         <ThemedText>{item.date}</ThemedText>
         <ThemedText>{item.location}</ThemedText>
@@ -60,29 +67,27 @@ export default function BonjourScreen() {
 
 
   return(
-    <ThemedView style={styles.container}>
-      <ThemedView style={styles.selectChantier}>
-            <SelectChantier ></SelectChantier>
-      </ThemedView>
+    <ThemedView lvl={3} style={styles.container}>
       <FlatList
         data={filteredData}
         renderItem={renderItem}
         keyExtractor={(_, index) => index.toString()}
         contentContainerStyle={{ paddingBottom: 40 }}
         ListHeaderComponent={
-          <ThemedView style={styles.header}>
+          <ThemedView opacity="00" style={styles.header}>
             <ThemedText style={styles.text}>
-              Bonjour {prenom} {nom}
+              Bonjour {prenom} {nom} {chantier&&chantier.chef.nom}
             </ThemedText>
 
-            <ThemedTextInput
-              lvl={0}
-              border={5}
-              style={styles.input}
-              placeholder="Rechercher un groupe..."
-              value={search}
-              onChangeText={setSearch}
-            />
+            <ThemedView style={styles.inputBack} shadow={true}>
+              <ThemedTextInput
+                lvl={0}
+                style={styles.input}
+                placeholder="Rechercher un groupe..."
+                value={search}
+                onChangeText={setSearch}
+              />
+            </ThemedView>
           </ThemedView>
         }
         ListEmptyComponent={
@@ -93,6 +98,11 @@ export default function BonjourScreen() {
       <ThemedView style={styles.footer}>
         <Button title="Retour" onPress={() => router.push("/(tabs)/mapScreen") } />
       </ThemedView>
+
+      <ThemedView style={{width:"100%", position: 'absolute', backgroundColor:'transparent',}}>
+            <SelectChantier ></SelectChantier>
+      </ThemedView>
+
     </ThemedView>
   )
 }
@@ -100,7 +110,8 @@ export default function BonjourScreen() {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    //backgroundColor: '#fff',
+    marginTop: Constants.statusBarHeight, //pour la barre menu du haut
+    //backgroundColor: '#00FFFF',
   },
   header: {
     marginTop: 60,
@@ -113,9 +124,14 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     marginBottom: 10,
   },
+  inputBack:{
+    width:"100%",
+    borderRadius:10,
+    backgroundColor:'transparent'
+  },
   input: {
     width: '100%',
-    borderWidth: 1,
+    //borderWidth: 1,
     //borderColor: '#ccc',
     borderRadius: 10,
     padding: 10,
@@ -125,11 +141,12 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     marginHorizontal: 20,
     marginBottom: 15,
-    borderWidth: 1,
+    //borderWidth: 1,
     //borderColor: '#ddd',
     borderRadius: 10,
     padding: 10,
     //backgroundColor: '#fafafa',
+
   },
   image: {
     width: 80,
@@ -154,7 +171,4 @@ const styles = StyleSheet.create({
     marginTop: 30,
     color: '#888',
   },
-  selectChantier:{
-    width:"100%",
-  },
 });
\ No newline at end of file
diff --git a/app/Context.tsx b/app/Context.tsx
new file mode 100644
index 0000000..4809d5c
--- /dev/null
+++ b/app/Context.tsx
@@ -0,0 +1,36 @@
+import { Chantier, Chef, exempleChantier } from '@/class/class';
+import { createContext, ReactNode, useContext, useMemo, useState } from 'react';
+
+type ChantierContextType = {
+  chantier: Chantier | null;
+  setChantier: (p: Chantier | null) => void;
+};
+
+const ChantierContext = createContext<ChantierContextType | null>(null);
+
+type ChantierProviderProps = {
+  children: ReactNode;
+};
+
+export const ChantierProvider = ({ children }: ChantierProviderProps) => {
+  const [chantier, setChantier] = useState<Chantier | null>(null);
+
+  const value = useMemo(
+    () => ({ chantier, setChantier }),
+    [chantier]
+  );
+
+  return (
+    <ChantierContext.Provider value={value}>
+      {children}
+    </ChantierContext.Provider>
+  );
+};
+
+export const useChantier = () => {
+  const context = useContext(ChantierContext);
+  if (!context) {
+    throw new Error('useChantier doit être utilisé dans <ChantierProvider>');
+  }
+  return context;
+};
\ No newline at end of file
diff --git a/app/_layout.tsx b/app/_layout.tsx
index e4f5bf0..7ff48f5 100644
--- a/app/_layout.tsx
+++ b/app/_layout.tsx
@@ -13,6 +13,10 @@ import { useRouter } from "expo-router";
 import { useColorScheme } from "@/hooks/use-color-scheme";
 import { doc, getDoc } from "firebase/firestore";
 
+import { UIManager, Platform } from 'react-native';
+import { ChantierProvider } from "./Context";
+
+
 export const unstable_settings = {
   anchor: "(tabs)",
 };
@@ -23,6 +27,14 @@ export default function RootLayout() {
   const [user, setUser] = useState<User | null>(null);
   const [userRole, setUserRole] = useState<string | null>(null);
 
+
+    useEffect(() => {
+      if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+          UIManager.setLayoutAnimationEnabledExperimental(true);
+      }
+    }, []);
+
+
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
       setUser(currentUser);
@@ -56,18 +68,19 @@ export default function RootLayout() {
   }, []);
 
   return (
-
-    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="selectChantier" options={{ headerShown: false }}/>
-        <Stack.Screen
-          name="modal"
-          options={{ presentation: "modal", title: "Modal" }}
-        />
-        <Stack.Screen name="login" options={{ headerShown: false }} />
-      </Stack>
-      <StatusBar style="auto" />
-    </ThemeProvider>
+    <ChantierProvider>
+      <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
+        <Stack>
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen name="selectChantier" options={{ headerShown: false }}/>
+          <Stack.Screen
+            name="modal"
+            options={{ presentation: "modal", title: "Modal" }}
+          />
+          <Stack.Screen name="login" options={{ headerShown: false }} />
+        </Stack>
+        <StatusBar style="auto" />
+      </ThemeProvider>
+    </ChantierProvider>
   );
 }
diff --git a/components/example.tsx b/components/example.tsx
new file mode 100644
index 0000000..78baa5b
--- /dev/null
+++ b/components/example.tsx
@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet, LayoutAnimation, Platform, UIManager } from 'react-native';
+import Animated, { Layout } from 'react-native-reanimated';
+
+
+export default function Example() {
+  useEffect(() => {
+    // Activer sur Android
+    if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+      UIManager.setLayoutAnimationEnabledExperimental(true);
+    }
+  }, []);
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  function onPressOpen() {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    setIsOpen(prev => !prev);
+  }
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity onPress={onPressOpen} style={styles.button}>
+        <Text>Toggle</Text>
+      </TouchableOpacity>
+
+      <Animated.View layout={Layout.springify()} style={[styles.box, isOpen ? styles.boxOpen : styles.boxClosed]}>
+        <View
+          style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: 'tomato',
+          }}
+        >
+          <View
+          style={{
+            width: '10%',
+            height: '10%',
+            backgroundColor: '#FFFFFF',
+          }}
+        >
+          
+        </View>
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { padding: 20 },
+  button: { marginBottom: 12, padding: 10, backgroundColor: '#eee' },
+  box: {
+    // important pour masquer l'excédent pendant l'animation
+    overflow: 'hidden',
+  },
+  boxClosed: {
+    height: 10,
+    width:10,
+    //backgroundColor: '#00FF00',
+  },
+  boxOpen: {
+    // mettre une valeur numérique (pas 'auto')
+    height: 120,
+    width:120,
+    //backgroundColor: '#00FF00',
+  },
+});
diff --git a/components/selectChantier.tsx b/components/selectChantier.tsx
index dfaff69..d486313 100644
--- a/components/selectChantier.tsx
+++ b/components/selectChantier.tsx
@@ -1,133 +1,152 @@
 import { useState } from 'react';
-import { Button, GestureResponderEvent, Pressable, ScrollView, StyleSheet, View } from 'react-native';
+import { Button, GestureResponderEvent, Pressable, ScrollView, StyleSheet, View, LayoutAnimation } from 'react-native';
 import { ThemedTextInput } from './themed-textinpute';
 import { ThemedView } from "./themed-view";
 import { ThemedText } from './themed-text';
 import { ThemedButton } from './themed-button';
 import { Chantier, Chef, exempleChantier } from '@/class/class';
-import {BlurView} from 'expo-blur';
 import { Dimensions } from "react-native";
+import Animated, { Layout,LinearTransition,Easing,runOnJS } from 'react-native-reanimated';
+import { useChantier } from '@/app/Context';
 
 const screenHeight = Dimensions.get("window").height;
 
+
+/*
+
+<ThemedView style={{width:"100%", position: 'absolute', backgroundColor:'transparent',}}>
+  <SelectChantier ></SelectChantier>
+</ThemedView>
+
+*/
+
 export default function SelectChantier() {
 
+    const { chantier, setChantier } = useChantier();
     const [search, setSearch] = useState('');
     const [isOpen,setIsOpen] = useState(false);
     const [chantiers,setChantiers] = useState<Chantier[]>([exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier,exempleChantier]);
     
+    const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
+    const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText);
+    const AnimatedThemedButton = Animated.createAnimatedComponent(ThemedButton);
+    const AnimatedThemedTextInput = Animated.createAnimatedComponent(ThemedTextInput);
 
-  function onPressOpen(event: GestureResponderEvent): void {
+  function onPressOpen(): void {
+    LayoutAnimation.configureNext(
+      LayoutAnimation.Presets.easeInEaseOut
+    );
     setIsOpen(!isOpen);
   }
 
+  function selectChantier(chantier: Chantier): void {
+    setChantier(chantier);
+    setIsOpen(false);
+  }
+
+
 
     const renderChantier = (chantier:Chantier, index: number)  => {
       return(
-      <ThemedView key={index} lvl={3} style={styles.chantier}>
-        <ThemedText>adresse: {chantier.adresse}</ThemedText>
-        <ThemedText>chef de chantier: {chantier.chef.prenom} {chantier.chef.nom}</ThemedText>
-        <ThemedText>date de début: {chantier.dateDep}</ThemedText>
-        <ThemedText>etat: {chantier.etat}</ThemedText>
-      </ThemedView>
+      <Pressable key={index} onPress={() => selectChantier(chantier)}>
+        <ThemedView lvl={4} style={styles.chantier}>
+          <ThemedText>adresse: {chantier.adresse}</ThemedText>
+          <ThemedText>chef de chantier: {chantier.chef.prenom} {chantier.chef.nom}</ThemedText>
+          <ThemedText >date de début: {chantier.dateDep}</ThemedText>
+          <ThemedText>etat: {chantier.etat}</ThemedText>
+        </ThemedView >
+      </Pressable>
       );
+      
     };
 
-    if(!isOpen){
-    return (
-        <View style={styles.closedSelectZone}>
-          <ThemedButton  style={styles.button} lvl={2} onPress={onPressOpen}>
-            <ThemedText style={styles.buttonText}>Open</ThemedText>
+
+    return(
+      <Animated.View 
+      layout={LinearTransition.duration(200)}
+      style={isOpen ? styles.windowOpean : styles.windowClose}>
+
+        <AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
+          <ThemedButton style={isOpen ? styles.buttonOpen : styles.buttonClose} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
+            <ThemedText style={styles.buttonText}>{isOpen ? "Close" : "Open"}</ThemedText>
           </ThemedButton>
-        </View>
+          {isOpen &&
+            <View style={styles.menu}>
+                <ThemedTextInput
+                  lvl={1}
+                  border={4}
+                  style={styles.input}
+                  placeholder='Rechercher un chantier'
+                  value={search}
+                  onChangeText={setSearch}
+                />
+                  <ThemedView lvl={2} style={styles.list}>
+                    <ScrollView contentContainerStyle={styles.chantiersList} >
+                      
+                      {chantiers.map((chantier, index) => (
+                        renderChantier(chantier, index)
+                        ))
+                      }
+                    </ScrollView>
+                  </ThemedView>
+            </View>
+          }
+        </AnimatedThemedView>
+      </Animated.View>
     )
-    }
-    else{
-      return(
-        <View style={styles.openedSelectZone}>
-          <BlurView intensity={1} blurReductionFactor={0.2} experimentalBlurMethod='dimezisBlurView' style={styles.blur}>
-            <ThemedView lvl={0} opacity="40">
-              
-                <ThemedButton  style={styles.buttonOpen} lvl={3} onPress={onPressOpen}>
-                  <ThemedText style={styles.buttonText}>Close</ThemedText>
-                </ThemedButton>
-
-                <View style={styles.searchZone}>
-                  <ThemedTextInput
-                    lvl={1}
-                    border={4}
-                    style={styles.input}
-                    placeholder='Rechercher un chantier'
-                    value={search}
-                    onChangeText={setSearch}
-                  />
-                </View>
-                
-                
-                  <ScrollView>
-                    {chantiers.map((chantier, index) => (
-                      renderChantier(chantier, index)
-                      ))
-                    }
-                  </ScrollView>
-                  
-
-            </ThemedView>
-            
-        </BlurView>
-      </View>
-
-
-      )
-    };
+    
 }
 
 const styles = StyleSheet.create({
-  openedSelectZone:{
-    position: 'absolute',
-    width: "100%",
-    borderRadius: 10,
-    zIndex: 9999,
-    elevation: 9999,
-    overflow: "hidden",
-    paddingTop:25,
-    height: screenHeight/2,
-  },
-  blur:{
-    /*flex: 1,*/
-    /*backgroundColor: "rgba(255,255,255,0.0001)",*/
-  },
-  closedSelectZone:{
-    position: 'absolute',
-    width: "50%",
-    borderRadius: 10,
-    zIndex: 9999,
-    elevation: 9999,
-  },
-  titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  searchMenu:{
-    color:'#FFAAAA',
-    borderRadius: 5,
-    width: "100%",
-    margin: 0,
 
+  windowClose:{
+    //backgroundColor: '#00FFFF',
+    //borderRadius:10,
+    padding: 10,
+    width:"50%",
+    height:60,
+    overflow: 'hidden',    
+  },
+  windowOpean:{
+    //backgroundColor: '#00FFFF',
+    //borderRadius:10,
+    width:"100%",
+    height: screenHeight/2,
+    padding: 10,
+  },
+  window:{
+    borderRadius:15,
+    height: "100%",
+    //backgroundColor: '#00FF00',
+    overflow: 'hidden',
+  },
+  menu:{
+    padding:5,
+    flex: 1, 
+    minHeight: 0,
+    //backgroundColor:'#FF00FF',
+  },
+  list:{
+    flex: 1,
+    overflow: 'hidden',
+    borderRadius:10,
+
+  },
+  chantiersList:{
+    //padding:5,
+    //backgroundColor:'0000FF',
+    //flexDirection: 'row',
+    //alignItems: 'center',
+    gap: 8,
     
-  },
-    searchZone:{
-    width: "100%",
-    padding:10,
-    marginTop:10,
-    alignItems: 'center',
   },
   chantier:{
-    padding:10,
-    margin:10,
+    padding:5,
+    //marginTop:5,
+    //margin:5,
     borderRadius:10,
     //borderWidth: 1,
+    
   },
   input: {
     width: '100%',
@@ -135,18 +154,21 @@ const styles = StyleSheet.create({
     borderRadius: 10,
     padding: 10,
     fontSize: 16,
+    marginBottom:10,
   },
-  button:{
+  buttonClose:{
     width:'100%',
-    margin: 5,
-    borderRadius: 10,
+    margin: 0,
+    borderRadius: 15,
     padding: 10,
+    height:40,
   },
   buttonOpen:{
     width:'50%',
     margin: 5,
     borderRadius: 10,
     padding: 10,
+    height:40,
   },
   buttonText:{
     textAlign: 'center',
diff --git a/components/themed-button.tsx b/components/themed-button.tsx
index 773bf2b..f26eace 100644
--- a/components/themed-button.tsx
+++ b/components/themed-button.tsx
@@ -1,4 +1,4 @@
-import { Pressable, type PressableProps } from 'react-native';
+import { Pressable, ViewStyle, type PressableProps } from 'react-native';
 
 import { useThemeColor } from '@/hooks/use-theme-color';
 
@@ -8,10 +8,11 @@ export type ThemedPressableProps = PressableProps & {
   lvl?:number;
   border?:number;
   opacity?:string;
+  shadow?: boolean;
 };
 
 //nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
-export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF", ...otherProps }: ThemedPressableProps) {
+export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF",shadow=false, ...otherProps }: ThemedPressableProps) {
   var lvlStr:string = "background";
   var borderColor ="";
   if(lvl>=0 && lvl<6){
@@ -33,7 +34,15 @@ export function ThemedButton({ style, lightColor, darkColor,lvl=1,border=-1,opac
     }
   }
 
+  const shadowStyle: ViewStyle = {
+    //android
+    elevation: 10,
+    //iOS
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 6,
+  }
 
-
-  return <Pressable  style={(state) =>[{ backgroundColor, borderColor }, typeof style === 'function' ? style(state) : style,]} {...otherProps}/>;
+  return <Pressable  style={(state) =>[{ backgroundColor, borderColor }, shadow && shadowStyle, typeof style === 'function' ? style(state) : style,]} {...otherProps}/>;
 }
diff --git a/components/themed-textinpute.tsx b/components/themed-textinpute.tsx
index c9cdaa1..33d741d 100644
--- a/components/themed-textinpute.tsx
+++ b/components/themed-textinpute.tsx
@@ -1,4 +1,4 @@
-import { StyleSheet, TextInput, type TextInputProps } from 'react-native';
+import { StyleSheet, TextInput, ViewStyle, type TextInputProps } from 'react-native';
 
 import { useThemeColor } from '@/hooks/use-theme-color';
 
@@ -41,7 +41,6 @@ export function ThemedTextInput({style, lightColor, darkColor, reverse=false, lv
     }
   }
 
-
   return (
     <TextInput
       style={[
diff --git a/components/themed-view.tsx b/components/themed-view.tsx
index 6206520..8f3225f 100644
--- a/components/themed-view.tsx
+++ b/components/themed-view.tsx
@@ -1,4 +1,4 @@
-import { View, type ViewProps } from 'react-native';
+import { View, ViewStyle, type ViewProps } from 'react-native';
 
 import { useThemeColor } from '@/hooks/use-theme-color';
 
@@ -8,11 +8,12 @@ export type ThemedViewProps = ViewProps & {
   lvl?:number;
   border?:number;
   opacity?:string;
+  shadow?: boolean;
 };
 
 
 //nb : pour border ne pas oublier de mettre en plus "borderWidth" dans le style du composant /!\
-export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF", ...otherProps }: ThemedViewProps) {
+export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1,opacity="FF",shadow=false, ...otherProps }: ThemedViewProps) {
   var lvlStr:string = "background";
   var borderColor ="";
   if(lvl>=0 && lvl<6){
@@ -34,7 +35,15 @@ export function ThemedView({ style, lightColor, darkColor,lvl=1,border=-1,opacit
     }
   }
 
+  const shadowStyle: ViewStyle = {
+    //android
+    elevation: 10,
+    //iOS
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.2,
+    shadowRadius: 6,
+  }
 
-
-  return <View style={[{ backgroundColor, borderColor }, style]} {...otherProps} />;
+  return <View style={[{ backgroundColor, borderColor }, shadow && shadowStyle, style]} {...otherProps} />;
 }
diff --git a/constants/theme.ts b/constants/theme.ts
index 4afb712..d4a5311 100644
--- a/constants/theme.ts
+++ b/constants/theme.ts
@@ -13,11 +13,11 @@ export const Colors = {
     text: '#11181C',
     text_: '#ECEDEE',
     background0: '#ffffff',
-    background1: '#F0F0F0',
-    background2: '#E0E0E0',
-    background3: '#D0D0D0',
-    background4: '#C0C0C0',
-    background5: '#B0B0B0',
+    background1: '#F1F1F0',
+    background2: '#E2E1E0',
+    background3: '#D3D2D0',
+    background4: '#C4C2C0',
+    background5: '#B5B3B0',
     tint: tintColorLight,
     icon: '#687076',
     tabIconDefault: '#687076',
@@ -27,11 +27,11 @@ export const Colors = {
     text: '#ECEDEE',
     text_: '#11181C',
     background0: '#000000',
-    background1: '#101112',
-    background2: '#202224',
-    background3: '#303336',
-    background4: '#404448',
-    background5: '#50555A',
+    background1: '#111010',
+    background2: '#222120',
+    background3: '#333130',
+    background4: '#444240',
+    background5: '#555250',
     tint: tintColorDark,
     icon: '#9BA1A6',
     tabIconDefault: '#9BA1A6',