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
@@ -11,38 +12,19 @@ type ListProps = {
 
 export default function ListSelect(props: ListProps) {
     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({
         titleBar: {
             flexDirection: "row",
             alignItems: "center",
-    justifyContent: "stretch",
+            backgroundColor: colors.cardElementTitleBackground,
-    backgroundColor: "#F2F0E4",
             borderTopRightRadius: 15,
             borderTopLeftRadius: 15,
             borderBottomRightRadius: 0,
             borderBottomLeftRadius: 0,
             borderWidth: 2,
-    borderColor: "#ACA279",
+            borderColor: colors.cardElementBorder,
             minWidth: "92%",
             maxWidth: "92%",
             marginBottom: 0,
@@ -50,12 +32,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,
@@ -64,13 +46,12 @@ const styles = StyleSheet.create({
         itemList: {
             flexDirection: "row",
             alignItems: "flex-start",
-      justifyContent: "stretch",
             borderWidth: 0,
             borderTopRightRadius: 0,
             borderTopLeftRadius: 0,
             borderBottomRightRadius: 15,
             borderBottomLeftRadius: 15,
-      backgroundColor: "#E3DEC9",
+            backgroundColor: colors.cardElementBackground,
             minWidth: "92%",
             maxWidth: "92%",
         },
@@ -87,14 +68,35 @@ const styles = StyleSheet.create({
             flex: 1,
             padding: "1%",
             paddingLeft: "3%",
-      color: "#3F3C42",
+            color: colors.cardElementText,
         },
     
         badges: {
-      backgroundColor: "#59BDCD",
+            backgroundColor: colors.cardElementBackground,
         },
         badgesText: {
             fontSize: 15,
-      color: "#F2F0E4",
+            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}/>
+    );
+}
+

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,19 +1,21 @@
-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
     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 { colors, toggleColors } = useContext(ColorContext);
 
     let imageSource
     if (props.avatar == "plus.png"){
@@ -26,33 +28,13 @@ export default function ProfileModification(props: ProfileProps) {
         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: '#F2F0E4',
+            backgroundColor: colors.cardBackground,
             padding: "3%",
             marginHorizontal: "3%",
         },
@@ -69,18 +51,18 @@ const styles = StyleSheet.create({
             padding: "5%",
             resizeMode: 'contain',
             borderWidth: 2,
-    borderColor: "#ACA279",
+            borderColor: colors.cardTitle,
             borderRadius: 45,
             height: "100%",
             flex: 0.04,
         },
         textInput: {
             fontSize: 15,
-    color: '#ACA279',
+            color: colors.cardTitle,
             borderRadius: 10,
             borderWidth: 2,
             borderStyle: 'dashed',
-    borderColor: '#ACA279',
+            borderColor: colors.cardTitle,
             alignItems: 'center',
             textAlign: 'left',
             flex: 0.8,
@@ -89,7 +71,7 @@ const styles = StyleSheet.create({
         },
         modify: {
             height: "100%",
-      tintColor: "#ACA279",
+            tintColor: colors.cardTitle,
             resizeMode: 'contain',
             flex: 0.1,
             marginLeft: "3%",
@@ -105,12 +87,33 @@ const styles = StyleSheet.create({
         },
         filters: {
             fontSize: 20,
-      color: '#ACA279',
+            color: colors.cardTitle,
             flex: 1,
         },
         nbSelected: {
             fontSize: 11,
-      color: "#3F3C42",
+            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>
+    );
+}
+

LeftOvers/screens/CreateProfile.tsx

@@ -1,22 +1,35 @@
-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 { 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={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+                <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="#ACA279" backColour="#F2F0E4" todo={() => (console.log("Profile Created"))}></ValidateButton>
+                    <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>
@@ -24,20 +37,3 @@ export default function CreateProfile(props) {
     );
 }
 
-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,
-  },
-});