Update Ingredient Selection Page (Need merge)

LeftOvers/App.tsx

@@ -6,7 +6,8 @@ import ModifyProfile from './screens/ModifyProfile';
 import CreateProfile from './screens/CreateProfile';
 import FiltersSelection from './screens/FiltersSelection';
 import RecipeSuggestion from './screens/RecipeSuggestion';
-import RecipeDetail from './screens/RecipeSuggestion';
+import RecipeDetails from './screens/RecipeDetails';
+import IngredientSelection from './screens/IngredientSelection';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import {LinearGradient} from 'expo-linear-gradient';
 
@@ -17,7 +18,8 @@ export default function App(props) {
     //<ModifyProfile/>
     //<CreateProfile/>
     //<FiltersSelection/>
-    <RecipeSuggestion/>
+    //<RecipeSuggestion/>
-    //<RecipeDetail/>
+    //<RecipeDetails/>
+    <IngredientSelection/>
   );
 }

LeftOvers/components/RecipeElement.tsx

@@ -78,7 +78,7 @@ const styles = StyleSheet.create({
     borderRadius: 40,
     borderWidth: 2,
     padding: "5%",
-    borderColor: '#3F3C42',
+    borderColor: '#73692A',
     alignItems: 'center',
     justifyContent: "center",
   },

LeftOvers/components/RecipeElementReduce.tsx

@@ -8,24 +8,21 @@ interface recipeElementReduceProps {
   number : number
   title  : string
   image : string
-  duree : string
+  duration : string
 }
 
-
+export default function RecipeElementReduce(props: recipeElementReduceProps) {
-
-export default function RecipeElementReduce(props : any) {
   return (
-    <Pressable style={styles.button}>
+    <View style={styles.button}>
       <View style={styles.view}>
         <Text style={styles.text}>{props.number}</Text>
         <Text style={styles.title}>{props.title}</Text>
-        <Image source={props.image ? props.image : brochette} style={{ width: 100, height: 100 }}/>
+        <Image source={props.image ? props.image : brochette} style={{ width: 100, height: 100, resizeMode: "contain", zIndex: 2}}/>
-        <View style={{marginTop: 200, position: 'absolute'}}>
+        <View style={{marginBottom: "20%"}}/>
-            <Image source={background} style={{width: 210, height: 20}}></Image>
+        <Image source={background} style={{width: "80%", resizeMode: "contain", position: "absolute", zIndex: 1, top: "90%"}}></Image>
-            <Text style={styles.smallText}>{props.duree}</Text>
+        <Text style={styles.smallText}>{props.duration}</Text>
       </View>
     </View>
-    </Pressable>
   ); 
 }
 
@@ -37,48 +34,39 @@ const styles = StyleSheet.create({
     width : 250,
     height: 250,
     borderRadius: 40,
-    elevation: 3,
     backgroundColor: '#E3DEC9',
   },
   text: {
-    fontSize: 14,
+    fontSize: 15,
-    lineHeight: 21,
     fontWeight: 'bold',
-    letterSpacing: 0.25,
     color: '#756C28',
-    marginTop: 10,
+    marginTop: "4%",
+    zIndex: 2
   },
   smallText: {
-    position: 'absolute', 
+      position: "absolute",
-    textAlign: 'center', 
+      fontSize: 12,
-    left: 0, 
+      color: '#F2F0E4',
-    right: 0, 
+      textAlign: "center",
-    marginHorizontal: 'auto', 
+      margin : "2%",
-    color: '#E3DEC9',
+      zIndex: 2,
-
+      fontWeight: "bold",
+      top: "89.25%"
   },
   title:{
       fontSize: 18,
-    lineHeight: 21,
       fontWeight: 'bold',
-    letterSpacing: 0.25,
       color: '#524B1A',
+      zIndex: 2
   },
   view: {
-    width : 240,
+      width : "95%",
-    height: 240,
+      height: "95%",
       borderRadius: 40,
-    elevation: 3,
       borderWidth: 2,
-    borderColor: 'grey',
+      padding: "5%",
-    alignItems: 'center', // Centre le contenu verticalement
+      borderColor: '#73692A',
-    display: "flex",
-    flexWrap: "wrap",
-  },
-  horizontalAlignement: {
-    display: "flex",
-    flexDirection : 'row',
       alignItems: 'center',
-    marginTop: 10,
+      justifyContent: "center",
-  }
+  },
 });

LeftOvers/screens/IngredientSelection.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {View, StyleSheet, Text, Image, Pressable, ScrollView} from 'react-native';
+import {View, StyleSheet, Text, Image, Pressable, ScrollView, useWindowDimensions} from 'react-native';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import TopBar from '../components/TopBar';
+import {LinearGradient} from 'expo-linear-gradient';
 import {Searchbar} from 'react-native-paper';
 import brochette from '../assets/images/brochette.png';
 import FoodElementText from '../components/FoodElementText';
@@ -9,16 +10,15 @@ import CustomButton from '../components/CustomButton';
 
 
 export default function IngredientSelection() {
-
   const [searchQuery, setSearchQuery] = React.useState('');
-
   const onChangeSearch = query => setSearchQuery(query);
 
   return (
     <SafeAreaProvider>
         <TopBar title="Ingredient selection"/>
-          <View style={styles.page}>
+        <ScrollView>
-
+            <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+                <View style={{marginTop: "6%"}}/>
                 <View style={styles.element}>
                       <View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
                             <Pressable>
@@ -50,31 +50,31 @@ export default function IngredientSelection() {
                   <View style={{ flex: 1}} >
                     <ScrollView contentContainerStyle={{ alignItems: 'center', height: 300}}>
 
-                  <View style={styles.horizontalAlignement}>
+                      <View style={styles.horizontalAlignment}>
                         <FoodElementText title="test" />
                         <Image source={brochette} style={{ width: 20, height: 20 }} />
                       </View>
                       <View style={{ height: 30 }}></View>
 
-                  <View style={styles.horizontalAlignement}>
+                      <View style={styles.horizontalAlignment}>
                         <FoodElementText title="test" />
                         <Image source={brochette} style={{ width: 20, height: 20 }} />
                       </View>
                       <View style={{ height: 30 }}></View>
 
-                  <View style={styles.horizontalAlignement}>
+                      <View style={styles.horizontalAlignment}>
                         <FoodElementText title="test" />
                         <Image source={brochette} style={{ width: 20, height: 20 }} />
                       </View>
                       <View style={{ height: 30 }}></View>
 
-                  <View style={styles.horizontalAlignement}>
+                      <View style={styles.horizontalAlignment}>
                         <FoodElementText title="test" />
                         <Image source={brochette} style={{ width: 20, height: 20 }} />
                       </View>
                       <View style={{ height: 30 }}></View>
 
-                  <View style={styles.horizontalAlignement}>
+                      <View style={styles.horizontalAlignment}>
                         <FoodElementText title="test" />
                         <Image source={brochette} style={{ width: 20, height: 20 }} />
                       </View>
@@ -88,7 +88,7 @@ export default function IngredientSelection() {
 
                 <View style={[styles.element, {marginTop:  40}]}>
 
-                <View style={[styles.horizontalAlignement, {justifyContent: "flex-start", marginLeft: 10}]}>
+                    <View style={[styles.horizontalAlignment, {justifyContent: "flex-start", marginLeft: 10}]}>
                       <Text style={{fontSize: 20, color: '#ACA279'}}>Available</Text>
                     </View>
 
@@ -96,19 +96,19 @@ export default function IngredientSelection() {
 
                     <View style={{ flex: 1}} >
                     <ScrollView contentContainerStyle={{ alignItems: 'center', height: 150}}>
-                <View style={styles.horizontalAlignement}>
+                    <View style={styles.horizontalAlignment}>
                         <FoodElementText title="test" />
                         <Image source={brochette} style={{ width: 20, height: 20 }} />
                       </View>
                       <View style={{ height: 30 }}></View>
 
-                  <View style={styles.horizontalAlignement}>
+                      <View style={styles.horizontalAlignment}>
                         <FoodElementText title="test" />
                         <Image source={brochette} style={{ width: 20, height: 20 }} />
                       </View>
                       <View style={{ height: 30 }}></View>
 
-                  <View style={styles.horizontalAlignement}>
+                      <View style={styles.horizontalAlignment}>
                         <FoodElementText title="test" />
                         <Image source={brochette} style={{ width: 20, height: 20 }} />
                       </View>
@@ -120,25 +120,28 @@ export default function IngredientSelection() {
 
                 <View style={{ height: 15 }}></View>
                 <CustomButton title="Find a recipe"/>
-          </View>
+            </LinearGradient>
+        </ScrollView>
     </SafeAreaProvider>
   );
 }
 
 const styles = StyleSheet.create({
-  page: {
+    linearGradient: {
+          width: "100%",
           flex: 1,
-    backgroundColor: '#59BDCD',
+          padding: "2%",
-    alignItems: 'center',
+          paddingTop: 0,
-    display: 'flex',
+          alignItems: "center",
-    flexWrap: 'wrap',
+          justifyContent: "center"
-    padding: 20,
     },
+
   element: {
+    width: "100%",
     backgroundColor:'#F2F0E4',
-    borderRadius: 30,
+    borderRadius: 25,
   },
-  horizontalAlignement: {
+  horizontalAlignment: {
     display: 'flex',
     height: 30,
     width: 350,

LeftOvers/screens/RecipeDetails.tsx

@@ -1,44 +1,93 @@
 import React from 'react';
-import { View, StyleSheet} from 'react-native';
+import {View, StyleSheet, ScrollView, useWindowDimensions, Text} from 'react-native';
 import {SafeAreaProvider } from 'react-native-safe-area-context';
+import {LinearGradient} from 'expo-linear-gradient';
 import TopBar from '../components/TopBar';
 import RecipeElementReduce from '../components/RecipeElementReduce';
-
+import ListWithoutSelect from '../components/ListWithoutSelect';
+import ValidateButton from '../components/ValidateButton';
 
 export default function RecipeDetails(props) {
+    const ing = [{value: "Chocolate"}, {value: "Milk"}, {value: "Eggs"}, {value: "Flour"}]
+    const ute = [{value: "Spoon (3cl)"}, {value: "Whisk"}, {value: "Oven"}]
+    const ste = [
+        {value: "1. Break the eggs and whisk them. Add the flour."},
+        {value: "2. Melt the chocolate in the microwave. Add it to the eggs."},
+        {value: "3. Put the cake in the oven. 40 minutes, 180 degrees."},
+        {value: "4. Clean the utensils."}
+    ]
+
     return (
         <SafeAreaProvider>
           <TopBar title="Recipe Detail"/>
-          <View style={styles.page}>
+          <ScrollView>
-            <RecipeElementReduce 
+            <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
-                title={props.title} 
+                <View style={{marginTop: "6%"}}>
-                number={props.number}
+                    <RecipeElementReduce title="Meat Stick" number="63" duration="15 minutes"/>
-                duree={props.duree}/>
+                </View>
+                <View style={styles.separator}/>
+                <View style={styles.background}>
+                    <View style={styles.filterBar}>
+                        <Text style={styles.filters}>Preparation</Text>
+                    </View>
+                    <ListWithoutSelect title="Ingredients" content={ing}></ListWithoutSelect>
+                    <View style={{marginTop: "3%"}}/>
+                    <ListWithoutSelect title="Utensils" content={ute}></ListWithoutSelect>
+                    <View style={{marginTop: "3%"}}/>
                 </View>
+                <View style={styles.separator}/>
+                <View style={styles.background}>
+                    <View style={styles.filterBar}>
+                        <Text style={styles.filters}>Cooking</Text>
+                    </View>
+                    <ListWithoutSelect title="Steps" content={ste}></ListWithoutSelect>
+                    <View style={{marginTop: "3%"}}/>
+                </View>
+                <View style={{marginBottom: "20%"}}/>
+            </LinearGradient>
+          </ScrollView>
         </SafeAreaProvider>
       );
     }
     
     const styles = StyleSheet.create({
-      page: {
+      linearGradient: {
+            width: "100%",
             flex: 1,
-        backgroundColor: '#59BDCD',
+            alignItems: "center",
-        alignItems: 'center',
+            justifyContent: "flex-start"
-        display: 'flex',
-        flexWrap: 'wrap',
-        padding: 20,
       },
-      element: {
+      separator: {
-        marginTop: 20,
+            marginTop: "6%",
       },
-      horizontalAlignement: {
+
-        display: 'flex',
+      background: {
-        height: 30,
+              flexDirection: 'column',
-        width: 350,
-        flexDirection: 'row',
-        justifyContent: 'space-around',
               alignItems: 'center',
-        marginTop: 10,
+              justifyContent: 'center',
-      }
+              borderRadius: 20,
+              backgroundColor: '#F2F0E4',
+              padding: "3%",
+              marginHorizontal: "3%",
+      },
+
+      filterBar: {
+                flexDirection: "row",
+                width: "85%",
+                paddingTop: "3%",
+                paddingBottom: "2%",
+                alignItems: "flex-end",
+                justifyContent: "center",
+      },
+      filters: {
+                fontSize: 20,
+                color: '#ACA279',
+                flex: 1,
+      },
+      nbSelected: {
+                fontSize: 11,
+                color: "#3F3C42",
+                textAlign: "right",
+      },
     });
     

LeftOvers/screens/RecipeSuggestion.tsx

@@ -21,7 +21,7 @@ import minus from '../assets/images/minus.png';
 
 
 export default function RecipeSuggestion(props) {
-  const [visible, setVisible] = React.useState(true);
+  const [visible, setVisible] = React.useState(false);
   const [visibleFilters, setVisibleFilters] = React.useState(false);
   const [visibleIngredients, setVisibleIngredients] = React.useState(true);
   const [minCpt, setMinCpt] = useState(0);