refactor: Ingredients selection page

LeftOvers/screens/IngredientSelection.tsx

@@ -14,7 +14,6 @@ import fruit from '../assets/images/fruit_icon.png';
 
 
 export default function IngredientSelection(props) {
-
     const [searchQuery, setSearchQuery] = React.useState('');
 
     const onChangeSearch = query => setSearchQuery(query);
@@ -22,27 +21,55 @@ export default function IngredientSelection(props) {
     type ItemProps = {value: string}
 
     const AvailaibleItem = ({value}: ItemProps) => (
-    <><View style={styles.horizontalAlignement}>
+        <>
+            <View style={styles.horizontalAlignement}>
                 <FoodElementText title={value} />
                 <Pressable>
                     <Image source={plus} style={{ width: 20, height: 20 }} />
                 </Pressable>
-    </View><View style={{ height: 30 }}></View></>   
+            </View><View style={{ height: 30 }}></View>
+        </>   
     )
 
     const ChooseItem = ({value}: ItemProps) => (
-  <><View style={styles.horizontalAlignement}>
+        <>
+            <View style={styles.horizontalAlignement}>
                 <FoodElementText title={value} />
                 <Pressable>
                     <Image source={moins} style={{ width: 20, height: 20 }} />
                 </Pressable>
-  </View><View style={{ height: 30 }}></View></>   
+            </View><View style={{ height: 30 }}></View>
+        </>   
     )
 
+    
+    const styles = StyleSheet.create({
+        page: {
+            flex: 1,
+            backgroundColor: '#59BDCD',
+            alignItems: 'center',
+            display: 'flex',
+            flexWrap: 'wrap',
+            padding: 20,
+        },
+        element: {
+            backgroundColor:'#F2F0E4', 
+            borderRadius: 30,
+        },
+        horizontalAlignement: {
+            display: 'flex',
+            height: 30,
+            width: 350,
+            flexDirection: 'row',
+            justifyContent: 'space-around',
+            alignItems: 'center',
+            marginTop: 15,
+        }
+    });
+
     return (
         <SafeAreaProvider>
             <View style={styles.page}>
-
                 <View style={styles.element}>
                     <View style={[styles.horizontalAlignement, {justifyContent: 'center'}]}>
                         <Pressable>
@@ -101,27 +128,3 @@ const ChooseItem = ({value}: ItemProps) => (
         </SafeAreaProvider>
     );
 }
-
-const styles = StyleSheet.create({
-  page: {
-    flex: 1,
-    backgroundColor: '#59BDCD',
-    alignItems: 'center',
-    display: 'flex',
-    flexWrap: 'wrap',
-    padding: 20,
-  },
-  element: {
-    backgroundColor:'#F2F0E4', 
-    borderRadius: 30,
-  },
-  horizontalAlignement: {
-    display: 'flex',
-    height: 30,
-    width: 350,
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
-    marginTop: 15,
-  }
-});