Sae_LeftOvers
/
LeftOvers
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

color provider is working, use color context from now to define colors !
continuous-integration/drone/push Build is passing Details

Browse Source
pull/20/head
Rémi REGNAULT 1 year ago
parent b3babbbb85
commit bd54ec2fa1
6 changed files with 188 additions and 173 deletions
Show Stats Download Patch File Download Diff File

6
LeftOvers/navigation/BottomBar.tsx
Unescape View File

@ -16,7 +16,7 @@ import DarkIcon from '../assets/images/moon.png';
export default function BottomBar({ state, descriptors, navigation }) {
const {theme, toggleTheme} = useContext(ThemeContext);
const {colors, toggleColor} = useContext(ColorContext)
const {colors, toggleColors} = useContext(ColorContext)
const [iconThemeButton, setThemeIconButton] = useState(( theme === 'dark' ) ? LightIcon : DarkIcon)
const [textThemeButton, setTextThemeButton] = useState(( theme === 'dark' ) ? 'Light' : 'Dark');
@ -25,12 +25,12 @@ export default function BottomBar({ state, descriptors, navigation }) {
setThemeIconButton(DarkIcon);
setTextThemeButton("Dark");
toggleTheme('light');
toggleColor(LightTheme)
toggleColors(LightTheme)
} else {
setThemeIconButton(LightIcon);
setTextThemeButton("Light");
toggleTheme('dark')
toggleColor(DarkTheme)
toggleColors(DarkTheme)
}
console.log('TextThemeButton is now: ' + textThemeButton);
}

8
LeftOvers/navigation/HomeStackScreen.tsx
Unescape View File

@ -7,6 +7,7 @@ import Profiles from '../screens/Profiles';
import CreateProfile from '../screens/CreateProfile';
import ModifyProfile from '../screens/ModifyProfile';
import ThemeContext from '../theme/ThemeContext';
import ColorContext from '../theme/ColorContext';
import { HeaderTitle } from './Utils';
import appLogo from '../assets/images/logo.png';
@ -23,6 +24,7 @@ function AppIcon() {
export default function HomeStackScreen() {
const {theme, toggleTheme} = useContext(ThemeContext)
const {colors, toggleColors} = useContext(ColorContext)
return (
<HomeStack.Navigator>
@ -30,7 +32,7 @@ export default function HomeStackScreen() {
name='Home'
component={HomePage}
options={{
headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
headerStyle: {backgroundColor: colors.cardBackground},
headerLeft: () => (
<AppIcon/>
@ -50,7 +52,7 @@ export default function HomeStackScreen() {
name='Profiles'
component={Profiles}
options={{
headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
headerStyle: {backgroundColor: colors.cardBackground},
headerTitle: () => (
<HeaderTitle title='Profiles'/>
)
@ -60,7 +62,7 @@ export default function HomeStackScreen() {
name='ProfileModification'
component={ModifyProfile}
options={{
headerStyle: {backgroundColor: theme === 'light' ? '#F2F0E4' : '#3F3C42'},
headerStyle: {backgroundColor: colors.cardBackground},
headerTitle: () => (
<HeaderTitle title='Profile Modification'/>
)

6
LeftOvers/navigation/Utils.tsx
Unescape View File

@ -1,16 +1,16 @@
import React, { useContext } from 'react';
import { Text, StyleSheet } from 'react-native';
import ThemeContext from '../theme/ThemeContext';
import ColorContext from '../theme/ColorContext';
export function HeaderTitle(props) {
const {theme, toggleTheme} = useContext(ThemeContext);
const {colors, toggleColors} = useContext(ColorContext)
const styles = StyleSheet.create({
headerTitle: {
fontSize: 20,
fontWeight: "bold",
color: theme === 'light' ? '#3F3C42' : '#F2F0E4',
color: colors.cardDetail,
}
})

317
LeftOvers/screens/HomePage.tsx
Unescape View File

@ -6,179 +6,180 @@ import {SafeAreaProvider} from 'react-native-safe-area-context';
import ValidateButton from '../components/ValidateButton';
import ProfileSelection from '../components/ProfileSelection';
import FoodElementText from '../components/FoodElementText';
import ThemeContext from '../theme/ThemeContext';
import ColorContext from '../theme/ColorContext';
import bracketLeft from '../assets/images/angle_bracket_left.png';
import bracketRight from '../assets/images/angle_bracket_right.png';
export default function HomePage({ navigation, props }) {
const {theme, toggleTheme} = useContext(ThemeContext);
const {colors, toggleColors} = useContext(ColorContext);
const profiles = [
{name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"},
{name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"},
{name: "Goro Takemura", avatar: "plus_small.png", isActive: "none"},
{name: "David Martinez", avatar: "plus_small.png", isActive: "flex"},
]
const profiles = [
{name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"},
{name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"},
{name: "Goro Takemura", avatar: "plus_small.png", isActive: "none"},
{name: "David Martinez", avatar: "plus_small.png", isActive: "flex"},
]
const ingredientList = [{title: "Carrot"}, {title: "Potato"}, {title: "Peach"}]
const ingredientList = [{title: "Carrot"}, {title: "Potato"}, {title: "Peach"}]
const [cpt, setCpt] = useState(0);
const decreaseCounter = () => {
if (cpt > 0) {
setCpt(cpt - 1);
}
else {
setCpt(ingredientList.length - 1);
}
};
const increaseCounter = () => {
if (cpt < ingredientList.length - 1) {
setCpt(cpt + 1);
}
else {
setCpt(0);
}
};
const [cpt, setCpt] = useState(0);
const decreaseCounter = () => {
if (cpt > 0) {
setCpt(cpt - 1);
}
else {
setCpt(ingredientList.length - 1);
}
};
const increaseCounter = () => {
if (cpt < ingredientList.length - 1) {
setCpt(cpt + 1);
}
else {
setCpt(0);
}
};
const styles = StyleSheet.create({
container: {
width: "100%",
flex: 1,
backgroundColor: '#3F3C42',
alignItems: 'center',
justifyContent: 'center',
},
linearGradient: {
width: "100%",
flex: 1,
padding: "2%",
paddingTop: 0,
},
separator: {
marginTop: "6%"
},
filterBar: {
flexDirection: "row",
width: "85%",
paddingTop: "3%",
paddingBottom: "2%",
alignItems: "flex-end",
justifyContent: "center",
},
filters: {
fontSize: 20,
color: '#ACA279',
flex: 1,
},
nbSelected: {
fontSize: 11,
color: "#3F3C42",
textAlign: "right",
},
profilesSelection: {
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: '#F2F0E4',
marginHorizontal: "3%",
paddingBottom: "3%",
},
welcome: {
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: '#F2F0E4',
paddingVertical: "3%",
paddingHorizontal: "7%",
marginHorizontal: "3%",
},
text: {
fontSize: 20,
color: '#ACA279',
},
name: {
fontSize: 20,
fontWeight: "bold",
color: '#59BDCD',
},
ingredientSelection: {
width: "90%",
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: '#E3DEC9',
borderWidth: 2,
borderColor: "#ACA279",
padding: "2%"
}
});
const styles = StyleSheet.create({
container: {
width: "100%",
flex: 1,
backgroundColor: '#3F3C42',
alignItems: 'center',
justifyContent: 'center',
},
linearGradient: {
width: "100%",
flex: 1,
padding: "2%",
paddingTop: 0,
},
separator: {
marginTop: "6%"
},
filterBar: {
flexDirection: "row",
width: "85%",
paddingTop: "3%",
paddingBottom: "2%",
alignItems: "flex-end",
justifyContent: "center",
},
filters: {
fontSize: 20,
color: colors.cardTitle,
flex: 1,
},
nbSelected: {
fontSize: 11,
color: colors.cardDetail,
textAlign: "right",
},
profilesSelection: {
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: colors.cardBackground,
marginHorizontal: "3%",
paddingBottom: "3%",
},
welcome: {
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: colors.cardBackground,
paddingVertical: "3%",
paddingHorizontal: "7%",
marginHorizontal: "3%",
},
text: {
fontSize: 20,
color: colors.welcomeText,
},
name: {
fontSize: 20,
fontWeight: "bold",
color: colors.welcomeName,
},
ingredientSelection: {
width: "90%",
alignItems: 'center',
justifyContent: 'center',
borderRadius: 20,
backgroundColor: '#E3DEC9',
borderWidth: 2,
borderColor: "#ACA279",
padding: "2%"
}
});
return (
<SafeAreaProvider style={{flex: 1}}>
<ScrollView>
<LinearGradient colors={theme === 'light' ? ['#2680AA', '#59BDCD'] : ['#222222', '#3F3C42']} style={styles.linearGradient}>
<View style={styles.separator}/>
<View style={styles.welcome}>
<View style={{flexDirection: "column", alignItems: "flex-start", justifyContent: "center", width: "100%"}}>
<View style={{flexDirection: "row"}}>
<Text style={styles.text}>Welcome </Text>
<Text style={styles.name}>Rayhân</Text>
<Text style={styles.text}>,</Text>
return (
<SafeAreaProvider style={{flex: 1}}>
<ScrollView>
<LinearGradient colors={[colors.primary, colors.primaryComplement]} style={styles.linearGradient}>
<View style={styles.separator}/>
<View style={styles.welcome}>
<View style={{flexDirection: "column", alignItems: "flex-start", justifyContent: "center", width: "100%"}}>
<View style={{flexDirection: "row"}}>
<Text style={styles.text}>Welcome </Text>
<Text style={styles.name}>Rayhân</Text>
<Text style={styles.text}>,</Text>
</View>
<Text style={styles.text}>Glad to see you again!</Text>
</View>
<Text style={styles.text}>Glad to see you again!</Text>
</View>
</View>
<View style={styles.separator}/>
<View style={styles.profilesSelection}>
<View style={styles.filterBar}>
<Text style={styles.filters}>Profiles</Text>
<Text style={styles.nbSelected}>2 selected</Text>
</View>
<View style={{marginTop: "3%"}}/>
<ProfileSelection listProfile={profiles} disableSelection={true}/>
<View style={{marginTop: "4%"}}/>
<ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => navigation.navigate('Profiles')}/>
</View>
<View style={styles.separator}/>
<View style={styles.profilesSelection}>
<View style={styles.filterBar}>
<Text style={styles.filters}>Ingredient Stocks</Text>
<View style={styles.separator}/>
<View style={styles.profilesSelection}>
<View style={styles.filterBar}>
<Text style={styles.filters}>Profiles</Text>
<Text style={styles.nbSelected}>2 selected</Text>
</View>
<View style={{marginTop: "3%"}}/>
<ProfileSelection listProfile={profiles} disableSelection={true}/>
<View style={{marginTop: "4%"}}/>
<ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => navigation.navigate('Profiles')}/>
</View>
<View style={{marginTop: "4%"}}/>
<ValidateButton title="Manage Stocks" image="warehouse.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => console.log('ManageStocks')}/>
</View>
<View style={styles.separator}/>
<View style={styles.profilesSelection}>
<View style={styles.filterBar}>
<Text style={styles.filters}>Cooking</Text>
<View style={styles.separator}/>
<View style={styles.profilesSelection}>
<View style={styles.filterBar}>
<Text style={styles.filters}>Ingredient Stocks</Text>
</View>
<View style={{marginTop: "4%"}}/>
<ValidateButton title="Manage Stocks" image="warehouse.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => console.log('ManageStocks')}/>
</View>
<View style={{marginTop: "3%"}}/>
<View style={styles.ingredientSelection}>
<Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text>
<View style={{flexDirection: "row", padding: "4%", justifyContent: "center", alignItems: "center"}}>
<Pressable onPress={decreaseCounter}>
<Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} />
</Pressable>
<FoodElementText title={ingredientList[cpt].title}/>
<Pressable onPress={increaseCounter}>
<Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} />
</Pressable>
<View style={styles.separator}/>
<View style={styles.profilesSelection}>
<View style={styles.filterBar}>
<Text style={styles.filters}>Cooking</Text>
</View>
<View style={{marginTop: "3%"}}/>
<View style={styles.ingredientSelection}>
<Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text>
<View style={{flexDirection: "row", padding: "4%", justifyContent: "center", alignItems: "center"}}>
<Pressable onPress={decreaseCounter}>
<Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} />
</Pressable>
<FoodElementText title={ingredientList[cpt].title}/>
<Pressable onPress={increaseCounter}>
<Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} />
</Pressable>
</View>
</View>
<View style={{marginTop: "4%"}}/>
<ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Chnge Selected Ingredient')}/>
<View style={{marginTop: "3%"}}/>
<ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Go and search for recipe')}/>
</View>
<View style={{marginTop: "4%"}}/>
<ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Chnge Selected Ingredient')}/>
<View style={{marginTop: "3%"}}/>
<ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log('Go and search for recipe')}/>
</View>
<View style={{marginBottom: "20%"}}/>
</LinearGradient>
</ScrollView>
</SafeAreaProvider>
);
<View style={{marginBottom: "20%"}}/>
</LinearGradient>
</ScrollView>
</SafeAreaProvider>
);
}

8
LeftOvers/theme/ColorContext.tsx
Unescape View File

@ -1,11 +1,11 @@
import React, {createContext, useState, useEffect} from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { DarkTheme, LightTheme, Theme } from './colors';
import { LightTheme, Theme } from './colors';
interface ColorContextType {
colors: Theme,
toggleColor: (Theme) => void
toggleColors: (Theme) => void
};
const ColorContext = createContext<ColorContextType | null>(null);
@ -27,13 +27,13 @@ export const ColorProvider = ({ children }) => {
getColors();
}, []);
const toggleColor = (newColors: Theme) => {
const toggleColors = (newColors: Theme) => {
setColors(newColors);
AsyncStorage.setItem('colors', JSON.stringify(newColors))
};
return (
<ColorContext.Provider value={{colors, toggleColor}}>
<ColorContext.Provider value={{colors, toggleColors}}>
{children}
</ColorContext.Provider>
);

16
LeftOvers/theme/colors.ts
Unescape View File

@ -23,6 +23,10 @@ export interface Theme {
ingredientBackground: string,
ingredientContent: string,
ingredientBorder: string,
buttonBackground: string,
buttonDetail: string,
welcomeText: string,
welcomeName: string,
}
export const LightTheme : Theme = {
@ -38,13 +42,17 @@ export const LightTheme : Theme = {
ingredientBackground: Pearl,
ingredientBorder: EerieBlack,
ingredientContent: Jet,
buttonBackground: Pearl,
buttonDetail: Moonstone,
welcomeText: Ecru,
welcomeName: Moonstone
}
export const DarkTheme : Theme = {
primary: EerieBlack,
primaryComplement: Jet,
cardBackground: Jet,
cardTitle: Ecru,
cardTitle: Alabaster,
cardDetail: Alabaster,
cardElementBackground: SteelBlue,
cardElementText: Jet,
@ -52,6 +60,10 @@ export const DarkTheme : Theme = {
cardElementBorder: SteelBlue,
ingredientBackground: EerieBlack,
ingredientBorder: SteelBlue,
ingredientContent: Alabaster
ingredientContent: Alabaster,
buttonBackground: Jet,
buttonDetail: CarolinaBlue,
welcomeText: SteelBlue,
welcomeName:Alabaster
}

Write Preview
Loading…
Cancel
Save