Navigation Modification

LeftOvers/App.tsx

@@ -19,7 +19,7 @@ export default function App() {
             <ColorProvider>
                 <NavigationContainer>
                     <Tab.Navigator initialRouteName='HOME' tabBar={ (props) => <BottomBar {...props}/> }>
-                        <Tab.Screen name='PROFILE' component={ProfilesStackScreen} options={{ headerShown: false, title: 'Profile' }} />
+                        <Tab.Screen name='PROFILES' component={ProfilesStackScreen} options={{ headerShown: false, title: 'Profiles' }} />
                         <Tab.Screen name='HOME' component={HomeStackScreen} options={{ headerShown: false, title: 'Home' }}/>
                         <Tab.Screen name='COOKING' component={CookingStackScreen} options={{ headerShown: false, title: 'Cooking' }}/>
                     </Tab.Navigator>

LeftOvers/app.json

@@ -10,7 +10,7 @@
     "splash": {
       "image": "./assets/images/splash.png",
       "resizeMode": "contain",
-      "backgroundColor": "#57BDCC"
+      "backgroundColor": "#57BDCD"
     },
     "updates": {
       "fallbackToCacheTimeout": 0

LeftOvers/components/FoodElementTextSimple.tsx

@@ -1,12 +1,42 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {StyleSheet,Pressable, Text, View} from 'react-native';
+import ColorContext from '../theme/ColorContext';
 
 interface FoodElementTextSimpleProps {
   title: string
 }
 
-
 export default function FoodElementTextSimple(props: FoodElementTextSimpleProps) {
+  const {colors} = useContext(ColorContext)
+
+  const styles = StyleSheet.create({
+    button: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: "80%",
+      borderRadius: 5,
+      backgroundColor: colors.ingredientBackground,
+    },
+    text: {
+      fontSize: 10,
+      fontWeight: 'bold',
+      padding : "2%",
+      color: colors.cardDetail,
+    },
+    view: {
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+    },
+    container: {
+      width: "100%",
+      borderRadius: 5,
+      borderWidth: 1,
+      borderColor: colors.foodElementBorder,
+      flexDirection: 'column',
+      justifyContent: 'center',
+    },
+  });
+  
   return (
     <Pressable style={styles.button}>
       <View style={styles.container}>
@@ -17,31 +47,3 @@ export default function FoodElementTextSimple(props: FoodElementTextSimpleProps)
     </Pressable>
   );
 }
-
-const styles = StyleSheet.create({
-  button: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: "80%",
-    borderRadius: 5,
-    backgroundColor: '#E3DEC9',
-  },
-  text: {
-    fontSize: 10,
-    fontWeight: 'bold',
-    padding : "2%",
-    color: 'black',
-  },
-  view: {
-    alignItems: 'flex-start',
-    justifyContent: 'center',
-  },
-  container: {
-    width: "100%",
-    borderRadius: 5,
-    borderWidth: 1,
-    borderColor: '#3F3C42',
-    flexDirection: 'column',
-    justifyContent: 'center',
-  },
-});

LeftOvers/components/ParameterTopBar.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import { Appbar } from 'react-native-paper';
+import ColorContext from '../theme/ColorContext';
 
 interface ParameterTopBarProps{
     onEventIngredient: () => void
@@ -10,8 +11,10 @@ interface ParameterTopBarProps{
   
   
   export default function ParameterTopBar(props : ParameterTopBarProps) {
+    const {colors} = useContext(ColorContext)
+    
     return (
-        <Appbar.Header style={{backgroundColor: '#F2F0E4', height: "10%", justifyContent: "center", borderTopLeftRadius: 20, borderTopRightRadius: 20,}}>
+        <Appbar.Header style={{backgroundColor: colors.cardBackground, height: 50, justifyContent: "center", borderTopLeftRadius: 20, borderTopRightRadius: 20}}>
             <Appbar.Action icon="magnify" onPress={props.onEventIngredient} color={props.colorIngredients}/>
             <Appbar.Action icon="dots-vertical" onPress={props.onEventFilter} color={props.colorFilters}/>
         </Appbar.Header>

LeftOvers/components/ProfileElement.tsx

@@ -95,12 +95,12 @@ export default function ProfileElement(props : Profile) {
         waiting: {
             borderWidth: 1,
             borderRadius: 20,
-            borderColor: "#ACA279",
+            borderColor: colors.cardElementBorder,
             padding: "1%",
         },
         textWaiting: {
             fontSize: 10,
-            color: "#ACA279",
+            color: colors.cardElementBorder,
         },
     });
 

LeftOvers/components/RecipeElement.tsx

@@ -1,24 +1,86 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {StyleSheet, Pressable, Text, View, Image, ScrollView} from 'react-native';
 import brochette from '../assets/images/brochette.png'; 
 import Union_left from '../assets/images/Union_left.png';
 import Union_right from '../assets/images/Union_right.png';
 import background from '../assets/images/Background.png';
+import ColorContext from '../theme/ColorContext';
 
 interface RecipeElementProps {
   number: string
   title: string
   textList: {title: string}[]
   description: string
+  duration: string
+  navigateDetails: () => void
 }
 
 export default function RecipeElement(props: RecipeElementProps) {
+  const {colors} = useContext(ColorContext)
+
+  const styles = StyleSheet.create({
+    button: {
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: 300,
+      height: "90%",
+      borderRadius: 40,
+      backgroundColor: colors.recipeElementBackground,
+    },
+    text: {
+      fontSize: 15,
+      fontWeight: 'bold',
+      color: '#6F6532',
+      marginTop: "4%",
+    },
+    smallText: {
+      fontSize: 12,
+      color: '#71662A',
+      textAlign: "center",
+      margin : "2%",
+      zIndex: 2,
+    },
+    duration:{
+      fontSize: 12,
+      color: '#F2F0E4',
+      textAlign: "center",
+      margin : "2%",
+      zIndex: 2,
+    },
+    title:{
+      fontSize: 18,
+      fontWeight: 'bold',
+      color: '#524B1A',
+    },
+    view: {
+      width : "95%",
+      height: "96.5%",
+      borderRadius: 40,
+      borderWidth: 2,
+      padding: "5%",
+      borderColor: '#6F6532',
+      alignItems: 'center',
+      justifyContent: "center",
+    },
+    horizontalAlignment: {
+      display: "flex",
+      flexDirection : 'row',
+      alignItems: 'center', 
+      justifyContent: 'space-between',
+      marginTop : "2%",
+      flexWrap: 'wrap',
+    },
+    scrollViewContainer: {
+      flex: 1,
+    },
+  });
+
   return (
-    <Pressable style={styles.button}>
+    <Pressable style={styles.button} onPress={props.navigateDetails}>
       <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, resizeMode: "contain"}}/>
+        <Image source={brochette} style={{width: 100, resizeMode: "contain"}}/>
         <View style={styles.horizontalAlignment}>
             <Image source={Union_left} style={{width: "25%", marginRight: "3%", resizeMode: "contain"}} />
             <Text style={styles.text}>Ingredients</Text>
@@ -39,58 +101,9 @@ export default function RecipeElement(props: RecipeElementProps) {
                 <Text style={styles.smallText}>{props.description}</Text>
             </ScrollView>
         </View>
-        <Image source={background} style={{width: "80%", resizeMode: "contain"}}></Image>
+        <Image source={background} style={{width: "80%", resizeMode: "contain", position: "absolute", zIndex: 1, top: "97.5%"}}></Image>
+        <Text style={styles.duration}>{props.duration}</Text>
       </View>
     </Pressable>
   ); 
 }
-
-
-const styles = StyleSheet.create({
-  button: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 300,
-    height: "90%",
-    borderRadius: 40,
-    backgroundColor: '#E3DEC9',
-  },
-  text: {
-    fontSize: 15,
-    fontWeight: 'bold',
-    color: '#756C28',
-    marginTop: "4%",
-  },
-  smallText: {
-    fontSize: 12,
-    color: '#71662A',
-    textAlign: "center",
-    margin : "2%"
-  },
-  title:{
-    fontSize: 18,
-    fontWeight: 'bold',
-    color: '#524B1A',
-  },
-  view: {
-    width : "95%",
-    height: "96.5%",
-    borderRadius: 40,
-    borderWidth: 2,
-    padding: "5%",
-    borderColor: '#73692A',
-    alignItems: 'center',
-    justifyContent: "center",
-  },
-  horizontalAlignment: {
-    display: "flex",
-    flexDirection : 'row',
-    alignItems: 'center', 
-    justifyContent: 'space-between',
-    marginTop : "2%",
-    flexWrap: 'wrap',
-  },
-  scrollViewContainer: {
-    flex: 1,
-  },
-});

LeftOvers/components/SelectedIngredient.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import {View, StyleSheet, Pressable, Image, Text} from 'react-native';
 import bracketLeft from '../assets/images/angle_bracket_left.png';
 import bracketRight from '../assets/images/angle_bracket_right.png';
 import parameter from '../assets/images/parameter.png';
 import FoodElementText from './FoodElementText';
+import ColorContext from '../theme/ColorContext';
 
 interface SelectedIngredientProps {
   ingredientList: {title: string}[]
@@ -12,6 +13,7 @@ interface SelectedIngredientProps {
 
 export default function SelectedIngredient(props: SelectedIngredientProps) {
   const [cpt, setCpt] = useState(0);
+  const {colors} = useContext(ColorContext)
 
   const decreaseCounter = () => {
     if(cpt > 0){
@@ -30,50 +32,51 @@ export default function SelectedIngredient(props: SelectedIngredientProps) {
     }
   };
 
+  const styles = StyleSheet.create({
+    view: {
+      width: "90%",
+      paddingBottom: "5%",
+      borderRadius: 15,
+      borderWidth: 1,
+      borderColor: colors.blocBorder,
+      backgroundColor: colors.buttonBackground,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    horizontalAlignment: {
+      width: "90%",
+      flexDirection: 'row',
+      justifyContent: 'space-evenly',
+      alignItems: 'center',
+      marginTop: "3%",
+    },
+    text: {
+      fontSize: 15,
+      fontWeight: 'bold',
+      color: colors.cardDetail,
+      flex: 1,
+      marginLeft: "8%",
+    },
+  });  
+
   return (
     <View style={styles.view}>
       <View style={styles.horizontalAlignment}>
         <Text style={styles.text}>Selected ingredients</Text>
         <Pressable onPress={props.onEvent}>
-          <Image source={parameter} style={{tintColor: "#3F3C42", resizeMode: "contain", flex: 1, marginRight: "8%"}}/>
+          <Image source={parameter} style={{tintColor: colors.cardDetail, resizeMode: "contain", flex: 1, marginRight: "8%"}}/>
         </Pressable>
       </View>
 
       <View style={styles.horizontalAlignment}>
         <Pressable onPress={decreaseCounter}>
-          <Image source={bracketLeft} style={{width: 40, height: 40, tintColor: "#3F3C42", resizeMode: "contain"}}/>
+          <Image source={bracketLeft} style={{width: 40, height: 40, tintColor: colors.cardDetail, resizeMode: "contain"}}/>
         </Pressable>
         <FoodElementText title={props.ingredientList[cpt].title}/>
         <Pressable onPress={increaseCounter}>
-          <Image source={bracketRight} style={{width: 40, height: 40, tintColor: "#3F3C42", resizeMode: "contain"}}/>
+          <Image source={bracketRight} style={{width: 40, height: 40, tintColor: colors.cardDetail, resizeMode: "contain"}}/>
         </Pressable>
       </View>
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  view: {
-    width: "90%",
-    paddingBottom: "5%",
-    borderRadius: 15,
-    borderColor: '#3F3C42',
-    backgroundColor: '#E3DEC9',
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  horizontalAlignment: {
-    width: "90%",
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    alignItems: 'center',
-    marginTop: "3%",
-  },
-  text: {
-    fontSize: 15,
-    fontWeight: 'bold',
-    color: '#3F3C42',
-    flex: 1,
-    marginLeft: "8%",
-  },
-});

LeftOvers/navigation/BottomBar.tsx

@@ -82,7 +82,7 @@ export default function BottomBar({ state, descriptors, navigation }) {
                     let icon;
                     if (route.name === 'HOME') {
                         icon = HomeIcon;
-                    } else if (route.name === 'PROFILE') {
+                    } else if (route.name === 'PROFILES') {
                         icon = ProfileIcon;
                     } else if (route.name === 'COOKING') {
                         icon = CookingIcon;

LeftOvers/navigation/HomeStackScreen.tsx

@@ -9,6 +9,10 @@ import ColorContext from '../theme/ColorContext';
 import { HeaderTitle } from './Utils';
 
 import appLogo from '../assets/images/logo.png';
+import IngredientSelection from '../screens/IngredientSelection';
+import RecipeSuggestion from '../screens/RecipeSuggestion';
+import FiltersSelection from '../screens/FiltersSelection';
+import RecipeDetails from '../screens/RecipeDetails';
 
 const HomeStack = createNativeStackNavigator()
 
@@ -56,12 +60,42 @@ export default function HomeStackScreen() {
                 }}
             />
             <HomeStack.Screen
-                name='ProfileModification'
+                name='IngredientSelection'
-                component={ModifyProfile}
+                component={IngredientSelection}
                 options={{
                     headerStyle: {backgroundColor: colors.cardBackground},
                     headerTitle: () => (
-                        <HeaderTitle title='Profile Modification'/>
+                        <HeaderTitle title='Ingredient Selection'/>
+                    )
+                }}
+            />
+            <HomeStack.Screen
+                name='RecipeSuggestion'
+                component={RecipeSuggestion}
+                options={{
+                    headerStyle: {backgroundColor: colors.cardBackground},
+                    headerTitle: () => (
+                        <HeaderTitle title='Recipe Suggestion'/>
+                    )
+                }}
+            />
+            <HomeStack.Screen
+                name='FiltersSelection'
+                component={FiltersSelection}
+                options={{
+                    headerStyle: {backgroundColor: colors.cardBackground},
+                    headerTitle: () => (
+                        <HeaderTitle title='Filters Selection'/>
+                    )
+                }}
+            />
+            <HomeStack.Screen
+                name='RecipeDetails'
+                component={RecipeDetails}
+                options={{
+                    headerStyle: {backgroundColor: colors.cardBackground},
+                    headerTitle: () => (
+                        <HeaderTitle title='Recipe Details'/>
                     )
                 }}
             />

LeftOvers/navigation/ProfileStackScreen.tsx

@@ -36,7 +36,6 @@ export default function ProfilesStackScreen({ navigation }) {
     
     const _handleSearch = () => {
         console.log('Searching');
-        navigation.navigate('ProfileModification')
     }
     const _handleHeaderAdd = () => navigation.navigate('ProfileCreation');
     

LeftOvers/screens/FiltersSelection.tsx

@@ -65,7 +65,7 @@ export default function FiltersSelection(props) {
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: 20,
-        backgroundColor: '#F2F0E4',
+        backgroundColor: colors.cardBackground,
         padding: "3%",
         marginHorizontal: "3%",
         borderWidth: 1,
@@ -82,12 +82,12 @@ export default function FiltersSelection(props) {
     },
     filters: {
           fontSize: 20,
-          color: '#ACA279',
+          color: colors.cardElementBorder,
           flex: 1,
     },
     nbSelected: {
           fontSize: 11,
-          color: "#3F3C42",
+          color: colors.cardDetail,
           textAlign: "right",
     },
 
@@ -95,7 +95,7 @@ export default function FiltersSelection(props) {
           alignItems: 'center',
           justifyContent: 'center',
           borderRadius: 20,
-          backgroundColor: '#F2F0E4',
+          backgroundColor: colors.cardBackground,
           marginHorizontal: "3%",
           paddingBottom: "3%",
           borderWidth: 1,
@@ -103,11 +103,12 @@ export default function FiltersSelection(props) {
     },
   });
 
+  const goBack = () => props.navigation.goBack();
+
   return (
     <SafeAreaProvider style={{flex: 1}}>
-        <TopBar title="Filters Selection" isVisible="true"/>
         <ScrollView>
-            <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+            <LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
                 <View style={{marginTop: "6%"}}/>
                 <View style={styles.profilesSelection}>
                     <View style={styles.filterBar}>
@@ -117,7 +118,7 @@ export default function FiltersSelection(props) {
                     <View style={{marginTop: "3%"}}/>
                     <ProfileSelection listProfile={profiles} disableSelection={false}/>
                     <View style={{marginTop: "4%"}}/>
-                    <ValidateButton title="Change Selected Profiles" image="update.png" colour="#59BDCD" backColour="#E3DEC9" todo={ () => console.log("change selected profile")}></ValidateButton>
+                    <ValidateButton title="Validate Selected Profiles" image="validate.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => console.log("change selected profile")}></ValidateButton>
                 </View>
                 <View style={{marginTop: "6%"}}/>
                 <View style={styles.background}>
@@ -138,10 +139,10 @@ export default function FiltersSelection(props) {
                     <View style={{marginTop: "3%"}}/>
                     <ListWithoutSelect title="Allergies" content={allAdd}></ListWithoutSelect>
                     <View style={{marginTop: "3%"}}/>
-                    <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9" todo={() => console.log("add allergy")}></ValidateButton>
+                    <ValidateButton title="Add Allergy" image="plus.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => props.navigation.navigate("IngredientSelection")}></ValidateButton>
                 </View>
                 <View style={{marginTop: "6%"}}/>
-                <ValidateButton title="Save Filters" image="save.png" colour="#ACA279" backColour="#F2F0E4" todo={() => console.log("save filters")}></ValidateButton>
+                <ValidateButton title="Save Filters" image="save.png" colour={colors.buttonMain} backColour={colors.cardBackground} todo={goBack}></ValidateButton>
                 <View style={{marginTop: "20%"}}/>
             </LinearGradient>
         </ScrollView>

LeftOvers/screens/HomePage.tsx

@@ -155,6 +155,8 @@ export default function HomePage({ navigation, props }) {
                         <View style={{marginTop: "3%"}}/>
                         <ProfileSelection listProfile={profiles} disableSelection={true}/>
                         <View style={{marginTop: "4%"}}/>
+                        <ValidateButton title="Change Active Filters" image="update.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => navigation.navigate('FiltersSelection')}/>
+                        <View style={{marginTop: "3%"}}/>
                         <ValidateButton title="Modify Profiles" image="parameter.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => navigation.navigate('Profiles')}/>
                     </View>
                     <View style={styles.separator}/>
@@ -184,9 +186,9 @@ export default function HomePage({ navigation, props }) {
                             </View>
                         </View>
                         <View style={{marginTop: "4%"}}/>
-                        <ValidateButton title="Change Selected Ingredients" image="cook.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => console.log('Chnge Selected Ingredient')}/>
+                        <ValidateButton title="Change Selected Ingredients" image="cook.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => navigation.navigate('IngredientSelection')}/>
                         <View style={{marginTop: "3%"}}/>
-                        <ValidateButton title="Search Recipes" image="search.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={ () => console.log('Go and search for recipe')}/>
+                        <ValidateButton title="Search Recipes" image="search.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => navigation.navigate('RecipeSuggestion')}/>
                     </View>
                     <View style={{marginBottom: "20%"}}/>
                 </LinearGradient>

LeftOvers/screens/IngredientSelection.tsx

@@ -258,7 +258,7 @@ const loadIngredients = async () => {
                     </View>
                 </View>
                 <View style={{marginTop: "8%"}}></View>
-                <ValidateButton title="Find a recipe" image="validate.png" colour={colors.buttonMain} backColour={colors.cardBackground}/>
+                <ValidateButton title="Find a recipe" image="validate.png" colour={colors.buttonMain} backColour={colors.cardBackground} todo={() => props.navigation.navigate("RecipeSuggestion")}/>
                 <View style={{marginBottom: "20%"}}></View>
             </LinearGradient>
     </SafeAreaProvider>

LeftOvers/screens/RecipeSuggestion.tsx

@@ -29,7 +29,7 @@ export default function RecipeSuggestion(props) {
   const ingredientListV2 = [{title: "Smoked Salmon"}, {title: "Tomato"}, {title: "Carrot"}]
   const limitedList = ingredientList.slice(minCpt, maxCpt);
   const [colorIngredients, setColorIngredients] = useState("#59BDCD");
-  const [colorFilters, setColorFilters] = useState("#3F3C42");
+  const [colorFilters, setColorFilters] = useState(colors.cardDetail);
 
   const die = [{value: "Gluten free"}, {value: "Porkless"}, {value: "Gluten free"}, {value: "Porkless"}]
   const all = []
@@ -50,12 +50,12 @@ export default function RecipeSuggestion(props) {
     setVisibleIngredients(false);
     setVisibleFilters(true);
     setColorFilters("#59BDCD")
-    setColorIngredients("#3F3C42")
+    setColorIngredients(colors.cardDetail)
   }
   const handleChildEventGoIngredients = () => {
       setVisibleFilters(false);
       setVisibleIngredients(true);
-      setColorFilters("#3F3C42")
+      setColorFilters(colors.cardDetail)
       setColorIngredients("#59BDCD")
   }
 
@@ -81,14 +81,6 @@ export default function RecipeSuggestion(props) {
     }
   }
 
-  const imageElements = limitedList.map((source, index) => (
-      <View style={[styles.horizontalAlignment, {marginVertical: "3%"}]}>
-        <FoodElementTextSimple title={source.title}/>
-        <Image source={plus} style={{width: 20, resizeMode: "contain"}}/>
-        <Image source={minus} style={{width: 20, resizeMode: "contain"}}/>
-      </View>
-  ));
-
   const styles = StyleSheet.create({
     linearGradient: {
         width: "100%",
@@ -104,7 +96,7 @@ export default function RecipeSuggestion(props) {
           alignItems: 'center',
           justifyContent: 'center',
           borderRadius: 20,
-          backgroundColor: '#F2F0E4',
+          backgroundColor: colors.cardBackground,
           padding: "3%",
           marginHorizontal: "3%",
           borderWidth: 1,
@@ -121,32 +113,15 @@ export default function RecipeSuggestion(props) {
     },
     filters: {
             fontSize: 20,
-            color: '#ACA279',
+            color: colors.cardElementBorder,
             flex: 1,
     },
     nbSelected: {
             fontSize: 11,
-            color: "#3F3C42",
+            color: colors.cardDetail,
             textAlign: "right",
     },
 
-    page: {
-        flex: 1,
-        backgroundColor: '#59BDCD',
-        alignItems: 'center',
-        paddingHorizontal: "3%",
-    },
-
-    modal :{
-      position: 'absolute',
-      top: '50%',
-      height: "50%",
-      width: "100%",
-      borderWidth: 1,
-      borderColor: "red",
-      borderTopLeftRadius: 20,
-      borderTopRightRadius: 20,
-    },
     horizontalAlignment: {
       display: 'flex',
       height: "10%",
@@ -164,12 +139,21 @@ export default function RecipeSuggestion(props) {
     },
   });
 
+  const ingredientElements = limitedList.map((source, index) => (
+    <View style={[styles.horizontalAlignment, {marginVertical: "3%"}]}>
+      <FoodElementTextSimple title={source.title}/>
+      <Image source={plus} style={{width: 20, resizeMode: "contain", tintColor: colors.cardDetail}}/>
+      <Image source={minus} style={{width: 20, resizeMode: "contain", tintColor: colors.cardDetail}}/>
+    </View>
+  ));
+
+  const goDetails = () => props.navigation.navigate("RecipeDetails")
+
   return (
     <SafeAreaProvider style={{flex: 1}}>
     <PaperProvider>
-      <TopBar title="Recipes" isVisible="true"/>
       <ScrollView>
-        <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
+        <LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
             <View style={{marginTop: "6%"}}/>
             <SelectedIngredient
               ingredientList={ingredientList}
@@ -180,13 +164,16 @@ export default function RecipeSuggestion(props) {
                     number="63"
                     title="Meat Stick"
                     textList={ingredientList}
-                    description="Delicious stick with 4 meats. Accessible for beginners. 20 min or less to cook."/>
+                    description="Delicious stick with 4 meats. Accessible for beginners. 20 min or less to cook."
+                    duration="17 min"
+                    navigateDetails={goDetails}/>
               <View style={{marginHorizontal: 10}}/>
               <RecipeElement
                     number="03"
                     title="Vichyssoise"
                     textList={ingredientListV2}
-                    description="Cold soup of vegetables. Difficult recipe. Not advised to beginners. 1h or more."/>
+                    description="Cold soup of vegetables. Difficult recipe. Not advised to beginners. 1h or more."
+                    duration="1h and a half"/>
               <View style={{marginHorizontal: 10}}/>
             </ScrollView>
             <View style={{marginBottom: "20%"}}/>
@@ -196,15 +183,15 @@ export default function RecipeSuggestion(props) {
             <Modal visible={visible} onDismiss={handleChildEvent} contentContainerStyle={containerStyle} style={{marginTop: 0, justifyContent: "flex-end"}}>
                 <ParameterTopBar onEventFilter={handleChildEventGoFilters} onEventIngredient={handleChildEventGoIngredients} colorFilters={colorFilters} colorIngredients={colorIngredients}/>
                 {visibleIngredients &&(
-                    <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {paddingHorizontal: "3%"}]}>
+                    <LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {paddingHorizontal: "3%", justifyContent: "flex-start"}]}>
-                        {imageElements}
+                        {ingredientElements}
-                        <View style={[styles.horizontalAlignment, {marginTop: "6%"}]}>
+                        <View style={[styles.horizontalAlignment, {marginTop: "3%"}]}>
                              <Pressable onPress={decreaseCounter}>
-                                  <Image source={bracketLeft} style={{width: 30, height: "100%", resizeMode: "contain", tintColor: "#3F3C42"}}/>
+                                  <Image source={bracketLeft} style={{width: 30, height: "100%", resizeMode: "contain", tintColor: colors.cardDetail}}/>
                              </Pressable>
                              <CustomButton title="Save"></CustomButton>
                              <Pressable onPress={increaseCounter}>
-                                  <Image source={bracketRight} style={{width: 30, height: "100%", resizeMode: "contain", tintColor: "#3F3C42"}}/>
+                                  <Image source={bracketRight} style={{width: 30, height: "100%", resizeMode: "contain", tintColor: colors.cardDetail}}/>
                              </Pressable>
                         </View>
                     </LinearGradient>
@@ -212,7 +199,7 @@ export default function RecipeSuggestion(props) {
                 )}
                 {visibleFilters &&(
                     <ScrollView>
-                    <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {paddingHorizontal: "3%"}]}>
+                    <LinearGradient colors={[colors.primary, colors.primaryComplement]} style={[styles.linearGradient, {paddingHorizontal: "3%"}]}>
                         <View style={{marginTop: "10%"}}/>
                         <View style={styles.background}>
                             <View style={styles.filterBar}>
@@ -223,7 +210,7 @@ export default function RecipeSuggestion(props) {
                             <View style={{marginTop: "3%"}}/>
                             <ListWithoutSelect title="Allergies" content={all}></ListWithoutSelect>
                             <View style={{marginTop: "3%"}}/>
-                            <ValidateButton title="Add Allergy" image="plus.png" colour="#59BDCD" backColour="#E3DEC9"></ValidateButton>
+                            <ValidateButton title="Add Allergy" image="plus.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => props.navigation.navigate("IngredientSelection")}></ValidateButton>
                         </View>
                         <View style={{marginTop: "6%"}}/>
                         <View>

LeftOvers/theme/colors.ts

@@ -38,6 +38,7 @@ export interface Theme {
     letterFilter: string,
     foodElementBorder: string,
     badgeText: string,
+    recipeElementBackground: string,
 }
 
 export const LightTheme : Theme = {
@@ -68,6 +69,7 @@ export const LightTheme : Theme = {
     letterFilter: Moonstone,
     foodElementBorder: Jet,
     badgeText: Jet,
+    recipeElementBackground: Pearl,
 }
 
 export const DarkTheme : Theme = {
@@ -98,5 +100,6 @@ export const DarkTheme : Theme = {
     letterFilter: CarolinaBlue,
     foodElementBorder: CarolinaBlue,
     badgeText: Alabaster,
+    recipeElementBackground: Ecru,
 }