Nav Recipe Suggestion Modal

LeftOvers/components/ValidateButton.tsx

@@ -83,6 +83,7 @@ export default function ValidateButton(props: ValidateButtonProps) {
             <Text style={{
                 fontSize: 15,
                 color: props.colour,
+                fontWeight: "bold",
             }}>{props.title}</Text>
         </View>
     </Pressable>

LeftOvers/navigation/HomeStackScreen.tsx

@@ -12,6 +12,7 @@ import IngredientSelection from '../screens/IngredientSelection';
 import RecipeSuggestion from '../screens/RecipeSuggestion';
 import FiltersSelection from '../screens/FiltersSelection';
 import RecipeDetails from '../screens/RecipeDetails';
+import ModifyProfile from '../screens/ModifyProfile';
 
 const HomeStack = createNativeStackNavigator()
 
@@ -98,6 +99,16 @@ export default function HomeStackScreen() {
                     )
                 }}
             />
+            <HomeStack.Screen
+                name='ProfileModification'
+                component={ModifyProfile}
+                options={{
+                    headerStyle: {backgroundColor: colors.cardBackground},
+                    headerTitle: () => (
+                        <HeaderTitle title='Profile Modification'/>
+                    )
+                }}
+            />
         </HomeStack.Navigator>
     )
 }

LeftOvers/screens/HomePage.tsx

@@ -160,14 +160,6 @@ export default function HomePage({ navigation, props }) {
                         <ValidateButton title="Modify Profiles" image="parameter.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => navigation.navigate('Profiles')}/>
                     </View>
                     <View style={styles.separator}/>
-                    <View style={styles.profilesSelection}>
-                        <View style={styles.filterBar}>
-                            <Text style={styles.filters}>Ingredient Stocks</Text>
-                        </View>
-                        <View style={{marginTop: "4%"}}/>
-                        <ValidateButton title="Manage Stocks" image="warehouse.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => console.log('ManageStocks')}/>
-                    </View>
-                    <View style={styles.separator}/>
                     <View style={styles.profilesSelection}>
                         <View style={styles.filterBar}>
                             <Text style={styles.filters}>Cooking</Text>

LeftOvers/screens/RecipeSuggestion.tsx

@@ -48,14 +48,14 @@ export default function RecipeSuggestion(props) {
   const handleChildEventGoFilters = () => {
     setVisibleIngredients(false);
     setVisibleFilters(true);
-    setColorFilters("#59BDCD")
+    setColorFilters(colors.buttonDetail)
     setColorIngredients(colors.cardDetail)
   }
   const handleChildEventGoIngredients = () => {
       setVisibleFilters(false);
       setVisibleIngredients(true);
       setColorFilters(colors.cardDetail)
-      setColorIngredients("#59BDCD")
+      setColorIngredients(colors.buttonDetail)
   }
 
   const decreaseCounter = () => {
@@ -172,7 +172,8 @@ export default function RecipeSuggestion(props) {
                     title="Vichyssoise"
                     textList={ingredientListV2}
                     description="Cold soup of vegetables. Difficult recipe. Not advised to beginners. 1h or more."
-                    duration="1h and a half"/>
+                    duration="1h and a half"
+                    navigateDetails={goDetails}/>
               <View style={{marginHorizontal: 10}}/>
             </ScrollView>
             <View style={{marginBottom: "20%"}}/>
@@ -209,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={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => props.navigation.navigate("IngredientSelection")}></ValidateButton>
+                            <ValidateButton title="Change Filters" image="update.png" colour={colors.buttonDetail} backColour={colors.buttonBackground} todo={() => props.navigation.navigate("FiltersSelection")}></ValidateButton>
                         </View>
                         <View style={{marginTop: "6%"}}/>
                         <View>

LeftOvers/theme/colors.ts

@@ -3,8 +3,6 @@ const Alabaster = '#F2F0E4'
 const Jet = '#3F3C42'
 const Moonstone = '#59BDCD'
 const Cerulean = '#2680AA'
-const Celeste = '#ADF3EA'
-const Tan = '#E0C293'
 const Pearl = '#E3DEC9'
 const EerieBlack = '#222222'
 const CarolinaBlue = '#8DB4D9'
@@ -43,7 +41,7 @@ export interface Theme {
 
 export const LightTheme : Theme = {
     primary: Cerulean,
-    primaryComplement: Moonstone, 
+    primaryComplement: Moonstone,
     cardBackground: Alabaster,
     cardTitle: Ecru,
     cardDetail: Jet,