finish Darkmode ✅

README.md

@@ -97,8 +97,10 @@ Notre environnement de travail se base sur plusieurs outils et langages :👇
 
 ---
 
+  ![Redux](https://img.shields.io/badge/Redux-593D88?style=for-the-badge&logo=redux&logoColor=white)
   ![Docker](https://img.shields.io/badge/Docker-2496ED.svg?style=for-the-badge&logo=Docker&logoColor=white)
   ![React Native](https://img.shields.io/badge/React_Native-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
+  ![Spotify Api](https://img.shields.io/badge/Spotify-1ED760?&style=for-the-badge&logo=spotify&logoColor=white)
   ![TypeScript](https://img.shields.io/badge/TypeScript-000?style=for-the-badge&logo=typescript&logoColor=white&color=blue)
   ![JavaScript](https://img.shields.io/badge/JavaScript-000?style=for-the-badge&logo=javascript&logoColor=white&color=yellow)
 
@@ -117,7 +119,7 @@ La composition pour le projet se voit réaliser par deux élèves de l'IUT d'Aub
 <br>
 Emre KARTAL : emre.kartal@etu.uca.fr
 <br>
-⚙️ David D'ALMEIDA : david.d_almeida@etu.uca.fr
+David D'ALMEIDA : david.d_almeida@etu.uca.fr
 
 <a href = "https://codefirst.iut.uca.fr/git/emre.kartal">
 <img src="https://codefirst.iut.uca.fr/git/avatars/402cf312e853192f42c0135a888725c2?size=870" width="50" >

src/FLAD/assets/GraphicalCharterDark.tsx

@@ -1,4 +1,6 @@
 export const GraphicalCharterDark = {
     "body": "#141414",
     "Text": "white",
+    "Card": "#232123",
+    "Line": "#403F3F"
 }

src/FLAD/assets/GraphicalCharterLight.tsx

@@ -1,4 +1,6 @@
 export const GraphicalCharterLight = {
-    "body": "#E7E7E7",
+    "body": "#f2f2f6",
     "Text": "black",
+    "Card": "#fff",
+    "Line": "#e2e2e3"
 }

src/FLAD/components/CardMusic.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import { StyleSheet, Text, View, Image } from 'react-native';
 import { SharedElement } from 'react-navigation-shared-element';
 import { useSelector } from 'react-redux';
+import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
+import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
 
 import normalize from '../components/Normalize';
 
@@ -14,10 +16,51 @@ type CustomCardMusic = { //Props
 
 
 export default function CardMusic(CBP: CustomCardMusic) {
-
+  const isDark = useSelector(state => state.userReducer.dark);
+  const style = isDark ? GraphicalCharterLight : GraphicalCharterDark;
   const currentMusic = useSelector(state => state.appReducer.currentMusic);
 
   const source = typeof CBP.image === 'string' ? { uri: CBP.image } : CBP.image;
+  const styles = StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      marginBottom: 15
+    },
+    imageContainer: {
+      width: normalize(92),
+      height: normalize(92),
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginRight: 20,
+      marginLeft: 20
+    },
+    image: {
+      width: '100%',
+      height: '100%',
+      borderRadius: 10
+
+    },
+    textContainer: {
+      flex: 1,
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+    },
+    title: {
+      fontWeight: 'bold',
+      color: style.Text,
+      fontSize: normalize(23),
+      marginBottom: 10
+    },
+    description: {
+      color: style.Text,
+      fontSize: normalize(18)
+    },
+    currentMusic: {
+      color: 'red'
+    }
+  });
   return (
 
     <View style={styles.container}>
@@ -33,43 +76,3 @@ export default function CardMusic(CBP: CustomCardMusic) {
   );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: 15
-  },
-  imageContainer: {
-    width: normalize(92),
-    height: normalize(92),
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 20,
-    marginLeft: 20
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-    borderRadius: 10
-
-  },
-  textContainer: {
-    flex: 1,
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  title: {
-    fontWeight: 'bold',
-    color: 'white',
-    fontSize: normalize(23),
-    marginBottom: 10
-  },
-  description: {
-    color: 'white',
-    fontSize: normalize(18)
-  },
-  currentMusic: {
-    color: 'red'
-  }
-});

src/FLAD/navigation/Navigation.tsx

@@ -13,28 +13,43 @@ import Login from '../screens/login';
 import FladLoading from '../components/FladLoadingScreen';
 import { useDispatch, useSelector } from 'react-redux';
 import { getFavoritesMusic } from '../redux/actions/appActions';
+import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
+import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
+import { getCurrentUserMusic } from '../redux/thunk/spotThunk';
+import SpotifyService from '../services/spotify/spotify.service';
 // import { fetchFavoritesMusic } from '../redux/thunk/spotThunk';
 
 export default function Navigation() {
+  const isDark = useSelector(state => state.userReducer.dark);
+  const style = isDark ? GraphicalCharterLight : GraphicalCharterDark;
   const BottomTabNavigator = createBottomTabNavigator();
   const MyTheme = {
     dark: false,
     colors: {
       primary: 'rgb(255, 45, 85)',
-      card: 'rgb(35, 33, 35)',
-      border: 'rgb(35, 33, 35)',
+      card: style.Card,
+      border: style.Card,
       text: 'rgb(138, 138, 138)',
     }
   };
   //@ts-ignore
   const favoritesMusicLength : number = useSelector(state => state.appReducer.favoriteMusic.length);
-  // const dispatch = useDispatch();
+  const dispatch = useDispatch();
   // useEffect(() => {
   //       const loadFavoritesMusics = async () => {
   //           await dispatch(fetchFavoritesMusic());
   //       };
   //       loadFavoritesMusics();
   //   }, [dispatch]);
+  const token = "BQBNdaYRkD3GAOFASk8uc-l72zVwQeQ0sFB4GJnkBGudsJHnuAXd4eIWb78gbFLKZeBoHrWpHxMeSmqvHk75Utg9fsOJp7XyJfm-tAlgGhUQ-xiUM8rXTpa9k3M40BMSnujPDrap_O1ChCyGhBWYVHDd2t67qY0NVDvCJ4Qz7LucJJdgu1BN838qXTScQV90zriO8lp6Rjx6SsWov_fMZTyadzxebYIiQ-VDQDs63gUordThas-jFlAHLgJlqPhVOHJ1WaZt-_oLhgY3fk4bhORkyeAFZVRTnjw38A70b0eZU3ziQkOYW6w7kN__tzgP5gis0Y8mEIiUyTnyuQ"
+  const sheet = async () => {
+      const service = new SpotifyService(token)
+      dispatch(getCurrentUserMusic(service))
+  }
+
+  useEffect(() => {
+      sheet()
+    }, []);
   return (
       // @ts-ignore
       <NavigationContainer theme={MyTheme}>

src/FLAD/redux/actions/spotActions.tsx

@@ -1,5 +1,6 @@
 import Music from "../../Model/Music";
 import { Spot } from "../../Model/Spot";
+import { spotifyTypes } from "../types/spotifyTypes";
 import {spotTypes} from "../types/spotTypes";
 
 export const setSpotList = (spotList: Spot[]) => {
@@ -11,7 +12,7 @@ export const setSpotList = (spotList: Spot[]) => {
 
   export const setUserCurrentMusic = (currentMusic: Music) => {
     return {
-      type: spotTypes.FETCH_SPOT,
+      type: spotifyTypes.GET_USER_CURRENT_MUSIC,
       playload: currentMusic,
     };
   }

src/FLAD/redux/actions/userActions.tsx

@@ -44,3 +44,8 @@ export const restoreToken = (token : string) => {
     };
   }
  
+  export const userChangeMode = () => {
+    return {
+      type: userTypes.CHANGE_MODE, 
+    };
+  }

src/FLAD/redux/reducers/appReducer.tsx

@@ -34,7 +34,7 @@ const initialState = {
       case discoveriesTypes.FETCH_DISCOVERIES:  
         return;
       case spotifyTypes.GET_USER_CURRENT_MUSIC:
-        return {...state, userCurrentMusic: action.payload}; 
+        return {...state, userCurrentMusic: action.playload}; 
       default:
         return state; 
     }

src/FLAD/redux/reducers/userReducer.tsx

@@ -7,6 +7,7 @@ const initialState = {
   userSpotifyToken : null,
   error: null,
   isLogedIn: false,
+  dark: false,
   }
   
   const userReducer = (state = initialState, action : any) => {
@@ -45,6 +46,8 @@ const initialState = {
         return {...state,
           user :null,
           isLogedIn: false  }
+      case userTypes.CHANGE_MODE:
+        return {...state, dark: !state.dark }      
       default:
         return state;
     }

src/FLAD/redux/thunk/authThunk.tsx

@@ -4,7 +4,7 @@ import axios from "axios";
 import { json } from "express";
 import { useEffect } from "react";
 import { API_URL } from "../../fladConfig";
-import { Credentials, CredentialsRegister, restoreToken, setLoginState, UserLogout } from "../actions/userActions";
+import { Credentials, CredentialsRegister, restoreToken, setLoginState, UserLogout, userChangeMode } from "../actions/userActions";
 import * as SecureStore from 'expo-secure-store';
 import { User } from "../../Model/User";
 import { UserFactory } from "../../Model/factory/UserFactory";
@@ -147,6 +147,14 @@ export const DeleteToken = () => {
   }
 }
 
+export const ChangeMode = () => {
+  //@ts-ignore
+  return async dispatch => {
+    dispatch(userChangeMode());
+    await SecureStore.deleteItemAsync(key);
+  }
+}
+
 // const logIn = (email, password) => {
 //   const action = (dispatch) => {
 //     if (email === user.email && password === user.password) {

src/FLAD/redux/thunk/spotThunk.tsx

@@ -91,7 +91,7 @@ export const getCurrentUserMusic = (resuestHandler : SpotifyService)=> {
     catch (error) {
       console.log('Error---------', error);
     }
-}
+  }
 }
 export const searchMusic = async (resuestHandler : SpotifyService,search: string) => {
   // 

src/FLAD/redux/types/userTypes.tsx

@@ -5,5 +5,6 @@ export const userTypes = {
     UPDATE_USER: 'UPDATE_USER',
     UPDATE_PROFILE_PICTURE: 'UPDATE_PROFILE_PICTURE',
     USER_LOGOUT : 'USER_LOGOUT',
-    RESTORE_TOKEN : "RESTORE_TOKEN"
+    RESTORE_TOKEN : "RESTORE_TOKEN",
+    CHANGE_MODE : "CHANGE_MODE"
  }

src/FLAD/screens/Favorite.tsx

@@ -1,15 +1,21 @@
-import React, { useEffect, useState} from 'react';
-import { Image,StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity, TouchableHighlight, SafeAreaView } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { Image, StyleSheet, Text, View, FlatList, ScrollView, TouchableOpacity, TouchableHighlight, SafeAreaView } from 'react-native';
 import CardMusic from '../components/CardMusic';
 import normalize from '../components/Normalize';
 import Music from '../Model/Music'
 import FladyComponent from '../components/FladyComponent';
-import {useNavigation} from "@react-navigation/native";
+import { useNavigation } from "@react-navigation/native";
 import { useDispatch, useSelector } from 'react-redux';
 import { getFavoritesMusic } from '../redux/actions/appActions';
 import { SharedElement } from 'react-navigation-shared-element';
+import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
+import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
 
 export default function favoritePage() {
+    //Dark Mode
+    const isDark = useSelector(state => state.userReducer.dark);
+    const style = isDark ? GraphicalCharterLight : GraphicalCharterDark;
+
     const navigation = useNavigation();
     //@ts-ignore
     const favoritesMusic = useSelector(state => state.appReducer.favoriteMusic);
@@ -19,14 +25,14 @@ export default function favoritePage() {
         { id: 2, source: require('../assets/images/FLADYStar.png') },
         { id: 3, source: require('../assets/images/FLADYHate.png') },
         { id: 4, source: require('../assets/images/FLADYCry.png') },
-      ];      
-   const navigueToDetail = (music : any) => {
-    navigation.navigate("MusicDetail", {"music": music})
+    ];
+    const navigueToDetail = (music: any) => {
+        navigation.navigate("MusicDetail", { "music": music })
     };
-      // to do
-   const [filteredDataSource, setFilteredDataSource] = useState<Music[]>([]);
-   const [search, setSearch] = useState('');
-      const searchMusic = (text: string) => {
+    // to do
+    const [filteredDataSource, setFilteredDataSource] = useState<Music[]>([]);
+    const [search, setSearch] = useState('');
+    const searchMusic = (text: string) => {
         if (text) {
             const newData = favoritesMusic.filter(function (item: Music) {
                 const search = item.title
@@ -42,31 +48,76 @@ export default function favoritePage() {
         }
     };
 
+    const styles = StyleSheet.create({
+        mainSafeArea: {
+            flex: 1,
+            backgroundColor: style.body,
+        },
+        titleContainer: {
+            marginTop: 30,
+            marginLeft: 20,
+        },
+        title: {
+            fontSize: normalize(28),
+            fontWeight: 'bold',
+            color: style.Text,
+        },
+        description: {
+            marginTop: 10,
+            fontSize: normalize(20),
+            color: '#787878',
+            marginBottom: 20
+        },
+        button: {
+            marginTop: '10%',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            alignSelf: 'center',
+            backgroundColor: 'white',
+            width: normalize(100),
+            height: normalize(100),
+            borderRadius: 21
+        },
+        buttonImage: {
+            width: normalize(46),
+            height: normalize(46),
+        },
+        shadow: {
+            shadowColor: '#000',
+            shadowOffset: {
+                width: 2,
+                height: 3,
+            },
+            shadowOpacity: 0.50,
+            shadowRadius: 3.84,
+        }
+    });
+
     return (
-        <View style={styles.body}>
-            <SafeAreaView style={styles.mainSafeArea}>
+        <SafeAreaView style={styles.mainSafeArea}>
             <View style={styles.titleContainer}>
                 <Text style={styles.title}>Favoris</Text>
                 <Text style={styles.description}>Retrouvez ici vos musiques favorites</Text>
             </View>
             <ScrollView>
                 <View>
-                    <FlatList style={{marginBottom: 30}}
+                    <FlatList style={{ marginBottom: 30 }}
                         data={favoritesMusic}
                         renderItem={({ item }) => (
-                            <TouchableHighlight onPress={() => {navigueToDetail(item)}}>
+                            <TouchableHighlight onPress={() => { navigueToDetail(item) }}>
                                 <SharedElement id={item.id}>
 
-                                <CardMusic image={item.image} title={item.title} description={item.bio} id={item.id}/>
+                                    <CardMusic image={item.image} title={item.title} description={item.bio} id={item.id} />
                                 </SharedElement>
                             </TouchableHighlight>
                         )}
-                        keyExtractor={(item: Music) => item.title }
+                        keyExtractor={(item: Music) => item.title}
                     />
                 </View>
-                <Text style={[styles.title,{marginLeft: 20}]}>What's your mood?</Text>
+                <Text style={[styles.title, { marginLeft: 20 }]}>What's your mood?</Text>
                 <FlatList
-                    style={{marginTop: 10}}
+                    style={{ marginTop: 10 }}
                     data={images}
                     keyExtractor={(item) => item.id.toString()}
                     horizontal
@@ -75,64 +126,12 @@ export default function favoritePage() {
                         <FladyComponent image={item.source} />
                     )}
                 />
-                    <TouchableOpacity style={[styles.button, styles.shadow]} 
+                <TouchableOpacity style={[styles.button, styles.shadow]}
                     // @ts-ignore
-                        onPress={() => navigation.navigate('Genre')}>
-                        <Image source={require("../assets/icons/icons/next.png")} style={styles.buttonImage}/>
-                    </TouchableOpacity>
-                </ScrollView>
-            </SafeAreaView>
-        </View>
+                    onPress={() => navigation.navigate('Genre')}>
+                    <Image source={require("../assets/icons/icons/next.png")} style={styles.buttonImage} />
+                </TouchableOpacity>
+            </ScrollView>
+        </SafeAreaView>
     );
 };
-
-const styles = StyleSheet.create({
-    mainSafeArea: {
-        flex: 1,
-        backgroundColor: "#141414",
-    },
-    body: {
-        flex: 1,
-        justifyContent: 'center',
-        backgroundColor: "#141414",
-    },
-    titleContainer: {
-        marginTop: 30,
-        marginLeft: 20,
-    },
-    title: {
-        fontSize: normalize(28),
-        fontWeight: 'bold',
-        color: 'white',
-    },
-    description: {
-        marginTop: 10,
-        fontSize: normalize(20),
-        color: '#787878',
-        marginBottom: 20
-    },
-    button: {
-        marginTop: '10%',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        alignSelf: 'center',
-        backgroundColor: 'white',
-        width: normalize(100),
-        height: normalize(100),
-        borderRadius: 21
-    },
-    buttonImage: {
-        width: normalize(46),
-        height: normalize(46),
-    },
-    shadow: {
-        shadowColor: '#000',
-        shadowOffset: {
-          width: 2,
-          height: 3,
-        },
-        shadowOpacity: 0.50,
-        shadowRadius: 3.84,
-    }
-});

src/FLAD/screens/Register.tsx

@@ -36,27 +36,27 @@ await SecureStore.setItemAsync(key, value);
 
 export default function InscriptionPage() {
   const [sound, setSound] = useState<Audio.Sound>();
-    const [rememberMe, setRememberMe] = useState(false);
-    const navigation = useNavigation();
-    const [spotifyToken, setSpotifyToken] = useState('');
-    const [spotifyID, setSpotifyIds] = useState('')
-    async function playSound() {
-      console.log('Loading Sound');
-      const { sound } = await Audio.Sound.createAsync(
-        require('../assets/sounds/Click.mp3')
-      );
-      setSound(sound);
+  const [rememberMe, setRememberMe] = useState(false);
+  const navigation = useNavigation();
+  const [spotifyToken, setSpotifyToken] = useState('');
+  const [spotifyID, setSpotifyIds] = useState('')
+  async function playSound() {
+    console.log('Loading Sound');
+    const { sound } = await Audio.Sound.createAsync(
+      require('../assets/sounds/Click.mp3')
+    );
+    setSound(sound);
 
-      console.log('Playing Sound');
-      await sound.playAsync(); 
-    }
+    console.log('Playing Sound');
+    await sound.playAsync(); 
+  }
 
-    const [username, setUsername] = useState('');
-    const [email, setEmail] = useState('');
-    const [password, setPassword] = useState('');
-    const toggleRememberMe = () => {
-        setRememberMe(!rememberMe);
-    }
+  const [username, setUsername] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const toggleRememberMe = () => {
+      setRememberMe(!rememberMe);
+  }
    
 //spotify auth
     const [request, response, promptAsync] = useAuthRequest(

src/FLAD/screens/Setting.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { View, StyleSheet, Text, Image, TouchableWithoutFeedback, Keyboard, TouchableOpacity, SafeAreaView } from 'react-native';
 import { Svg, Path } from 'react-native-svg';
 import { useNavigation } from "@react-navigation/native";
@@ -6,7 +6,12 @@ import { useDispatch } from 'react-redux';
 import normalize from '../components/Normalize';
 import { ScrollView, Switch, TextInput } from 'react-native-gesture-handler';
 import CardMusic from '../components/CardMusic';
-import { DeleteToken } from '../redux/thunk/authThunk';
+import { ChangeMode, DeleteToken } from '../redux/thunk/authThunk';
+import { useSelector } from 'react-redux';
+import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
+import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
+import SpotifyService from '../services/spotify/spotify.service';
+import { getCurrentUserMusic } from '../redux/thunk/spotThunk';
 
 // @ts-ignore
 const DismissKeyboard = ({ children }) => (
@@ -24,12 +29,15 @@ export default function Setting() {
         textInputRef.current?.focus();
     };
 
-    //Dark Mode
-    const [isCheckedDarkMode, setIsCheckedDarkMode] = useState(false);
+    const currentMusic = useSelector(state => state.appReducer.userCurrentMusic);
 
-    const toggleDarkMode =
-        () => setIsCheckedDarkMode(value => !value);
+    //Dark Mode
+    const isDark = useSelector(state => state.userReducer.dark);
+    const style = isDark ? GraphicalCharterLight : GraphicalCharterDark;
 
+    const ChangeDarkMode = () => {
+        dispatch(ChangeMode())
+    }
 
     //Notification
     const [isCheckedNotif, setIsCheckedNotif] = useState(false);
@@ -39,6 +47,7 @@ export default function Setting() {
 
     //Deconnection
     const Deconnection = () => {
+        //@ts-ignore
         dispatch(DeleteToken())
     }
     //Localisation
@@ -46,6 +55,189 @@ export default function Setting() {
 
     const toggleLocalisation =
         () => setIsCheckedLocalisation(value => !value);
+
+    //Style
+
+
+    const styles = StyleSheet.create({
+        mainSafeArea: {
+            flex: 1,
+            backgroundColor: style.body,
+        },
+        container: {
+            marginTop: 30,
+            marginHorizontal: normalize(25),
+            paddingBottom: normalize(400),
+            flex: 1,
+            backgroundColor: style.body,
+        },
+        title: {
+            fontSize: normalize(30),
+            fontWeight: 'bold',
+            color: style.Text,
+            alignItems: 'center',
+        },
+        search: {
+            paddingVertical: 9,
+            backgroundColor: style.Card,
+            borderRadius: 13,
+            flexDirection: 'row',
+            marginTop: 9,
+            marginBottom: 22
+        },
+        inputSearch: {
+            placeholderTextColor: 'red',
+            color: 'white',
+            width: normalize(350),
+        },
+        profil: {
+            paddingVertical: 9,
+            backgroundColor: style.Card,
+            borderRadius: 13,
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginBottom: normalize(45)
+        },
+        imageProfil: {
+            marginLeft: 15,
+            marginRight: 7,
+            width: 50,
+            height: 50
+        },
+        NameProfil: {
+            fontWeight: 'bold',
+            color: style.Text,
+            fontSize: normalize(22)
+        },
+        description: {
+            color: style.Text,
+            fontSize: normalize(15)
+        },
+        profilContainer: {
+            flex: 1,
+            marginLeft: 9,
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+        },
+        buttonSetting: {
+            width: normalize(17),
+            height: normalize(17),
+            marginRight: 22
+        },
+        body: {
+            paddingTop: normalize(10),
+            backgroundColor: style.Card,
+            borderRadius: 13,
+            alignItems: 'flex-start',
+            marginBottom: normalize(45),
+            paddingLeft: normalize(10),
+        },
+        view: {
+            backgroundColor: '#fe9500',
+            padding: 5,
+            borderRadius: 10,
+            marginLeft: 15,
+            marginBottom: normalize(11)
+        },
+        Option: {
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        secondOption: {
+            marginTop: normalize(11),
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        textOption: {
+            fontSize: normalize(18),
+            color: style.Text,
+            fontWeight: 'bold',
+            marginBottom: normalize(8)
+        },
+        firstOptionView: {
+            flex: 1,
+            marginLeft: 15,
+            justifyContent: 'space-between',
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderBottomWidth: 1,
+            borderColor: style.Line
+        },
+        deconnectedOption: {
+            paddingVertical: 9,
+            paddingLeft: 5,
+            backgroundColor: style.Card,
+            borderRadius: 13,
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        buttonDeconectedOption: {
+            backgroundColor: '#DF0404',
+            padding: 5,
+            borderRadius: 10,
+            marginLeft: 15
+        },
+        textDeconnectionOption: {
+            fontSize: normalize(18),
+            color: '#F80404',
+            fontWeight: 'bold',
+            marginLeft: 12
+        },
+        notification: {
+            backgroundColor: '#fe3c30',
+            padding: 5,
+            borderRadius: 10,
+            marginLeft: 15,
+            marginBottom: normalize(11)
+        },
+        secondOptionView: {
+            flex: 1,
+            marginLeft: 15,
+            justifyContent: 'space-between',
+            flexDirection: 'row',
+            alignItems: 'center',
+            borderBottomWidth: 1,
+            borderColor: style.Line
+        },
+        lastOptionView: {
+            flex: 1,
+            marginLeft: 15,
+            justifyContent: 'space-between',
+            flexDirection: 'row',
+            alignItems: 'center'
+        },
+        localisation: {
+            backgroundColor: '#0835A7',
+            padding: 5,
+            borderRadius: 10,
+            marginLeft: 15,
+            marginBottom: normalize(11)
+        },
+        lastOption: {
+            marginTop: normalize(11),
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        musicActually: {
+            paddingTop: normalize(17),
+            backgroundColor: style.Card,
+            borderRadius: 13,
+            alignItems: 'flex-start',
+            marginBottom: normalize(45)
+        },
+        titleMusic: {
+            flexDirection: 'row',
+            marginBottom: 5
+        },
+        mascot: {
+            width: normalize(90),
+            height: normalize(90),
+            position: 'absolute',
+            right: normalize(0),
+            top: normalize(10)
+        }
+
+    })
     return (
         <DismissKeyboard>
             <SafeAreaView style={styles.mainSafeArea}>
@@ -86,7 +278,7 @@ export default function Setting() {
                                 </View>
                                 <View style={styles.firstOptionView}>
                                     <Text style={styles.textOption}>Dark Mode</Text>
-                                    <Switch style={{ marginBottom: normalize(10), marginRight: 20 }} value={isCheckedDarkMode} onValueChange={toggleDarkMode} />
+                                    <Switch style={{ marginBottom: normalize(10), marginRight: 20 }} value={isDark} onValueChange={ChangeDarkMode} />
                                 </View>
                             </View>
                             <View style={styles.secondOption}>
@@ -117,18 +309,18 @@ export default function Setting() {
                         </View>
                         <View style={styles.titleMusic}>
                             <Svg width="32" height="23" viewBox="0 0 28 21">
-                                <Path d="M5.84463 0.36924C5.37582 -0.0995746 4.59968 -0.13966 4.10723 0.35111C1.57056 2.8792 0 6.37809 0 10.243C0 14.2583 1.69511 17.8783 4.40753 20.4254C4.90303 20.8906 5.65829 20.8413 6.11707 20.3826C6.65205 19.8476 6.58697 18.9969 6.07118 18.5038C3.89425 16.4228 2.53916 13.4914 2.53916 10.243C2.53916 7.11727 3.79368 4.28541 5.82764 2.22202C6.3189 1.72366 6.36867 0.893273 5.84463 0.36924Z" fill="white" />
-                                <Path d="M8.82679 3.35124C8.37113 2.89557 7.6097 2.83865 7.11937 3.32383C5.33696 5.08757 4.23193 7.53654 4.23193 10.2428C4.23193 13.1062 5.46885 15.6811 7.43617 17.4616C7.92997 17.9085 8.65988 17.8396 9.10066 17.3988C9.65615 16.8434 9.55157 15.969 9.03099 15.4783C7.63907 14.1659 6.7711 12.306 6.7711 10.2428C6.7711 8.29502 7.5446 6.52876 8.80209 5.23299C9.28672 4.73363 9.3654 3.88984 8.82679 3.35124Z" fill="white" />
-                                <Path d="M18.2575 3.35124C18.7132 2.89557 19.4746 2.83865 19.965 3.32383C21.7473 5.08757 22.8524 7.53654 22.8524 10.2428C22.8524 13.1062 21.6154 15.6811 19.6481 17.4616C19.1543 17.9085 18.4244 17.8396 17.9836 17.3988C17.4282 16.8434 17.5326 15.969 18.0533 15.4783C19.4453 14.1659 20.3132 12.306 20.3132 10.2428C20.3132 8.29502 19.5398 6.52876 18.2822 5.23299C17.7976 4.73363 17.7188 3.88984 18.2575 3.35124Z" fill="white" />
-                                <Path d="M21.2398 0.36924C21.7087 -0.0995746 22.4849 -0.13966 22.9773 0.35111C25.5139 2.8792 27.0845 6.37809 27.0845 10.243C27.0845 14.2583 25.3893 17.8783 22.677 20.4254C22.1815 20.8906 21.4262 20.8413 20.9675 20.3826C20.4324 19.8476 20.4975 18.9969 21.0133 18.5038C23.1902 16.4228 24.5453 13.4914 24.5453 10.243C24.5453 7.11727 23.2908 4.28541 21.2567 2.22202C20.7655 1.72366 20.7157 0.893273 21.2398 0.36924Z" fill="white" />
-                                <Path d="M13.5422 7.70361C12.1399 7.70361 11.0031 8.84043 11.0031 10.2428C11.0031 11.6451 12.1399 12.7819 13.5422 12.7819C14.9445 12.7819 16.0814 11.6451 16.0814 10.2428C16.0814 8.84043 14.9445 7.70361 13.5422 7.70361Z" fill="white" />
+                                <Path d="M5.84463 0.36924C5.37582 -0.0995746 4.59968 -0.13966 4.10723 0.35111C1.57056 2.8792 0 6.37809 0 10.243C0 14.2583 1.69511 17.8783 4.40753 20.4254C4.90303 20.8906 5.65829 20.8413 6.11707 20.3826C6.65205 19.8476 6.58697 18.9969 6.07118 18.5038C3.89425 16.4228 2.53916 13.4914 2.53916 10.243C2.53916 7.11727 3.79368 4.28541 5.82764 2.22202C6.3189 1.72366 6.36867 0.893273 5.84463 0.36924Z" fill={style.Text} />
+                                <Path d="M8.82679 3.35124C8.37113 2.89557 7.6097 2.83865 7.11937 3.32383C5.33696 5.08757 4.23193 7.53654 4.23193 10.2428C4.23193 13.1062 5.46885 15.6811 7.43617 17.4616C7.92997 17.9085 8.65988 17.8396 9.10066 17.3988C9.65615 16.8434 9.55157 15.969 9.03099 15.4783C7.63907 14.1659 6.7711 12.306 6.7711 10.2428C6.7711 8.29502 7.5446 6.52876 8.80209 5.23299C9.28672 4.73363 9.3654 3.88984 8.82679 3.35124Z" fill={style.Text} />
+                                <Path d="M18.2575 3.35124C18.7132 2.89557 19.4746 2.83865 19.965 3.32383C21.7473 5.08757 22.8524 7.53654 22.8524 10.2428C22.8524 13.1062 21.6154 15.6811 19.6481 17.4616C19.1543 17.9085 18.4244 17.8396 17.9836 17.3988C17.4282 16.8434 17.5326 15.969 18.0533 15.4783C19.4453 14.1659 20.3132 12.306 20.3132 10.2428C20.3132 8.29502 19.5398 6.52876 18.2822 5.23299C17.7976 4.73363 17.7188 3.88984 18.2575 3.35124Z" fill={style.Text} />
+                                <Path d="M21.2398 0.36924C21.7087 -0.0995746 22.4849 -0.13966 22.9773 0.35111C25.5139 2.8792 27.0845 6.37809 27.0845 10.243C27.0845 14.2583 25.3893 17.8783 22.677 20.4254C22.1815 20.8906 21.4262 20.8413 20.9675 20.3826C20.4324 19.8476 20.4975 18.9969 21.0133 18.5038C23.1902 16.4228 24.5453 13.4914 24.5453 10.243C24.5453 7.11727 23.2908 4.28541 21.2567 2.22202C20.7655 1.72366 20.7157 0.893273 21.2398 0.36924Z" fill={style.Text} />
+                                <Path d="M13.5422 7.70361C12.1399 7.70361 11.0031 8.84043 11.0031 10.2428C11.0031 11.6451 12.1399 12.7819 13.5422 12.7819C14.9445 12.7819 16.0814 11.6451 16.0814 10.2428C16.0814 8.84043 14.9445 7.70361 13.5422 7.70361Z" fill={style.Text} />
                             </Svg>
                             <Text style={[styles.textOption, { marginLeft: 10 }]}>En cours d’écoute...</Text>
                         </View>
 
                         <View style={styles.musicActually}>
-                            <CardMusic image="https://upload.wikimedia.org/wikipedia/en/a/a0/PNL_-_Dans_la_l%C3%A9gende.png" title='Bambina' description="PNL" />
-                            <Image source={require("../assets/images/FladyShadow.png")} style={styles.mascot} />
+                            <CardMusic image={currentMusic.image} title={currentMusic.title} description="PNL"/>
+                            <Image source={require("../assets/images/FladyShadow.png")} style={styles.mascot}/>
                         </View>
 
                         <View style={styles.deconnectedOption}>
@@ -148,183 +340,3 @@ export default function Setting() {
         </DismissKeyboard>
     );
 };
-
-const styles = StyleSheet.create({
-    mainSafeArea: {
-        flex: 1,
-        backgroundColor: "#141414",
-    },
-    container: {
-        marginTop: 30,
-        marginHorizontal: normalize(25),
-        paddingBottom: normalize(400),
-        flex: 1,
-        backgroundColor: '#141414',
-    },
-    title: {
-        fontSize: normalize(30),
-        fontWeight: 'bold',
-        color: 'white',
-        alignItems: 'center',
-    },
-    search: {
-        paddingVertical: 9,
-        backgroundColor: "#232123",
-        borderRadius: 13,
-        flexDirection: 'row',
-        marginTop: 9,
-        marginBottom: 22
-    },
-    inputSearch: {
-        placeholderTextColor: 'red',
-        color: 'white',
-        width: normalize(350),
-    },
-    profil: {
-        paddingVertical: 9,
-        backgroundColor: "#232123",
-        borderRadius: 13,
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: normalize(45)
-    },
-    imageProfil: {
-        marginLeft: 15,
-        marginRight: 7,
-        width: 50,
-        height: 50
-    },
-    NameProfil: {
-        fontWeight: 'bold',
-        color: 'white',
-        fontSize: normalize(22)
-    },
-    description: {
-        color: 'white',
-        fontSize: normalize(15)
-    },
-    profilContainer: {
-        flex: 1,
-        marginLeft: 9,
-        alignItems: 'flex-start',
-        justifyContent: 'center',
-    },
-    buttonSetting: {
-        width: normalize(17),
-        height: normalize(17),
-        marginRight: 22
-    },
-    body: {
-        paddingTop: normalize(10),
-        backgroundColor: "#232123",
-        borderRadius: 13,
-        alignItems: 'flex-start',
-        marginBottom: normalize(45),
-        paddingLeft: normalize(10),
-    },
-    view: {
-        backgroundColor: '#fe9500',
-        padding: 5,
-        borderRadius: 10,
-        marginLeft: 15,
-        marginBottom: normalize(11)
-    },
-    Option: {
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    secondOption: {
-        marginTop: normalize(11),
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    textOption: {
-        fontSize: normalize(18),
-        color: 'white',
-        fontWeight: 'bold',
-        marginBottom: normalize(8)
-    },
-    firstOptionView: {
-        flex: 1,
-        marginLeft: 15,
-        justifyContent: 'space-between',
-        flexDirection: 'row',
-        alignItems: 'center',
-        borderBottomWidth: 1,
-        borderColor: '#403F3F'
-    },
-    deconnectedOption: {
-        paddingVertical: 9,
-        paddingLeft: 5,
-        backgroundColor: "#232123",
-        borderRadius: 13,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    buttonDeconectedOption: {
-        backgroundColor: '#DF0404',
-        padding: 5,
-        borderRadius: 10,
-        marginLeft: 15
-    },
-    textDeconnectionOption: {
-        fontSize: normalize(18),
-        color: '#F80404',
-        fontWeight: 'bold',
-        marginLeft: 12
-    },
-    notification: {
-        backgroundColor: '#fe3c30',
-        padding: 5,
-        borderRadius: 10,
-        marginLeft: 15,
-        marginBottom: normalize(11)
-    },
-    secondOptionView: {
-        flex: 1,
-        marginLeft: 15,
-        justifyContent: 'space-between',
-        flexDirection: 'row',
-        alignItems: 'center',
-        borderBottomWidth: 1,
-        borderColor: '#403F3F'
-    },
-    lastOptionView: {
-        flex: 1,
-        marginLeft: 15,
-        justifyContent: 'space-between',
-        flexDirection: 'row',
-        alignItems: 'center'
-    },
-    localisation: {
-        backgroundColor: '#0835A7',
-        padding: 5,
-        borderRadius: 10,
-        marginLeft: 15,
-        marginBottom: normalize(11)
-    },
-    lastOption: {
-        marginTop: normalize(11),
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    musicActually: {
-        paddingTop: normalize(17),
-        backgroundColor: "#232123",
-        borderRadius: 13,
-        alignItems: 'flex-start',
-        marginBottom: normalize(45)
-    },
-    titleMusic: {
-        flexDirection: 'row',
-        marginBottom: 5
-    },
-    mascot: {
-        width: normalize(90),
-        height: normalize(90),
-        position: 'absolute',
-        right: normalize(0),
-        top: normalize(10)
-    }
-
-})

src/FLAD/screens/SettingProfil.tsx

@@ -4,10 +4,13 @@ import { TextInput, TouchableOpacity } from 'react-native-gesture-handler';
 import { Svg, Path } from 'react-native-svg';
 import Modal from "react-native-modal";
 import { useNavigation } from "@react-navigation/native";
+import { useSelector } from 'react-redux';
 
 import normalize from '../components/Normalize';
 import * as ImagePicker from 'expo-image-picker';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { GraphicalCharterDark } from '../assets/GraphicalCharterDark';
+import { GraphicalCharterLight } from '../assets/GraphicalCharterLight';
 
 // @ts-ignore
 const DismissKeyboard = ({ children }) => (
@@ -18,6 +21,10 @@ const DismissKeyboard = ({ children }) => (
 
 
 export default function SettingProfil() {
+    //Dark Mode
+    const isDark = useSelector(state => state.userReducer.dark);
+    const style = isDark ? GraphicalCharterLight : GraphicalCharterDark;
+
     const [image, setImage] = useState(null);
     const navigation = useNavigation();
     const [currentIndex, setCurrentIndex] = useState(0);
@@ -45,6 +52,218 @@ export default function SettingProfil() {
         }
     };
 
+    const styles = StyleSheet.create({
+        mainSafeArea: {
+            flex: 1,
+            backgroundColor: style.body,
+        },
+        container: {
+            marginTop: 20,
+            marginHorizontal: normalize(25),
+            flex: 1,
+            backgroundColor: style.body,
+        },
+        buttonSetting: {
+            width: normalize(17),
+            height: normalize(17),
+            marginRight: 5
+        },
+        modalContent: {
+            position: 'absolute',
+            top: '5%',
+            left: '-5%',
+            right: '-5%',
+            height: '100%',
+            backgroundColor: style.body,
+            borderRadius: 12
+        },
+        modalView: {
+            flexDirection: 'row',
+            marginTop: 20,
+            marginLeft: 30,
+            marginBottom: normalize(45)
+        },
+        exit: {
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            alignItems: 'center'
+        },
+        textExit: {
+            fontSize: normalize(20),
+            color: '#454545',
+            fontWeight: 'bold'
+        },
+        profilHead: {
+            alignItems: 'center',
+        },
+        title: {
+            fontSize: normalize(30),
+            fontWeight: 'bold',
+            color: style.Text,
+        },
+        imageWrapper: {
+            width: 126,
+            height: 126,
+            borderRadius: 63,
+            borderWidth: 3,
+            borderColor: style.Text,
+            overflow: 'hidden',
+            marginVertical: 20,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        imageProfil: {
+            width: 120,
+            height: 120,
+        },
+        editButton: {
+            width: 50,
+            height: 50,
+            borderRadius: 25,
+            backgroundColor: '#7C7C7C',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        body: {
+            paddingVertical: 9,
+            paddingLeft: normalize(10),
+            backgroundColor: style.Card,
+            borderRadius: 13,
+            alignItems: 'flex-start',
+            marginBottom: normalize(45)
+        },
+        textOption: {
+            fontSize: normalize(18),
+            color: style.Text,
+            fontWeight: 'bold',
+            marginLeft: 12
+        },
+        deleteOption: {
+            paddingVertical: 9,
+            paddingLeft: 5,
+            backgroundColor: style.Card,
+            borderRadius: 13,
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        textOptionPassword: {
+            fontSize: normalize(18),
+            color: '#1c77fb',
+            marginLeft: 12
+        },
+        buttonDeleteOption: {
+            backgroundColor: '#DF0404',
+            padding: 5,
+            borderRadius: 10,
+            marginLeft: 15
+        },
+        textDeleteOption: {
+            fontSize: normalize(18),
+            color: '#F80404',
+            marginLeft: 12
+        },
+        optionId: {
+            flexDirection: 'row',
+            marginBottom: 20,
+        },
+        optionMail: {
+            flexDirection: 'row',
+        },
+        textInputId: {
+            marginLeft: 50,
+            width: '57%',
+            color: 'white',
+            fontSize: normalize(18),
+        },
+        textInputMail: {
+            marginLeft: 100,
+            color: 'white',
+            width: '57%',
+            fontSize: normalize(18)
+        },
+        passwordOption: {
+            paddingVertical: 9,
+            paddingLeft: normalize(10),
+            backgroundColor: style.Card,
+            borderRadius: 13,
+            alignItems: 'flex-start',
+            marginBottom: normalize(45)
+        },
+        passwordIcon: {
+            backgroundColor: '#8e8d92',
+            padding: 5,
+            paddingHorizontal: 8,
+            borderRadius: 10,
+            marginLeft: 10
+        },
+        optionView: {
+            flexDirection: 'row',
+            marginTop: 5
+        },
+        cancelText: {
+            fontSize: normalize(20),
+            color: '#1c77fb'
+        },
+        updateText: {
+            marginLeft: 60,
+            fontSize: normalize(20),
+            color: '#404040'
+        },
+        titlePassword: {
+            fontSize: normalize(22),
+            color: style.Text,
+            marginLeft: 50
+        },
+        warning: {
+            color: '#98989f',
+            fontSize: normalize(15)
+        },
+        warningView: {
+            marginTop: 10,
+            paddingHorizontal: 40
+        },
+        bodyModal: {
+            paddingVertical: 12,
+            paddingLeft: 30,
+            marginHorizontal: normalize(25),
+            backgroundColor: style.Card,
+            borderRadius: 13,
+            alignItems: 'flex-start'
+        },
+        optionModalWithUnderline: {
+            flexDirection: 'row',
+            borderBottomWidth: 1,
+            borderColor: style.Line,
+            paddingBottom: 10,
+            marginBottom: 10
+        },
+        optionModal: {
+            flexDirection: 'row'
+        },
+        textOptionModal: {
+            fontSize: normalize(18),
+            color: style.Text,
+            fontWeight: 'bold',
+        },
+        textInputNewModal: {
+            marginLeft: 40,
+            color: style.Text,
+            width: '67.5%',
+            fontSize: normalize(18)
+        },
+        textInputConfirmModal: {
+            marginLeft: 30,
+            color: style.Text,
+            fontSize: normalize(18)
+        },
+        textInputOldModal: {
+            marginLeft: 55,
+            color: style.Text,
+            width: '67.5%',
+            fontSize: normalize(18)
+        }
+    })
+
     return (
         <DismissKeyboard>
             <SafeAreaView style={styles.mainSafeArea}>
@@ -148,215 +367,3 @@ export default function SettingProfil() {
         </DismissKeyboard>
     );
 };
-
-const styles = StyleSheet.create({
-    mainSafeArea: {
-        flex: 1,
-        backgroundColor: "#141414",
-    },
-    container: {
-        marginTop: 20,
-        marginHorizontal: normalize(25),
-        flex: 1,
-        backgroundColor: '#141414',
-    },
-    buttonSetting: {
-        width: normalize(17),
-        height: normalize(17),
-        marginRight: 5
-    },
-    modalContent: {
-        position: 'absolute',
-        top: '5%',
-        left: '-5%',
-        right: '-5%',
-        height: '100%',
-        backgroundColor: '#141414',
-        borderRadius: 12
-    },
-    modalView: {
-        flexDirection: 'row',
-        marginTop: 20,
-        marginLeft: 30,
-        marginBottom: normalize(45)
-    },
-    exit: {
-        flexDirection: 'row',
-        justifyContent: 'flex-start',
-        alignItems: 'center'
-    },
-    textExit: {
-        fontSize: normalize(20),
-        color: '#454545',
-        fontWeight: 'bold'
-    },
-    profilHead: {
-        alignItems: 'center',
-    },
-    title: {
-        fontSize: normalize(30),
-        fontWeight: 'bold',
-        color: 'white',
-    },
-    imageWrapper: {
-        width: 126,
-        height: 126,
-        borderRadius: 63,
-        borderWidth: 3,
-        borderColor: 'white',
-        overflow: 'hidden',
-        marginVertical: 20,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    imageProfil: {
-        width: 120,
-        height: 120,
-    },
-    editButton: {
-        width: 50,
-        height: 50,
-        borderRadius: 25,
-        backgroundColor: '#7C7C7C',
-        alignItems: 'center',
-        justifyContent: 'center'
-    },
-    body: {
-        paddingVertical: 9,
-        paddingLeft: normalize(10),
-        backgroundColor: "#232123",
-        borderRadius: 13,
-        alignItems: 'flex-start',
-        marginBottom: normalize(45)
-    },
-    textOption: {
-        fontSize: normalize(18),
-        color: 'white',
-        fontWeight: 'bold',
-        marginLeft: 12
-    },
-    deleteOption: {
-        paddingVertical: 9,
-        paddingLeft: 5,
-        backgroundColor: "#232123",
-        borderRadius: 13,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    textOptionPassword: {
-        fontSize: normalize(18),
-        color: '#1c77fb',
-        marginLeft: 12
-    },
-    buttonDeleteOption: {
-        backgroundColor: '#DF0404',
-        padding: 5,
-        borderRadius: 10,
-        marginLeft: 15
-    },
-    textDeleteOption: {
-        fontSize: normalize(18),
-        color: '#F80404',
-        marginLeft: 12
-    },
-    optionId: {
-        flexDirection: 'row',
-        marginBottom: 20,
-    },
-    optionMail: {
-        flexDirection: 'row',
-    },
-    textInputId: {
-        marginLeft: 50,
-        width: '57%',
-        color: 'white',
-        fontSize: normalize(18),
-    },
-    textInputMail: {
-        marginLeft: 100,
-        color: 'white',
-        width: '57%',
-        fontSize: normalize(18)
-    },
-    passwordOption: {
-        paddingVertical: 9,
-        paddingLeft: normalize(10),
-        backgroundColor: "#232123",
-        borderRadius: 13,
-        alignItems: 'flex-start',
-        marginBottom: normalize(45)
-    },
-    passwordIcon: {
-        backgroundColor: '#8e8d92',
-        padding: 5,
-        paddingHorizontal: 8,
-        borderRadius: 10,
-        marginLeft: 10
-    },
-    optionView: {
-        flexDirection: 'row',
-        marginTop: 5
-    },
-    cancelText: {
-        fontSize: normalize(20),
-        color: '#1c77fb'
-    },
-    updateText: {
-        marginLeft: 60,
-        fontSize: normalize(20),
-        color: '#404040'
-    },
-    titlePassword: {
-        fontSize: normalize(22),
-        color: 'white',
-        marginLeft: 50
-    },
-    warning: {
-        color: '#98989f',
-        fontSize: normalize(15)
-    },
-    warningView: {
-        marginTop: 10,
-        paddingHorizontal: 40
-    },
-    bodyModal: {
-        paddingVertical: 12,
-        paddingLeft: 30,
-        marginHorizontal: normalize(25),
-        backgroundColor: "#232123",
-        borderRadius: 13,
-        alignItems: 'flex-start'
-    },
-    optionModalWithUnderline: {
-        flexDirection: 'row',
-        borderBottomWidth: 1,
-        borderColor: '#403F3F',
-        paddingBottom: 10,
-        marginBottom: 10
-    },
-    optionModal: {
-        flexDirection: 'row'
-    },
-    textOptionModal: {
-        fontSize: normalize(18),
-        color: 'white',
-        fontWeight: 'bold',
-    },
-    textInputNewModal: {
-        marginLeft: 40,
-        color: 'white',
-        width: '67.5%',
-        fontSize: normalize(18)
-    },
-    textInputConfirmModal: {
-        marginLeft: 30,
-        color: 'white',
-        fontSize: normalize(18)
-    },
-    textInputOldModal: {
-        marginLeft: 55,
-        color: 'white',
-        width: '67.5%',
-        fontSize: normalize(18)
-    }
-})

src/FLAD/services/spotify/spotify.service.ts

@@ -32,6 +32,7 @@ export default class SpotifyService implements IspotifyService {
 		if (respMusic.status != 200) {
 			return null;
 		}
+		console.log(respMusic.data.items.track.id)
 		return respMusic.data.items.track.id;
 	}
 
@@ -56,7 +57,6 @@ export default class SpotifyService implements IspotifyService {
 			}
 		  };
 		const respMusic = await this.spotifyRequestHandler.spotifyFetch(requestData, fetchOptions,this.token);
-		console.log(respMusic.data);
 		// need to handle when 
 		// if (respMusic.status != 200) {
 		// 	if (respMusic.status == 400 && respMusic.data.message =='need to use Spotify premium'){