fix: Profile creation page uses color context

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([]);
+    const [selected, setSelected] = React.useState([]);
-  return (
+    const { colors, toggleColors } = useContext(ColorContext);
-    <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 styles = StyleSheet.create({
+    const styles = StyleSheet.create({
-  titleBar: {
+        titleBar: {
-    flexDirection: "row",
+            flexDirection: "row",
-    alignItems: "center",
+            alignItems: "center",
-    justifyContent: "stretch",
+            backgroundColor: colors.cardElementTitleBackground,
-    backgroundColor: "#F2F0E4",
+            borderTopRightRadius: 15,
-    borderTopRightRadius: 15,
+            borderTopLeftRadius: 15,
-    borderTopLeftRadius: 15,
+            borderBottomRightRadius: 0,
-    borderBottomRightRadius: 0,
+            borderBottomLeftRadius: 0,
-    borderBottomLeftRadius: 0,
+            borderWidth: 2,
-    borderWidth: 2,
+            borderColor: colors.cardElementBorder,
-    borderColor: "#ACA279",
+            minWidth: "92%",
-    minWidth: "92%",
+            maxWidth: "92%",
-    maxWidth: "92%",
+            marginBottom: 0,
-    marginBottom: 0,
+            overflow: "hidden",
-    overflow: "hidden",
+        },
-  },
+        arrow: {
-  arrow: {
+            resizeMode: 'contain',
-    resizeMode: 'contain',
+            tintColor: colors.cardElementTitle,
-    tintColor: "#3F3C42",
+            flex: 0.1,
-    flex: 0.1,
+        },
-  },
+        title: {
-  title: {
+            fontSize: 15,
-    fontSize: 15,
+            color: colors.cardElementTitle,
-    color: '#3F3C42',
+            alignItems: 'center',
-    alignItems: 'center',
+            textAlign: "left",
-    textAlign: "left",
+            flex: 0.9,
-    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,
+        },
+    
+        badges: {
+            backgroundColor: colors.cardElementBackground,
+        },
+        badgesText: {
+            fontSize: 15,
+            color: colors.cardElementText,
+        },
+    });
 
-  itemList: {
+    return (
-      flexDirection: "row",
+        <MultipleSelectList
-      alignItems: "flex-start",
+            setSelected={(val) => setSelected(val)}
-      justifyContent: "stretch",
+            data={props.content}
-      borderWidth: 0,
+            save="value"
-      borderTopRightRadius: 0,
+            search={false}
-      borderTopLeftRadius: 0,
+            arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
-      borderBottomRightRadius: 15,
+            boxStyles={styles.titleBar}
-      borderBottomLeftRadius: 15,
+            inputStyles={styles.title}
-      backgroundColor: "#E3DEC9",
+            dropdownStyles={styles.itemList}
-      minWidth: "92%",
+            dropdownItemStyles={styles.itemCell}
-      maxWidth: "92%",
+            dropdownTextStyles={styles.itemText}
-  },
+            badgeStyles={styles.badges}
-  itemCell: {
+            badgeTextStyles={styles.badgesText}
-      padding: 0,
+            notFoundText="All Diets Already Selected"
-      paddingTop: "5%",
+            placeholder={props.title}
-      width: "100%",
+            label={props.title}/>
-      minWidth: 250,
+    );
-      maxWidth: 250,
+}
-  },
-  itemText: {
-      fontSize: 13,
-      textAlign: "left",
-      flex: 1,
-      padding: "1%",
-      paddingLeft: "3%",
-      color: "#3F3C42",
-  },
 
-  badges: {
-      backgroundColor: "#59BDCD",
-  },
-  badgesText: {
-      fontSize: 15,
-      color: "#F2F0E4",
-  },
-});

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,

LeftOvers/components/ProfileModification.tsx

@@ -1,116 +1,119 @@
-import React from 'react';
+import React, { useContext, useState } from 'react';
-import { 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
+    name: string
-  avatar: string
+    avatar: string
-  diets: list<string>
+    diets: string[]
-  allergies: list<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
+    let imageSource
-  if (props.avatar == "plus.png"){
+    if (props.avatar == "plus.png"){
-      imageSource = require('../assets/images/plus.png')
+        imageSource = require('../assets/images/plus.png')
-  }
+    }
-  else if (props.avatar == "plus_small.png"){
+    else if (props.avatar == "plus_small.png"){
-      imageSource = require('../assets/images/plus_small.png')
+        imageSource = require('../assets/images/plus_small.png')
-  }
+    }
-  else{
+    else{
-      imageSource = require('../assets/images/logo.png')
+        imageSource = require('../assets/images/logo.png')
-  }
+    }
 
-  return (
+    const styles = StyleSheet.create({
-    <View style={styles.background}>
+        background: {
-        <View style={styles.pseudoBar}>
+            flexDirection: 'column',
-            <Image source={imageSource} style={styles.avatar}></Image>
+            alignItems: 'center',
-            <TextInput style={styles.textInput} value={name} onChangeText={onChangeName} placeholder="Name"></TextInput>
+            justifyContent: 'center',
-            <Image source={require("../assets/images/modify.png")} style={styles.modify}></Image>
+            borderRadius: 15,
-        </View>
+            backgroundColor: colors.cardBackground,
-        <View style={styles.filterBar}>
+            padding: "3%",
-            <Text style={styles.filters}>Filters</Text>
+            marginHorizontal: "3%",
-            <Text style={styles.nbSelected}>3 selected</Text>
+        },
+    
+        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%",
+        },
+    
+        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>
-        <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: '#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.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: '#ACA279',
-      flex: 1,
-  },
-  nbSelected: {
-      fontSize: 11,
-      color: "#3F3C42",
-      textAlign: "right",
-    }
-});

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