fix: profiles page uses colorcontext

1 year ago · fb5aacd48a
parent 1ab6ce5f9d
commit fb5aacd48a
5 changed files with 342 additions and 330 deletions
--- a/LeftOvers/components/FoodElementText.tsx
+++ b/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
 }
--- a/LeftOvers/components/ListWithoutSelect.tsx
+++ b/LeftOvers/components/ListWithoutSelect.tsx
@ -1,17 +1,85 @@
-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
-    content : list<string>
+    content: list<string>
 }

 export default function ListWithoutSelect(props: ListProps) {
-  const [selected, setSelected] = React.useState([]);
-  return (
+    const [selected, setSelected] = React.useState([]);
+    const { colors, toggleColors } = useContext(ColorContext);
+
+    const styles = StyleSheet.create({
+        titleBar: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "stretch",
+            backgroundColor: colors.cardElementTitleBackground,
+            borderTopRightRadius: 15,
+            borderTopLeftRadius: 15,
+            borderBottomRightRadius: 0,
+            borderBottomLeftRadius: 0,
+            borderWidth: 2,
+            borderColor: colors.cardElementBorder,
+            minWidth: "92%",
+            maxWidth: "92%",
+            marginBottom: 0,
+            overflow: "hidden",
+        },
+        arrow: {
+            resizeMode: 'contain',
+            tintColor: colors.cardElementTitle,
+            flex: 0.1,
+        },
+        title: {
+            fontSize: 15,
+            color: colors.cardElementTitle,
+            alignItems: 'center',
+            textAlign: "left",
+            flex: 0.9,
+        },
+    
+        itemList: {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            justifyContent: "stretch",
+            borderWidth: 0,
+            borderTopRightRadius: 0,
+            borderTopLeftRadius: 0,
+            borderBottomRightRadius: 15,
+            borderBottomLeftRadius: 15,
+            backgroundColor: colors.cardElementBackground,
+            minWidth: "92%",
+            maxWidth: "92%",
+        },
+        itemCell: {
+            padding: 0,
+            paddingTop: "5%",
+            width: "100%",
+            minWidth: 250,
+            maxWidth: 250,
+        },
+        itemText: {
+            fontSize: 13,
+            textAlign: "left",
+            flex: 1,
+            padding: 5,
+            paddingLeft: 10,
+            color: "#3F3C42",
+        },
+    
+        box: {
+            borderWidth: 0,
+            flex: 0,
+        }
+    });
+
+    return (
        <MultipleSelectList
            data={props.content}
            save="value"
@ -26,70 +94,6 @@ export default function ListWithoutSelect(props: ListProps) {
            notFoundText="None"
            placeholder={props.title}
            label={props.title}/>
-  );
+    );
 }

-const styles = StyleSheet.create({
-  titleBar: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "stretch",
-    backgroundColor: "#F2F0E4",
-    borderTopRightRadius: 15,
-    borderTopLeftRadius: 15,
-    borderBottomRightRadius: 0,
-    borderBottomLeftRadius: 0,
-    borderWidth: 2,
-    borderColor: "#ACA279",
-    minWidth: "92%",
-    maxWidth: "92%",
-    marginBottom: 0,
-    overflow: "hidden",
-  },
-  arrow: {
-    resizeMode: 'contain',
-    tintColor: "#3F3C42",
-    flex: 0.1,
-  },
-  title: {
-    fontSize: 15,
-    color: '#3F3C42',
-    alignItems: 'center',
-    textAlign: "left",
-    flex: 0.9,
-  },
-
-  itemList: {
-      flexDirection: "row",
-      alignItems: "flex-start",
-      justifyContent: "stretch",
-      borderWidth: 0,
-      borderTopRightRadius: 0,
-      borderTopLeftRadius: 0,
-      borderBottomRightRadius: 15,
-      borderBottomLeftRadius: 15,
-      backgroundColor: "#E3DEC9",
-      minWidth: "92%",
-      maxWidth: "92%",
-  },
-  itemCell: {
-      padding: 0,
-      paddingTop: "5%",
-      width: "100%",
-      minWidth: 250,
-      maxWidth: 250,
-  },
-  itemText: {
-      fontSize: 13,
-      textAlign: "left",
-      flex: 1,
-      padding: 5,
-      paddingLeft: 10,
-      color: "#3F3C42",
-  },
-
-  box: {
-      borderWidth: 0,
-      flex: 0,
-  }
-});
--- a/LeftOvers/components/ProfileDetails.tsx
+++ b/LeftOvers/components/ProfileDetails.tsx
@ -1,149 +1,152 @@
-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
-  avatar: string
-  diets: string[]
-  allergies: string[]
-  onDeleteProfile: () => void
+    name: string
+    avatar: string
+    diets: string[]
+    allergies: string[]
+    onDeleteProfile: () => void
 }

 export default function ProfileDetails(props) {
-  const navigation = useNavigation()
-  const [display, setDisplay] = useState("none")
-  const changeListVisibility = () => {
-    if (display == "none"){
-        setDisplay("flex")
+    const { colors, toggleColors } = useContext(ColorContext)
+    const navigation = useNavigation()
+    const [display, setDisplay] = useState("none")
+    const changeListVisibility = () => {
+        if (display == "none"){
+            setDisplay("flex")
+        }
+        else{
+            setDisplay("none")
+        }
+    };
+
+    let imageSource
+
+    if (props.avatar === "plus.png"){
+        imageSource = require('../assets/images/plus.png')
+    }
+    else if (props.avatar === "plus_small.png"){
+        imageSource = require('../assets/images/plus_small.png')
    }
    else{
-        setDisplay("none")
+        imageSource = require('../assets/images/logo.png')
    }
-  };
-
-  let imageSource

-  if (props.avatar === "plus.png"){
-     imageSource = require('../assets/images/plus.png')
-  }
-  else if (props.avatar === "plus_small.png"){
-     imageSource = require('../assets/images/plus_small.png')
-  }
-  else{
-      imageSource = require('../assets/images/logo.png')
-  }
+    const styles = StyleSheet.create({
+        background: {
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 15,
+            backgroundColor: colors.cardBackground,
+            padding: "3%",
+            marginHorizontal: "3%",
+        },
+    
+        pseudoBar: {
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            marginHorizontal: "3%",
+            marginBottom: "3%",
+        },
+        avatar: {
+            padding: "5%",
+            resizeMode: 'contain',
+            borderWidth: 2,
+            borderColor: colors.cardElementBorder,
+            borderRadius: 45,
+            height: "100%",
+            flex: 0.03,
+        },
+        text: {
+            flex: 1,
+            fontSize: 20,
+            color: colors.cardElementBorder,
+            alignItems: 'center',
+            textAlign: 'left',
+            marginLeft: "3%",
+            padding: "2%",
+            height: "100%",
+        },
+        modify: {
+            height: "100%",
+            tintColor: colors.cardElementBorder,
+            resizeMode: 'contain',
+            flex: 0.1,
+            marginLeft: "3%",
+        },
+        delete: {
+            height: "100%",
+            width: "100%",
+            tintColor: colors.cardElementBorder,
+            resizeMode: 'contain',
+            flex: 1,
+        },
+    
+        filterBar: {
+            flexDirection: "row",
+            width: "85%",
+            paddingTop: "3%",
+            paddingBottom: "1%",
+            alignItems: "flex-end",
+            justifyContent: "center",
+            flex: 1,
+        },
+        filters: {
+            fontSize: 20,
+            color: colors.cardElementBorder,
+            flex: 1,
+            padding: "2%",
+            paddingLeft: 0,
+            paddingBottom: 0,
+        },
+        nbSelected: {
+            fontSize: 11,
+            flex: 1,
+            color: colors.cardDetail,
+            textAlign: "right",
+            marginRight: "3%",
+        },
+        arrow: {
+            height: "100%",
+            resizeMode: 'contain',
+            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>
+    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>
-        <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 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>
-        </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',
-    padding: "3%",
-    marginHorizontal: "3%",
-  },
-
-  pseudoBar: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    marginHorizontal: "3%",
-    marginBottom: "3%",
-  },
-  avatar: {
-    padding: "5%",
-    resizeMode: 'contain',
-    borderWidth: 2,
-    borderColor: "#ACA279",
-    borderRadius: 45,
-    height: "100%",
-    flex: 0.03,
-  },
-  text: {
-    flex: 1,
-    fontSize: 20,
-    color: '#ACA279',
-    alignItems: 'center',
-    textAlign: 'left',
-    marginLeft: "3%",
-    padding: "2%",
-    height: "100%",
-  },
-  modify: {
-      height: "100%",
-      tintColor: "#ACA279",
-      resizeMode: 'contain',
-      flex: 0.1,
-      marginLeft: "3%",
-  },
-  delete: {
-      height: "100%",
-      width: "100%",
-      tintColor: "#ACA279",
-      resizeMode: 'contain',
-      flex: 1,
-  },
-
-  filterBar: {
-      flexDirection: "row",
-      width: "85%",
-      paddingTop: "3%",
-      paddingBottom: "1%",
-      alignItems: "flex-end",
-      justifyContent: "center",
-      flex: 1,
-  },
-  filters: {
-      fontSize: 20,
-      color: '#ACA279',
-      flex: 1,
-      padding: "2%",
-      paddingLeft: 0,
-      paddingBottom: 0,
-  },
-  nbSelected: {
-      fontSize: 11,
-      flex: 1,
-      color: "#3F3C42",
-      textAlign: "right",
-      marginRight: "3%",
-  },
-  arrow: {
-      height: "100%",
-      resizeMode: 'contain',
-      tintColor: "#3F3C42",
-      flex: 0.1,
-  },
-});
--- a/LeftOvers/screens/Profiles.tsx
+++ b/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,36 +6,148 @@ 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 allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
-  const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]
+    const { colors, toggleColors } = useContext(ColorContext)

-  const allJackie = [{value: "Tomato"}, {value: "Relic"}]
-  const dieJackie = [{value: "Porkless"}, {value: "Vegetarian"}]
+    const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
+    const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]

-  const allGoro = []
-  const dieGoro = [{value: "Pescatarian"}]
+    const allJackie = [{value: "Tomato"}, {value: "Relic"}]
+    const dieJackie = [{value: "Porkless"}, {value: "Vegetarian"}]

-  const allViktor = [{value: "Pasta"}, {value: "Fish"}]
-  const dieViktor = [{value: "Dairy free"}, {value: "Vegan"}]
+    const allGoro = []
+    const dieGoro = [{value: "Pescatarian"}]

-  const [visible, setVisible] = useState(false);
-  const [opacity, setOpacity] = useState(1);
-  const raisePopUp = () => {
+    const allViktor = [{value: "Pasta"}, {value: "Fish"}]
+    const dieViktor = [{value: "Dairy free"}, {value: "Vegan"}]
+
+    const [visible, setVisible] = useState(false);
+    const [opacity, setOpacity] = useState(1);
+    const raisePopUp = () => {
        setVisible(true)
        setOpacity(0.3)
-  }
-  const erasePopUp = () => {
+    }
+    const erasePopUp = () => {
        setVisible(false)
        setOpacity(1)
-  }
+    }
+
+    const styles = StyleSheet.create({
+        container: {
+            height: "100%",
+            width: "100%",
+            flex: 1,
+            backgroundColor: '#3F3C42',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginBottom: 10,
+        },
+        linearGradient: {
+            height: "100%",
+            width: "100%",
+            flex: 1,
+            padding: 10,
+            paddingTop: 0,
+        },
+        separator: {
+            marginTop: "6%"
+        },
+    
+        modal: {
+            position: 'absolute',
+            top: '8%',
+            justifyContent: "center",
+            alignItems: "center",
+            width: "100%",
+        },
+        viewModal: {
+            flexDirection: "column",
+            padding: "3%",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            flex: 1,
+        },
+    
+        profileValidation: {
+            width: "100%",
+            alignItems: "center",
+            justifyContent: "center",
+            marginBottom: "6%",
+            flex: 0.7,
+        },
+        decisionBarVertical: {
+            flexDirection: "column",
+            width: "90%",
+            padding: "3%",
+            borderRadius: 15,
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "#F2F0E4",
+        },
+        validationQuestion: {
+            fontSize: 20,
+            color: '#ACA279',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: 0.3,
+            marginBottom: "2%",
+            marginHorizontal: "2%",
+        },
+        decisionBar: {
+            flexDirection: "row",
+            flex: 0.7,
+            width: "100%",
+            alignItems: "center",
+            justifyContent: "center",
+        },
+        yesButton: {
+            flexDirection: "row",
+            flex: 0.5,
+            padding: "2%",
+            marginHorizontal: "5%",
+            width: "90%",
+            borderRadius: 20,
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "#59BDCD",
+        },
+        yesText: {
+            fontSize: 20,
+            color: '#3F3C42',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: 0.7,
+            padding: "4%",
+        },
+        noButton: {
+            flexDirection: "row",
+            flex: 0.5,
+            padding: "2%",
+            marginHorizontal: "5%",
+            width: "90%",
+            borderRadius: 20,
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "#8A0000",
+        },
+        noText: {
+            fontSize: 20,
+            color: '#F2F0E4',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flex: 0.7,
+            padding: "4%",
+        },
+    });

-  return (
+    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={{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" 
@ -97,114 +209,5 @@ export default function Profiles({navigation, props}) {
            </View>
        </ScrollView>
    </SafeAreaProvider>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    height: "100%",
-    width: "100%",
-    flex: 1,
-    backgroundColor: '#3F3C42',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: 10,
-  },
-  linearGradient: {
-    height: "100%",
-    width: "100%",
-    flex: 1,
-    padding: 10,
-    paddingTop: 0,
-  },
-  separator: {
-    marginTop: "6%"
-  },
-
-  modal: {
-        position: 'absolute',
-        top: '8%',
-        justifyContent: "center",
-        alignItems: "center",
-        width: "100%",
-  },
-  viewModal: {
-        flexDirection: "column",
-        padding: "3%",
-        alignItems: "center",
-        justifyContent: "center",
-        width: "100%",
-        flex: 1,
-  },
-
-  profileValidation: {
-        width: "100%",
-        alignItems: "center",
-        justifyContent: "center",
-        marginBottom: "6%",
-        flex: 0.7,
-  },
-  decisionBarVertical: {
-          flexDirection: "column",
-          width: "90%",
-          padding: "3%",
-          borderRadius: 15,
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "#F2F0E4",
-  },
-  validationQuestion: {
-        fontSize: 20,
-        color: '#ACA279',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flex: 0.3,
-        marginBottom: "2%",
-        marginHorizontal: "2%",
-  },
-  decisionBar: {
-          flexDirection: "row",
-          flex: 0.7,
-          width: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-  },
-  yesButton: {
-          flexDirection: "row",
-          flex: 0.5,
-          padding: "2%",
-          marginHorizontal: "5%",
-          width: "90%",
-          borderRadius: 20,
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor: "#59BDCD",
-  },
-  yesText: {
-      fontSize: 20,
-      color: '#3F3C42',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flex: 0.7,
-      padding: "4%",
-  },
-  noButton: {
-        flexDirection: "row",
-        flex: 0.5,
-        padding: "2%",
-        marginHorizontal: "5%",
-        width: "90%",
-        borderRadius: 20,
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor: "#8A0000",
-  },
-  noText: {
-        fontSize: 20,
-        color: '#F2F0E4',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flex: 0.7,
-        padding: "4%",
-  },
-});
+    );
+}
--- a/LeftOvers/theme/colors.ts
+++ b/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,