antoine.perederii
/
TpReactNative
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🚀 Finish themes

Browse Source
pull/10/head
Antoine PEREDERII 1 year ago
parent 57a846972c
commit f6a01ff7db
7 changed files with 272 additions and 222 deletions
Show Stats Download Patch File Download Diff File

22
src/assets/Theme.ts
Unescape View File

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

54
src/screens/AddScreen.tsx
Unescape View File

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

52
src/screens/Catalogue.tsx
Unescape View File

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

53
src/screens/Favorites.tsx
Unescape View File

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

30
src/screens/HomeScreen.tsx
Unescape View File

@ -6,6 +6,8 @@ import Categs from "../components/Categs";
import {useDispatch, useSelector} from "react-redux"; import {useDispatch, useSelector} from "react-redux";
import {useEffect} from "react"; import {useEffect} from "react";
import {getCategoriesList, getLastSampleJokesList} from "../redux/thunk/GetThunk"; 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() { export default function Catalogue() {
// @ts-ignore // @ts-ignore
@ -23,6 +25,9 @@ export default function Catalogue() {
}; };
loadJokes(); loadJokes();
}, [dispatch]); }, [dispatch]);
const styles = themeSettings()
return ( return (
<> <>
<View style={styles.container}> <View style={styles.container}>
@ -48,26 +53,29 @@ export default function Catalogue() {
) )
}; };
const styles = StyleSheet.create({ export function themeSettings() {
const theme = useTheme();
const colors = theme.colors;
const styles = StyleSheet.create({
container: { container: {
backgroundColor: purpleColor, backgroundColor: colors.background,
flex:1, flex: 1,
}, },
top: { top: {
alignItems: "center", alignItems: "center",
}, },
cat: { cat: {
height:160, height: 160,
width: 160 width: 160
}, },
textAccueil: { textAccueil: {
fontSize: 25, fontSize: 25,
color: darksalmonColor, color: colors.text,
fontWeight: "bold", fontWeight: "bold",
}, },
Jokes: { Jokes: {
display:"flex", display: "flex",
flexDirection:"column", flexDirection: "column",
marginTop: 50, marginTop: 50,
marginLeft: 20, marginLeft: 20,
}, },
@ -75,7 +83,7 @@ const styles = StyleSheet.create({
alignItems: "center" alignItems: "center"
}, },
textLastJokes: { textLastJokes: {
color: whiteColor, color: colors.border,
fontSize: 20, fontSize: 20,
fontWeight: "bold", fontWeight: "bold",
}, },
@ -87,7 +95,7 @@ const styles = StyleSheet.create({
flexDirection: "row", flexDirection: "row",
}, },
textBestCateg: { textBestCateg: {
color: whiteColor, color: colors.text,
fontSize: 20, fontSize: 20,
fontWeight: "bold", fontWeight: "bold",
}, },
@ -95,4 +103,6 @@ const styles = StyleSheet.create({
flexDirection: "row", flexDirection: "row",
marginTop: 30, marginTop: 30,
} }
}); });
return styles
}

17
src/screens/JokeDetailsScreen.tsx
Unescape View File

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

22
src/screens/Settings.tsx
Unescape View File

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

Write Preview
Loading…
Cancel
Save