From f6a01ff7dbeea8e3378686f2e2850ca45a0cac38 Mon Sep 17 00:00:00 2001 From: anperederi Date: Thu, 28 Mar 2024 22:59:28 +0100 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=9A=80=20Finish=20themes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/Theme.ts | 22 +++--- src/screens/AddScreen.tsx | 126 ++++++++++++++++-------------- src/screens/Catalogue.tsx | 98 ++++++++++++----------- src/screens/Favorites.tsx | 99 ++++++++++++----------- src/screens/HomeScreen.tsx | 106 +++++++++++++------------ src/screens/JokeDetailsScreen.tsx | 21 +++-- src/screens/Settings.tsx | 22 ++++-- 7 files changed, 272 insertions(+), 222 deletions(-) diff --git a/src/assets/Theme.ts b/src/assets/Theme.ts index dc07d73..0c3350b 100644 --- a/src/assets/Theme.ts +++ b/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)', }, }; \ No newline at end of file diff --git a/src/screens/AddScreen.tsx b/src/screens/AddScreen.tsx index 381ab72..552b5fd 100644 --- a/src/screens/AddScreen.tsx +++ b/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 ( Blague @@ -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, - } -}) \ No newline at end of file +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 +} \ No newline at end of file diff --git a/src/screens/Catalogue.tsx b/src/screens/Catalogue.tsx index c436f87..faa3b1e 100644 --- a/src/screens/Catalogue.tsx +++ b/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 ( @@ -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", - } -}); \ No newline at end of file +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 +} \ No newline at end of file diff --git a/src/screens/Favorites.tsx b/src/screens/Favorites.tsx index 9e10f34..0e33a61 100644 --- a/src/screens/Favorites.tsx +++ b/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 ( @@ -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", - } -}); \ No newline at end of file + +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 +} \ No newline at end of file diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index 6b15f7f..b82e840 100644 --- a/src/screens/HomeScreen.tsx +++ b/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 ( <> @@ -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, - } -}); \ No newline at end of file +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 +} \ No newline at end of file diff --git a/src/screens/JokeDetailsScreen.tsx b/src/screens/JokeDetailsScreen.tsx index 524e556..543866e 100644 --- a/src/screens/JokeDetailsScreen.tsx +++ b/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(); + 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, - } -}); \ No newline at end of file +export function themeSettings() { + const theme = useTheme(); + const colors = theme.colors; + + const styles = StyleSheet.create({ + container: { + backgroundColor: colors.background, + flex: 1, + } + }); + return styles +} \ No newline at end of file diff --git a/src/screens/Settings.tsx b/src/screens/Settings.tsx index 578b1ba..72d0213 100644 --- a/src/screens/Settings.tsx +++ b/src/screens/Settings.tsx @@ -1,8 +1,14 @@ 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, + greyColor, + indigoColor, + purpleColor, + 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 +54,7 @@ export function themeSettings() { const theme = useTheme(); const colors = theme.colors; - const styles = StyleSheet.create({ + const styles= StyleSheet.create({ container: { paddingTop: 10, @@ -66,25 +72,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, From d2cfa7b9921e8c76087593ad4de18bb89e130d0e Mon Sep 17 00:00:00 2001 From: anperederi Date: Thu, 28 Mar 2024 23:14:17 +0100 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=90=9B=20Update=20some=20nope=20impor?= =?UTF-8?q?ts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/screens/Settings.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/screens/Settings.tsx b/src/screens/Settings.tsx index 72d0213..e260aae 100644 --- a/src/screens/Settings.tsx +++ b/src/screens/Settings.tsx @@ -2,9 +2,6 @@ import '../types/extension'; import {Image, StyleSheet, Switch, Text, View} from "react-native"; import { darksalmonColor, - greyColor, - indigoColor, - purpleColor, whiteColor } from "../assets/Theme"; import React from "react";