Modification Ingredient Selection Page

LeftOvers/%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver

@@ -0,0 +1 @@
+1023.922.9182.0

LeftOvers/components/CustomButton.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {StyleSheet, Pressable, Text, View} from 'react-native';
+import ColorContext from '../theme/ColorContext';
 
 
 interface CustomButtonProps {
@@ -7,6 +8,34 @@ interface CustomButtonProps {
 }
 
 export default function CustomButton(props: CustomButtonProps) {
+  const {colors} = useContext(ColorContext)
+
+  const styles = StyleSheet.create({
+    button: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width : 150,
+      height: 40,
+      borderRadius: 4,
+      backgroundColor: colors.cardBackground,
+    },
+    text: {
+      fontSize: 15,
+      fontWeight: 'bold',
+      color: colors.cardElementBorder,
+    },
+    view: {
+      width : 145,
+      height: 35,
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: colors.cardElementBorder,
+      alignItems: 'center',
+      justifyContent: 'center',
+      margin: "1%",
+    },
+  });
+  
   return (
     <Pressable style={styles.button}>
       <View style={styles.view}>
@@ -14,31 +43,4 @@ export default function CustomButton(props: CustomButtonProps) {
       </View>
     </Pressable>
   );
-}
-
-const styles = StyleSheet.create({
-  button: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width : 150,
-    height: 40,
-    borderRadius: 4,
-    backgroundColor: '#F2F0E4',
-  },
-  text: {
-    fontSize: 15,
-    fontWeight: 'bold',
-    color: '#ACA279',
-  },
-  view: {
-    width : 145,
-    height: 35,
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: '#ACA279',
-    alignItems: 'center',
-    justifyContent: 'center',
-    margin: "1%",
-  },
-});
-
+}

LeftOvers/components/ListSelect.tsx

@@ -76,6 +76,9 @@ export default function ListSelect(props: ListProps) {
             fontSize: 15,
             color: colors.cardElementText,
         },
+        box: {
+            borderColor: "#3F3C42"
+        }
     });
 
     return (
@@ -92,6 +95,7 @@ export default function ListSelect(props: ListProps) {
             dropdownTextStyles={styles.itemText}
             badgeStyles={styles.badges}
             badgeTextStyles={styles.badgesText}
+            checkBoxStyles={styles.box}
             notFoundText="All Diets Already Selected"
             placeholder={props.title}
             label={props.title}/>

LeftOvers/components/ListWithoutSelect.tsx

@@ -5,7 +5,7 @@ import ColorContext from '../theme/ColorContext';
 
 type ListProps = {
     title: string
-    content: string[]
+    content: {title: string}[]
 }
 
 export default function ListWithoutSelect(props: ListProps) {

LeftOvers/components/ProfileDelete.tsx

@@ -1,15 +1,17 @@
-import {React, useState} from 'react';
+import React, {useContext, useState} from 'react';
 import {StyleSheet, Text, View, Image, Pressable} from 'react-native';
 import ListWithoutSelect from './ListWithoutSelect';
+import ColorContext from '../theme/ColorContext';
 
 type ProfileProps = {
   name: string
   avatar: string
-  diets: list<string>
-  allergies: list<string>
+  diets: {title: string}[]
+  allergies: {title: string}[]
 }
 
 export default function ProfileDelete(props: ProfileProps) {
+  const {colors} = useContext(ColorContext)
   const [display, setDisplay] = useState("flex")
   const changeListVisibility = () => {
     if (display == "none"){
@@ -31,6 +33,71 @@ export default function ProfileDelete(props: ProfileProps) {
      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%",
+      height: "100%",
+      borderWidth: 1,
+      borderColor: colors.blocBorder,
+    },
+  
+    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: "10%",
+      padding: "2%",
+      height: "100%",
+    },
+  
+    filterBar: {
+        flexDirection: "row",
+        width: "90%",
+        paddingTop: "3%",
+        alignItems: "flex-end",
+        justifyContent: "center",
+    },
+    filters: {
+        fontSize: 20,
+        color: colors.cardElementBackground,
+        flex: 1,
+        padding: "2%",
+        paddingLeft: 0,
+        paddingBottom: 0,
+    },
+    arrow: {
+        height: "100%",
+        resizeMode: 'contain',
+        tintColor: colors.cardDetail,
+        flex: 0.1,
+    },
+  });
+
   return (
     <View style={styles.background}>
         <View style={styles.pseudoBar}>
@@ -50,67 +117,4 @@ export default function ProfileDelete(props: ProfileProps) {
         </View>
     </View>
   );
-}
-
-const styles = StyleSheet.create({
-  background: {
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 15,
-    backgroundColor: '#F2F0E4',
-    padding: "3%",
-    marginHorizontal: "3%",
-    height: "100%",
-  },
-
-  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: "10%",
-    padding: "2%",
-    height: "100%",
-  },
-
-  filterBar: {
-      flexDirection: "row",
-      width: "90%",
-      paddingTop: "3%",
-      alignItems: "flex-end",
-      justifyContent: "center",
-  },
-  filters: {
-      fontSize: 20,
-      color: '#ACA279',
-      flex: 1,
-      padding: "2%",
-      paddingLeft: 0,
-      paddingBottom: 0,
-  },
-  arrow: {
-      height: "100%",
-      resizeMode: 'contain',
-      tintColor: "#3F3C42",
-      flex: 0.1,
-  },
-});
+}

LeftOvers/components/ProfileDetails.tsx

@@ -136,7 +136,7 @@ export default function ProfileDetails(props) {
             <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>
+                    <Text style={styles.nbSelected}>{props.diets.length} diets selected</Text>
                     <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
                 </View>
             </Pressable>

LeftOvers/components/ProfileModification.tsx

@@ -108,7 +108,7 @@ export default function ProfileModification(props: ProfileProps) {
             </View>
             <View style={styles.filterBar}>
                 <Text style={styles.filters}>Filters</Text>
-                <Text style={styles.nbSelected}>3 selected</Text>
+                <Text style={styles.nbSelected}>0 diets selected</Text>
             </View>
             <ListSelect title="Diets" content={props.diets}></ListSelect>
             <View style={{marginTop: "6%"}}/>

LeftOvers/components/RecipeElement.tsx

@@ -8,7 +8,7 @@ import background from '../assets/images/Background.png';
 interface RecipeElementProps {
   number: string
   title: string
-  textList: string[]
+  textList: {title: string}[]
   description: string
 }
 

LeftOvers/components/SelectedIngredient.tsx

@@ -6,7 +6,7 @@ import parameter from '../assets/images/parameter.png';
 import FoodElementText from './FoodElementText';
 
 interface SelectedIngredientProps {
-  ingredientList: string[]
+  ingredientList: {title: string}[]
   onEvent: () => void
 }
 

LeftOvers/package-lock.json

@@ -28,6 +28,7 @@
         "react-native-safe-area-context": "^4.6.3",
         "react-native-screens": "^3.22.0",
         "react-native-splash-screen": "^3.3.0",
+        "react-native-virtualized-view": "^1.0.0",
         "react-native-web": "~0.19.6",
         "typescript": "^5.1.3"
       },
@@ -15215,6 +15216,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-native-virtualized-view": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-virtualized-view/-/react-native-virtualized-view-1.0.0.tgz",
+      "integrity": "sha512-7YyFMMkNzJ787/giGkKcm0JEx0IcLEE/XHREGz2I4K1RISQGFjEDe6iWsapOnHSR/e1vhebZJ8VmqhSpg5YPzg==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.9",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.9.tgz",
@@ -28947,6 +28957,12 @@
         }
       }
     },
+    "react-native-virtualized-view": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/react-native-virtualized-view/-/react-native-virtualized-view-1.0.0.tgz",
+      "integrity": "sha512-7YyFMMkNzJ787/giGkKcm0JEx0IcLEE/XHREGz2I4K1RISQGFjEDe6iWsapOnHSR/e1vhebZJ8VmqhSpg5YPzg==",
+      "requires": {}
+    },
     "react-native-web": {
       "version": "0.19.9",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.9.tgz",

LeftOvers/package.json

@@ -29,6 +29,7 @@
     "react-native-safe-area-context": "^4.6.3",
     "react-native-screens": "^3.22.0",
     "react-native-splash-screen": "^3.3.0",
+    "react-native-virtualized-view": "^1.0.0",
     "react-native-web": "~0.19.6",
     "typescript": "^5.1.3"
   },

LeftOvers/screens/IngredientSelection.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useContext } from 'react';
-import { View, StyleSheet, Text, Image, Pressable, ActivityIndicator, FlatList, ScrollView, useWindowDimensions } from 'react-native';
+import { View, StyleSheet, Text, Image, Pressable, ActivityIndicator, FlatList, useWindowDimensions, ScrollView } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { Searchbar } from 'react-native-paper';
 import FoodElementText from '../components/FoodElementText';
@@ -11,6 +11,7 @@ import Ingredient from '../Models/Ingredient';
 import IngredientService from '../Services/Ingredients/IngredientsServices';
 import { LinearGradient } from 'expo-linear-gradient';
 import ColorContext from '../theme/ColorContext';
+import ValidateButton from '../components/ValidateButton';
 
 export default function IngredientSelection(props) {
   const alphabetArray: Array<string> = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
@@ -121,13 +122,12 @@ const loadIngredients = async () => {
 
     element: {
       width: "100%",
-      backgroundColor:'#F2F0E4',
+      backgroundColor: colors.cardBackground,
       borderRadius: 30,
       borderWidth: 1,
       borderColor: colors.blocBorder,
     },
     horizontalAlignment: {
-      width: "100%",
       flexDirection: 'row',
       justifyContent: 'space-around',
       alignItems: 'center',
@@ -137,50 +137,49 @@ const loadIngredients = async () => {
 
   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%"}}/>
                 <View style={styles.element}>
-                  <View style={[styles.horizontalAlignment, { margin: 10 }]}>
+                  <View style={[styles.horizontalAlignment, { margin: "2%" }]}>
                     {alphabetArray.map((source, index) => (
                       <Pressable key={index} onPress={() => handleLetterPress(source)}>
-                      <Text style={{ color: "blue" }}>{source}</Text>
+                        <Text style={{ color: colors.letterFilter }}>{source}</Text>
                       </Pressable>
                     ))}
                   </View>
-                    <View>
+                  <View>
                         <Searchbar
                             placeholder="Search"
                             onChangeText={handleSearch}
                             value={searchQuery}
                             style={{margin: "3%",
-                                    backgroundColor: '#F2F0E4',
+                                    backgroundColor: colors.cardBackground,
                                     borderWidth : 1,
-                                    borderColor: "#ACA279",
+                                    borderColor: colors.cardElementBorder,
                                     borderRadius: 15,
                             }}/>
-                    </View>
-                    <View style={{flex: 1, maxHeight: 300}}>
+                  </View>
+                  <View style={{height: 280}}>
                         <FlatList
                             data={response ? response : []}
                             renderItem={({ item }) => (
-                            <AvailableItem value={item} />
-                              )}
+                              <AvailableItem value={item} />
+                            )}
                             keyExtractor={(item, index) => index.toString()}
                             ListEmptyComponent={() => (
-                            isLoading ? <ActivityIndicator size="large" /> : <Text>Erreur lors du traitement des données</Text>
+                              isLoading ? <ActivityIndicator size="large" /> : <Text>Erreur lors du traitement des données</Text>
                             )}
                           style={{ flex: 1 }}
                         />
                         <View style={{ marginTop: '6%' }}></View>
-                    </View>
+                  </View>
                 </View>
                 <View style={{marginTop: "6%"}}/>
                 <View style={styles.element}>
                     <View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: "5%"}]}>
-                      <Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
+                      <Text style={{fontSize: 20, color: colors.cardElementBorder}}>Available</Text>
                     </View>
-                    <View style={{flex: 1, maxHeight: 300}}>
+                    <View style={{flex: 1, maxHeight: 280}}>
                       <FlatList
                               data={selectedIngredients}
                               renderItem={({ item }) => (
@@ -188,15 +187,14 @@ const loadIngredients = async () => {
                               )}
                               keyExtractor={(item, index) => index.toString()}
                               style={{ flex: 1 }}
-                            />
-                        <View style={{ height: 20 }}></View>
+                      />
+                      <View style={{ height: 20 }}></View>
                     </View>
                 </View>
                 <View style={{marginTop: "8%"}}></View>
-                <CustomButton title="Find a recipe"/>
+                <ValidateButton title="Find a recipe" image="validate.png" colour={colors.buttonMain} backColour={colors.cardBackground}/>
                 <View style={{marginBottom: "20%"}}></View>
             </LinearGradient>
-        </ScrollView>
     </SafeAreaProvider>
   );
 }

LeftOvers/screens/Profiles.tsx

@@ -1,5 +1,7 @@
 import React, { useContext, useState } from 'react';
-import { StyleSheet, View, Modal, Pressable, Text, Image, ScrollView, useWindowDimensions } from 'react-native';
+import { StyleSheet, View, Pressable, Text, Image, ScrollView, useWindowDimensions } from 'react-native';
+
+import {Modal, Portal, PaperProvider} from 'react-native-paper';
 
 import { LinearGradient } from 'expo-linear-gradient';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -42,8 +44,14 @@ export default function Profiles({navigation, props}) {
           allergies: allJackie,
         },
         // ... Ajoutez d'autres profils ici de la même manière
-      ];
-      
+    ];
+
+    const containerStyle = {
+        //minHeight: useWindowDimensions().height/2,
+        //width: useWindowDimensions().width,
+        height: "75%",
+        width: "100%",
+      };      
 
     const styles = StyleSheet.create({
         container: {
@@ -96,11 +104,13 @@ export default function Profiles({navigation, props}) {
             borderRadius: 15,
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: "#F2F0E4",
+            backgroundColor: colors.cardBackground,
+            borderWidth: 1,
+            borderColor: colors.blocBorder,
         },
         validationQuestion: {
             fontSize: 20,
-            color: '#ACA279',
+            color: colors.cardElementBorder,
             alignItems: 'center',
             justifyContent: 'center',
             flex: 0.3,
@@ -123,7 +133,7 @@ export default function Profiles({navigation, props}) {
             borderRadius: 20,
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: "#59BDCD",
+            backgroundColor: colors.yesButton,
         },
         yesText: {
             fontSize: 20,
@@ -168,43 +178,43 @@ export default function Profiles({navigation, props}) {
 
     return (
     <SafeAreaProvider style={{flex: 1}}>
-        <ScrollView>
-            <View style={{opacity: opacity, height: "100%", width: "100%", flex: 1}}>
+        <PaperProvider>
+            <ScrollView>
                 <LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
                     <View style={styles.separator}/>
                     {profileComponents}
+                    <View style={{marginBottom: "20%"}}/>
+                </LinearGradient>
+            </ScrollView>
+            <Portal>
+                <Modal visible={visible} onDismiss={erasePopUp} contentContainerStyle={containerStyle} style={{marginTop: 0, justifyContent: "flex-start"}}>
                     <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 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>
-                                    </View>
+                                    </Pressable>
                                 </View>
                             </View>
-                        </Modal>
+                        </View>
                     </View>
-                    <View style={{marginBottom: "20%"}}/>
-                </LinearGradient>
-            </View>
-        </ScrollView>
+                </Modal>
+            </Portal>
+        </PaperProvider>
     </SafeAreaProvider>
     );
     }

LeftOvers/theme/colors.ts

@@ -34,6 +34,8 @@ export interface Theme {
     textBottomBarFocussed: string,
     blocBorder: string,
     buttonMain: string,
+    yesButton: string,
+    letterFilter: string,
 }
 
 export const LightTheme : Theme = {
@@ -60,6 +62,8 @@ export const LightTheme : Theme = {
     textBottomBarFocussed: Moonstone,
     blocBorder: Alabaster,
     buttonMain: Ecru,
+    yesButton: Moonstone,
+    letterFilter: Moonstone,
 }
 
 export const DarkTheme : Theme = {
@@ -86,5 +90,7 @@ export const DarkTheme : Theme = {
     textBottomBarFocussed: SteelBlue,
     blocBorder: EerieBlack,
     buttonMain: CarolinaBlue,
+    yesButton: CarolinaBlue,
+    letterFilter: CarolinaBlue,
 }