From d60f2881e8c46050c9c57f96b6c9f98c62f77b58 Mon Sep 17 00:00:00 2001
From: marksikaundi <emmanuelmark117@gmail.com>
Date: Sun, 10 Mar 2024 23:51:26 +0200
Subject: [PATCH] Refactor FoodListItem component styling

---
 src/components/FoodListItem.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/components/FoodListItem.tsx b/src/components/FoodListItem.tsx
index 98967a0..d057f48 100644
--- a/src/components/FoodListItem.tsx
+++ b/src/components/FoodListItem.tsx
@@ -3,16 +3,7 @@ import { AntDesign } from "@expo/vector-icons";
 
 const FoodListItem = ({ item }) => {
   return (
-    <View
-      style={{
-        backgroundColor: "gainsboro",
-        padding: 10,
-        borderRadius: 5,
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-      }}
-    >
+    <View style={styles.container}>
       <View style={{ flex: 1, gap: 5 }}>
         <Text style={{ fontWeight: "bold", fontSize: 16 }}>{item.label}</Text>
         <Text style={{ color: "dimgray" }}>
@@ -24,4 +15,15 @@ const FoodListItem = ({ item }) => {
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "gainsboro",
+    padding: 10,
+    borderRadius: 5,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+});
+
 export default FoodListItem;