From 70d0808290fa29159d72ac19bbc09ee529f980ba Mon Sep 17 00:00:00 2001
From: Louison PARANT <Louison.PARANT@etu.uca.fr>
Date: Wed, 22 Nov 2023 10:50:46 +0100
Subject: [PATCH 1/4] Update Home and ModifyProfile Pages

---
 LeftOvers/App.tsx                            |   8 +-
 LeftOvers/components/FoodElementText.tsx     |  27 ++---
 LeftOvers/components/ListSelect.tsx          |  27 ++---
 LeftOvers/components/ListWithoutSelect.tsx   |  50 ++++----
 LeftOvers/components/ProfileDelete.tsx       |  14 ++-
 LeftOvers/components/ProfileDetails.tsx      |  16 ++-
 LeftOvers/components/ProfileElement.tsx      |  53 +++++----
 LeftOvers/components/ProfileModification.tsx |  61 +++++-----
 LeftOvers/components/ProfileSelection.tsx    |  13 +--
 LeftOvers/components/Separator.tsx           |   8 +-
 LeftOvers/components/ValidateButton.tsx      |  59 ++++++++--
 LeftOvers/screens/CreateProfile.tsx          |  10 +-
 LeftOvers/screens/FiltersSelection.tsx       |  10 +-
 LeftOvers/screens/HomePage.tsx               | 113 +++++++++----------
 LeftOvers/screens/ModifyProfile.tsx          |  17 +--
 LeftOvers/screens/Profiles.tsx               |  11 +-
 16 files changed, 284 insertions(+), 213 deletions(-)

diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx
index 8eea4ad..2953135 100644
--- a/LeftOvers/App.tsx
+++ b/LeftOvers/App.tsx
@@ -1,19 +1,21 @@
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View, SafeAreaView, ScrollView, Text} from 'react-native';
 import HomePage from './screens/HomePage';
 import ModifyProfile from './screens/ModifyProfile';
 import Profiles from './screens/Profiles';
 import RecipeSuggestion from './screens/RecipeSuggestion';
 import CreateProfile from './screens/CreateProfile';
 import FiltersSelection from './screens/FiltersSelection';
+import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {LinearGradient} from 'expo-linear-gradient';
 
 export default function App(props) {
   return(
     //<HomePage/>
-    //<ModifyProfile/>
+    <ModifyProfile/>
     //<Profiles/>
     //<RecipeSuggestion/>
     //<CreateProfile/>
-    <FiltersSelection/>
+    //<FiltersSelection/>
   );
 }
\ No newline at end of file
diff --git a/LeftOvers/components/FoodElementText.tsx b/LeftOvers/components/FoodElementText.tsx
index 1fe03c7..e1d3ea3 100644
--- a/LeftOvers/components/FoodElementText.tsx
+++ b/LeftOvers/components/FoodElementText.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
 import {StyleSheet,Pressable, Text, View, Image} from 'react-native';
 import Separator from '../components/Separator';
-import plus from '../assets/images/plus.png'; 
-import moins from '../assets/images/minus.png'; 
 
 
 
 interface foodElementImageProps {
-  source : string
   title  : string
 }
 
@@ -18,7 +15,6 @@ export default function FoodElementText(props : any) {
       <View style={styles.container}>
         <View style={styles.view}>
             <Text style={styles.text}>{props.title}</Text>
-            <Separator/>
         </View>
       </View>
     </Pressable>
@@ -29,33 +25,26 @@ const styles = StyleSheet.create({
   button: {
     alignItems: 'center',
     justifyContent: 'center',
-    width : 270,
-    height: 60,
+    width: "80%",
     borderRadius: 5,
-    elevation: 3,
     backgroundColor: '#E3DEC9',
   },
   text: {
-    fontSize: 15,
-    lineHeight: 21,
+    fontSize: 10,
     fontWeight: 'bold',
-    letterSpacing: 0.25,
-    padding : 7,
+    padding : "2%",
     color: 'black',
   },
   view: {
     alignItems: 'flex-start',
     justifyContent: 'center',
-    marginRight: 5 // Centre le contenu horizontalement
   },
   container: {
-    width :260,
-    height: 50,
+    width: "100%",
     borderRadius: 5,
-    elevation: 3,
-    borderWidth: 2,
-    borderColor: 'black',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+    borderWidth: 1,
+    borderColor: '#3F3C42',
+    flexDirection: 'column',
+    justifyContent: 'center',
   },
 });
diff --git a/LeftOvers/components/ListSelect.tsx b/LeftOvers/components/ListSelect.tsx
index 5b2a354..55d9704 100644
--- a/LeftOvers/components/ListSelect.tsx
+++ b/LeftOvers/components/ListSelect.tsx
@@ -25,6 +25,7 @@ export default function ListSelect(props: ListProps) {
         dropdownTextStyles={styles.itemText}
         badgeStyles={styles.badges}
         badgeTextStyles={styles.badgesText}
+        notFoundText="All Diets Already Selected"
         placeholder={props.title}
         label={props.title}/>
   );
@@ -35,7 +36,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "stretch",
-    minHeight: 25,
     backgroundColor: "#F2F0E4",
     borderTopRightRadius: 15,
     borderTopLeftRadius: 15,
@@ -43,13 +43,12 @@ const styles = StyleSheet.create({
     borderBottomLeftRadius: 0,
     borderWidth: 2,
     borderColor: "#ACA279",
-    width: 330,
+    minWidth: "92%",
+    maxWidth: "92%",
     marginBottom: 0,
     overflow: "hidden",
   },
   arrow: {
-    height: 20,
-    width: 20,
     resizeMode: 'contain',
     tintColor: "#3F3C42",
     flex: 0.1,
@@ -63,34 +62,36 @@ const styles = StyleSheet.create({
   },
 
   itemList: {
-      //flexDirection: "row",
+      flexDirection: "row",
       alignItems: "flex-start",
-      //justifyContent: "stretch",
+      justifyContent: "stretch",
       borderWidth: 0,
       borderTopRightRadius: 0,
       borderTopLeftRadius: 0,
       borderBottomRightRadius: 15,
       borderBottomLeftRadius: 15,
       backgroundColor: "#E3DEC9",
-      width: 330,
+      minWidth: "92%",
+      maxWidth: "92%",
   },
   itemCell: {
-      maxHeight: 30,
-      flex: 1,
       padding: 0,
-      paddingLeft: 10,
+      paddingTop: "5%",
+      width: "100%",
+      minWidth: 250,
+      maxWidth: 250,
   },
   itemText: {
       fontSize: 13,
       textAlign: "left",
       flex: 1,
-      padding: 5,
-      paddingLeft: 10,
+      padding: "1%",
+      paddingLeft: "3%",
       color: "#3F3C42",
   },
 
   badges: {
-      backgroundColor: "#59BDCD"
+      backgroundColor: "#59BDCD",
   },
   badgesText: {
       fontSize: 15,
diff --git a/LeftOvers/components/ListWithoutSelect.tsx b/LeftOvers/components/ListWithoutSelect.tsx
index d8c851c..3ae3bc5 100644
--- a/LeftOvers/components/ListWithoutSelect.tsx
+++ b/LeftOvers/components/ListWithoutSelect.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, Text, TextInput, View, Image, FlatList} from 'react-native';
+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'
@@ -12,20 +12,20 @@ type ListProps = {
 export default function ListWithoutSelect(props: ListProps) {
   const [selected, setSelected] = React.useState([]);
   return (
-    <MultipleSelectList
-        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}
-        checkBoxStyles={styles.box}
-        notFoundText="None"
-        placeholder={props.title}
-        label={props.title}/>
+        <MultipleSelectList
+            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}
+            checkBoxStyles={styles.box}
+            notFoundText="None"
+            placeholder={props.title}
+            label={props.title}/>
   );
 }
 
@@ -34,7 +34,6 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "stretch",
-    minHeight: 25,
     backgroundColor: "#F2F0E4",
     borderTopRightRadius: 15,
     borderTopLeftRadius: 15,
@@ -42,13 +41,12 @@ const styles = StyleSheet.create({
     borderBottomLeftRadius: 0,
     borderWidth: 2,
     borderColor: "#ACA279",
-    width: 330,
+    minWidth: "92%",
+    maxWidth: "92%",
     marginBottom: 0,
     overflow: "hidden",
   },
   arrow: {
-    height: 20,
-    width: 20,
     resizeMode: 'contain',
     tintColor: "#3F3C42",
     flex: 0.1,
@@ -62,22 +60,24 @@ const styles = StyleSheet.create({
   },
 
   itemList: {
-      //flexDirection: "row",
+      flexDirection: "row",
       alignItems: "flex-start",
-      //justifyContent: "stretch",
+      justifyContent: "stretch",
       borderWidth: 0,
       borderTopRightRadius: 0,
       borderTopLeftRadius: 0,
       borderBottomRightRadius: 15,
       borderBottomLeftRadius: 15,
       backgroundColor: "#E3DEC9",
-      width: 330,
+      minWidth: "92%",
+      maxWidth: "92%",
   },
   itemCell: {
-      maxHeight: 30,
-      flex: 1,
       padding: 0,
-      paddingLeft: 10,
+      paddingTop: "5%",
+      width: "100%",
+      minWidth: 250,
+      maxWidth: 250,
   },
   itemText: {
       fontSize: 13,
diff --git a/LeftOvers/components/ProfileDelete.tsx b/LeftOvers/components/ProfileDelete.tsx
index 9f8d002..33a8a27 100644
--- a/LeftOvers/components/ProfileDelete.tsx
+++ b/LeftOvers/components/ProfileDelete.tsx
@@ -21,10 +21,22 @@ export default function ProfileDelete(props: ProfileProps) {
     }
   };
 
+  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={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
+            <Image source={imageSource} style={styles.avatar}></Image>
             <Text style={styles.text}>{props.name}</Text>
         </View>
         <Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}>
diff --git a/LeftOvers/components/ProfileDetails.tsx b/LeftOvers/components/ProfileDetails.tsx
index deb63f7..dba3d78 100644
--- a/LeftOvers/components/ProfileDetails.tsx
+++ b/LeftOvers/components/ProfileDetails.tsx
@@ -22,10 +22,22 @@ export default function ProfileDetails(props: ProfileProps) {
     }
   };
 
+  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={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
+            <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}>
@@ -79,7 +91,7 @@ const styles = StyleSheet.create({
     fontSize: 20,
     color: '#ACA279',
     alignItems: 'center',
-    justifyContent: 'left',
+    textAlign: 'left',
     flex: 0.8,
     marginLeft: 20,
     padding: 5,
diff --git a/LeftOvers/components/ProfileElement.tsx b/LeftOvers/components/ProfileElement.tsx
index 658820e..f7c392d 100644
--- a/LeftOvers/components/ProfileElement.tsx
+++ b/LeftOvers/components/ProfileElement.tsx
@@ -21,19 +21,34 @@ export default function ProfileElement(props : Profile) {
       else{
           setWaiting("flex")
       }
-      if (props.isActive == "flex" && waiting == "none"){
+      if (props.disableSelection){
+          setSeparator("none")
+      }
+      else if (props.isActive == "flex" && waiting == "none"){
           setSeparator("flex")
       }
       else{
           setSeparator("none")
       }
       console.log(waiting, separator, props.name)
-  };
+  }
+
+  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 (
       <Pressable onPress={changeStatus} style={styles.button}>
-          <View style={{flexDirection: "column"}}>
+          <View>
               <View style={styles.pseudoBar}>
-                  <Image source={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
+                  <Image source={imageSource} style={styles.avatar}></Image>
                   <Text style={styles.text}>{props.name}</Text>
               </View>
               <View style={styles.pseudoBar}>
@@ -54,42 +69,42 @@ const styles = StyleSheet.create({
   button: {
     alignItems: 'center',
     justifyContent: 'flex-start',
-    height: 80,
-    //width: "75%",
-    marginVertical: 15,
+    height: "80%",
+    width: "78%",
+    marginVertical: "3%",
   },
   pseudoBar: {
       flexDirection: "row",
       alignItems: "center",
       justifyContent: "center",
-      //width: "120%",
-      width: 225,
-      marginHorizontal: 10,
-      marginBottom: 10,
+      width: "100%",
+      marginHorizontal: "3%",
+      marginBottom: "3%",
   },
   avatar: {
-      padding: 20,
+      padding: "5%",
       resizeMode: 'contain',
       borderWidth: 2,
       borderColor: "#ACA279",
       borderRadius: 45,
+      height: "100%",
+      flex: 0.01,
   },
   text: {
       fontSize: 15,
       color: '#ACA279',
       alignItems: 'center',
-      justifyContent: 'left',
-      flex: 0.8,
-      marginLeft: 20,
-      padding: 5,
-      width: "100%"
+      textAlign: 'left',
+      flex: 0.9,
+      marginLeft: "10%",
+      padding: "2%",
   },
 
   active: {
     borderWidth: 1,
     borderRadius: 20,
     borderColor: "#59BDCD",
-    padding: 5,
+    padding: "1%",
   },
   textActive: {
     fontSize: 10,
@@ -100,7 +115,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 20,
     borderColor: "#ACA279",
-    padding: 5,
+    padding: "1%",
   },
   textWaiting: {
     fontSize: 10,
diff --git a/LeftOvers/components/ProfileModification.tsx b/LeftOvers/components/ProfileModification.tsx
index 7f66760..192a45e 100644
--- a/LeftOvers/components/ProfileModification.tsx
+++ b/LeftOvers/components/ProfileModification.tsx
@@ -14,10 +14,21 @@ type ProfileProps = {
 export default function ProfileModification(props: ProfileProps) {
   const [name, onChangeName] = useState(props.name);
 
+  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={require("../assets/images/"+props.avatar)} style={styles.avatar}></Image>
+            <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>
@@ -26,9 +37,9 @@ export default function ProfileModification(props: ProfileProps) {
             <Text style={styles.nbSelected}>3 selected</Text>
         </View>
         <ListSelect title="Diets" content={props.diets}></ListSelect>
-        <View style={{marginTop: 10}}/>
+        <View style={{marginTop: "6%"}}/>
         <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
-        <View style={{marginTop: 10}}/>
+        <View style={{marginTop: "3%"}}/>
         <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
     </View>
   );
@@ -36,77 +47,69 @@ export default function ProfileModification(props: ProfileProps) {
 
 const styles = StyleSheet.create({
   background: {
-    //maxWidth: 370,
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 15,
     backgroundColor: '#F2F0E4',
-    padding: 10,
-    marginHorizontal: 10,
+    padding: "3%",
+    marginHorizontal: "3%",
   },
+
   pseudoBar: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    flex: 0.7,
-    width: 330,
-    marginBottom: 10,
+    width: "100%",
+    marginHorizontal: "3%",
+    marginBottom: "3%",
   },
   avatar: {
-    padding: 20,
+    padding: "5%",
     resizeMode: 'contain',
     borderWidth: 2,
     borderColor: "#ACA279",
     borderRadius: 45,
+    height: "100%",
+    flex: 0.04,
   },
   textInput: {
-    flex: 0.5,
+    flex: 0.9,
     fontSize: 15,
     color: '#ACA279',
-    width : 150,
     borderRadius: 10,
     borderWidth: 2,
     borderStyle: 'dashed',
     borderColor: '#ACA279',
     alignItems: 'center',
-    justifyContent: 'left',
+    textAlign: 'left',
     flex: 0.8,
-    marginLeft: 20,
-    padding: 5,
+    marginLeft: "7%",
+    padding: "2%",
   },
   modify: {
-      height: 20,
-      width: 20,
+      height: "100%",
       tintColor: "#ACA279",
       resizeMode: 'contain',
       flex: 0.1,
-      marginLeft: 5,
+      marginLeft: "3%",
   },
 
-
-
   filterBar: {
       flexDirection: "row",
-      width: 300,
-      paddingTop: 10,
-      paddingBottom: 5,
+      width: "85%",
+      paddingTop: "3%",
+      paddingBottom: "2%",
       alignItems: "flex-end",
       justifyContent: "center",
-      flex: 0.2,
   },
   filters: {
-      flex: 0.5,
       fontSize: 20,
       color: '#ACA279',
       flex: 1,
-      padding: 5,
-      paddingLeft: 0,
-      paddingBottom: 0,
   },
   nbSelected: {
       fontSize: 11,
-      flex: 1,
       color: "#3F3C42",
       textAlign: "right",
     }
diff --git a/LeftOvers/components/ProfileSelection.tsx b/LeftOvers/components/ProfileSelection.tsx
index 832e727..60ee2c8 100644
--- a/LeftOvers/components/ProfileSelection.tsx
+++ b/LeftOvers/components/ProfileSelection.tsx
@@ -36,12 +36,12 @@ export default function ProfileSelection(props: ProfileSelectionProps) {
 
   return (
       <View style={styles.background}>
-          <Pressable onPress={decreaseCounter} style={{}}>
-             <Image source={bracketLeft} style={{ width: 40, height: 40 }} />
+          <Pressable onPress={decreaseCounter}>
+             <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}}/>
           </Pressable>
           <ProfileElement name={props.listProfile[cpt].name} avatar={props.listProfile[cpt].avatar} isActive={props.listProfile[cpt].isActive} disableSelection={props.disableSelection}/>
-          <Pressable onPress={increaseCounter} style={{}}>
-             <Image source={bracketRight} style={{ width: 40, height: 40 }} />
+          <Pressable onPress={increaseCounter}>
+             <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}}/>
           </Pressable>
       </View>
   );
@@ -49,10 +49,9 @@ export default function ProfileSelection(props: ProfileSelectionProps) {
 
 const styles = StyleSheet.create({
   background: {
-    //height: 120,
-    height: 100,
+    width: "92%",
+    height: 80,
     borderRadius: 20,
-    marginHorizontal: 10,
     borderWidth: 2,
     borderColor: '#ACA279',
     backgroundColor: '#E3DEC9',
diff --git a/LeftOvers/components/Separator.tsx b/LeftOvers/components/Separator.tsx
index dbeae6f..21a8db5 100644
--- a/LeftOvers/components/Separator.tsx
+++ b/LeftOvers/components/Separator.tsx
@@ -7,11 +7,11 @@ export default function Separator (){
   
   const styles = StyleSheet.create({
     separator: {
-      width: 200, // Largeur de la ligne
-      backgroundColor: 'black', // Couleur de la ligne
+      width: "90%",
+      backgroundColor: '#3F3C42',
       borderWidth : 1,
-      marginLeft : 10,
-      marginRight : 10,
+      marginLeft : "5%",
+      marginRight : "5%",
     },
   });
   
\ No newline at end of file
diff --git a/LeftOvers/components/ValidateButton.tsx b/LeftOvers/components/ValidateButton.tsx
index 1ad4d82..4639b98 100644
--- a/LeftOvers/components/ValidateButton.tsx
+++ b/LeftOvers/components/ValidateButton.tsx
@@ -10,6 +10,47 @@ type ValidateButtonProps = {
 }
 
 export default function ValidateButton(props: ValidateButtonProps) {
+  let imageSource
+  if (props.image == "cook.png"){
+    imageSource = require('../assets/images/cook.png')
+  }
+  else if (props.image == "cross.png"){
+      imageSource = require('../assets/images/cross.png')
+    }
+  else if (props.image == "delete.png"){
+      imageSource = require('../assets/images/delete.png')
+  }
+  else if (props.image == "modify.png"){
+      imageSource = require('../assets/images/modify.png')
+  }
+  else if (props.image == "parameter.png"){
+      imageSource = require('../assets/images/parameter.png')
+  }
+  else if (props.image == "plus.png"){
+      imageSource = require('../assets/images/plus.png')
+  }
+  else if (props.image == "plus_small.png"){
+      imageSource = require('../assets/images/plus_small.png')
+  }
+  else if (props.image == "save.png"){
+      imageSource = require('../assets/images/save.png')
+  }
+  else if (props.image == "search.png"){
+      imageSource = require('../assets/images/search.png')
+  }
+  else if (props.image == "update.png"){
+      imageSource = require('../assets/images/update.png')
+  }
+  else if (props.image == "validate.png"){
+      imageSource = require('../assets/images/validate.png')
+  }
+  else if (props.image == "warehouse.png"){
+      imageSource = require('../assets/images/warehouse.png')
+  }
+  else{
+      imageSource = require('../assets/images/logo.png')
+  }
+
   return (
     <Pressable style={{
         alignItems: 'center',
@@ -23,18 +64,18 @@ export default function ValidateButton(props: ValidateButtonProps) {
             alignItems: 'center',
             justifyContent: "center",
             flexDirection: "row",
-            padding: 5,
-            paddingRight: 10,}}>
-            <Image source={require('../assets/images/'+props.image)} style={{
-                height: 20,
-                width: 20,
-                marginLeft: 5,
-                marginRight: 10,
-                resizeMode: "center",
+            padding: "2%",
+            paddingRight: "3%",}}>
+            <Image source={imageSource} style={{
+                height: "90%",
+                width: "9%",
+                marginLeft: "2%",
+                marginRight: "3%",
+                resizeMode: "contain",
                 tintColor: props.colour,}}>
             </Image>
             <Text style={{
-                fontSize: 20,
+                fontSize: 15,
                 color: props.colour,
             }}>{props.title}</Text>
         </View>
diff --git a/LeftOvers/screens/CreateProfile.tsx b/LeftOvers/screens/CreateProfile.tsx
index 8d4b3e4..697b5e5 100644
--- a/LeftOvers/screens/CreateProfile.tsx
+++ b/LeftOvers/screens/CreateProfile.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View, ScrollView} from 'react-native';
 import ProfileModification from '../components/ProfileModification';
 import ValidateButton from '../components/ValidateButton';
 import TopBar from '../components/TopBar';
@@ -10,16 +10,16 @@ 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>
-        <TopBar title="Create Profile" isVisible="true"/>
-        <View style={styles.container}>
+    <SafeAreaProvider style={{flex: 1}}>
+        <ScrollView>
+            <TopBar title="Create Profile" isVisible="true"/>
             <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
                 <View style={{marginTop: 20}}/>
                 <ProfileModification name="" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
                 <View style={{marginTop: 20}}/>
                 <ValidateButton title="Create Profile" image="plus.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
             </LinearGradient>
-        </View>
+        </ScrollView>
     </SafeAreaProvider>
   );
 }
diff --git a/LeftOvers/screens/FiltersSelection.tsx b/LeftOvers/screens/FiltersSelection.tsx
index 6a3f42b..3e6b2b0 100644
--- a/LeftOvers/screens/FiltersSelection.tsx
+++ b/LeftOvers/screens/FiltersSelection.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, View, Text} from 'react-native';
+import {StyleSheet, View, Text, ScrollView} from 'react-native';
 import ProfileModification from '../components/ProfileModification';
 import ValidateButton from '../components/ValidateButton';
 import TopBar from '../components/TopBar';
@@ -26,9 +26,9 @@ export default function FiltersSelection(props) {
   const allAdd = []
 
   return (
-    <SafeAreaProvider>
-        <TopBar title="Filters Selection" isVisible="true"/>
-        <View style={styles.container}>
+    <SafeAreaProvider style={{flex: 1}}>
+        <ScrollView>
+            <TopBar title="Filters Selection" isVisible="true"/>
             <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
                 <View style={{marginTop: 20}}/>
                 <View style={styles.profilesSelection}>
@@ -65,7 +65,7 @@ export default function FiltersSelection(props) {
                 <View style={{marginTop: 20}}/>
                 <ValidateButton title="Save Filters" image="save.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
             </LinearGradient>
-        </View>
+        </ScrollView>
     </SafeAreaProvider>
   );
 }
diff --git a/LeftOvers/screens/HomePage.tsx b/LeftOvers/screens/HomePage.tsx
index dcf7ce7..5a13583 100644
--- a/LeftOvers/screens/HomePage.tsx
+++ b/LeftOvers/screens/HomePage.tsx
@@ -1,5 +1,5 @@
 import {React, useState} from 'react';
-import {StyleSheet, View, Text, Pressable, Image} from 'react-native';
+import {StyleSheet, View, Text, Pressable, Image, ScrollView, SafeAreaView} from 'react-native';
 import ProfileModification from '../components/ProfileModification';
 import ValidateButton from '../components/ValidateButton';
 import TopBar from '../components/TopBar';
@@ -41,15 +41,15 @@ export default function HomePage(props) {
   };
 
   return (
-    <SafeAreaProvider>
-        <View style={styles.topBar}>
-            <Image source={require("../assets/images/logo.png")} style={{width: 40, height: 40, flex: 0.1, marginLeft: 10}}/>
-            <Text style={styles.appName}>LeftOvers</Text>
-            <Image source={require("../assets/images/logo.png")} style={{width: 40, height: 40, flex: 0.1, marginRight: 10}}/>
-        </View>
-        <View style={styles.container}>
+    <SafeAreaProvider style={{flex: 1}}>
+        <ScrollView>
+            <View style={styles.topBar}>
+                <Image source={require("../assets/images/logo.png")} style={{width: "100%", height: "100%", flex: 0.1, marginLeft: "5%", resizeMode: "contain"}}/>
+                <Text style={styles.appName}>LeftOvers</Text>
+                <Image source={require("../assets/images/logo.png")} style={{width: "100%", height: "100%", flex: 0.1, marginRight: "5%", resizeMode: "contain"}}/>
+            </View>
             <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-                <View style={{marginTop: 20}}/>
+                <View style={styles.separator}/>
                 <View style={styles.welcome}>
                     <View style={{flexDirection: "column", alignItems: "flex-start", justifyContent: "center", width: "100%"}}>
                         <View style={{flexDirection: "row"}}>
@@ -60,57 +60,57 @@ export default function HomePage(props) {
                         <Text style={styles.text}>Glad to see you again!</Text>
                     </View>
                 </View>
-                <View style={{marginTop: 20}}/>
+                <View style={styles.separator}/>
                 <View style={styles.profilesSelection}>
                     <View style={styles.filterBar}>
                         <Text style={styles.filters}>Profiles</Text>
                         <Text style={styles.nbSelected}>2 selected</Text>
                     </View>
-                    <View style={{marginTop: 10}}/>
+                    <View style={{marginTop: "3%"}}/>
                     <ProfileSelection listProfile={profiles} disableSelection={true}/>
-                    <View style={{marginTop: 20}}/>
+                    <View style={{marginTop: "4%"}}/>
                     <ValidateButton title="Modify Profiles" image="parameter.png" colour="#59BDCD" backColour="#E3DEC9"/>
                 </View>
-                <View style={{marginTop: 20}}/>
+                <View style={styles.separator}/>
                 <View style={styles.profilesSelection}>
                     <View style={styles.filterBar}>
                         <Text style={styles.filters}>Ingredient Stocks</Text>
                     </View>
-                    <View style={{marginTop: 10}}/>
+                    <View style={{marginTop: "4%"}}/>
                     <ValidateButton title="Manage Stocks" image="warehouse.png" colour="#59BDCD" backColour="#E3DEC9"/>
                 </View>
-                <View style={{marginTop: 20}}/>
+                <View style={styles.separator}/>
                 <View style={styles.profilesSelection}>
-                     <View style={styles.filterBar}>
-                         <Text style={styles.filters}>Cooking</Text>
-                     </View>
-                     <View style={{marginTop: 10}}/>
-                     <View style={styles.ingredientSelection}>
-                         <Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text>
-                         <View style={{flexDirection: "row", padding: 10, justifyContent: "center", alignItems: "center"}}>
-                             <Pressable onPress={decreaseCounter}>
-                                 <Image source={bracketLeft} style={{ width: 40, height: 40 }} />
-                             </Pressable>
-                             <FoodElementText title={ingredientList[cpt].title}/>
-                             <Pressable onPress={increaseCounter}>
-                                 <Image source={bracketRight} style={{ width: 40, height: 40 }} />
-                             </Pressable>
-                         </View>
-                     </View>
-                     <View style={{marginTop: 15}}/>
-                     <ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9"/>
-                     <View style={{marginTop: 10}}/>
-                     <ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9"/>
+                    <View style={styles.filterBar}>
+                        <Text style={styles.filters}>Cooking</Text>
+                    </View>
+                    <View style={{marginTop: "3%"}}/>
+                    <View style={styles.ingredientSelection}>
+                        <Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text>
+                        <View style={{flexDirection: "row", padding: "4%", justifyContent: "center", alignItems: "center"}}>
+                            <Pressable onPress={decreaseCounter}>
+                                <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} />
+                            </Pressable>
+                            <FoodElementText title={ingredientList[cpt].title}/>
+                            <Pressable onPress={increaseCounter}>
+                                <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} />
+                            </Pressable>
+                        </View>
+                    </View>
+                    <View style={{marginTop: "4%"}}/>
+                    <ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9"/>
+                    <View style={{marginTop: "3%"}}/>
+                    <ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9"/>
                 </View>
+                <View style={{marginBottom: "20%"}}/>
             </LinearGradient>
-        </View>
+        </ScrollView>
     </SafeAreaProvider>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    height: "100%",
     width: "100%",
     flex: 1,
     backgroundColor: '#3F3C42',
@@ -118,30 +118,27 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   linearGradient: {
-    height: "100%",
     width: "100%",
     flex: 1,
-    padding: 10,
+    padding: "2%",
     paddingTop: 0,
   },
+  separator: {
+    marginTop: "6%"
+  },
 
   filterBar: {
         flexDirection: "row",
-        width: 300,
-        paddingTop: 10,
-        paddingBottom: 5,
+        width: "85%",
+        paddingTop: "3%",
+        paddingBottom: "2%",
         alignItems: "flex-end",
         justifyContent: "center",
-        flex: 0.2,
   },
   filters: {
-        flex: 0.8,
         fontSize: 20,
         color: '#ACA279',
         flex: 1,
-        padding: 5,
-        paddingLeft: 0,
-        paddingBottom: 0,
   },
   nbSelected: {
         fontSize: 11,
@@ -150,23 +147,22 @@ const styles = StyleSheet.create({
   },
 
   profilesSelection: {
-        flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: 20,
         backgroundColor: '#F2F0E4',
-        paddingTop: 5,
-        marginHorizontal: 10,
+        marginHorizontal: "3%",
+        paddingBottom: "3%",
   },
+
   welcome: {
-        flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: 20,
         backgroundColor: '#F2F0E4',
-        paddingVertical: 10,
-        paddingHorizontal: 25,
-        marginHorizontal: 10,
+        paddingVertical: "3%",
+        paddingHorizontal: "7%",
+        marginHorizontal: "3%",
   },
   text: {
         fontSize: 20,
@@ -176,10 +172,9 @@ const styles = StyleSheet.create({
         fontSize: 20,
         fontWeight: "bold",
         color: '#59BDCD',
-        textAlign: "left",
   },
+
   ingredientSelection: {
-        flexDirection: 'column',
         width: "90%",
         alignItems: 'center',
         justifyContent: 'center',
@@ -187,8 +182,7 @@ const styles = StyleSheet.create({
         backgroundColor: '#E3DEC9',
         borderWidth: 2,
         borderColor: "#ACA279",
-        marginHorizontal: 10,
-        padding: 5
+        padding: "2%"
   },
 
   appName: {
@@ -201,9 +195,10 @@ const styles = StyleSheet.create({
   topBar: {
         flexDirection: 'row',
         width: "100%",
+        height: "11%",
         alignItems: 'center',
         justifyContent: 'center',
         backgroundColor: '#F2F0E4',
-        padding: 5,
+        paddingTop: "8%",
   },
 });
\ No newline at end of file
diff --git a/LeftOvers/screens/ModifyProfile.tsx b/LeftOvers/screens/ModifyProfile.tsx
index 1a8b096..85c55e3 100644
--- a/LeftOvers/screens/ModifyProfile.tsx
+++ b/LeftOvers/screens/ModifyProfile.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {StyleSheet, View, ScrollView, useWindowDimensions} from 'react-native';
 import ProfileModification from '../components/ProfileModification';
 import ValidateButton from '../components/ValidateButton';
 import TopBar from '../components/TopBar';
@@ -10,16 +10,17 @@ export default function ModifyProfile(props) {
   const all = [{value: "Mussels"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
   const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
   return (
-    <SafeAreaProvider>
+    <SafeAreaProvider style={{flex: 1}}>
         <TopBar title="Modify Profile" isVisible="true"/>
-        <View style={styles.container}>
-            <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-                <View style={{marginTop: 20}}/>
+        <ScrollView style={{minHeight: useWindowDimensions().height}}>
+            <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+                <View style={{marginTop: "6%"}}/>
                 <ProfileModification name="Johnny Silverhand" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
-                <View style={{marginTop: 10}}/>
+                <View style={{marginTop: "3%"}}/>
                 <ValidateButton title="Update Profile" image="update.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
+                <View style={{marginBottom: "20%"}}/>
             </LinearGradient>
-        </View>
+        </ScrollView>
     </SafeAreaProvider>
   );
 }
@@ -37,7 +38,7 @@ const styles = StyleSheet.create({
     height: "100%",
     width: "100%",
     flex: 1,
-    padding: 10,
+    padding: "2%",
     paddingTop: 0,
   },
 });
\ No newline at end of file
diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx
index 0f2e83e..4902c6c 100644
--- a/LeftOvers/screens/Profiles.tsx
+++ b/LeftOvers/screens/Profiles.tsx
@@ -1,12 +1,12 @@
 import {React, useState} from 'react';
-import {StyleSheet, View, Modal, Pressable, Text, Image} from 'react-native';
+import {StyleSheet, View, Modal, Pressable, Text, Image, ScrollView} from 'react-native';
 import ProfileDetails from '../components/ProfileDetails';
 import ProfileDelete from '../components/ProfileDelete';
 import TopBar from '../components/TopBar';
 import {LinearGradient} from 'expo-linear-gradient';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 
-export default function ModifyProfile(props) {
+export default function Profiles(props) {
   const allJohnny = [{value: "Coconut"}, {value: "Skimmed Milk"}, {value: "Nuts"}]
   const dieJohnny = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Pescatarian"}]
 
@@ -31,8 +31,8 @@ export default function ModifyProfile(props) {
   }
 
   return (
-    <SafeAreaProvider>
-        <View style={styles.container}>
+    <SafeAreaProvider style={{flex: 1}}>
+        <ScrollView>
             <View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}>
                 <TopBar title="Profiles" isVisible="true"/>
                 <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
@@ -75,7 +75,7 @@ export default function ModifyProfile(props) {
                     </View>
                 </LinearGradient>
             </View>
-        </View>
+        </ScrollView>
     </SafeAreaProvider>
   );
 }
@@ -88,6 +88,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#3F3C42',
     alignItems: 'center',
     justifyContent: 'center',
+    marginBottom: 10,
   },
   linearGradient: {
     height: "100%",

From 554efde91b62987999ebe2f81c19c553a9b7801a Mon Sep 17 00:00:00 2001
From: Louison PARANT <Louison.PARANT@etu.uca.fr>
Date: Wed, 22 Nov 2023 15:28:51 +0100
Subject: [PATCH 2/4] Update Profile Page and Pop-Up ProfileDelete

---
 LeftOvers/App.tsx                            |  4 +-
 LeftOvers/components/ProfileDelete.tsx       | 52 ++++++---------
 LeftOvers/components/ProfileDetails.tsx      | 69 ++++++++++----------
 LeftOvers/components/ProfileModification.tsx |  1 -
 LeftOvers/screens/Profiles.tsx               | 60 ++++++++---------
 5 files changed, 85 insertions(+), 101 deletions(-)

diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx
index 2953135..b45a76e 100644
--- a/LeftOvers/App.tsx
+++ b/LeftOvers/App.tsx
@@ -12,8 +12,8 @@ import {LinearGradient} from 'expo-linear-gradient';
 export default function App(props) {
   return(
     //<HomePage/>
-    <ModifyProfile/>
-    //<Profiles/>
+    //<ModifyProfile/>
+    <Profiles/>
     //<RecipeSuggestion/>
     //<CreateProfile/>
     //<FiltersSelection/>
diff --git a/LeftOvers/components/ProfileDelete.tsx b/LeftOvers/components/ProfileDelete.tsx
index 33a8a27..944f2b7 100644
--- a/LeftOvers/components/ProfileDelete.tsx
+++ b/LeftOvers/components/ProfileDelete.tsx
@@ -22,7 +22,6 @@ export default function ProfileDelete(props: ProfileProps) {
   };
 
   let imageSource
-
   if (props.avatar == "plus.png"){
      imageSource = require('../assets/images/plus.png')
   }
@@ -39,7 +38,7 @@ export default function ProfileDelete(props: ProfileProps) {
             <Image source={imageSource} style={styles.avatar}></Image>
             <Text style={styles.text}>{props.name}</Text>
         </View>
-        <Pressable onPress={changeListVisibility} style={{height: 20, marginTop: 20,}}>
+        <Pressable onPress={changeListVisibility} style={{height: "5%", marginTop: "6%", flex: 1, marginBottom: "3%"}}>
             <View style={styles.filterBar}>
                 <Text style={styles.filters}>Filters</Text>
                 <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
@@ -47,9 +46,8 @@ export default function ProfileDelete(props: ProfileProps) {
         </Pressable>
         <View style={{display: display}}>
             <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
-            <View style={{marginTop: 10}}/>
+            <View style={{marginTop: "3%"}}/>
             <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
-            <View style={{marginTop: 10}}/>
         </View>
     </View>
   );
@@ -57,69 +55,61 @@ export default function ProfileDelete(props: ProfileProps) {
 
 const styles = StyleSheet.create({
   background: {
-    //maxWidth: 370,
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 15,
     backgroundColor: '#F2F0E4',
-    padding: 10,
-    marginHorizontal: 10,
+    padding: "3%",
+    marginHorizontal: "3%",
+    height: "100%",
   },
+
   pseudoBar: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    flex: 0.7,
-    width: 330,
-    marginBottom: 10,
+    width: "100%",
+    marginHorizontal: "3%",
+    marginBottom: "3%",
   },
   avatar: {
-    padding: 20,
+    padding: "5%",
     resizeMode: 'contain',
     borderWidth: 2,
     borderColor: "#ACA279",
     borderRadius: 45,
+    height: "100%",
+    flex: 0.03,
   },
   text: {
+    flex: 1,
     fontSize: 20,
     color: '#ACA279',
     alignItems: 'center',
-    justifyContent: 'left',
-    flex: 0.8,
-    marginLeft: 20,
-    padding: 5,
+    textAlign: 'left',
+    marginLeft: "10%",
+    padding: "2%",
+    height: "100%",
   },
 
-
-
   filterBar: {
       flexDirection: "row",
-      width: 300,
-      paddingTop: 10,
-      paddingBottom: 5,
+      width: "90%",
+      paddingTop: "3%",
       alignItems: "flex-end",
       justifyContent: "center",
-      flex: 0.2,
   },
   filters: {
-      flex: 0.5,
       fontSize: 20,
       color: '#ACA279',
       flex: 1,
-      padding: 5,
+      padding: "2%",
       paddingLeft: 0,
       paddingBottom: 0,
   },
-  nbSelected: {
-      fontSize: 11,
-      flex: 1,
-      color: "#3F3C42",
-      textAlign: "right",
-  },
   arrow: {
-      height: 20,
-      width: 20,
+      height: "100%",
       resizeMode: 'contain',
       tintColor: "#3F3C42",
       flex: 0.1,
diff --git a/LeftOvers/components/ProfileDetails.tsx b/LeftOvers/components/ProfileDetails.tsx
index dba3d78..03923c5 100644
--- a/LeftOvers/components/ProfileDetails.tsx
+++ b/LeftOvers/components/ProfileDetails.tsx
@@ -40,22 +40,22 @@ export default function ProfileDetails(props: ProfileProps) {
             <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}>
+            <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: 20, marginTop: 20,}}>
+        <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}>3 selected</Text>
+                <Text style={styles.nbSelected}>{props.diets.length} selected</Text>
                 <Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>
             </View>
         </Pressable>
-        <View style={{display: display}}>
+        <View style={{display: display, alignItems: "center", justifyContent: "center"}}>
             <ListWithoutSelect title="Diets" content={props.diets}></ListWithoutSelect>
-            <View style={{marginTop: 10}}/>
+            <View style={{marginTop: "3%"}}/>
             <ListWithoutSelect title="Allergies" content={props.allergies}></ListWithoutSelect>
-            <View style={{marginTop: 10}}/>
+            <View style={{marginTop: "3%"}}/>
         </View>
     </View>
   );
@@ -63,72 +63,71 @@ export default function ProfileDetails(props: ProfileProps) {
 
 const styles = StyleSheet.create({
   background: {
-    //maxWidth: 370,
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: 15,
     backgroundColor: '#F2F0E4',
-    padding: 10,
-    marginHorizontal: 10,
+    padding: "3%",
+    marginHorizontal: "3%",
   },
+
   pseudoBar: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "center",
-    flex: 0.7,
-    width: 330,
-    marginBottom: 10,
+    width: "100%",
+    marginHorizontal: "3%",
+    marginBottom: "3%",
   },
   avatar: {
-    padding: 20,
+    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',
-    flex: 0.8,
-    marginLeft: 20,
-    padding: 5,
+    marginLeft: "3%",
+    padding: "2%",
+    height: "100%",
   },
   modify: {
-      height: 20,
-      width: 20,
+      height: "100%",
       tintColor: "#ACA279",
       resizeMode: 'contain',
-      flex: 0.05,
-      marginLeft: 15,
+      flex: 0.1,
+      marginLeft: "3%",
   },
   delete: {
-        height: 20,
-        width: 20,
-        tintColor: "#ACA279",
-        resizeMode: 'contain',
-        flex: 0.05,
+      height: "100%",
+      width: "100%",
+      tintColor: "#ACA279",
+      resizeMode: 'contain',
+      flex: 1,
   },
 
-
-
   filterBar: {
       flexDirection: "row",
-      width: 300,
-      paddingTop: 10,
-      paddingBottom: 5,
+      width: "90%",
+      paddingTop: "3%",
+      paddingBottom: "1%",
       alignItems: "flex-end",
       justifyContent: "center",
-      flex: 0.2,
+      flex: 1,
   },
   filters: {
-      flex: 0.5,
       fontSize: 20,
       color: '#ACA279',
       flex: 1,
-      padding: 5,
+      padding: "2%",
       paddingLeft: 0,
       paddingBottom: 0,
   },
@@ -137,10 +136,10 @@ const styles = StyleSheet.create({
       flex: 1,
       color: "#3F3C42",
       textAlign: "right",
+      marginRight: "3%",
   },
   arrow: {
-      height: 20,
-      width: 20,
+      height: "100%",
       resizeMode: 'contain',
       tintColor: "#3F3C42",
       flex: 0.1,
diff --git a/LeftOvers/components/ProfileModification.tsx b/LeftOvers/components/ProfileModification.tsx
index 192a45e..0f959ed 100644
--- a/LeftOvers/components/ProfileModification.tsx
+++ b/LeftOvers/components/ProfileModification.tsx
@@ -74,7 +74,6 @@ const styles = StyleSheet.create({
     flex: 0.04,
   },
   textInput: {
-    flex: 0.9,
     fontSize: 15,
     color: '#ACA279',
     borderRadius: 10,
diff --git a/LeftOvers/screens/Profiles.tsx b/LeftOvers/screens/Profiles.tsx
index 4902c6c..fb34736 100644
--- a/LeftOvers/screens/Profiles.tsx
+++ b/LeftOvers/screens/Profiles.tsx
@@ -1,5 +1,5 @@
 import {React, useState} from 'react';
-import {StyleSheet, View, Modal, Pressable, Text, Image, ScrollView} from 'react-native';
+import {StyleSheet, View, Modal, Pressable, Text, Image, ScrollView, useWindowDimensions} from 'react-native';
 import ProfileDetails from '../components/ProfileDetails';
 import ProfileDelete from '../components/ProfileDelete';
 import TopBar from '../components/TopBar';
@@ -23,7 +23,7 @@ export default function Profiles(props) {
   const [opacity, setOpacity] = useState(1);
   const raisePopUp = () => {
         setVisible(true)
-        setOpacity(0.4)
+        setOpacity(0.3)
   }
   const erasePopUp = () => {
         setVisible(false)
@@ -35,16 +35,15 @@ export default function Profiles(props) {
         <ScrollView>
             <View style={{opacity: opacity, height: "100%", width: "100%", flex: 1, backgroundColor: '#3F3C42',}}>
                 <TopBar title="Profiles" isVisible="true"/>
-                <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-                    <View style={{marginTop: 10}}/>
+                <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+                    <View style={styles.separator}/>
                     <ProfileDetails name="Johnny Silverhand" avatar="plus_small.png" diets={dieJohnny} allergies={allJohnny} onDeleteProfile={raisePopUp}></ProfileDetails>
-                    <View style={{marginTop: 10}}/>
+                    <View style={styles.separator}/>
                     <ProfileDetails name="Jackie Welles" avatar="plus_small.png" diets={dieJackie} allergies={allJackie} onDeleteProfile={raisePopUp}></ProfileDetails>
-                    <View style={{marginTop: 10}}/>
+                    <View style={styles.separator}/>
                     <ProfileDetails name="Goro Takemura" avatar="plus_small.png" diets={dieGoro} allergies={allGoro} onDeleteProfile={raisePopUp}></ProfileDetails>
-                    <View style={{marginTop: 10}}/>
+                    <View style={styles.separator}/>
                     <ProfileDetails name="Viktor Vector" avatar="plus_small.png" diets={dieViktor} allergies={allViktor} onDeleteProfile={raisePopUp}></ProfileDetails>
-                    <View style={{marginTop: 10}}/>
                     <View style={styles.modal}>
                         <Modal visible={visible} onRequestClose={erasePopUp} animationType="fade" transparent={true}>
                             <View style={styles.modal}>
@@ -57,13 +56,13 @@ export default function Profiles(props) {
                                         <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: 30, width: 30, flex: 0.2, margin: 10}}/>
+                                                    <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: 30, width: 30, flex: 0.2, margin: 10}}/>
+                                                    <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>
@@ -73,6 +72,7 @@ export default function Profiles(props) {
                             </View>
                         </Modal>
                     </View>
+                    <View style={{marginBottom: "20%"}}/>
                 </LinearGradient>
             </View>
         </ScrollView>
@@ -97,39 +97,37 @@ const styles = StyleSheet.create({
     padding: 10,
     paddingTop: 0,
   },
-
-
+  separator: {
+    marginTop: "6%"
+  },
 
   modal: {
         position: 'absolute',
-        top: '50%',
-        left: '50%',
+        top: '8%',
         justifyContent: "center",
         alignItems: "center",
         width: "100%",
-        transform: [{ translateX: -207 }, { translateY: -140 }],
   },
   viewModal: {
         flexDirection: "column",
-        padding: 10,
+        padding: "3%",
         alignItems: "center",
         justifyContent: "center",
         width: "100%",
-        height: 200,
+        flex: 1,
   },
 
-
   profileValidation: {
         width: "100%",
         alignItems: "center",
         justifyContent: "center",
-        paddingBottom: 20,
+        marginBottom: "6%",
+        flex: 0.7,
   },
   decisionBarVertical: {
           flexDirection: "column",
-          width: "100%",
-          padding: 10,
-          height: "100%",
+          width: "90%",
+          padding: "3%",
           borderRadius: 15,
           alignItems: "center",
           justifyContent: "center",
@@ -141,23 +139,21 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
         flex: 0.3,
-        padding: 5,
+        marginBottom: "2%",
+        marginHorizontal: "2%",
   },
   decisionBar: {
           flexDirection: "row",
           flex: 0.7,
           width: "100%",
-          height: "20%",
-          borderRadius: 15,
           alignItems: "center",
           justifyContent: "center",
-          backgroundColor: "#F2F0E4",
   },
   yesButton: {
           flexDirection: "row",
           flex: 0.5,
-          padding: 10,
-          marginHorizontal: 10,
+          padding: "2%",
+          marginHorizontal: "5%",
           width: "90%",
           borderRadius: 20,
           alignItems: "center",
@@ -170,13 +166,13 @@ const styles = StyleSheet.create({
       alignItems: 'center',
       justifyContent: 'center',
       flex: 0.7,
-      padding: 5,
+      padding: "4%",
   },
   noButton: {
         flexDirection: "row",
         flex: 0.5,
-        padding: 10,
-        marginHorizontal: 10,
+        padding: "2%",
+        marginHorizontal: "5%",
         width: "90%",
         borderRadius: 20,
         alignItems: "center",
@@ -189,6 +185,6 @@ const styles = StyleSheet.create({
         alignItems: 'center',
         justifyContent: 'center',
         flex: 0.7,
-        padding: 5,
+        padding: "4%",
   },
 });
\ No newline at end of file

From e4ee99747c0c535879a3e68157776f73c3f5fe78 Mon Sep 17 00:00:00 2001
From: Louison PARANT <Louison.PARANT@etu.uca.fr>
Date: Wed, 22 Nov 2023 15:33:03 +0100
Subject: [PATCH 3/4] Update CreateProfile Page

---
 LeftOvers/App.tsx                   | 10 +++++-----
 LeftOvers/screens/CreateProfile.tsx | 13 +++++++------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx
index b45a76e..fb00fc6 100644
--- a/LeftOvers/App.tsx
+++ b/LeftOvers/App.tsx
@@ -1,21 +1,21 @@
 import React from 'react';
 import {StyleSheet, View, SafeAreaView, ScrollView, Text} from 'react-native';
 import HomePage from './screens/HomePage';
-import ModifyProfile from './screens/ModifyProfile';
 import Profiles from './screens/Profiles';
-import RecipeSuggestion from './screens/RecipeSuggestion';
+import ModifyProfile from './screens/ModifyProfile';
 import CreateProfile from './screens/CreateProfile';
 import FiltersSelection from './screens/FiltersSelection';
+import RecipeSuggestion from './screens/RecipeSuggestion';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {LinearGradient} from 'expo-linear-gradient';
 
 export default function App(props) {
   return(
     //<HomePage/>
+    //<Profiles/>
     //<ModifyProfile/>
-    <Profiles/>
-    //<RecipeSuggestion/>
-    //<CreateProfile/>
+    <CreateProfile/>
     //<FiltersSelection/>
+    //<RecipeSuggestion/>
   );
 }
\ No newline at end of file
diff --git a/LeftOvers/screens/CreateProfile.tsx b/LeftOvers/screens/CreateProfile.tsx
index 697b5e5..864cd33 100644
--- a/LeftOvers/screens/CreateProfile.tsx
+++ b/LeftOvers/screens/CreateProfile.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, View, ScrollView} from 'react-native';
+import {StyleSheet, View, ScrollView, useWindowDimensions} from 'react-native';
 import ProfileModification from '../components/ProfileModification';
 import ValidateButton from '../components/ValidateButton';
 import TopBar from '../components/TopBar';
@@ -11,13 +11,14 @@ export default function CreateProfile(props) {
   const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
   return (
     <SafeAreaProvider style={{flex: 1}}>
+        <TopBar title="Create Profile" isVisible="true"/>
         <ScrollView>
-            <TopBar title="Create Profile" isVisible="true"/>
-            <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-                <View style={{marginTop: 20}}/>
+            <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: 20}}/>
+                <View style={{marginTop: "3%"}}/>
                 <ValidateButton title="Create Profile" image="plus.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
+                <View style={{marginTop: "20%"}}/>
             </LinearGradient>
         </ScrollView>
     </SafeAreaProvider>
@@ -37,7 +38,7 @@ const styles = StyleSheet.create({
     height: "100%",
     width: "100%",
     flex: 1,
-    padding: 10,
+    padding: "2%",
     paddingTop: 0,
   },
 });
\ No newline at end of file

From 3c40ffd567f627f237c4e030d505496b9745308b Mon Sep 17 00:00:00 2001
From: Louison PARANT <Louison.PARANT@etu.uca.fr>
Date: Wed, 22 Nov 2023 15:57:38 +0100
Subject: [PATCH 4/4] Update FiltersSelection Page

---
 LeftOvers/App.tsx                       |  4 +-
 LeftOvers/components/ProfileDetails.tsx |  2 +-
 LeftOvers/screens/FiltersSelection.tsx  | 73 ++++++++++++++-----------
 3 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/LeftOvers/App.tsx b/LeftOvers/App.tsx
index fb00fc6..131b093 100644
--- a/LeftOvers/App.tsx
+++ b/LeftOvers/App.tsx
@@ -14,8 +14,8 @@ export default function App(props) {
     //<HomePage/>
     //<Profiles/>
     //<ModifyProfile/>
-    <CreateProfile/>
-    //<FiltersSelection/>
+    //<CreateProfile/>
+    <FiltersSelection/>
     //<RecipeSuggestion/>
   );
 }
\ No newline at end of file
diff --git a/LeftOvers/components/ProfileDetails.tsx b/LeftOvers/components/ProfileDetails.tsx
index 03923c5..ff07507 100644
--- a/LeftOvers/components/ProfileDetails.tsx
+++ b/LeftOvers/components/ProfileDetails.tsx
@@ -116,7 +116,7 @@ const styles = StyleSheet.create({
 
   filterBar: {
       flexDirection: "row",
-      width: "90%",
+      width: "85%",
       paddingTop: "3%",
       paddingBottom: "1%",
       alignItems: "flex-end",
diff --git a/LeftOvers/screens/FiltersSelection.tsx b/LeftOvers/screens/FiltersSelection.tsx
index 3e6b2b0..642f92c 100644
--- a/LeftOvers/screens/FiltersSelection.tsx
+++ b/LeftOvers/screens/FiltersSelection.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, View, Text, ScrollView} from 'react-native';
+import {StyleSheet, View, Text, ScrollView, useWindowDimensions} from 'react-native';
 import ProfileModification from '../components/ProfileModification';
 import ValidateButton from '../components/ValidateButton';
 import TopBar from '../components/TopBar';
@@ -17,53 +17,70 @@ export default function FiltersSelection(props) {
         {name: "David Martinez", avatar: "plus_small.png", isActive: "flex"},
   ]
 
+  let cptActive = 0
+  profiles.forEach(function (value) {
+    if(value.isActive=="flex"){
+        cptActive=cptActive+1
+    }
+  })
+
   const die = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Porkless"}, {value: "Vegan"}, {value: "Vegetarian"}, {value: "Pescatarian"}]
 
   const allProfiles = [{value: "Skimmed Milk"}, {value: "Nuts"}]
   const dieProfiles = [{value: "Porkless"}, {value: "Pescatarian"}]
 
-  const dieAdd = [{value: "Dairy free"}, {value: "Gluten free"}, {value: "Vegan"}, {value: "Vegetarian"}]
+  function isInProfileDiets(element, index, array) {
+       var retType = true
+       dieProfiles.forEach(function (diets) {
+          if(diets.value==element.value){
+              retType = false
+          }
+       })
+       return retType
+    }
+  const dieAdd = die.filter(isInProfileDiets);
   const allAdd = []
 
   return (
     <SafeAreaProvider style={{flex: 1}}>
+        <TopBar title="Filters Selection" isVisible="true"/>
         <ScrollView>
-            <TopBar title="Filters Selection" isVisible="true"/>
-            <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-                <View style={{marginTop: 20}}/>
+            <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+                <View style={{marginTop: "6%"}}/>
                 <View style={styles.profilesSelection}>
                     <View style={styles.filterBar}>
                         <Text style={styles.filters}>Profiles</Text>
-                        <Text style={styles.nbSelected}>2 selected, 1 waiting</Text>
+                        <Text style={styles.nbSelected}>{cptActive} selected, 1 waiting</Text>
                     </View>
-                    <View style={{marginTop: 10}}/>
+                    <View style={{marginTop: "3%"}}/>
                     <ProfileSelection listProfile={profiles} disableSelection={false}/>
-                    <View style={{marginTop: 20}}/>
+                    <View style={{marginTop: "4%"}}/>
                     <ValidateButton title="Change Selected Profiles" image="update.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
                 </View>
-                <View style={{marginTop: 20}}/>
+                <View style={{marginTop: "6%"}}/>
                 <View style={styles.background}>
                     <View style={styles.filterBar}>
                         <Text style={styles.filters}>Filters from Profiles</Text>
                     </View>
                     <ListWithoutSelect title="Diets" content={dieProfiles}></ListWithoutSelect>
-                    <View style={{marginTop: 10}}/>
+                    <View style={{marginTop: "3%"}}/>
                     <ListWithoutSelect title="Allergies" content={allProfiles}></ListWithoutSelect>
                 </View>
-                <View style={{marginTop: 20}}/>
+                <View style={{marginTop: "6%"}}/>
                 <View style={styles.background}>
                     <View style={styles.filterBar}>
                         <Text style={styles.filters}>Additional Filters</Text>
-                        <Text style={styles.nbSelected}>3 selected</Text>
+                        <Text style={styles.nbSelected}>{dieAdd.length} available</Text>
                     </View>
                     <ListSelect title="Diets" content={dieAdd}></ListSelect>
-                    <View style={{marginTop: 10}}/>
+                    <View style={{marginTop: "3%"}}/>
                     <ListWithoutSelect title="Allergies" content={allAdd}></ListWithoutSelect>
-                    <View style={{marginTop: 10}}/>
+                    <View style={{marginTop: "3%"}}/>
                     <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
                 </View>
-                <View style={{marginTop: 20}}/>
+                <View style={{marginTop: "6%"}}/>
                 <ValidateButton title="Save Filters" image="save.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>
+                <View style={{marginTop: "20%"}}/>
             </LinearGradient>
         </ScrollView>
     </SafeAreaProvider>
@@ -83,53 +100,45 @@ const styles = StyleSheet.create({
     height: "100%",
     width: "100%",
     flex: 1,
-    padding: 10,
+    padding: "2%",
     paddingTop: 0,
   },
 
   background: {
-      //maxWidth: 370,
       flexDirection: 'column',
       alignItems: 'center',
       justifyContent: 'center',
       borderRadius: 20,
       backgroundColor: '#F2F0E4',
-      padding: 10,
-      paddingBottom: 0,
-      marginHorizontal: 10,
+      padding: "3%",
+      marginHorizontal: "3%",
   },
+
   filterBar: {
         flexDirection: "row",
-        width: 300,
-        paddingTop: 10,
-        paddingBottom: 5,
+        width: "85%",
+        paddingTop: "3%",
+        paddingBottom: "2%",
         alignItems: "flex-end",
         justifyContent: "center",
-        flex: 0.2,
   },
   filters: {
-        flex: 0.8,
         fontSize: 20,
         color: '#ACA279',
         flex: 1,
-        padding: 5,
-        paddingLeft: 0,
-        paddingBottom: 0,
   },
   nbSelected: {
         fontSize: 11,
-        //flex: 0.2,
         color: "#3F3C42",
         textAlign: "right",
   },
 
   profilesSelection: {
-        //maxWidth: 370,
-        flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: 20,
         backgroundColor: '#F2F0E4',
-        marginHorizontal: 10,
+        marginHorizontal: "3%",
+        paddingBottom: "3%",
   },
 });
\ No newline at end of file