Merge pull request 'part7' (#10) from part7 into master

Reviewed-on: #10

src/assets/Theme.ts

@@ -7,14 +7,14 @@ export const greyColor = "rgba(140, 140, 161, 1)";
 export const whiteColor = "rgba(239, 239, 253, 1)";
 
 
-export const DefaultTheme: Theme = {
+export const LightTheme: Theme = {
     dark: false,
     colors: {
-        primary: 'rgb(0, 122, 255)',
-        background: "rgba(239, 239, 253, 1)",
-        card: 'rgb(255, 255, 255)',
-        text: 'rgb(28, 28, 30)',
-        border: 'rgb(216, 216, 216)',
+        primary: darksalmonColor,
+        background: whiteColor,
+        card: greyColor,
+        text: "black",
+        border: whiteColor,
         notification: 'rgb(255, 59, 48)',
     },
 };
@@ -22,11 +22,11 @@ export const DefaultTheme: Theme = {
 export const DarkTheme: Theme = {
     dark: true,
     colors: {
-        primary: 'rgb(10, 132, 255)',
-        background: "rgba(140, 140, 161, 1)",
-        card: 'rgb(18, 18, 18)',
-        text: 'rgb(229, 229, 231)',
-        border: 'rgb(39, 39, 41)',
+        primary: darksalmonColor,
+        background: purpleColor,
+        card: indigoColor,
+        text: whiteColor,
+        border: greyColor,
         notification: 'rgb(255, 69, 58)',
     },
 };

src/screens/AddScreen.tsx

@@ -8,6 +8,7 @@ import {darksalmonColor, greyColor, indigoColor, purpleColor, whiteColor} from "
 import {getCustomJokesList, getSampleJokesList} from "../redux/thunk/GetThunk";
 import React, {useEffect} from "react";
 import {postCustomJoke} from "../redux/thunk/PostThunk";
+import {useTheme} from "@react-navigation/native";
 
 export default function AddScreen() {
     // @ts-ignore
@@ -31,6 +32,8 @@ export default function AddScreen() {
         clearFields();
     };
 
+    const styles = themeSettings()
+
     return (
         <View style={styles.container}>
             <Text style={styles.text}>Blague</Text>
@@ -85,16 +88,19 @@ export default function AddScreen() {
     )
 };
 
+
+export function themeSettings() {
+    const theme = useTheme();
+    const colors = theme.colors;
     const styles = StyleSheet.create({
         container: {
-
-        backgroundColor: purpleColor,
+            backgroundColor: colors.background,
             width: "100%",
             height: "100%",
         },
         textInput: {
-        backgroundColor: indigoColor,
-        color: whiteColor,
+            backgroundColor: colors.card,
+            color: colors.text,
             width: "90%",
             alignSelf: "center",
             minHeight: 100
@@ -102,14 +108,14 @@ const styles = StyleSheet.create({
         eraseButton: {
             borderRadius: 5,
             alignItems: "center",
-        backgroundColor : whiteColor,
+            backgroundColor: colors.primary,
             height: 50,
             margin: 10
         },
         createButton: {
             borderRadius: 5,
             alignItems: "center",
-        backgroundColor : darksalmonColor,
+            backgroundColor: colors.primary,
             height: 50,
             margin: 10,
             marginTop: 30
@@ -118,16 +124,16 @@ const styles = StyleSheet.create({
             margin: 10,
             textAlign: "center",
             fontWeight: "700",
-        color : whiteColor,
+            color: colors.text,
         },
         eraseTextButton: {
             margin: 10,
             textAlign: "center",
             fontWeight: "700",
-        color : darksalmonColor,
+            color: colors.text,
         },
         text: {
-        color:whiteColor,
+            color: colors.text,
             paddingBottom: 10,
             paddingTop: 25,
             marginLeft: 19,
@@ -137,7 +143,7 @@ const styles = StyleSheet.create({
             paddingTop: 15,
             marginRight: 19,
             fontSize: 12,
-        color: whiteColor,
+            color: colors.text,
         },
         viewCounter: {
             alignItems: 'flex-end',
@@ -145,3 +151,5 @@ const styles = StyleSheet.create({
             right: 10,
         }
     })
+    return styles
+}

src/screens/Catalogue.tsx

@@ -5,6 +5,7 @@ import {darksalmonColor, purpleColor, whiteColor} from "../assets/Theme";
 import {useDispatch, useSelector} from "react-redux";
 import React, {useEffect, useState} from "react";
 import {getCustomJokesList, getSampleJokesList} from "../redux/thunk/GetThunk";
+import {useTheme} from "@react-navigation/native";
 const eye = require("../assets/eye_icon.png")
 const hideEye = require("../assets/eye_off_icon.png")
 
@@ -39,6 +40,8 @@ export default function Catalogue() {
         }
     }, [dispatch, customJokes, sampleJokes]);
 
+    const styles = themeSettings()
+
     return (
         <SafeAreaView style={styles.container}>
             <View style={styles.columnContainer}>
@@ -59,14 +62,17 @@ export default function Catalogue() {
     )
 };
 
+export function themeSettings() {
+    const theme = useTheme();
+    const colors = theme.colors;
     const styles = StyleSheet.create({
         container: {
-        backgroundColor: purpleColor,
+            backgroundColor: colors.background,
             flex: 1,
         },
         Button: {
             borderRadius: 5,
-        backgroundColor : darksalmonColor,
+            backgroundColor: colors.primary,
             height: 40,
             width: 60,
             flexDirection: "row"
@@ -84,13 +90,13 @@ const styles = StyleSheet.create({
             top: 5,
             alignSelf: "center",
             backgroundColor: "none",
-        tintColor : whiteColor,
+            tintColor: colors.notification,
             justifyContent: "center",
             alignItems: "center",
         },
         TextButton: {
             fontSize: 18,
-        color: whiteColor,
+            color: colors.text,
             textAlign: 'center',
             fontWeight: 'bold',
             margin: 10,
@@ -104,3 +110,5 @@ const styles = StyleSheet.create({
             alignItems: "center",
         }
     });
+    return styles
+}

src/screens/Favorites.tsx

@@ -5,6 +5,7 @@ import {darksalmonColor, purpleColor, whiteColor} from "../assets/Theme";
 import {useDispatch, useSelector} from "react-redux";
 import React, {useEffect, useState} from "react";
 import {getCustomJokesList, getSampleJokesList} from "../redux/thunk/GetThunk";
+import {useTheme} from "@react-navigation/native";
 
 export default function Favorites() {
     // @ts-ignore
@@ -39,6 +40,8 @@ export default function Favorites() {
         }
     }, [dispatch, customJokes, sampleJokes]);
 
+    const styles = themeSettings()
+
     return (
         <SafeAreaView style={styles.container}>
             <View style={styles.columnContainer}>
@@ -59,14 +62,18 @@ export default function Favorites() {
     )
 };
 
+
+export function themeSettings() {
+    const theme = useTheme();
+    const colors = theme.colors;
     const styles = StyleSheet.create({
         container: {
-        backgroundColor: purpleColor,
+            backgroundColor: colors.background,
             flex: 1,
         },
         Button: {
             borderRadius: 5,
-        backgroundColor : darksalmonColor,
+            backgroundColor: colors.background,
             height: 40,
             width: 60,
             flexDirection: "row"
@@ -84,13 +91,13 @@ const styles = StyleSheet.create({
             top: 5,
             alignSelf: "center",
             backgroundColor: "none",
-        tintColor : whiteColor,
+            tintColor: colors.notification,
             justifyContent: "center",
             alignItems: "center",
         },
         TextButton: {
             fontSize: 18,
-        color: whiteColor,
+            color: colors.notification,
             textAlign: 'center',
             fontWeight: 'bold',
             margin: 10,
@@ -104,3 +111,5 @@ const styles = StyleSheet.create({
             alignItems: "center",
         }
     });
+    return styles
+}

src/screens/HomeScreen.tsx

@@ -6,6 +6,8 @@ import Categs from "../components/Categs";
 import {useDispatch, useSelector} from "react-redux";
 import {useEffect} from "react";
 import {getCategoriesList, getLastSampleJokesList} from "../redux/thunk/GetThunk";
+import {useTheme} from "@react-navigation/native";
+import styleToBarStyle from "expo-status-bar/build/styleToBarStyle";
 
 export default function Catalogue() {
     // @ts-ignore
@@ -23,6 +25,9 @@ export default function Catalogue() {
         };
         loadJokes();
     }, [dispatch]);
+
+    const styles = themeSettings()
+
     return (
         <>
             <View style={styles.container}>
@@ -48,9 +53,12 @@ export default function Catalogue() {
     )
 };
 
+export function themeSettings() {
+    const theme = useTheme();
+    const colors = theme.colors;
     const styles = StyleSheet.create({
         container: {
-        backgroundColor: purpleColor,
+            backgroundColor: colors.background,
             flex: 1,
         },
         top: {
@@ -62,7 +70,7 @@ const styles = StyleSheet.create({
         },
         textAccueil: {
             fontSize: 25,
-        color: darksalmonColor,
+            color: colors.text,
             fontWeight: "bold",
         },
         Jokes: {
@@ -75,7 +83,7 @@ const styles = StyleSheet.create({
             alignItems: "center"
         },
         textLastJokes: {
-        color: whiteColor,
+            color: colors.border,
             fontSize: 20,
             fontWeight: "bold",
         },
@@ -87,7 +95,7 @@ const styles = StyleSheet.create({
             flexDirection: "row",
         },
         textBestCateg: {
-        color: whiteColor,
+            color: colors.text,
             fontSize: 20,
             fontWeight: "bold",
         },
@@ -96,3 +104,5 @@ const styles = StyleSheet.create({
             marginTop: 30,
         }
     });
+    return styles
+}

src/screens/JokeDetailsScreen.tsx

@@ -8,6 +8,7 @@ import JokeDetail from "../components/JokeDetail";
 import {AppDispatch, AppState} from "../redux/store";
 import {CustomJoke} from "../model/CustomJoke";
 import {SampleJoke} from "../model/SampleJoke";
+import {useTheme} from "@react-navigation/native";
 
 export default function JokeDetailsScreen({route}) {
     const idJokeDetail = route.params.idJoke;
@@ -16,6 +17,8 @@ export default function JokeDetailsScreen({route}) {
     const [isCustomJoke, setCustomJoke] = useState(false);
     const dispatch = useDispatch<AppDispatch>();
 
+    const styles = themeSettings();
+
     useEffect(() => {
         if(typeof idJokeDetail == 'number') {
             const loadJoke = async () => {
@@ -41,9 +44,15 @@ export default function JokeDetailsScreen({route}) {
     )
 };
 
+export function themeSettings() {
+    const theme = useTheme();
+    const colors = theme.colors;
+
     const styles = StyleSheet.create({
         container: {
-        backgroundColor: purpleColor,
+            backgroundColor: colors.background,
             flex: 1,
         }
     });
+    return styles
+}

src/screens/Settings.tsx

@@ -1,8 +1,11 @@
 import '../types/extension';
 import {Image, StyleSheet, Switch, Text, View} from "react-native";
-import {darksalmonColor, DefaultTheme, DarkTheme, greyColor, indigoColor, purpleColor, whiteColor} from "../assets/Theme";
-import React, {useEffect, useState} from "react";
-import {useTheme} from "@react-navigation/native";
+import {
+    darksalmonColor,
+    whiteColor
+} from "../assets/Theme";
+import React from "react";
+import {DarkTheme, DefaultTheme, useTheme} from "@react-navigation/native";
 import {storeTheme} from "../redux/thunk/ThemeThunk";
 
 export default function Catalogue() {
@@ -66,25 +69,25 @@ export function themeSettings() {
         title: {
             padding: 10,
             fontSize: 20,
-            color: whiteColor,
+            color: colors.text,
             fontWeight: 'bold'
         },
         imageButton : {
             width: 30,
             height:30,
             alignSelf : "center",
-            tintColor: darksalmonColor,
+            tintColor: colors.primary,
         },
         switchMode: {
             display: 'flex',
             flexDirection: 'row',
             justifyContent: 'space-between',
-            backgroundColor: indigoColor,
+            backgroundColor: colors.card,
             padding: 20,
             margin: 10,
         },
         darkModeText: {
-            color: whiteColor,
+            color: colors.text,
             fontSize: 20,
             marginLeft: 10,
             paddingTop: 5,