fix: home page is now using colorContext

LeftOvers/components/FoodElementText.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useContext } from 'react';
-import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
+import { StyleSheet,Pressable, Text, View } from 'react-native';
-import Separator from '../components/Separator';
+
+import ColorContext from '../theme/ColorContext';
 
 
 
@@ -10,30 +11,21 @@ interface foodElementImageProps {
 
 
 export default function FoodElementText(props : any) {
-  return (
+    const {colors, toggleColors } = useContext(ColorContext)
-    <Pressable style={styles.button}>
-      <View style={styles.container}>
-        <View style={styles.view}>
-            <Text style={styles.text}>{props.title}</Text>
-        </View>
-      </View>
-    </Pressable>
-  );
-}
 
-const styles = StyleSheet.create({
+    const styles = StyleSheet.create({
         button: {
             alignItems: 'center',
             justifyContent: 'center',
             width: "80%",
             borderRadius: 5,
-    backgroundColor: '#E3DEC9',
+            backgroundColor: colors.carrouselBackground,
         },
         text: {
             fontSize: 10,
             fontWeight: 'bold',
             padding : "2%",
-    color: 'black',
+            color: colors.cardDetail,
         },
         view: {
             alignItems: 'flex-start',
@@ -43,8 +35,18 @@ const styles = StyleSheet.create({
             width: "100%",
             borderRadius: 5,
             borderWidth: 1,
-    borderColor: '#3F3C42',
+            borderColor: colors.cardDetail,
             flexDirection: 'column',
             justifyContent: 'center',
         },
-});
+    });
+    return (
+        <Pressable style={styles.button}>
+            <View style={styles.container}>
+                <View style={styles.view}>
+                    <Text style={styles.text}>{props.title}</Text>
+                </View>
+            </View>
+        </Pressable>
+    );
+}

LeftOvers/components/ProfileElement.tsx

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
+import ColorContext from '../theme/ColorContext';
 
 type Profile = {
     name: string
@@ -9,6 +10,8 @@ type Profile = {
 }
 
 export default function ProfileElement(props : Profile) {
+    const { colors, toggleColors } = useContext(ColorContext)
+
     const [waiting, setWaiting] = useState("none")
     const [separator, setSeparator] = useState("none")
     const changeStatus = () => {
@@ -44,28 +47,7 @@ export default function ProfileElement(props : Profile) {
         imageSource = require('../assets/images/logo.png')
     }
 
-  return (
+    const styles = StyleSheet.create({
-      <Pressable onPress={changeStatus} style={styles.button}>
-          <View>
-              <View style={styles.pseudoBar}>
-                  <Image source={imageSource} style={styles.avatar}></Image>
-                  <Text style={styles.text}>{props.name}</Text>
-              </View>
-              <View style={styles.pseudoBar}>
-                  <View style={[styles.active, {display: props.isActive}]}>
-                      <Text style={styles.textActive}>Activated</Text>
-                  </View>
-                  <View style={{flex: 0.3, display: separator}}/>
-                  <View style={[styles.waiting, {display: waiting}]}>
-                      <Text style={styles.textWaiting}>Waiting...</Text>
-                  </View>
-              </View>
-          </View>
-      </Pressable>
-  );
-}
-
-const styles = StyleSheet.create({
         button: {
             alignItems: 'center',
             justifyContent: 'flex-start',
@@ -85,14 +67,14 @@ const styles = StyleSheet.create({
             padding: "5%",
             resizeMode: 'contain',
             borderWidth: 2,
-      borderColor: "#ACA279",
+            borderColor: colors.carrouselText,
             borderRadius: 45,
             height: "100%",
             flex: 0.01,
         },
         text: {
             fontSize: 15,
-      color: '#ACA279',
+            color: colors.carrouselText,
             alignItems: 'center',
             textAlign: 'left',
             flex: 0.9,
@@ -103,12 +85,12 @@ const styles = StyleSheet.create({
         active: {
             borderWidth: 1,
             borderRadius: 20,
-    borderColor: "#59BDCD",
+            borderColor: colors.carrouselDetail,
             padding: "1%",
         },
         textActive: {
             fontSize: 10,
-    color: "#59BDCD",
+            color: colors.carrouselDetail,
         },
     
         waiting: {
@@ -121,4 +103,25 @@ const styles = StyleSheet.create({
             fontSize: 10,
             color: "#ACA279",
         },
-});
+    });
+
+    return (
+        <Pressable onPress={changeStatus} style={styles.button}>
+            <View>
+                <View style={styles.pseudoBar}>
+                    <Image source={imageSource} style={styles.avatar}></Image>
+                    <Text style={styles.text}>{props.name}</Text>
+                </View>
+                <View style={styles.pseudoBar}>
+                    <View style={[styles.active, {display: props.isActive}]}>
+                        <Text style={styles.textActive}>Activated</Text>
+                    </View>
+                    <View style={{flex: 0.3, display: separator}}/>
+                    <View style={[styles.waiting, {display: waiting}]}>
+                        <Text style={styles.textWaiting}>Waiting...</Text>
+                    </View>
+                </View>
+            </View>
+        </Pressable>
+    );
+}

LeftOvers/components/ProfileSelection.tsx

@@ -1,8 +1,11 @@
-import {React, useState} from 'react';
+import React, { useContext, useState } from 'react';
-import {View, StyleSheet, Pressable, Image, Text} from 'react-native';
+import {View, StyleSheet, Pressable, Image} from 'react-native';
+
+import ProfileElement from './ProfileElement'
+import ColorContext from '../theme/ColorContext';
+
 import bracketLeft from '../assets/images/angle_bracket_left.png';
 import bracketRight from '../assets/images/angle_bracket_right.png';
-import ProfileElement from './ProfileElement'
 
 type ProfileSelectionProps = {
     listProfile: Profile[]
@@ -16,6 +19,8 @@ type Profile = {
 }
 
 export default function ProfileSelection(props: ProfileSelectionProps) {
+    const { colors, toggleColors } = useContext(ColorContext);
+
     const [cpt, setCpt] = useState(0);
     const decreaseCounter = () => {
         if (cpt > 0) {
@@ -34,29 +39,29 @@ export default function ProfileSelection(props: ProfileSelectionProps) {
         }
     };
 
+    const styles = StyleSheet.create({
+        background: {
+            width: "92%",
+            height: 80,
+            borderRadius: 20,
+            borderWidth: 2,
+            borderColor: colors.carrouselText,
+            backgroundColor: colors.carrouselBackground,
+            flexDirection: 'row',
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
+    });
+
     return (
         <View style={styles.background}>
               <Pressable onPress={decreaseCounter}>
-             <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}}/>
+                  <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText}/>
               </Pressable>
               <ProfileElement name={props.listProfile[cpt].name} avatar={props.listProfile[cpt].avatar} isActive={props.listProfile[cpt].isActive} disableSelection={props.disableSelection}/>
               <Pressable onPress={increaseCounter}>
-             <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}}/>
+                  <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText}/>
               </Pressable>
         </View>
     );
 }
-
-const styles = StyleSheet.create({
-  background: {
-    width: "92%",
-    height: 80,
-    borderRadius: 20,
-    borderWidth: 2,
-    borderColor: '#ACA279',
-    backgroundColor: '#E3DEC9',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});

LeftOvers/screens/HomePage.tsx

@@ -112,9 +112,9 @@ export default function HomePage({ navigation, props }) {
             alignItems: 'center',
             justifyContent: 'center',
             borderRadius: 20,
-            backgroundColor: '#E3DEC9',
+            backgroundColor: colors.carrouselBackground,
             borderWidth: 2,
-            borderColor: "#ACA279",
+            borderColor: colors.carrouselText,
             padding: "2%"
         }
     });
@@ -143,7 +143,7 @@ export default function HomePage({ navigation, props }) {
                         <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')}/>
+                        <ValidateButton title="Modify Profiles" image="parameter.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => navigation.navigate('Profiles')}/>
                     </View>
                     <View style={styles.separator}/>
                     <View style={styles.profilesSelection}>
@@ -151,7 +151,7 @@ export default function HomePage({ navigation, props }) {
                             <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')}/>
+                        <ValidateButton title="Manage Stocks" image="warehouse.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => console.log('ManageStocks')}/>
                     </View>
                     <View style={styles.separator}/>
                     <View style={styles.profilesSelection}>
@@ -160,21 +160,21 @@ export default function HomePage({ navigation, props }) {
                         </View>
                         <View style={{marginTop: "3%"}}/>
                         <View style={styles.ingredientSelection}>
-                            <Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text>
+                            <Text style={{fontSize: 15, color: colors.carrouselText}}>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"}} />
+                                    <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText}/>
                                 </Pressable>
                                 <FoodElementText title={ingredientList[cpt].title}/>
                                 <Pressable onPress={increaseCounter}>
-                                    <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} />
+                                    <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText} />
                                 </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')}/>
+                        <ValidateButton title="Change Selected Ingredients" image="cook.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} 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')}/>
+                        <ValidateButton title="Search Recipes" image="search.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => console.log('Go and search for recipe')}/>
                     </View>
                     <View style={{marginBottom: "20%"}}/>
                 </LinearGradient>

LeftOvers/theme/colors.ts

@@ -27,6 +27,9 @@ export interface Theme {
     buttonDetail: string,
     welcomeText: string,
     welcomeName: string,
+    carrouselBackground: string,
+    carrouselText: string,
+    carrouselDetail: string
 }
 
 export const LightTheme : Theme = {
@@ -45,7 +48,10 @@ export const LightTheme : Theme = {
     buttonBackground: Pearl,
     buttonDetail: Moonstone,
     welcomeText: Ecru,
-    welcomeName: Moonstone
+    welcomeName: Moonstone,
+    carrouselBackground: Pearl,
+    carrouselText: Ecru,
+    carrouselDetail: Moonstone
 }
 
 export const DarkTheme : Theme = {
@@ -64,6 +70,9 @@ export const DarkTheme : Theme = {
     buttonBackground: Jet,
     buttonDetail: CarolinaBlue,
     welcomeText: SteelBlue,
-    welcomeName:Alabaster
+    welcomeName:Alabaster,
+    carrouselBackground: CarolinaBlue,
+    carrouselText: SteelBlue,
+    carrouselDetail: Alabaster
 }