Dropdown List ingredient Selection Page

LeftOvers/components/FoodElementText.tsx

@@ -6,6 +6,8 @@ import ColorContext from '../theme/ColorContext';
 
 interface FoodElementTextProps {
     title  : string
+    mainColour: string
+    secondaryColour: string
 }
 
 const componentHeight = 60; 
@@ -21,7 +23,7 @@ export default function FoodElementText(props : any) {
             justifyContent: 'center',
             width: "80%",
             borderRadius: 5,
-            backgroundColor: colors.carrouselBackground,
+            backgroundColor: props.mainColour ? props.mainColour : colors.ingredientBackground,
             marginHorizontal: "3%",
         },
         text: {
@@ -42,7 +44,7 @@ export default function FoodElementText(props : any) {
           height: 50,
           borderRadius: 5,
           borderWidth: 2,
-          borderColor: colors.cardDetail,
+          borderColor: props.secondaryColour ? props.secondaryColour : colors.foodElementBorder,
           flexDirection: 'row',
           justifyContent: 'space-between',
         },

LeftOvers/screens/HomePage.tsx

@@ -167,7 +167,7 @@ export default function HomePage({ navigation, props }) {
                                 <Pressable onPress={decreaseCounter}>
                                     <Image source={bracketLeft} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText}/>
                                 </Pressable>
-                                <FoodElementText title={ingredientList[cpt].title}/>
+                                <FoodElementText title={ingredientList[cpt].title} mainColour={colors.carrouselBackground} secondaryColour={colors.cardDetail}/>
                                 <Pressable onPress={increaseCounter}>
                                     <Image source={bracketRight} style={{width: 40, height: 40, resizeMode: "contain"}} tintColor={colors.carrouselText} />
                                 </Pressable>

LeftOvers/theme/colors.ts

@@ -36,6 +36,7 @@ export interface Theme {
     buttonMain: string,
     yesButton: string,
     letterFilter: string,
+    foodElementBorder: string,
 }
 
 export const LightTheme : Theme = {
@@ -64,6 +65,7 @@ export const LightTheme : Theme = {
     buttonMain: Ecru,
     yesButton: Moonstone,
     letterFilter: Moonstone,
+    foodElementBorder: Jet,
 }
 
 export const DarkTheme : Theme = {
@@ -92,5 +94,6 @@ export const DarkTheme : Theme = {
     buttonMain: CarolinaBlue,
     yesButton: CarolinaBlue,
     letterFilter: CarolinaBlue,
+    foodElementBorder: CarolinaBlue,
 }