Small improvements 🔨

src/FLAD/components/CardMusicComponent.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, View, Image } from 'react-native';
 import { useSelector } from 'react-redux';
-import { colorsDark } from '../constants/colorsDark';
+import { LightTheme, DarkTheme, Theme } from "../constants/colors";
-import { colorsLight } from '../constants/colorsLight';
 import normalize from './Normalize';
 import Music from '../models/Music';
 import Artist from '../models/Artist';
@@ -14,7 +13,7 @@ type CardMusicProps = {
 export default function CardMusic(props: CardMusicProps) {
   // @ts-ignore
   const isDark = useSelector(state => state.userReducer.dark);
-  const style = isDark ? colorsDark : colorsLight;
+  const style: Theme = isDark ? DarkTheme : LightTheme;
 
   const styles = StyleSheet.create({
     container: {

src/FLAD/components/FriendComponent.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { StyleSheet, Text, View, Image } from 'react-native';
 import { useSelector } from 'react-redux';
-import { colorsDark } from '../constants/colorsDark';
+import { LightTheme, DarkTheme, Theme } from "../constants/colors";
-import { colorsLight } from '../constants/colorsLight';
 import normalize from './Normalize';
 import Message from '../models/Message';
 
@@ -16,7 +15,7 @@ export default function Friend(props: FriendProps) {
     // @ts-ignore
     const isDark = useSelector(state => state.userReducer.dark);
 
-    const style = isDark ? colorsDark : colorsLight;
+    const style: Theme = isDark ? DarkTheme : LightTheme;
 
     const source = typeof props.image === 'string' ? { uri: props.image } : props.image;
 

src/FLAD/components/NextButtonComponent.tsx

@@ -2,13 +2,12 @@ import React, { useRef, useEffect } from 'react';
 import { View, StyleSheet, TouchableOpacity, Animated, useColorScheme } from 'react-native';
 import Svg, { G, Circle } from 'react-native-svg';
 import { AntDesign } from '@expo/vector-icons';
-import { colorsDark } from '../constants/colorsDark';
+import { LightTheme, DarkTheme, Theme } from "../constants/colors";
-import { colorsLight } from '../constants/colorsLight';
 import normalize from './Normalize';
 
 // @ts-ignore
 export default function NextButton({ percentage, scrollTo }) {
-    const style = useColorScheme() == 'light' ? colorsLight : colorsDark;
+    const style: Theme = useColorScheme() == 'light' ? LightTheme : DarkTheme;
 
     const size = normalize(148);
     const strokeWidth = 2;

src/FLAD/components/OnboardingComponent.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import { View, StyleSheet, Text, Image, useWindowDimensions, useColorScheme } from 'react-native';
 import normalize from './Normalize';
-import { colorsDark } from '../constants/colorsDark';
+import { LightTheme, DarkTheme, Theme } from "../constants/colors";
-import { colorsLight } from '../constants/colorsLight';
 
 // @ts-ignore
 export default function OnboardingComponent({ item }) {
-    const style = useColorScheme() == 'light' ? colorsLight : colorsDark;
+    const style: Theme = useColorScheme() == 'light' ? LightTheme : DarkTheme;
     const { width, height } = useWindowDimensions();
     const styles = StyleSheet.create({
         container: {

src/FLAD/constants/colors.ts

@@ -0,0 +1,20 @@
+export interface Theme {
+    body: string,
+    Text: string,
+    Card: string,
+    Line: string
+}
+
+export const LightTheme: Theme = {
+    body: "#f2f2f6",
+    Text: "black",
+    Card: "#fff",
+    Line: "#e2e2e3"
+}
+
+export const DarkTheme: Theme = {
+    body: "#141414",
+    Text: "white",
+    Card: "#232123",
+    Line: "#403F3F"
+}

src/FLAD/constants/colorsDark.ts

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

src/FLAD/constants/colorsLight.ts

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

src/FLAD/navigation/FavoriteNavigation.tsx

@@ -3,20 +3,20 @@ import Favorite from '../screens/FavoriteScreen';
 import DetailScreen from '../screens/DetailScreen';
 import { createSharedElementStackNavigator } from 'react-navigation-shared-element';
 
-const Stack = createSharedElementStackNavigator();
+const FavoriteStack = createSharedElementStackNavigator();
 export default function MusicNavigation() {
   return (
-    <Stack.Navigator initialRouteName="Favorite">
+    <FavoriteStack.Navigator initialRouteName="Favorite">
-      <Stack.Screen
+      <FavoriteStack.Screen
         name="Favorite"
         component={Favorite}
         options={{ headerShown: false }}
       />
-      <Stack.Screen
+      <FavoriteStack.Screen
         name="Detail"
         component={DetailScreen}
         options={{ headerShown: false }}
       />
-    </Stack.Navigator>
+    </FavoriteStack.Navigator>
   )
 }

src/FLAD/navigation/MessagingNavigation.tsx

@@ -3,15 +3,14 @@ import ConversationScreen from '../screens/ConversationScreen'
 import { Image, View, Text, StyleSheet } from 'react-native';
 import ChatScreen from '../screens/ChatScreen';
 import { createStackNavigator } from '@react-navigation/stack';
-import { colorsDark } from "../constants/colorsDark";
+import { LightTheme, DarkTheme, Theme } from "../constants/colors";
-import { colorsLight } from "../constants/colorsLight";
 import { useSelector } from 'react-redux';
 
 export default function MessagingNavigation() {
   // @ts-ignore
   const isDark = useSelector(state => state.userReducer.dark);
-  const style = isDark ? colorsDark : colorsLight;
+  const style: Theme = isDark ? DarkTheme : LightTheme;
-  const Stack = createStackNavigator();
+  const MessagingStack = createStackNavigator();
 
   const styles = StyleSheet.create({
     headerContainer: {
@@ -32,13 +31,13 @@ export default function MessagingNavigation() {
   });
 
   return (
-    <Stack.Navigator initialRouteName="Conversation">
+    <MessagingStack.Navigator initialRouteName="Conversation">
-      <Stack.Screen
+      <MessagingStack.Screen
         name="Conversation"
         component={ConversationScreen}
         options={{ headerShown: false }}
       />
-      <Stack.Screen
+      <MessagingStack.Screen
         name="Chat"
         component={ChatScreen}
         options={({ route }) => ({
@@ -65,6 +64,6 @@ export default function MessagingNavigation() {
           },
         })}
       />
-    </Stack.Navigator>
+    </MessagingStack.Navigator>
   )
 }

src/FLAD/navigation/SettingNavigation.tsx

@@ -4,19 +4,19 @@ import ProfilScreen from '../screens/ProfilScreen';
 import { createStackNavigator } from '@react-navigation/stack';
 
 export default function SettingNavigation() {
-  const Stack = createStackNavigator();
+  const SettingStack = createStackNavigator();
   return (
-    <Stack.Navigator initialRouteName="Setting">
+    <SettingStack.Navigator initialRouteName="Setting">
-      <Stack.Screen
+      <SettingStack.Screen
         name="Setting"
         component={SettingScreen}
         options={{ headerShown: false }}
       />
-      <Stack.Screen
+      <SettingStack.Screen
         name="Account"
         component={ProfilScreen}
         options={{ headerShown: false }}
       />
-    </Stack.Navigator>
+    </SettingStack.Navigator>
   )
 }

src/FLAD/navigation/SpotNavigation.tsx

@@ -4,19 +4,19 @@ import DetailScreen from '../screens/DetailScreen';
 import { createStackNavigator } from '@react-navigation/stack';
 
 export default function SpotNavigation() {
-  const Stack = createStackNavigator();
+  const SpotStack = createStackNavigator();
   return (
-    <Stack.Navigator>
+    <SpotStack.Navigator>
-      <Stack.Screen
+      <SpotStack.Screen
         name="Spot"
         component={SpotScreen}
         options={{ headerShown: false }}
       />
-      <Stack.Screen
+      <SpotStack.Screen
         name="Detail"
         component={DetailScreen}
         options={{ headerShown: false }}
       />
-    </Stack.Navigator>
+    </SpotStack.Navigator>
   )
 }

src/FLAD/navigation/StartNavigation.tsx

@@ -6,26 +6,26 @@ import { createStackNavigator } from '@react-navigation/stack';
 import { NavigationContainer } from '@react-navigation/native';
 
 export default function StartNavigation() {
-  const Stack = createStackNavigator();
+  const StartStack = createStackNavigator();
   return (
     <NavigationContainer>
-      <Stack.Navigator>
+      <StartStack.Navigator>
-        <Stack.Screen
+        <StartStack.Screen
           name="Start"
           component={StartScreen}
           options={{ headerShown: false }}
         />
-        <Stack.Screen
+        <StartStack.Screen
           name="Login"
           component={LoginScreen}
           options={{ headerShown: false }}
         />
-        <Stack.Screen
+        <StartStack.Screen
           name="Register"
           component={RegisterScreen}
           options={{ headerShown: false }}
         />
-      </Stack.Navigator>
+      </StartStack.Navigator>
     </NavigationContainer>
 
   )

src/FLAD/screens/ChatScreen.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Bubble, GiftedChat, IMessage, InputToolbar, Send } from "react-native-gifted-chat";
 import { faFileImage, faMicrophone } from "@fortawesome/free-solid-svg-icons"
-import { colorsDark } from "../constants/colorsDark";
+import { LightTheme, DarkTheme, Theme } from "../constants/colors";
-import { colorsLight } from "../constants/colorsLight";
 import { useDispatch, useSelector } from 'react-redux';
 import { SafeAreaView, TouchableOpacity, View } from "react-native";
 import Icon from 'react-native-vector-icons/Ionicons';
@@ -20,7 +19,7 @@ export default function Chat({ route }) {
 
   // @ts-ignore
   const isDark = useSelector(state => state.userReducer.dark);
-  const style = isDark ? colorsDark : colorsLight;
+  const style: Theme = isDark ? DarkTheme : LightTheme;
 
   const dispatch = useDispatch();
 

src/FLAD/screens/ConversationScreen.tsx

@@ -1,12 +1,11 @@
 import { useNavigation } from "@react-navigation/native";
 import { StyleSheet, Text, View, FlatList, TouchableOpacity, RefreshControl } from "react-native";
 import { useSelector, useDispatch } from "react-redux";
-import { colorsDark } from '../constants/colorsDark';
+import { LightTheme, DarkTheme, Theme } from "../constants/colors";
-import { colorsLight } from '../constants/colorsLight';
 import Friend from "../components/FriendComponent";
 import normalize from '../components/Normalize';
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { getConversations } from "../redux/thunk/chatThunk";
 
 export default function ConversationScreen() {
@@ -35,7 +34,7 @@ export default function ConversationScreen() {
 
     const navigation = useNavigation();
 
-    const style = isDark ? colorsDark : colorsLight;
+    const style: Theme = isDark ? DarkTheme : LightTheme;
 
     const insets = useSafeAreaInsets();
 

src/FLAD/screens/FavoriteScreen.tsx

@@ -6,8 +6,7 @@ import { Svg, Path } from 'react-native-svg';
 import FladyComponent from '../components/FladyComponent';
 import { useNavigation, useFocusEffect } from "@react-navigation/native";
 import { useSelector, useDispatch } from 'react-redux';
-import { colorsDark } from '../constants/colorsDark';
+import { LightTheme, DarkTheme, Theme } from "../constants/colors";
-import { colorsLight } from '../constants/colorsLight';
 import { getFavoriteMusic } from '../redux/thunk/appThunk';
 import { Spot } from '../models/Spot';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -17,7 +16,7 @@ export default function FavoriteScreen() {
 
     // @ts-ignore
     const isDark = useSelector(state => state.userReducer.dark);
-    const style = isDark ? colorsDark : colorsLight;
+    const style: Theme = isDark ? DarkTheme : LightTheme;
     const [refreshing, setRefreshing] = useState(false);
 
     const images = [

src/FLAD/screens/ProfilScreen.tsx

@@ -9,8 +9,7 @@ import * as AuthSession from 'expo-auth-session';
 import normalize from '../components/Normalize';
 import * as ImagePicker from 'expo-image-picker';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { colorsDark } from '../constants/colorsDark';
+import { LightTheme, DarkTheme, Theme } from "../constants/colors";
-import { colorsLight } from '../constants/colorsLight';
 import { deleteUser } from '../redux/thunk/authThunk';
 import { setImage, setMail, setName, setPassword, setSpotify } from '../redux/thunk/userThunk';
 import { setErrorUpdate } from '../redux/actions/userActions';
@@ -38,7 +37,7 @@ export default function ProfilScreen() {
     const [oldPassword, setOldPassword] = React.useState('');
     const [newPassword, setNewPassword] = React.useState('');
     const [confirmPassword, setConfirmPassword] = React.useState('');
-    const style = isDark ? colorsDark : colorsLight;
+    const style: Theme = isDark ? DarkTheme : LightTheme;
     const navigation = useNavigation();
     const [isModalVisible, setIsModalVisible] = React.useState(false);
     const dispatch = useDispatch();

src/FLAD/screens/SettingScreen.tsx

@@ -9,8 +9,7 @@ import { ScrollView, Switch, TextInput } from 'react-native-gesture-handler';
 import CardMusic from '../components/CardMusicComponent';
 import { logout } from '../redux/thunk/authThunk';
 import { darkMode } from '../redux/thunk/userThunk';
-import { colorsDark } from '../constants/colorsDark';
+import { LightTheme, DarkTheme, Theme } from "../constants/colors";
-import { colorsLight } from '../constants/colorsLight';
 import { User } from '../models/User';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import * as Location from 'expo-location';
@@ -40,7 +39,7 @@ export default function SettingScreen() {
     // @ts-ignore
     const isDark = useSelector(state => state.userReducer.dark);
     const [locationPermission, setLocationPermission] = useState(false);
-    const style = isDark ? colorsDark : colorsLight;
+    const style: Theme = isDark ? DarkTheme : LightTheme;
 
     async function ChangeDarkMode() {
         const newValue = !isDark;

src/FLAD/screens/SpotScreen.tsx

@@ -13,15 +13,14 @@ import Artist from '../models/Artist';
 import { addMusicToFavorite } from '../redux/thunk/appThunk';
 import { addToPlaylist, removeSpot } from '../redux/thunk/spotThunk';
 import UserInfoBadge from '../components/UserInfoBadgeComponent';
-import { colorsDark } from '../constants/colorsDark';
+import { LightTheme, DarkTheme, Theme } from "../constants/colors";
-import { colorsLight } from '../constants/colorsLight';
 
 export default function SpotScreen() {
   //@ts-ignore
   const spotReducer: Spot[] = useSelector(state => state.appReducer.spot)
   // @ts-ignore
   const isDark = useSelector(state => state.userReducer.dark);
-  const style = isDark ? colorsDark : colorsLight;
+  const style: Theme = isDark ? DarkTheme : LightTheme;
 
   const [cards, setCards] = useState<Spot[]>(spotReducer);
   const [currentCard, setcurrentCard] = useState<Spot>(cards[cards.length - 1]);

src/FLAD/screens/StartScreen.tsx

@@ -6,11 +6,10 @@ import OnboardingItem from '../components/OnboardingComponent';
 import Paginator from '../components/PaginatorComponent';
 import NextButton from '../components/NextButtonComponent';
 import slides from '../data/slides';
-import { colorsDark } from '../constants/colorsDark';
+import { LightTheme, DarkTheme, Theme } from "../constants/colors";
-import { colorsLight } from '../constants/colorsLight';
 
 export default function StartScreen() {
-    const style = useColorScheme() == 'light' ? colorsLight : colorsDark;
+    const style: Theme = useColorScheme() == 'light' ? LightTheme : DarkTheme;
     const [currentIndex, setCurrentIndex] = useState(0);
     const scrollX = useRef(new Animated.Value(0)).current;
     const slidesRef = useRef(null);