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,63 +88,68 @@ export default function AddScreen() {
     )
 };
 
-const styles = StyleSheet.create({
-    container: {
 
-        backgroundColor: purpleColor,
-        width: "100%",
-        height: "100%",
-    },
-    textInput: {
-        backgroundColor: indigoColor,
-        color: whiteColor,
-        width: "90%",
-        alignSelf:"center",
-        minHeight: 100
-    },
-    eraseButton:{
-        borderRadius : 5,
-        alignItems: "center",
-        backgroundColor : whiteColor,
-        height:50,
-        margin: 10
-    },
-    createButton:{
-        borderRadius : 5,
-        alignItems: "center",
-        backgroundColor : darksalmonColor,
-        height:50,
-        margin: 10,
-        marginTop: 30
-    },
-    createTextButton : {
-        margin: 10,
-        textAlign : "center",
-        fontWeight: "700",
-        color : whiteColor,
-    },
-    eraseTextButton : {
-        margin: 10,
-        textAlign : "center",
-        fontWeight: "700",
-        color : darksalmonColor,
-    },
-    text: {
-        color:whiteColor,
-        paddingBottom: 10,
-        paddingTop: 25,
-        marginLeft: 19,
-        fontSize: 20,
-    },
-    textSize: {
-        paddingTop: 15,
-        marginRight: 19,
-        fontSize: 12,
-        color: whiteColor,
-    },
-    viewCounter: {
-        alignItems: 'flex-end',
-        bottom: 10,
-        right: 10,
-    }
-})
+export function themeSettings() {
+    const theme = useTheme();
+    const colors = theme.colors;
+    const styles = StyleSheet.create({
+        container: {
+            backgroundColor: colors.background,
+            width: "100%",
+            height: "100%",
+        },
+        textInput: {
+            backgroundColor: colors.card,
+            color: colors.text,
+            width: "90%",
+            alignSelf: "center",
+            minHeight: 100
+        },
+        eraseButton: {
+            borderRadius: 5,
+            alignItems: "center",
+            backgroundColor: colors.primary,
+            height: 50,
+            margin: 10
+        },
+        createButton: {
+            borderRadius: 5,
+            alignItems: "center",
+            backgroundColor: colors.primary,
+            height: 50,
+            margin: 10,
+            marginTop: 30
+        },
+        createTextButton: {
+            margin: 10,
+            textAlign: "center",
+            fontWeight: "700",
+            color: colors.text,
+        },
+        eraseTextButton: {
+            margin: 10,
+            textAlign: "center",
+            fontWeight: "700",
+            color: colors.text,
+        },
+        text: {
+            color: colors.text,
+            paddingBottom: 10,
+            paddingTop: 25,
+            marginLeft: 19,
+            fontSize: 20,
+        },
+        textSize: {
+            paddingTop: 15,
+            marginRight: 19,
+            fontSize: 12,
+            color: colors.text,
+        },
+        viewCounter: {
+            alignItems: 'flex-end',
+            bottom: 10,
+            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,48 +62,53 @@ export default function Catalogue() {
     )
 };
 
-const styles = StyleSheet.create({
-    container: {
-        backgroundColor: purpleColor,
-        flex:1,
-    },
-    Button:{
-        borderRadius : 5,
-        backgroundColor : darksalmonColor,
-        height:40,
-        width : 60,
-        flexDirection : "row"
-    },
-    jokeTypeContainer :{
-        display : "flex",
-        flex : 1,
-        flexDirection: "row",
-        alignItems : "center"
-    },
-    imageButton : {
-        margin : 10,
-        width: 40,
-        height:30,
-        top : 5,
-        alignSelf : "center",
-        backgroundColor: "none",
-        tintColor : whiteColor,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    TextButton : {
-        fontSize: 18,
-        color: whiteColor,
-        textAlign: 'center',
-        fontWeight: 'bold',
-        margin: 10,
-    },
-    columnContainer: {
-        marginLeft: 20,
-        marginRight: 20,
-        width: '90%',
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-    }
-});
+export function themeSettings() {
+    const theme = useTheme();
+    const colors = theme.colors;
+    const styles = StyleSheet.create({
+        container: {
+            backgroundColor: colors.background,
+            flex: 1,
+        },
+        Button: {
+            borderRadius: 5,
+            backgroundColor: colors.primary,
+            height: 40,
+            width: 60,
+            flexDirection: "row"
+        },
+        jokeTypeContainer: {
+            display: "flex",
+            flex: 1,
+            flexDirection: "row",
+            alignItems: "center"
+        },
+        imageButton: {
+            margin: 10,
+            width: 40,
+            height: 30,
+            top: 5,
+            alignSelf: "center",
+            backgroundColor: "none",
+            tintColor: colors.notification,
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        TextButton: {
+            fontSize: 18,
+            color: colors.text,
+            textAlign: 'center',
+            fontWeight: 'bold',
+            margin: 10,
+        },
+        columnContainer: {
+            marginLeft: 20,
+            marginRight: 20,
+            width: '90%',
+            flexDirection: "row",
+            justifyContent: "space-between",
+            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,48 +62,54 @@ export default function Favorites() {
     )
 };
 
-const styles = StyleSheet.create({
-    container: {
-        backgroundColor: purpleColor,
-        flex:1,
-    },
-    Button:{
-        borderRadius : 5,
-        backgroundColor : darksalmonColor,
-        height:40,
-        width : 60,
-        flexDirection : "row"
-    },
-    jokeTypeContainer :{
-        display : "flex",
-        flex : 1,
-        flexDirection: "row",
-        alignItems : "center"
-    },
-    imageButton : {
-        margin : 10,
-        width: 40,
-        height:30,
-        top : 5,
-        alignSelf : "center",
-        backgroundColor: "none",
-        tintColor : whiteColor,
-        justifyContent: "center",
-        alignItems: "center",
-    },
-    TextButton : {
-        fontSize: 18,
-        color: whiteColor,
-        textAlign: 'center',
-        fontWeight: 'bold',
-        margin: 10,
-    },
-    columnContainer: {
-        marginLeft: 20,
-        marginRight: 20,
-        width: '90%',
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-    }
-});
+
+export function themeSettings() {
+    const theme = useTheme();
+    const colors = theme.colors;
+    const styles = StyleSheet.create({
+        container: {
+            backgroundColor: colors.background,
+            flex: 1,
+        },
+        Button: {
+            borderRadius: 5,
+            backgroundColor: colors.background,
+            height: 40,
+            width: 60,
+            flexDirection: "row"
+        },
+        jokeTypeContainer: {
+            display: "flex",
+            flex: 1,
+            flexDirection: "row",
+            alignItems: "center"
+        },
+        imageButton: {
+            margin: 10,
+            width: 40,
+            height: 30,
+            top: 5,
+            alignSelf: "center",
+            backgroundColor: "none",
+            tintColor: colors.notification,
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        TextButton: {
+            fontSize: 18,
+            color: colors.notification,
+            textAlign: 'center',
+            fontWeight: 'bold',
+            margin: 10,
+        },
+        columnContainer: {
+            marginLeft: 20,
+            marginRight: 20,
+            width: '90%',
+            flexDirection: "row",
+            justifyContent: "space-between",
+            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,51 +53,56 @@ export default function Catalogue() {
     )
 };
 
-const styles = StyleSheet.create({
-    container: {
-        backgroundColor: purpleColor,
-        flex:1,
-    },
-    top: {
-        alignItems: "center",
-    },
-    cat: {
-        height:160,
-        width: 160
-    },
-    textAccueil: {
-        fontSize: 25,
-        color: darksalmonColor,
-        fontWeight: "bold",
-    },
-    Jokes: {
-        display:"flex",
-        flexDirection:"column",
-        marginTop: 50,
-        marginLeft: 20,
-    },
-    scrollList: {
-        alignItems: "center"
-    },
-    textLastJokes: {
-        color: whiteColor,
-        fontSize: 20,
-        fontWeight: "bold",
-    },
-    bestCateg: {
-        marginTop: 30,
-        marginLeft: 20,
-    },
-    horizBestCateg: {
-        flexDirection: "row",
-    },
-    textBestCateg: {
-        color: whiteColor,
-        fontSize: 20,
-        fontWeight: "bold",
-    },
-    horizChip: {
-        flexDirection: "row",
-        marginTop: 30,
-    }
-});
+export function themeSettings() {
+    const theme = useTheme();
+    const colors = theme.colors;
+    const styles = StyleSheet.create({
+        container: {
+            backgroundColor: colors.background,
+            flex: 1,
+        },
+        top: {
+            alignItems: "center",
+        },
+        cat: {
+            height: 160,
+            width: 160
+        },
+        textAccueil: {
+            fontSize: 25,
+            color: colors.text,
+            fontWeight: "bold",
+        },
+        Jokes: {
+            display: "flex",
+            flexDirection: "column",
+            marginTop: 50,
+            marginLeft: 20,
+        },
+        scrollList: {
+            alignItems: "center"
+        },
+        textLastJokes: {
+            color: colors.border,
+            fontSize: 20,
+            fontWeight: "bold",
+        },
+        bestCateg: {
+            marginTop: 30,
+            marginLeft: 20,
+        },
+        horizBestCateg: {
+            flexDirection: "row",
+        },
+        textBestCateg: {
+            color: colors.text,
+            fontSize: 20,
+            fontWeight: "bold",
+        },
+        horizChip: {
+            flexDirection: "row",
+            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}) {
     )
 };
 
-const styles = StyleSheet.create({
-    container: {
-        backgroundColor: purpleColor,
-        flex:1,
-    }
-});
+export function themeSettings() {
+    const theme = useTheme();
+    const colors = theme.colors;
+
+    const styles = StyleSheet.create({
+        container: {
+            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() {
@@ -48,7 +51,7 @@ export function themeSettings() {
     const theme = useTheme();
     const colors = theme.colors;
 
-    const styles = StyleSheet.create({
+    const styles= StyleSheet.create({
 
         container: {
             paddingTop: 10,
@@ -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,