Update Home and ModifyProfile Pages

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/>
   );
 }

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',
   },
 });

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,

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,

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,}}>

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,

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,

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",
     }

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',

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%",
     },
   });
   

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>

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>
   );
 }

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>
   );
 }

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%",
   },
 });

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,
   },
 });

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%",