Bug Fix (Separator ProfileElement)

LeftOvers/App.tsx

@@ -9,11 +9,11 @@ import FiltersSelection from './screens/FiltersSelection';
 
 export default function App(props) {
   return(
-    <HomePage/>
+    //<HomePage/>
     //<ModifyProfile/>
     //<Profiles/>
     //<RecipeSuggestion/>
     //<CreateProfile/>
-    //<FiltersSelection/>
+    <FiltersSelection/>
   );
 }

LeftOvers/components/ProfileElement.tsx

@@ -10,6 +10,7 @@ type Profile = {
 
 export default function ProfileElement(props : Profile) {
   const [waiting, setWaiting] = useState("none")
+  const [separator, setSeparator] = useState("none")
   const changeStatus = () => {
       if (props.disableSelection){
           setWaiting("none")
@@ -20,7 +21,13 @@ export default function ProfileElement(props : Profile) {
       else{
           setWaiting("flex")
       }
-      console.log(waiting, props.name)
+      if (props.isActive == "flex" && waiting == "none"){
+          setSeparator("flex")
+      }
+      else{
+          setSeparator("none")
+      }
+      console.log(waiting, separator, props.name)
   };
   return (
       <Pressable onPress={changeStatus} style={styles.button}>
@@ -33,7 +40,7 @@ export default function ProfileElement(props : Profile) {
                   <View style={[styles.active, {display: props.isActive}]}>
                       <Text style={styles.textActive}>Activated</Text>
                   </View>
-                  <View style={{flex: 0.3, display: waiting}}/>
+                  <View style={{flex: 0.3, display: separator}}/>
                   <View style={[styles.waiting, {display: waiting}]}>
                       <Text style={styles.textWaiting}>Waiting...</Text>
                   </View>

LeftOvers/components/ValidateButton.tsx

@@ -21,6 +21,7 @@ export default function ValidateButton(props: ValidateButtonProps) {
             borderColor: props.colour,
             backgroundColor: props.backColour,
             alignItems: 'center',
+            justifyContent: "center",
             flexDirection: "row",
             padding: 5,
             paddingRight: 10,}}>

LeftOvers/screens/HomePage.tsx

@@ -87,7 +87,7 @@ export default function HomePage(props) {
                      <View style={{marginTop: 10}}/>
                      <View style={styles.ingredientSelection}>
                          <Text style={{fontSize: 15, color: "#3F3C42"}}>Selected Ingredient</Text>
-                         <View style={{flexDirection: "row", padding: 10}}>
+                         <View style={{flexDirection: "row", padding: 10, justifyContent: "center", alignItems: "center"}}>
                              <Pressable onPress={decreaseCounter}>
                                  <Image source={bracketLeft} style={{ width: 40, height: 40 }} />
                              </Pressable>
@@ -97,9 +97,9 @@ export default function HomePage(props) {
                              </Pressable>
                          </View>
                      </View>
-                     <View style={{marginTop: 20}}/>
+                     <View style={{marginTop: 15}}/>
                      <ValidateButton title="Change Selected Ingredients" image="cook.png" colour="#59BDCD" backColour="#E3DEC9"/>
-                     <View style={{marginTop: 5}}/>
+                     <View style={{marginTop: 10}}/>
                      <ValidateButton title="Search Recipes" image="search.png" colour="#59BDCD" backColour="#E3DEC9"/>
                 </View>
             </LinearGradient>
@@ -145,18 +145,17 @@ const styles = StyleSheet.create({
   },
   nbSelected: {
         fontSize: 11,
-        //flex: 0.2,
         color: "#3F3C42",
         textAlign: "right",
   },
 
   profilesSelection: {
-        //maxWidth: 370,
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
         borderRadius: 20,
         backgroundColor: '#F2F0E4',
+        paddingTop: 5,
         marginHorizontal: 10,
   },
   welcome: {

LeftOvers/screens/ModifyProfile.tsx

@@ -14,7 +14,7 @@ export default function ModifyProfile(props) {
         <TopBar title="Modify Profile" isVisible="true"/>
         <View style={styles.container}>
             <LinearGradient colors={['#2680AA', '#59BDCD']} style={styles.linearGradient}>
-                <View style={{marginTop: 10}}/>
+                <View style={{marginTop: 20}}/>
                 <ProfileModification name="Johnny Silverhand" avatar="plus_small.png" diets={die} allergies={all}></ProfileModification>
                 <View style={{marginTop: 10}}/>
                 <ValidateButton title="Update Profile" image="update.png" colour="#ACA279" backColour="#F2F0E4"></ValidateButton>