fix: profiles page uses colorcontext

LeftOvers/components/FoodElementText.tsx

@@ -4,7 +4,6 @@ import { StyleSheet,Pressable, Text, View } from 'react-native';
 import ColorContext from '../theme/ColorContext';
 
 
-
 interface foodElementImageProps {
     title  : string
 }

LeftOvers/components/ListWithoutSelect.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import {StyleSheet, Text, TextInput, View, Image, FlatList, Pressable} from 'react-native';
 import ValidateButton from './ValidateButton';
 import HeaderFlatList from './HeaderFlatList';
 import { MultipleSelectList, SelectList } from 'react-native-dropdown-select-list'
+import ColorContext from '../theme/ColorContext';
 
 type ListProps = {
     title: string
@@ -11,36 +12,20 @@ type ListProps = {
 
 export default function ListWithoutSelect(props: ListProps) {
     const [selected, setSelected] = React.useState([]);
-  return (
+    const { colors, toggleColors } = useContext(ColorContext);
-        <MultipleSelectList
-            data={props.content}
-            save="value"
-            search={false}
-            arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
-            boxStyles={styles.titleBar}
-            inputStyles={styles.title}
-            dropdownStyles={styles.itemList}
-            dropdownItemStyles={styles.itemCell}
-            dropdownTextStyles={styles.itemText}
-            checkBoxStyles={styles.box}
-            notFoundText="None"
-            placeholder={props.title}
-            label={props.title}/>
-  );
-}
 
     const styles = StyleSheet.create({
         titleBar: {
             flexDirection: "row",
             alignItems: "center",
             justifyContent: "stretch",
-    backgroundColor: "#F2F0E4",
+            backgroundColor: colors.cardElementTitleBackground,
             borderTopRightRadius: 15,
             borderTopLeftRadius: 15,
             borderBottomRightRadius: 0,
             borderBottomLeftRadius: 0,
             borderWidth: 2,
-    borderColor: "#ACA279",
+            borderColor: colors.cardElementBorder,
             minWidth: "92%",
             maxWidth: "92%",
             marginBottom: 0,
@@ -48,12 +33,12 @@ const styles = StyleSheet.create({
         },
         arrow: {
             resizeMode: 'contain',
-    tintColor: "#3F3C42",
+            tintColor: colors.cardElementTitle,
             flex: 0.1,
         },
         title: {
             fontSize: 15,
-    color: '#3F3C42',
+            color: colors.cardElementTitle,
             alignItems: 'center',
             textAlign: "left",
             flex: 0.9,
@@ -68,7 +53,7 @@ const styles = StyleSheet.create({
             borderTopLeftRadius: 0,
             borderBottomRightRadius: 15,
             borderBottomLeftRadius: 15,
-      backgroundColor: "#E3DEC9",
+            backgroundColor: colors.cardElementBackground,
             minWidth: "92%",
             maxWidth: "92%",
         },
@@ -93,3 +78,22 @@ const styles = StyleSheet.create({
             flex: 0,
         }
     });
+
+    return (
+        <MultipleSelectList
+            data={props.content}
+            save="value"
+            search={false}
+            arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
+            boxStyles={styles.titleBar}
+            inputStyles={styles.title}
+            dropdownStyles={styles.itemList}
+            dropdownItemStyles={styles.itemCell}
+            dropdownTextStyles={styles.itemText}
+            checkBoxStyles={styles.box}
+            notFoundText="None"
+            placeholder={props.title}
+            label={props.title}/>
+    );
+}
+

LeftOvers/components/ProfileDetails.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { StyleSheet, Text, View, Image, Pressable } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 
 import ListWithoutSelect from './ListWithoutSelect';
+import ColorContext from '../theme/ColorContext';
 
 type ProfileProps = {
     name: string
@@ -13,6 +14,7 @@ type ProfileProps = {
 }
 
 export default function ProfileDetails(props) {
+    const { colors, toggleColors } = useContext(ColorContext)
     const navigation = useNavigation()
     const [display, setDisplay] = useState("none")
     const changeListVisibility = () => {
@@ -36,40 +38,13 @@ export default function ProfileDetails(props) {
         imageSource = require('../assets/images/logo.png')
     }
 
-  return (
-    <View style={styles.background}>
-        <View style={styles.pseudoBar}>
-            <Image source={imageSource} style={styles.avatar}></Image>
-            <Text style={styles.text}>{props.name}</Text>
-            <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
-            <Pressable onPress={props.onDeleteProfile} style={{flex: 0.1, marginLeft: "1%",}}>
-                <Image source={require("../assets/images/delete.png")} style={styles.delete}></Image>
-            </Pressable>
-        </View>
-        <Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
-            <View style={styles.filterBar}>
-                <Text style={styles.filters}>Filters</Text>
-                <Text style={styles.nbSelected}>{props.diets.length} selected</Text>
-                <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
-            </View>
-        </Pressable>
-        <View style={{display: display === 'flex' ? 'flex' : 'none', alignItems: "center", justifyContent: "center"}}>
-            <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
-            <View style={{marginTop: "3%"}}/>
-            <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
-            <View style={{marginTop: "3%"}}/>
-        </View>
-    </View>
-  );
-}
-
     const styles = StyleSheet.create({
         background: {
             flexDirection: 'column',
             alignItems: 'center',
             justifyContent: 'center',
             borderRadius: 15,
-    backgroundColor: '#F2F0E4',
+            backgroundColor: colors.cardBackground,
             padding: "3%",
             marginHorizontal: "3%",
         },
@@ -86,7 +61,7 @@ const styles = StyleSheet.create({
             padding: "5%",
             resizeMode: 'contain',
             borderWidth: 2,
-    borderColor: "#ACA279",
+            borderColor: colors.cardElementBorder,
             borderRadius: 45,
             height: "100%",
             flex: 0.03,
@@ -94,7 +69,7 @@ const styles = StyleSheet.create({
         text: {
             flex: 1,
             fontSize: 20,
-    color: '#ACA279',
+            color: colors.cardElementBorder,
             alignItems: 'center',
             textAlign: 'left',
             marginLeft: "3%",
@@ -103,7 +78,7 @@ const styles = StyleSheet.create({
         },
         modify: {
             height: "100%",
-      tintColor: "#ACA279",
+            tintColor: colors.cardElementBorder,
             resizeMode: 'contain',
             flex: 0.1,
             marginLeft: "3%",
@@ -111,7 +86,7 @@ const styles = StyleSheet.create({
         delete: {
             height: "100%",
             width: "100%",
-      tintColor: "#ACA279",
+            tintColor: colors.cardElementBorder,
             resizeMode: 'contain',
             flex: 1,
         },
@@ -127,7 +102,7 @@ const styles = StyleSheet.create({
         },
         filters: {
             fontSize: 20,
-      color: '#ACA279',
+            color: colors.cardElementBorder,
             flex: 1,
             padding: "2%",
             paddingLeft: 0,
@@ -136,14 +111,42 @@ const styles = StyleSheet.create({
         nbSelected: {
             fontSize: 11,
             flex: 1,
-      color: "#3F3C42",
+            color: colors.cardDetail,
             textAlign: "right",
             marginRight: "3%",
         },
         arrow: {
             height: "100%",
             resizeMode: 'contain',
-      tintColor: "#3F3C42",
+            tintColor: colors.cardDetail,
             flex: 0.1,
         },
     });
+
+    return (
+        <View style={styles.background}>
+            <View style={styles.pseudoBar}>
+                <Image source={imageSource} style={styles.avatar}></Image>
+                <Text style={styles.text}>{props.name}</Text>
+                <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
+                <Pressable onPress={props.onDeleteProfile} style={{flex: 0.1, marginLeft: "1%",}}>
+                    <Image source={require("../assets/images/delete.png")} style={styles.delete}></Image>
+                </Pressable>
+            </View>
+            <Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
+                <View style={styles.filterBar}>
+                    <Text style={styles.filters}>Filters</Text>
+                    <Text style={styles.nbSelected}>{props.diets.length} selected</Text>
+                    <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
+                </View>
+            </Pressable>
+            <View style={{display: display === 'flex' ? 'flex' : 'none', alignItems: "center", justifyContent: "center"}}>
+                <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
+                <View style={{marginTop: "3%"}}/>
+                <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
+                <View style={{marginTop: "3%"}}/>
+            </View>
+        </View>
+    );
+}
+

LeftOvers/screens/Profiles.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { StyleSheet, View, Modal, Pressable, Text, Image, ScrollView, useWindowDimensions } from 'react-native';
 
 import { LinearGradient } from 'expo-linear-gradient';
@@ -6,8 +6,11 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 import ProfileDetails from '../components/ProfileDetails';
 import ProfileDelete from '../components/ProfileDelete';
+import ColorContext from '../theme/ColorContext';
 
 export default function Profiles({navigation, props}) {
+    const { colors, toggleColors } = useContext(ColorContext)
+
     const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
     const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]
 
@@ -31,75 +34,6 @@ export default function Profiles({navigation, props}) {
         setOpacity(1)
     }
 
-  return (
-    <SafeAreaProvider style={{flex: 1}}>
-        <ScrollView>
-            <View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}>
-                <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
-                    <View style={styles.separator}/>
-                    <ProfileDetails 
-                        name="Johnny Silverhand" 
-                        avatar="plus_small.png" 
-                        diets={dieJohnny} 
-                        allergies={allJohnny} 
-                        onDeleteProfile={raisePopUp}/>
-                    <View style={styles.separator}/>
-                    <ProfileDetails 
-                        name="Jackie Welles" 
-                        avatar="plus_small.png" 
-                        diets={dieJackie} 
-                        allergies={allJackie} 
-                        onDeleteProfile={raisePopUp} />
-                    <View style={styles.separator}/>
-                    <ProfileDetails 
-                        name="Goro Takemura" 
-                        avatar="plus_small.png" 
-                        diets={dieGoro} 
-                        allergies={allGoro} 
-                        onDeleteProfile={raisePopUp} />
-                    <View style={styles.separator}/>
-                    <ProfileDetails 
-                        name="Viktor Vector" 
-                        avatar="plus_small.png" 
-                        diets={dieViktor} 
-                        allergies={allViktor} 
-                        onDeleteProfile={raisePopUp} />
-                    <View style={styles.modal}>
-                        <Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}>
-                            <View style={styles.modal}>
-                                <View style={styles.viewModal}>
-                                    <View style={styles.profileValidation}>
-                                        <ProfileDelete name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny}></ProfileDelete>
-                                    </View>
-                                    <View style={styles.decisionBarVertical}>
-                                        <Text style={styles.validationQuestion}>Do you really want to delete this profile?</Text>
-                                        <View style={styles.decisionBar}>
-                                            <Pressable onPress={erasePopUp} style={{flex:0.5}}>
-                                                <View style={styles.yesButton}>
-                                                    <Image source={require("../assets/images/validate.png")} style={{tintColor: "#2DE04A", height: "100%", flex: 0.2, margin: "5%", resizeMode: "contain"}}/>
-                                                    <Text style={styles.yesText}>Yes</Text>
-                                                </View>
-                                            </Pressable>
-                                            <Pressable onPress={erasePopUp} style={{flex:0.5}}>
-                                                <View style={styles.noButton}>
-                                                    <Image source={require("../assets/images/cross.png")} style={{tintColor: "#E02D2D", height: "100%", flex: 0.2, margin: "5%", resizeMode: "contain"}}/>
-                                                    <Text style={styles.noText}>No</Text>
-                                                </View>
-                                            </Pressable>
-                                        </View>
-                                    </View>
-                                </View>
-                            </View>
-                        </Modal>
-                    </View>
-                    <View style={{marginBottom: "20%"}}/>
-                </LinearGradient>
-            </View>
-        </ScrollView>
-    </SafeAreaProvider>
-  );
-}
-
     const styles = StyleSheet.create({
         container: {
             height: "100%",
@@ -208,3 +142,72 @@ const styles = StyleSheet.create({
             padding: "4%",
         },
     });
+
+    return (
+    <SafeAreaProvider style={{flex: 1}}>
+        <ScrollView>
+            <View style={{opacity: opacity, height: "100%", width: "100%", flex: 1}}>
+                <LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+                    <View style={styles.separator}/>
+                    <ProfileDetails 
+                        name="Johnny Silverhand" 
+                        avatar="plus_small.png" 
+                        diets={dieJohnny} 
+                        allergies={allJohnny} 
+                        onDeleteProfile={raisePopUp}/>
+                    <View style={styles.separator}/>
+                    <ProfileDetails 
+                        name="Jackie Welles" 
+                        avatar="plus_small.png" 
+                        diets={dieJackie} 
+                        allergies={allJackie} 
+                        onDeleteProfile={raisePopUp} />
+                    <View style={styles.separator}/>
+                    <ProfileDetails 
+                        name="Goro Takemura" 
+                        avatar="plus_small.png" 
+                        diets={dieGoro} 
+                        allergies={allGoro} 
+                        onDeleteProfile={raisePopUp} />
+                    <View style={styles.separator}/>
+                    <ProfileDetails 
+                        name="Viktor Vector" 
+                        avatar="plus_small.png" 
+                        diets={dieViktor} 
+                        allergies={allViktor} 
+                        onDeleteProfile={raisePopUp} />
+                    <View style={styles.modal}>
+                        <Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}>
+                            <View style={styles.modal}>
+                                <View style={styles.viewModal}>
+                                    <View style={styles.profileValidation}>
+                                        <ProfileDelete name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny}></ProfileDelete>
+                                    </View>
+                                    <View style={styles.decisionBarVertical}>
+                                        <Text style={styles.validationQuestion}>Do you really want to delete this profile?</Text>
+                                        <View style={styles.decisionBar}>
+                                            <Pressable onPress={erasePopUp} style={{flex:0.5}}>
+                                                <View style={styles.yesButton}>
+                                                    <Image source={require("../assets/images/validate.png")} style={{tintColor: "#2DE04A", height: "100%", flex: 0.2, margin: "5%", resizeMode: "contain"}}/>
+                                                    <Text style={styles.yesText}>Yes</Text>
+                                                </View>
+                                            </Pressable>
+                                            <Pressable onPress={erasePopUp} style={{flex:0.5}}>
+                                                <View style={styles.noButton}>
+                                                    <Image source={require("../assets/images/cross.png")} style={{tintColor: "#E02D2D", height: "100%", flex: 0.2, margin: "5%", resizeMode: "contain"}}/>
+                                                    <Text style={styles.noText}>No</Text>
+                                                </View>
+                                            </Pressable>
+                                        </View>
+                                    </View>
+                                </View>
+                            </View>
+                        </Modal>
+                    </View>
+                    <View style={{marginBottom: "20%"}}/>
+                </LinearGradient>
+            </View>
+        </ScrollView>
+    </SafeAreaProvider>
+    );
+}

LeftOvers/theme/colors.ts

@@ -19,7 +19,8 @@ export interface Theme {
     cardElementBackground: string,
     cardElementText: string,
     cardElementBorder: string,
-    cardElementTitle: string
+    cardElementTitle: string,
+    cardElementTitleBackground: string,
     ingredientBackground: string,
     ingredientContent: string,
     ingredientBorder: string,
@@ -42,6 +43,7 @@ export const LightTheme : Theme = {
     cardElementText: Jet,
     cardElementBorder: Ecru,
     cardElementTitle: Jet,
+    cardElementTitleBackground: Alabaster,
     ingredientBackground: Pearl,
     ingredientBorder: EerieBlack,
     ingredientContent: Jet,
@@ -64,6 +66,7 @@ export const DarkTheme : Theme = {
     cardElementText: Jet,
     cardElementTitle: Alabaster,
     cardElementBorder: SteelBlue,
+    cardElementTitleBackground: CarolinaBlue,
     ingredientBackground: EerieBlack,
     ingredientBorder: SteelBlue,
     ingredientContent: Alabaster,