ui changes

components/pages/grocery/EditGroceryItem.tsx

@@ -1,68 +1,66 @@
-import { View, Text } from "react-native";
-import React, { RefObject, useEffect, useRef, useState } from "react";
-import { TextField, TextFieldRef } from "react-native-ui-lib";
-import {
-  GroceryCategory,
-  IGrocery,
-  useGroceryContext,
-} from "@/contexts/GroceryContext";
-import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+import {Text, View} from "react-native";
+import React, {useEffect, useRef} from "react";
+import {TextField, TextFieldRef} from "react-native-ui-lib";
+import {GroceryCategory, IGrocery, useGroceryContext,} from "@/contexts/GroceryContext";
 
 interface IEditGrocery {
-  id?: number;
-  title: string;
-  setTitle: (value: string) => void;
-  setCategory?: (category: GroceryCategory) => void;
-  category: GroceryCategory;
-  setSubmit?: (value: boolean) => void;
-  updateCategory?: (id: number, changes: Partial<IGrocery>) => void;
-  closeEdit?: (value: boolean) => void;
+    id?: number;
+    title: string;
+    setTitle: (value: string) => void;
+    setCategory?: (category: GroceryCategory) => void;
+    category: GroceryCategory;
+    setSubmit?: (value: boolean) => void;
+    updateCategory?: (id: number, changes: Partial<IGrocery>) => void;
+    closeEdit?: (value: boolean) => void;
 }
 
-const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
-  const { fuzzyMatchGroceryCategory } = useGroceryContext();
-  const inputRef = useRef<TextFieldRef>(null);
+const EditGroceryItem = ({editGrocery}: { editGrocery: IEditGrocery }) => {
+    const {fuzzyMatchGroceryCategory} = useGroceryContext();
+    const inputRef = useRef<TextFieldRef>(null);
 
-  useEffect(() => {
-    if (editGrocery.setCategory)
-      editGrocery.setCategory(fuzzyMatchGroceryCategory(editGrocery.title));
-  }, [editGrocery.title]);
+    useEffect(() => {
+        if (editGrocery.setCategory)
+            editGrocery.setCategory(fuzzyMatchGroceryCategory(editGrocery.title));
+    }, [editGrocery.title]);
 
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus(); // Focus on the TextField
-    }
-  }, []);
+    useEffect(() => {
+        if (inputRef.current) {
+            inputRef.current.focus(); // Focus on the TextField
+        }
+    }, []);
 
-  return (
-      <View
-        style={{
-          backgroundColor: "white",
-          width: "100%",
-          borderRadius: 25,
-          padding: 15,
-        }}
-      >
-        <TextField
-        ref={inputRef}
-          placeholder="Grocery"
-          value={editGrocery.title}
-          onChangeText={(value) => {
-            editGrocery.setTitle(value);
-          }}
-          onSubmitEditing={() => {
-            if (editGrocery.setSubmit) editGrocery.setSubmit(true);
-            if (editGrocery.closeEdit) editGrocery.closeEdit(false);
-            if (editGrocery.updateCategory && editGrocery.id)
-              editGrocery.updateCategory(editGrocery.id, {
-                category: fuzzyMatchGroceryCategory(editGrocery.title), title: editGrocery.title
-              });
-          }}
-          maxLength={25}
-        />
-        <Text>{editGrocery.category}</Text>
-      </View>
-  );
+    return (
+        <View
+            style={{
+                backgroundColor: "white",
+                width: "100%",
+                borderRadius: 25,
+                padding: 15,
+                marginTop: 10
+            }}
+        >
+            <TextField
+                text70T
+                style={{fontWeight: "400"}}
+                ref={inputRef}
+                placeholder="Grocery"
+                value={editGrocery.title}
+                onChangeText={(value) => {
+                    editGrocery.setTitle(value);
+                }}
+                onSubmitEditing={() => {
+                    if (editGrocery.setSubmit) editGrocery.setSubmit(true);
+                    if (editGrocery.closeEdit) editGrocery.closeEdit(false);
+                    if (editGrocery.updateCategory && editGrocery.id)
+                        editGrocery.updateCategory(editGrocery.id, {
+                            category: fuzzyMatchGroceryCategory(editGrocery.title), title: editGrocery.title
+                        });
+                }}
+                maxLength={25}
+            />
+            <Text>{editGrocery.category}</Text>
+        </View>
+    );
 };
 
 export default EditGroceryItem;

components/pages/grocery/GroceryItem.tsx

@@ -75,7 +75,7 @@ const GroceryItem = ({
         {!isEditingTitle ? (
           <View>
             <TouchableOpacity onPress={() => setIsEditingTitle(true)}>
-              <Text text70T>{item.title}</Text>
+              <Text text70T black style={{fontWeight: "400"}}>{item.title}</Text>
             </TouchableOpacity>
           </View>
         ) : (

components/pages/grocery/GroceryList.tsx

@@ -178,29 +178,29 @@ const GroceryList = () => {
       {/* Approved Section */}
       <View row spread marginT-40 marginB-0 centerV>
         <View row centerV>
-          <Text text70BL>Shopping List</Text>
           {approvedVisible && (
-            <AntDesign
-              name="down"
-              size={17}
-              style={styles.dropIcon}
-              color="#9f9f9f"
-              onPress={() => {
-                setApprovedVisible(false);
-              }}
-            />
+              <AntDesign
+                  name="down"
+                  size={17}
+                  style={styles.dropIcon}
+                  color="#9f9f9f"
+                  onPress={() => {
+                    setApprovedVisible(false);
+                  }}
+              />
           )}
           {!approvedVisible && (
-            <AntDesign
-              name="right"
-              size={15}
-              style={styles.dropIcon}
-              color="#9f9f9f"
-              onPress={() => {
-                setApprovedVisible(true);
-              }}
-            />
+              <AntDesign
+                  name="right"
+                  size={15}
+                  style={styles.dropIcon}
+                  color="#9f9f9f"
+                  onPress={() => {
+                    setApprovedVisible(true);
+                  }}
+              />
           )}
+          <Text text70BL>Shopping List</Text>
         </View>
         <View
           centerV