Fix Views After Merge + BottomBar

LeftOvers/Services/Ingredients/IngredientsServices.tsx

@@ -3,7 +3,7 @@ import IIngredientService from "./IIngredientService";
 import axios from 'axios';
 
 export default class IngredientService implements IIngredientService {
-    private readonly API_URL = "http://localhost:3000/ingredients";
+    private readonly API_URL = "http://leftovers.alwaysdata.net/ingredients";
 
     constructor() {}
 

LeftOvers/Services/Recipes/RecipesServices.tsx

@@ -3,7 +3,7 @@ import IRecipesService from "./IRecipesServices";
 import Recipes from "../../Models/Recipes";
 
 export default class RecipesService implements IRecipesService {
-    private readonly API_URL = "http://localhost:3000/recipes";
+    private readonly API_URL = "http://leftovers.alwaysdata.net/recipes";
 
     constructor() {}
 

LeftOvers/components/ProfileDetails.tsx

@@ -47,6 +47,8 @@ export default function ProfileDetails(props) {
             backgroundColor: colors.cardBackground,
             padding: "3%",
             marginHorizontal: "3%",
+            borderWidth: 1,
+            borderColor: colors.blocBorder,
         },
     
         pseudoBar: {

LeftOvers/components/ProfileModification.tsx

@@ -37,6 +37,8 @@ export default function ProfileModification(props: ProfileProps) {
             backgroundColor: colors.cardBackground,
             padding: "3%",
             marginHorizontal: "3%",
+            borderWidth: 1,
+            borderColor: colors.blocBorder,
         },
     
         pseudoBar: {
@@ -51,7 +53,7 @@ export default function ProfileModification(props: ProfileProps) {
             padding: "5%",
             resizeMode: 'contain',
             borderWidth: 2,
-            borderColor: colors.cardTitle,
+            borderColor: colors.cardElementBorder,
             borderRadius: 45,
             height: "100%",
             flex: 0.04,
@@ -62,7 +64,7 @@ export default function ProfileModification(props: ProfileProps) {
             borderRadius: 10,
             borderWidth: 2,
             borderStyle: 'dashed',
-            borderColor: colors.cardTitle,
+            borderColor: colors.cardElementBorder,
             alignItems: 'center',
             textAlign: 'left',
             flex: 0.8,
@@ -71,7 +73,7 @@ export default function ProfileModification(props: ProfileProps) {
         },
         modify: {
             height: "100%",
-            tintColor: colors.cardTitle,
+            tintColor: colors.cardElementBorder,
             resizeMode: 'contain',
             flex: 0.1,
             marginLeft: "3%",
@@ -87,7 +89,7 @@ export default function ProfileModification(props: ProfileProps) {
         },
         filters: {
             fontSize: 20,
-            color: colors.cardTitle,
+            color: colors.cardElementBorder,
             flex: 1,
         },
         nbSelected: {

LeftOvers/components/Separator.tsx

@@ -1,17 +1,20 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {StyleSheet, View} from 'react-native';
+import ColorContext from '../theme/ColorContext';
 
 export default function Separator (){
+    const {colors, toggleColors } = useContext(ColorContext)
+
+    const styles = StyleSheet.create({
+        separator: {
+          width: "90%",
+          backgroundColor: colors.cardDetail,
+          borderWidth : 1,
+          marginLeft : "5%",
+          marginRight : "5%",
+          borderColor: colors.cardDetail,
+        },
+    });
+
     return <View style={styles.separator} />;
-};
+};
-  
-  const styles = StyleSheet.create({
-    separator: {
-      width: "90%",
-      backgroundColor: '#3F3C42',
-      borderWidth : 1,
-      marginLeft : "5%",
-      marginRight : "5%",
-    },
-  });
-  

LeftOvers/navigation/BottomBar.tsx

@@ -41,29 +41,26 @@ export default function BottomBar({ state, descriptors, navigation }) {
             bottom: 0,
             right: 0,
             left: 0,
-            height: 70,
+            height: "8%",
             backgroundColor: theme === 'dark' ? "#3F3C42" : "transparent"
         },
         BottomBarBlurContainer: {
             flexDirection: 'row',
             alignItems: 'center',
             alignContent: 'space-around',
-            padding: 2,
             borderBlockColor: theme === 'light' ? '#F2F0E4' : '#222222', 
-            borderWidth: 3, 
+            borderWidth: 2,
-            borderLeftColor: theme === 'light'? '#F2F0E4' : '#222222', 
+            borderLeftColor: theme === 'light'? '#F2F0E4' : '#222222',
-            borderLeftWidth: 3,
             borderRightColor: theme === 'light'? '#F2F0E4' : '#222222',
-            borderRightWidth: 3
         },
         BottomBarIcon: {
-            width: 35,
+            width: 25,
-            height: 35
+            height: 25,
+            resizeMode: "contain",
         },
         BottomBarElementContainer: {
             flexDirection: 'column',
             alignItems: 'center',
-            margin: 3
         }
     })
 
@@ -73,7 +70,7 @@ export default function BottomBar({ state, descriptors, navigation }) {
                 style={[StyleSheet.absoluteFill, styles.BottomBarBlurContainer]}
                 tint='dark'
                 intensity={theme === 'light' ? 50 : 0}
-            >
+                >
                 {state.routes.map((route, index) => {
                     const { options } = descriptors[route.key];
                     const label =
@@ -115,19 +112,21 @@ export default function BottomBar({ state, descriptors, navigation }) {
                         onPress={onPress}
                         style={[styles.BottomBarElementContainer, { flex: 1 }]}
                         key={route.name}
-                    >
+                        >
                             <Image source={icon} style={[styles.BottomBarIcon, {tintColor: isFocused ? (theme === 'light' ? '#59BDCD': '#8DB4D9'): '#F2F0E4'}]} />
-                            <Text style={{ color: isFocused ? '#59BDCD' : '#F2F0E4' }}>
+                            <Text style={{ color: isFocused ? colors.textBottomBarFocussed : '#F2F0E4' }}>
                                 {label}
                             </Text>
                     </TouchableOpacity>
                     );
                 })}
-                <Pressable onPress={ onThemeButtonPress }>
+                <Pressable onPress={ onThemeButtonPress } style={{paddingHorizontal: "7%"}}>
+                    <View style={{alignItems: "center", justifyContent: "center"}}>
                         <Image source={iconThemeButton} style={[styles.BottomBarIcon, {tintColor: '#F2F0E4'}]} />
                         <Text style={{color: '#F2F0E4'}}>
                             {textThemeButton}
                         </Text>
+                    </View>
                 </Pressable>
             </BlurView>
         </View>

LeftOvers/screens/CreateProfile.tsx

@@ -46,7 +46,7 @@ export default function CreateProfile(props) {
                     <View style={{marginTop: "6%"}}/>
                     <ProfileModification name="" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
                     <View style={{marginTop: "3%"}}/>
-                    <ValidateButton title="Create Profile" image="plus.png" colour={colors.cardTitle} backColour={colors.cardBackground} todo={handleCreateProfile}></ValidateButton>
+                    <ValidateButton title="Create Profile" image="plus.png" colour={colors.buttonMain} backColour={colors.cardBackground} todo={handleCreateProfile}></ValidateButton>
                     <View style={{marginTop: "20%"}}/>
                 </LinearGradient>
             </ScrollView>

LeftOvers/screens/FiltersSelection.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {StyleSheet, View, Text, ScrollView, useWindowDimensions} from 'react-native';
 import {LinearGradient} from 'expo-linear-gradient';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
@@ -8,8 +8,10 @@ import TopBar from '../components/TopBar';
 import ListSelect from '../components/ListSelect';
 import ListWithoutSelect from '../components/ListWithoutSelect';
 import ProfileSelection from '../components/ProfileSelection';
+import ColorContext from '../theme/ColorContext';
 
 export default function FiltersSelection(props) {
+  const {colors, toggleColors} = useContext(ColorContext);
   const profiles = [
         {name: "Johnny Silverhand", avatar: "plus_small.png", isActive: "flex"},
         {name: "Panam Palmer", avatar: "plus_small.png", isActive: "none"},
@@ -32,15 +34,75 @@ export default function FiltersSelection(props) {
   function isInProfileDiets(element, index, array) {
        var retType = true
        dieProfiles.forEach(function (diets) {
-          if(diets.value==element.value){
+            if(diets.value==element.value){
-              retType = false
+                retType = false
-          }
+            }
        })
        return retType
     }
   const dieAdd = die.filter(isInProfileDiets);
   const allAdd = []
 
+  const styles = StyleSheet.create({
+    container: {
+      height: "100%",
+      width: "100%",
+      flex: 1,
+      backgroundColor: '#3F3C42',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    linearGradient: {
+      height: "100%",
+      width: "100%",
+      flex: 1,
+      padding: "2%",
+      paddingTop: 0,
+    },
+
+    background: {
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 20,
+        backgroundColor: '#F2F0E4',
+        padding: "3%",
+        marginHorizontal: "3%",
+        borderWidth: 1,
+        borderColor: colors.blocBorder,
+    },
+
+    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",
+    },
+
+    profilesSelection: {
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: 20,
+          backgroundColor: '#F2F0E4',
+          marginHorizontal: "3%",
+          paddingBottom: "3%",
+          borderWidth: 1,
+          borderColor: colors.blocBorder,
+    },
+  });
+
   return (
     <SafeAreaProvider style={{flex: 1}}>
         <TopBar title="Filters Selection" isVisible="true"/>
@@ -85,60 +147,4 @@ export default function FiltersSelection(props) {
         </ScrollView>
     </SafeAreaProvider>
   );
-}
+}
-
-const styles = StyleSheet.create({
-  container: {
-    height: "100%",
-    width: "100%",
-    flex: 1,
-    backgroundColor: '#3F3C42',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  linearGradient: {
-    height: "100%",
-    width: "100%",
-    flex: 1,
-    padding: "2%",
-    paddingTop: 0,
-  },
-
-  background: {
-      flexDirection: 'column',
-      alignItems: 'center',
-      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",
-  },
-
-  profilesSelection: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 20,
-        backgroundColor: '#F2F0E4',
-        marginHorizontal: "3%",
-        paddingBottom: "3%",
-  },
-});

LeftOvers/screens/HomePage.tsx

@@ -86,6 +86,8 @@ export default function HomePage({ navigation, props }) {
             backgroundColor: colors.cardBackground,
             marginHorizontal: "3%",
             paddingBottom: "3%",
+            borderWidth: 1,
+            borderColor: colors.blocBorder,
         },
       
         welcome: {
@@ -161,7 +163,7 @@ export default function HomePage({ navigation, props }) {
                         <View style={{marginTop: "3%"}}/>
                         <View style={styles.ingredientSelection}>
                             <Text style={{fontSize: 15, color: colors.carrouselText}}>Selected Ingredient</Text>
-                            <View style={{flexDirection: "row", padding: "4%", justifyContent: "center", alignItems: "center"}}>
+                            <View style={{flexDirection: "row", padding: "4%", justifyContent: "center", alignItems: "center", marginLeft: "8%"}}>
                                 <Pressable onPress={decreaseCounter}>
                                     <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText}/>
                                 </Pressable>

LeftOvers/screens/IngredientSelection.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { View, StyleSheet, Text, Image, Pressable, ActivityIndicator, FlatList, ScrollView, useWindowDimensions } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import TopBar from '../components/TopBar';
@@ -11,6 +11,7 @@ import moins from '../assets/images/minus.png';
 import Ingredient from '../Models/Ingredient';
 import IngredientService from '../Services/Ingredients/IngredientsServices';
 import { LinearGradient } from 'expo-linear-gradient';
+import ColorContext from '../theme/ColorContext';
 
 export default function IngredientSelection(props) {
   const alphabetArray: Array<string> = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
@@ -19,6 +20,7 @@ export default function IngredientSelection(props) {
   const [response, setResponse] = useState<Ingredient[] | undefined>(undefined);
   const [selectedIngredients, setSelectedIngredients] = useState([]);
   const ingredientService = new IngredientService();
+  const {colors, toggleColors} = useContext(ColorContext);
 
   const [searchQuery, setSearchQuery] = useState('');
 
@@ -108,6 +110,32 @@ const loadIngredients = async () => {
     }
   };
 
+  const styles = StyleSheet.create({
+    linearGradient: {
+          width: "100%",
+          flex: 1,
+          padding: "3%",
+          paddingTop: 0,
+          alignItems: "center",
+          justifyContent: "flex-start",
+    },
+
+    element: {
+      width: "100%",
+      backgroundColor:'#F2F0E4',
+      borderRadius: 30,
+      borderWidth: 1,
+      borderColor: colors.blocBorder,
+    },
+    horizontalAlignment: {
+      width: "100%",
+      flexDirection: 'row',
+      justifyContent: 'space-around',
+      alignItems: 'center',
+      marginTop: "3%",
+    }
+  });
+
   return (
     <SafeAreaProvider style={{flex: 1}}>
         <ScrollView>
@@ -172,28 +200,4 @@ const loadIngredients = async () => {
         </ScrollView>
     </SafeAreaProvider>
   );
-}
+}
-
-const styles = StyleSheet.create({
-  linearGradient: {
-        width: "100%",
-        flex: 1,
-        padding: "3%",
-        paddingTop: 0,
-        alignItems: "center",
-        justifyContent: "flex-start",
-  },
-
-  element: {
-    width: "100%",
-    backgroundColor:'#F2F0E4',
-    borderRadius: 30,
-  },
-  horizontalAlignment: {
-    width: "100%",
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-    marginTop: "3%",
-  }
-});

LeftOvers/screens/ModifyProfile.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {StyleSheet, View, ScrollView, useWindowDimensions} from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -6,7 +6,10 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import ProfileModification from '../components/ProfileModification';
 import ValidateButton from '../components/ValidateButton';
 
+import ColorContext from '../theme/ColorContext'
+
 export default function ModifyProfile(props) {
+  const {colors, toggleColors} = useContext(ColorContext);
   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 (
@@ -16,7 +19,7 @@ export default function ModifyProfile(props) {
                 <View style={{marginTop: "6%"}}/>
                 <ProfileModification name="Johnny Silverhand" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
                 <View style={{marginTop: "3%"}}/>
-                <ValidateButton title="Update Profile" image="update.png" colour="#ACA279" backColour="#F2F0E4" todo={() => (console.log("Profile Modified"))}></ValidateButton>
+                <ValidateButton title="Update Profile" image="update.png" colour={colors.buttonMain} backColour={colors.buttonBackground} todo={() => (console.log("Profile Modified"))}></ValidateButton>
                 <View style={{marginBottom: "20%"}}/>
             </LinearGradient>
         </ScrollView>

LeftOvers/screens/Profiles.tsx

@@ -167,8 +167,7 @@ export default function Profiles({navigation, props}) {
             avatar={profile.avatar}
             diets={profile.diets}
             allergies={profile.allergies}
-            onDeleteProfile={raisePopUp}
+            onDeleteProfile={raisePopUp}/>
-          />
           {index < profiles.length - 1 && <View style={styles.separator} />}
         </View>
       ));

LeftOvers/screens/RecipeDetails.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
 import { View, StyleSheet, Text, ScrollView, useWindowDimensions} from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
@@ -8,9 +8,11 @@ import RecipesService from '../Services/Recipes/RecipesServices';
 import Recipes from '../Models/Recipes';
 import { LinearGradient } from 'expo-linear-gradient';
 import ListWithoutSelect from '../components/ListWithoutSelect';
+import ColorContext from '../theme/ColorContext';
 
 
 export default function RecipeDetails(props) {
+    const {colors, toggleColors} = useContext(ColorContext);
 
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState();
@@ -40,18 +42,17 @@ export default function RecipeDetails(props) {
       const minutesString = minutes > 0 ? ` ${minutes} min` : '';
   
       return `${hoursString}${minutesString}`.trim();
-  }
+    }
 
     return (
-      
         <SafeAreaProvider>
           <ScrollView>
             <LinearGradient colors={['#2680AA', '#59BDCD']} style={[styles.linearGradient, {minHeight: useWindowDimensions().height}]}>
                 <View style={{marginTop: "6%"}}>
                     <RecipeElementReduce 
-                title={response.name}
+                        title={response.name}
-                number={response.id}
+                        number={response.id}
-                duration={convertToHoursMinutes(response.time_to_cook)} image={''}/>
+                        duration={convertToHoursMinutes(response.time_to_cook)} image={''}/>
                 </View>
                 <View style={styles.separator}/>
                 <View style={styles.background}>
@@ -74,8 +75,7 @@ export default function RecipeDetails(props) {
           </ScrollView>
         </SafeAreaProvider>
       );
-    }
+
-    
     const styles = StyleSheet.create({
       linearGradient: {
             width: "100%",
@@ -95,6 +95,8 @@ export default function RecipeDetails(props) {
               backgroundColor: '#F2F0E4',
               padding: "3%",
               marginHorizontal: "3%",
+              borderWidth: 1,
+              borderColor: colors.blocBorder,
       },
 
       filterBar: {
@@ -116,4 +118,4 @@ export default function RecipeDetails(props) {
                 textAlign: "right",
       },
     });
-    
+}

LeftOvers/screens/RecipeSuggestion.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useContext } from 'react';
 import {View, StyleSheet, Text, Image, Pressable, useWindowDimensions, ScrollView} from 'react-native';
 import {SafeAreaProvider } from 'react-native-safe-area-context';
 import {Modal, Portal, PaperProvider} from 'react-native-paper';
@@ -10,6 +10,7 @@ import FoodElementTextSimple from '../components/FoodElementTextSimple';
 import FoodElementText from '../components/FoodElementText';
 import CustomButton from '../components/CustomButton';
 import DietsTab from '../components/ListSelect';
+import ColorContext from '../theme/ColorContext';
 
 import brochette from '../assets/images/brochette.png'; 
 import ParameterTopBar from '../components/ParameterTopBar';
@@ -23,6 +24,7 @@ import minus from '../assets/images/minus.png';
 
 
 export default function RecipeSuggestion(props) {
+  const {colors, toggleColors} = useContext(ColorContext)
   const [visible, setVisible] = React.useState(false);
   const [visibleFilters, setVisibleFilters] = React.useState(false);
   const [visibleIngredients, setVisibleIngredients] = React.useState(true);
@@ -92,6 +94,81 @@ export default function RecipeSuggestion(props) {
       </View>
   ));
 
+  const styles = StyleSheet.create({
+    linearGradient: {
+        width: "100%",
+        flex: 1,
+        //padding: "2%",
+        paddingTop: 0,
+        alignItems: "center",
+        justifyContent: "center"
+    },
+
+    background: {
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          borderRadius: 20,
+          backgroundColor: '#F2F0E4',
+          padding: "3%",
+          marginHorizontal: "3%",
+          borderWidth: 1,
+          borderColor: colors.blocBorder,
+    },
+
+    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",
+    },
+
+    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%",
+      width: "100%",
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    },
+
+    recipes: {
+          flexDirection: "row",
+          overflow: "scroll",
+          alignItems: "flex-start",
+          justifyContent: "center",
+    },
+  });
+
   return (
     <SafeAreaProvider style={{flex: 1}}>
     <PaperProvider>
@@ -166,77 +243,4 @@ export default function RecipeSuggestion(props) {
     </PaperProvider>
     </SafeAreaProvider>
   );
-}
+}
-
-const styles = StyleSheet.create({
-  linearGradient: {
-      width: "100%",
-      flex: 1,
-      //padding: "2%",
-      paddingTop: 0,
-      alignItems: "center",
-      justifyContent: "center"
-  },
-
-  background: {
-        flexDirection: 'column',
-        alignItems: 'center',
-        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",
-  },
-
-  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%",
-    width: "100%",
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
-
-  recipes: {
-        flexDirection: "row",
-        overflow: "scroll",
-        alignItems: "flex-start",
-        justifyContent: "center",
-  },
-});

LeftOvers/theme/colors.ts

@@ -30,7 +30,10 @@ export interface Theme {
     welcomeName: string,
     carrouselBackground: string,
     carrouselText: string,
-    carrouselDetail: string
+    carrouselDetail: string,
+    textBottomBarFocussed: string,
+    blocBorder: string,
+    buttonMain: string,
 }
 
 export const LightTheme : Theme = {
@@ -53,7 +56,10 @@ export const LightTheme : Theme = {
     welcomeName: Moonstone,
     carrouselBackground: Pearl,
     carrouselText: Ecru,
-    carrouselDetail: Moonstone
+    carrouselDetail: Moonstone,
+    textBottomBarFocussed: Moonstone,
+    blocBorder: Alabaster,
+    buttonMain: Ecru,
 }
 
 export const DarkTheme : Theme = {
@@ -76,6 +82,9 @@ export const DarkTheme : Theme = {
     welcomeName:Alabaster,
     carrouselBackground: CarolinaBlue,
     carrouselText: SteelBlue,
-    carrouselDetail: Alabaster
+    carrouselDetail: Alabaster,
+    textBottomBarFocussed: SteelBlue,
+    blocBorder: EerieBlack,
+    buttonMain: CarolinaBlue,
 }