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

feat add colors context see next push if its working
continuous-integration/drone/push Build is failing Details

Browse Source
pull/20/head
Rémi REGNAULT 1 year ago
parent 07a865b9c8
commit da8075e303
8 changed files with 207 additions and 113 deletions
Show Stats Download Patch File Download Diff File

3
LeftOvers/App.tsx
Unescape View File

@ -7,6 +7,7 @@ import ProfilesStackScreen from './navigation/ProfileStackScreen';
import CookingStackScreen from './navigation/CookingStackScreen';
import BottomBar from './navigation/BottomBar';
import { ThemeProvider } from './theme/ThemeContext';
import { ColorProvider } from './theme/ColorContext';
const Tab = createBottomTabNavigator();
@ -15,6 +16,7 @@ export default function App() {
return (
<ThemeProvider>
<ColorProvider>
<NavigationContainer>
<Tab.Navigator initialRouteName='HOME' tabBar={ (props) => <BottomBar {...props}/> }>
<Tab.Screen name='PROFILE' component={ProfilesStackScreen} options={{ headerShown: false, title: 'Profile' }} />
@ -22,6 +24,7 @@ export default function App() {
<Tab.Screen name='COOKING' component={CookingStackScreen} options={{ headerShown: false, title: 'Cooking' }}/>
</Tab.Navigator>
</NavigationContainer>
</ColorProvider>
</ThemeProvider>
);
}

2
LeftOvers/components/ProfileElement.tsx
Unescape View File

@ -1,4 +1,4 @@
import {React, useState} from 'react';
import React, { useState } from 'react';
import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
type Profile = {

5
LeftOvers/components/ValidateButton.tsx
Unescape View File

@ -78,9 +78,8 @@ export default function ValidateButton(props: ValidateButtonProps) {
width: "9%",
marginLeft: "2%",
marginRight: "3%",
resizeMode: "contain",
tintColor: props.colour,}}>
</Image>
resizeMode: "contain",}}
tintColor={props.colour}/>
<Text style={{
fontSize: 15,
color: props.colour,

8
LeftOvers/navigation/BottomBar.tsx
Unescape View File

@ -3,6 +3,8 @@ import { View, Text, TouchableOpacity, Image, Pressable } from 'react-native';
import { GestureResponderEvent, StyleSheet } from 'react-native';
import { BlurView } from 'expo-blur';
import ThemeContext from '../theme/ThemeContext';
import ColorContext from '../theme/ColorContext';
import { LightTheme, DarkTheme } from '../theme/colors';
import HomeIcon from '../assets/images/home.png';
import ProfileIcon from '../assets/images/person_icon.png';
@ -11,8 +13,10 @@ import LightIcon from '../assets/images/sun.png';
import DarkIcon from '../assets/images/moon.png';
export default function BottomBar({ state, descriptors, navigation }) {
const {theme, toggleTheme} = useContext(ThemeContext)
const {theme, toggleTheme} = useContext(ThemeContext);
const {colors, toggleColor} = useContext(ColorContext)
const [iconThemeButton, setThemeIconButton] = useState(( theme === 'dark' ) ? LightIcon : DarkIcon)
const [textThemeButton, setTextThemeButton] = useState(( theme === 'dark' ) ? 'Light' : 'Dark');
@ -21,10 +25,12 @@ export default function BottomBar({ state, descriptors, navigation }) {
setThemeIconButton(DarkIcon);
setTextThemeButton("Dark");
toggleTheme('light');
toggleColor(LightTheme)
} else {
setThemeIconButton(LightIcon);
setTextThemeButton("Light");
toggleTheme('dark')
toggleColor(DarkTheme)
}
console.log('TextThemeButton is now: ' + textThemeButton);
}

153
LeftOvers/screens/HomePage.tsx
Unescape View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useContext, useState } from 'react';
import { StyleSheet, View, Text, Pressable, Image, ScrollView } from 'react-native';
import {LinearGradient} from 'expo-linear-gradient';
import {SafeAreaProvider} from 'react-native-safe-area-context';
@ -6,11 +6,14 @@ 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 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 profiles = [
{name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"},
{name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"},
@ -38,70 +41,6 @@ export default function HomePage({ navigation, props }) {
}
};
return (
<SafeAreaProvider style={{flex: 1}}>
<ScrollView>
<LinearGradient colors={['#2680AA', '#59BDCD']} 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>
</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>
<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>
<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={{marginBottom: "20%"}}/>
</LinearGradient>
</ScrollView>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
container: {
width: "100%",
@ -176,22 +115,70 @@ const styles = StyleSheet.create({
borderWidth: 2,
borderColor: "#ACA279",
padding: "2%"
},
appName: {
fontSize: 20,
fontWeight: "bold",
color: '#3F3C42',
textAlign: "center",
flex: 0.8,
},
topBar: {
flexDirection: 'row',
width: "100%",
height: "11%",
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#F2F0E4',
paddingTop: "8%",
},
}
});
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>
</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>
<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>
<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={{marginBottom: "20%"}}/>
</LinearGradient>
</ScrollView>
</SafeAreaProvider>
);
}

42
LeftOvers/theme/ColorContext.tsx
Unescape View File

@ -0,0 +1,42 @@
import React, {createContext, useState, useEffect} from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { DarkTheme, LightTheme, Theme } from './colors';
interface ColorContextType {
colors: Theme,
toggleColor: (Theme) => void
};
const ColorContext = createContext<ColorContextType | null>(null);
export const ColorProvider = ({ children }) => {
const [colors, setColors] = useState(LightTheme);
useEffect(() => {
const getColors = async () => {
try {
const savedColors = await AsyncStorage.getItem('colors');
if (savedColors) {
setColors(JSON.parse(savedColors));
}
} catch (error) {
console.log('Error loading colors:', error);
}
};
getColors();
}, []);
const toggleColor = (newColors: Theme) => {
setColors(newColors);
AsyncStorage.setItem('colors', JSON.stringify(newColors))
};
return (
<ColorContext.Provider value={{colors, toggleColor}}>
{children}
</ColorContext.Provider>
);
};
export default ColorContext;

57
LeftOvers/theme/colors.ts
Unescape View File

@ -0,0 +1,57 @@
const Ecru = '#ACA279'
const Alabaster = '#F2F0E4'
const Jet = '#3F3C42'
const Moonstone = '#59BDCD'
const Cerulean = '#2680AA'
const Celeste = '#ADF3EA'
const Tan = '#E0C293'
const Pearl = '#E3DEC9'
const EerieBlack = '#222222'
const CarolinaBlue = '#8DB4D9'
const SteelBlue = '#5882A8'
export interface Theme {
primary: string,
primaryComplement: string,
cardBackground: string,
cardTitle: string,
cardDetail: string,
cardElementBackground: string,
cardElementText: string,
cardElementBorder: string,
cardElementTitle: string
ingredientBackground: string,
ingredientContent: string,
ingredientBorder: string,
}
export const LightTheme : Theme = {
primary: Cerulean,
primaryComplement: Moonstone,
cardBackground: Alabaster,
cardTitle: Ecru,
cardDetail: Jet,
cardElementBackground: Pearl,
cardElementText: Jet,
cardElementBorder: Ecru,
cardElementTitle: Jet,
ingredientBackground: Pearl,
ingredientBorder: EerieBlack,
ingredientContent: Jet,
}
export const DarkTheme : Theme = {
primary: EerieBlack,
primaryComplement: Jet,
cardBackground: Jet,
cardTitle: Ecru,
cardDetail: Alabaster,
cardElementBackground: SteelBlue,
cardElementText: Jet,
cardElementTitle: Alabaster,
cardElementBorder: SteelBlue,
ingredientBackground: EerieBlack,
ingredientBorder: SteelBlue,
ingredientContent: Alabaster
}
Write Preview
Loading…
Cancel
Save