Fix ListWithoutSelect component

LeftOvers/components/ListSelect.tsx

@@ -5,7 +5,7 @@ import ColorContext from '../theme/ColorContext';
 
 type ListProps = {
     title: string
-    content : string[]
+    content : {value: string}[]
 }
 
 export default function ListSelect(props: ListProps) {
@@ -74,7 +74,7 @@ export default function ListSelect(props: ListProps) {
         },
         badgesText: {
             fontSize: 15,
-            color: colors.cardElementText,
+            color: colors.badgeText,
         },
         box: {
             borderColor: "#3F3C42"
@@ -98,6 +98,7 @@ export default function ListSelect(props: ListProps) {
             checkBoxStyles={styles.box}
             notFoundText="All Diets Already Selected"
             placeholder={props.title}
+            labelStyles={styles.title}
             label={props.title}/>
     );
 }

LeftOvers/components/ListWithoutSelect.tsx

@@ -9,8 +9,15 @@ type ListProps = {
 }
 
 export default function ListWithoutSelect(props: ListProps) {
+    const [selected, setSelected] = React.useState([]);
     const { colors } = useContext(ColorContext);
 
+    let listContent = []
+
+    props.content.forEach((val) => {
+        listContent.push({value: val.value, disabled: true})
+    })
+
     const styles = StyleSheet.create({
         titleBar: {
             flexDirection: "row",
@@ -58,6 +65,7 @@ export default function ListWithoutSelect(props: ListProps) {
             width: "100%",
             minWidth: 250,
             maxWidth: 250,
+            backgroundColor: colors.cardElementBackground,
         },
         itemText: {
             fontSize: 13,
@@ -71,12 +79,14 @@ export default function ListWithoutSelect(props: ListProps) {
         box: {
             borderWidth: 0,
             flex: 0,
+            backgroundColor: colors.cardElementBackground,
         }
     });
 
     return (
         <MultipleSelectList
-            data={props.content}
+            setSelected={(val) => setSelected(val)}
+            data={listContent}
             save="value"
             search={false}
             arrowicon={<Image source={require("../assets/images/arrow.png")} style={styles.arrow}></Image>}
@@ -84,8 +94,11 @@ export default function ListWithoutSelect(props: ListProps) {
             inputStyles={styles.title}
             dropdownStyles={styles.itemList}
             dropdownItemStyles={styles.itemCell}
+            disabledItemStyles={styles.itemCell}
             dropdownTextStyles={styles.itemText}
+            disabledTextStyles={styles.itemText}
             checkBoxStyles={styles.box}
+            disabledCheckBoxStyles={styles.box}
             notFoundText="None"
             placeholder={props.title}
             label={props.title}/>

LeftOvers/components/ProfileModification.tsx

@@ -9,8 +9,8 @@ import ColorContext from '../theme/ColorContext';
 type ProfileProps = {
     name: string
     avatar: string
-    diets: string[]
+    diets: {value: string}[]
-    allergies: string[]
+    allergies: {value: string}[]
 }
 
 export default function ProfileModification(props: ProfileProps) {

LeftOvers/theme/colors.ts

@@ -37,6 +37,7 @@ export interface Theme {
     yesButton: string,
     letterFilter: string,
     foodElementBorder: string,
+    badgeText: string,
 }
 
 export const LightTheme : Theme = {
@@ -66,6 +67,7 @@ export const LightTheme : Theme = {
     yesButton: Moonstone,
     letterFilter: Moonstone,
     foodElementBorder: Jet,
+    badgeText: Jet,
 }
 
 export const DarkTheme : Theme = {
@@ -95,5 +97,6 @@ export const DarkTheme : Theme = {
     yesButton: CarolinaBlue,
     letterFilter: CarolinaBlue,
     foodElementBorder: CarolinaBlue,
+    badgeText: Alabaster,
 }