From e8398bf9eba90980c4853e74e9a9d2e646e1060d Mon Sep 17 00:00:00 2001
From: deekshita Madhalam <madhalam.d@northeastern.edu>
Date: Sat, 4 Apr 2026 15:34:20 -0400
Subject: [PATCH 1/3] Update FoodLogForm.tsx

---
 frontend/src/components/FoodLogForm.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/FoodLogForm.tsx b/frontend/src/components/FoodLogForm.tsx
index ad877ca..7171b51 100644
--- a/frontend/src/components/FoodLogForm.tsx
+++ b/frontend/src/components/FoodLogForm.tsx
@@ -162,13 +162,19 @@ export const FoodLogForm: React.FC<FoodLogFormProps> = ({ onSubmit, onBack }) =>
 
       {/* Custom food entry */}
       {isCustom && (
-        <View>
+        <View style={{ maxWidth: '75%' }}>
+          
           <TextInput
             style={{ borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, marginBottom: 8, backgroundColor: '#fafafa' }}
             placeholder="Food name"
             value={customName}
             onChangeText={setCustomName}
           />
+          {customIngredients.length === 0 && (
+          <Text style={{ color: '#aaa', fontSize: 13, marginBottom: 4 }}>
+            Ingredients
+          </Text>
+        )}
           <Chips
             items={customIngredients}
             itemName="Ingredients"

From 8b762900526f36a9a26746e76a242fdcbdcefb02 Mon Sep 17 00:00:00 2001
From: deekshita Madhalam <madhalam.d@northeastern.edu>
Date: Sat, 4 Apr 2026 15:41:42 -0400
Subject: [PATCH 2/3] placeholder

---
 frontend/src/components/FoodLogForm.tsx          | 1 +
 frontend/src/components/GenericChipComponent.tsx | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/frontend/src/components/FoodLogForm.tsx b/frontend/src/components/FoodLogForm.tsx
index 7171b51..86262ba 100644
--- a/frontend/src/components/FoodLogForm.tsx
+++ b/frontend/src/components/FoodLogForm.tsx
@@ -178,6 +178,7 @@ export const FoodLogForm: React.FC<FoodLogFormProps> = ({ onSubmit, onBack }) =>
           <Chips
             items={customIngredients}
             itemName="Ingredients"
+            placeholder="Add Ingredients..."
             onAdd={(ing) => setCustomIngredients((prev) => [...prev, ing])}
             onRemove={(i) => setCustomIngredients((prev) => prev.filter((_, idx) => idx !== i))}
           />
diff --git a/frontend/src/components/GenericChipComponent.tsx b/frontend/src/components/GenericChipComponent.tsx
index f0c9e41..0730a99 100644
--- a/frontend/src/components/GenericChipComponent.tsx
+++ b/frontend/src/components/GenericChipComponent.tsx
@@ -9,6 +9,7 @@ import {
 interface ChipsProps {
   items: string[];
   itemName: string;
+  placeholder: string;
   onAdd: (item: string) => void;
   onRemove: (index: number) => void;
 }
@@ -16,6 +17,7 @@ interface ChipsProps {
 export const Chips: React.FC<ChipsProps> = ({
   items,
   itemName,
+  placeholder,
   onAdd,
   onRemove,
 }) => {

From c3e0bf9f06cd0bb0d00ce7d5859edf4f7682793d Mon Sep 17 00:00:00 2001
From: deekshita Madhalam <madhalam.d@northeastern.edu>
Date: Sat, 4 Apr 2026 16:21:08 -0400
Subject: [PATCH 3/3] fixing ingredients to add with button

---
 frontend/src/components/FoodLogForm.tsx       |  4 ++-
 .../src/components/GenericChipComponent.tsx   | 26 ++++++++++++-------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/FoodLogForm.tsx b/frontend/src/components/FoodLogForm.tsx
index 86262ba..0ad77f8 100644
--- a/frontend/src/components/FoodLogForm.tsx
+++ b/frontend/src/components/FoodLogForm.tsx
@@ -162,7 +162,7 @@ export const FoodLogForm: React.FC<FoodLogFormProps> = ({ onSubmit, onBack }) =>
 
       {/* Custom food entry */}
       {isCustom && (
-        <View style={{ maxWidth: '75%' }}>
+        <View style={{width: '75%' }}>
           
           <TextInput
             style={{ borderWidth: 1, borderColor: '#ccc', borderRadius: 8, padding: 12, marginBottom: 8, backgroundColor: '#fafafa' }}
@@ -175,6 +175,7 @@ export const FoodLogForm: React.FC<FoodLogFormProps> = ({ onSubmit, onBack }) =>
             Ingredients
           </Text>
         )}
+        <View>
           <Chips
             items={customIngredients}
             itemName="Ingredients"
@@ -182,6 +183,7 @@ export const FoodLogForm: React.FC<FoodLogFormProps> = ({ onSubmit, onBack }) =>
             onAdd={(ing) => setCustomIngredients((prev) => [...prev, ing])}
             onRemove={(i) => setCustomIngredients((prev) => prev.filter((_, idx) => idx !== i))}
           />
+        </View>
           <TouchableOpacity onPress={() => { setIsCustom(false); setSearchQuery(""); }}>
             <Text className="text-sm font-medium font-ptserif text-[#eea487] mt-2">
               Search bank instead
diff --git a/frontend/src/components/GenericChipComponent.tsx b/frontend/src/components/GenericChipComponent.tsx
index 0730a99..7bd4219 100644
--- a/frontend/src/components/GenericChipComponent.tsx
+++ b/frontend/src/components/GenericChipComponent.tsx
@@ -9,7 +9,7 @@ import {
 interface ChipsProps {
   items: string[];
   itemName: string;
-  placeholder: string;
+  placeholder?: string;
   onAdd: (item: string) => void;
   onRemove: (index: number) => void;
 }
@@ -45,14 +45,22 @@ export const Chips: React.FC<ChipsProps> = ({
           </View>
         ))}
       </View>
-      <TextInput
-        className="border border-neutral-300 rounded-lg p-3 text-base bg-neutral-50 mb-2"
-        placeholder={`Add ${itemName.toLowerCase()}...`}
-        value={input}
-        onChangeText={setInput}
-        onSubmitEditing={handleSubmit}
-        returnKeyType="done"
-      />
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+        <TextInput
+          style={{ flex: 1, borderWidth: 1, borderColor: '#d4d4d4', borderRadius: 8, padding: 10, fontSize: 13, backgroundColor: '#fafafa' }}
+          placeholder={placeholder ?? `Add ${itemName.toLowerCase()}...`}
+          value={input}
+          onChangeText={setInput}
+          onSubmitEditing={handleSubmit}
+          returnKeyType="done"
+        />
+        <TouchableOpacity
+          onPress={handleSubmit}
+          style={{ backgroundColor: '#eea487', borderRadius: 8, padding: 10 }}
+        >
+          <Text style={{ color: 'white', fontWeight: '600', fontSize: 13 }}>Add</Text>
+        </TouchableOpacity>
+      </View>
     </View>
   );
 };
\ No newline at end of file