fix: Profile creation page uses color context

1 year ago · 510aaf525e
parent fb5aacd48a
commit 510aaf525e
4 changed files with 223 additions and 224 deletions
--- a/LeftOvers/components/ListSelect.tsx
+++ b/LeftOvers/components/ListSelect.tsx
@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import {StyleSheet, Text, TextInput, View, Image, FlatList} 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
@ -10,91 +11,92 @@ type ListProps = {
 }

 export default function ListSelect(props: ListProps) {
-  const [selected, setSelected] = React.useState([]);
-  return (
-    <MultipleSelectList
-        setSelected={(val) => setSelected(val)}
-        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}
-        badgeStyles={styles.badges}
-        badgeTextStyles={styles.badgesText}
-        notFoundText="All Diets Already Selected"
-        placeholder={props.title}
-        label={props.title}/>
-  );
-}
+    const [selected, setSelected] = React.useState([]);
+    const { colors, toggleColors } = useContext(ColorContext);
+
+    const styles = StyleSheet.create({
+        titleBar: {
+            flexDirection: "row",
+            alignItems: "center",
+            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,
+        },
    
-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",
+            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: "1%",
+            paddingLeft: "3%",
+            color: colors.cardElementText,
+        },
    
-  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: "1%",
-      paddingLeft: "3%",
-      color: "#3F3C42",
-  },
+        badges: {
+            backgroundColor: colors.cardElementBackground,
+        },
+        badgesText: {
+            fontSize: 15,
+            color: colors.cardElementText,
+        },
+    });
+
+    return (
+        <MultipleSelectList
+            setSelected={(val) => setSelected(val)}
+            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}
+            badgeStyles={styles.badges}
+            badgeTextStyles={styles.badgesText}
+            notFoundText="All Diets Already Selected"
+            placeholder={props.title}
+            label={props.title}/>
+    );
+}

-  badges: {
-      backgroundColor: "#59BDCD",
-  },
-  badgesText: {
-      fontSize: 15,
-      color: "#F2F0E4",
-  },
-});
--- a/LeftOvers/components/ListWithoutSelect.tsx
+++ b/LeftOvers/components/ListWithoutSelect.tsx
@ -7,7 +7,7 @@ import ColorContext from '../theme/ColorContext';

 type ListProps = {
    title: string
-    content: list<string>
+    content: string[]
 }

 export default function ListWithoutSelect(props: ListProps) {
@ -18,7 +18,6 @@ export default function ListWithoutSelect(props: ListProps) {
        titleBar: {
            flexDirection: "row",
            alignItems: "center",
-            justifyContent: "stretch",
            backgroundColor: colors.cardElementTitleBackground,
            borderTopRightRadius: 15,
            borderTopLeftRadius: 15,
@ -47,7 +46,6 @@ export default function ListWithoutSelect(props: ListProps) {
        itemList: {
            flexDirection: "row",
            alignItems: "flex-start",
-            justifyContent: "stretch",
            borderWidth: 0,
            borderTopRightRadius: 0,
            borderTopLeftRadius: 0,
--- a/LeftOvers/components/ProfileModification.tsx
+++ b/LeftOvers/components/ProfileModification.tsx
@ -1,116 +1,119 @@
-import React from 'react';
-import { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import {StyleSheet, Text, TextInput, View, Image} from 'react-native';
+
 import ValidateButton from './ValidateButton';
 import ListSelect from './ListSelect';
 import ListWithoutSelect from './ListWithoutSelect';
+import ColorContext from '../theme/ColorContext';

 type ProfileProps = {
-  name: string
-  avatar: string
-  diets: list<string>
-  allergies: list<string>
+    name: string
+    avatar: string
+    diets: string[]
+    allergies: string[]
 }

 export default function ProfileModification(props: ProfileProps) {
-  const [name, onChangeName] = useState(props.name);
+    const [name, onChangeName] = useState(props.name);
+    const { colors, toggleColors } = useContext(ColorContext);

-  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')
-  }
+    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')
+    }

-  return (
-    <View style={styles.background}>
-        <View style={styles.pseudoBar}>
-            <Image source={imageSource} style={styles.avatar}></Image>
-            <TextInput style={styles.textInput} value={name} onChangeText={onChangeName} placeholder="Name"></TextInput>
-            <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
-        </View>
-        <View style={styles.filterBar}>
-            <Text style={styles.filters}>Filters</Text>
-            <Text style={styles.nbSelected}>3 selected</Text>
-        </View>
-        <ListSelect title="Diets" content={props.diets}></ListSelect>
-        <View style={{marginTop: "6%"}}/>
-        <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
-        <View style={{marginTop: "3%"}}/>
-        <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
-    </View>
-  );
-}
+    const styles = StyleSheet.create({
+        background: {
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 15,
+            backgroundColor: colors.cardBackground,
+            padding: "3%",
+            marginHorizontal: "3%",
+        },
    
-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: colors.cardTitle,
+            borderRadius: 45,
+            height: "100%",
+            flex: 0.04,
+        },
+        textInput: {
+            fontSize: 15,
+            color: colors.cardTitle,
+            borderRadius: 10,
+            borderWidth: 2,
+            borderStyle: 'dashed',
+            borderColor: colors.cardTitle,
+            alignItems: 'center',
+            textAlign: 'left',
+            flex: 0.8,
+            marginLeft: "7%",
+            padding: "2%",
+        },
+        modify: {
+            height: "100%",
+            tintColor: colors.cardTitle,
+            resizeMode: 'contain',
+            flex: 0.1,
+            marginLeft: "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.04,
-  },
-  textInput: {
-    fontSize: 15,
-    color: '#ACA279',
-    borderRadius: 10,
-    borderWidth: 2,
-    borderStyle: 'dashed',
-    borderColor: '#ACA279',
-    alignItems: 'center',
-    textAlign: 'left',
-    flex: 0.8,
-    marginLeft: "7%",
-    padding: "2%",
-  },
-  modify: {
-      height: "100%",
-      tintColor: "#ACA279",
-      resizeMode: 'contain',
-      flex: 0.1,
-      marginLeft: "3%",
-  },
+        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",
+        }
+    });
+
+    return (
+        <View style={styles.background}>
+            <View style={styles.pseudoBar}>
+                <Image source={imageSource} style={styles.avatar}></Image>
+                <TextInput style={styles.textInput} value={name} onChangeText={onChangeName} placeholder="Name"></TextInput>
+                <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
+            </View>
+            <View style={styles.filterBar}>
+                <Text style={styles.filters}>Filters</Text>
+                <Text style={styles.nbSelected}>3 selected</Text>
+            </View>
+            <ListSelect title="Diets" content={props.diets}></ListSelect>
+            <View style={{marginTop: "6%"}}/>
+            <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
+            <View style={{marginTop: "3%"}}/>
+            <ValidateButton title="Add Allergy" image="plus.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => console.log("Create Profile...")}/>
+        </View>
+    );
+}

-  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",
-    }
-});
--- a/LeftOvers/screens/CreateProfile.tsx
+++ b/LeftOvers/screens/CreateProfile.tsx
@ -1,43 +1,39 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import {StyleSheet, View, ScrollView, useWindowDimensions} from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { SafeAreaProvider } from 'react-native-safe-area-context';

 import ProfileModification from '../components/ProfileModification';
 import ValidateButton from '../components/ValidateButton';
+import ColorContext from '../theme/ColorContext';

 export default function CreateProfile(props) {
-  const all = []
-  const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
-  return (
-    <SafeAreaProvider style={{flex: 1}}>
-        <ScrollView>
-            <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
-                <View style={{marginTop: "6%"}}/>
-                <ProfileModification name="" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
-                <View style={{marginTop: "3%"}}/>
-                <ValidateButton title="Create Profile" image="plus.png" colour="#ACA279" backColour="#F2F0E4" todo={() => (console.log("Profile Created"))}></ValidateButton>
-                <View style={{marginTop: "20%"}}/>
-            </LinearGradient>
-        </ScrollView>
-    </SafeAreaProvider>
-  );
+    const { colors, toggleColors } = useContext(ColorContext)
+    const all = []
+    const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
+    
+    const styles = StyleSheet.create({
+        linearGradient: {
+            height: "100%",
+            width: "100%",
+            flex: 1,
+            padding: "2%",
+            paddingTop: 0,
+        },
+    });
+
+    return (
+        <SafeAreaProvider style={{flex: 1}}>
+            <ScrollView>
+                <LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+                    <View style={{marginTop: "6%"}}/>
+                    <ProfileModification name="" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
+                    <View style={{marginTop: "3%"}}/>
+                    <ValidateButton title="Create Profile" image="plus.png" colour={colors.cardTitle} backColour={colors.cardBackground} todo={() => (console.log("Profile Created"))}></ValidateButton>
+                    <View style={{marginTop: "20%"}}/>
+                </LinearGradient>
+            </ScrollView>
+        </SafeAreaProvider>
+    );
 }

-const styles = StyleSheet.create({
-  container: {
-    height: "100%",
-    width: "100%",
-    flex: 1,
-    backgroundColor: '#3F3C42',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  linearGradient: {
-    height: "100%",
-    width: "100%",
-    flex: 1,
-    padding: "2%",
-    paddingTop: 0,
-  },
-});