ui fixes, added delete account confirmation

components/pages/grocery/GroceryList.tsx

@@ -74,7 +74,7 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
     }, [groceries]);
 
     return (
-        <View marginH-20 marginB-20>
+        <View marginH-20 marginB-45>
             <HeaderTemplate
                 message={"Welcome to your grocery list"}
                 isWelcome={false}

components/pages/settings/user_components/DeleteProfileDialogs.tsx

@@ -0,0 +1,128 @@
+import React, { useState } from "react";
+import { Dialog, Button, Text, View } from "react-native-ui-lib";
+import { StyleSheet } from "react-native";
+import { Feather } from "@expo/vector-icons";
+
+interface ConfirmationDialogProps {
+  visible: boolean;
+  onDismiss: () => void;
+  onFirstYes: () => void;
+  onConfirm: () => void;
+}
+
+const DeleteProfileDialogs: React.FC<ConfirmationDialogProps> = ({
+  visible,
+  onDismiss,
+  onFirstYes,
+  onConfirm,
+}) => {
+  const [confirmationDialog, setConfirmationDialog] = useState<boolean>(false);
+  return (
+    <>
+      <Dialog
+        visible={visible}
+        onDismiss={onDismiss}
+        containerStyle={styles.dialog}
+      >
+        <View centerH>
+          <Feather name="alert-triangle" size={70} color="#FF5449" />
+        </View>
+        <Text center style={styles.title}>
+          Are you sure?
+        </Text>
+        <Text
+          style={{
+            fontSize: 18,
+            fontFamily: "PlusJakartaSans_700Bold",
+            color: "#979797",
+            marginBottom: 20,
+          }}
+          center
+        >
+          This action will permanently delete all your data, you won't be able
+          to recover it!
+        </Text>
+        <View centerV></View>
+        <View row right gap-8>
+          <Button
+            label="Cancel"
+            onPress={onDismiss}
+            style={styles.cancelBtn}
+            color="#999999"
+            labelStyle={{ fontFamily: "Poppins_500Medium", fontSize: 13.53 }}
+          />
+          <Button
+            label="Yes"
+            onPress={() => {
+              setTimeout(() => setConfirmationDialog(true), 300);
+              onFirstYes();
+            }}
+            style={styles.confirmBtn}
+            labelStyle={{ fontFamily: "PlusJakartaSans_500Medium" }}
+          />
+        </View>
+      </Dialog>
+      <Dialog
+        visible={confirmationDialog}
+        onDismiss={() => setConfirmationDialog(false)}
+        containerStyle={styles.dialog}
+      >
+        <View center paddingH-10 paddingT-15 paddingB-5>
+          <Text style={styles.title}>
+            We're sorry to see you go, are you really sure you want to delete
+            everything?
+          </Text>
+          <View row right gap-8 marginT-15>
+            <Button
+              label="Cancel"
+              onPress={() => {
+                setConfirmationDialog(false);
+              }}
+              style={styles.cancelBtn}
+              color="#999999"
+              labelStyle={{ fontFamily: "Poppins_500Medium", fontSize: 13.53 }}
+            />
+            <Button
+              label="Yes"
+              onPress={() => {
+                onConfirm();
+                setConfirmationDialog(false);
+              }}
+              style={styles.confirmBtn}
+              labelStyle={{ fontFamily: "PlusJakartaSans_500Medium" }}
+            />
+          </View>
+        </View>
+      </Dialog>
+    </>
+  );
+};
+
+// Empty stylesheet for future styles
+const styles = StyleSheet.create({
+  confirmBtn: {
+    backgroundColor: "#FF5449",
+  },
+  cancelBtn: {
+    backgroundColor: "white",
+  },
+  dialog: {
+    backgroundColor: "white",
+    paddingHorizontal: 25,
+    paddingTop: 25,
+    paddingBottom: 17,
+    borderRadius: 20,
+  },
+  title: {
+    fontFamily: "Manrope_600SemiBold",
+    fontSize: 22,
+    marginBottom: 5,
+  },
+  text: {
+    fontFamily: "PlusJakartaSans_400Regular",
+    fontSize: 16,
+    marginBottom: 0,
+  },
+});
+
+export default DeleteProfileDialogs;

components/pages/settings/user_settings_views/MyProfile.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, TouchableOpacity } from "react-native";
 import { ScrollView } from "react-native-gesture-handler";
 import * as ImagePicker from "expo-image-picker";
 import {
+  Button,
   Colors,
   Image,
   Picker,
@@ -18,6 +19,7 @@ import { useAuthContext } from "@/contexts/AuthContext";
 import { useUpdateUserData } from "@/hooks/firebase/useUpdateUserData";
 import { useChangeProfilePicture } from "@/hooks/firebase/useChangeProfilePicture";
 import { colorMap } from "@/constants/colorMap";
+import DeleteProfileDialogs from "../user_components/DeleteProfileDialogs";
 
 const MyProfile = () => {
   const { user, profileData } = useAuthContext();
@@ -32,6 +34,15 @@ const MyProfile = () => {
     string | ImagePicker.ImagePickerAsset | null
   >(profileData?.pfp || null);
 
+  const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false);
+
+  const handleHideDeleteDialog = () => {
+    setShowDeleteDialog(false);
+  };
+  const handleShowDeleteDialog = () => {
+    setShowDeleteDialog(true);
+  };
+
   const { mutateAsync: updateUserData } = useUpdateUserData();
   const { mutateAsync: changeProfilePicture } = useChangeProfilePicture();
   const isFirstRender = useRef(true);
@@ -93,7 +104,7 @@ const MyProfile = () => {
       : profileImage;
 
   return (
-    <ScrollView style={{ paddingBottom: 100, flex: 1 }}>
+    <ScrollView style={{ paddingBottom: 20, flex: 1 }}>
       <View style={styles.card}>
         <Text style={styles.subTit}>Your Profile</Text>
         <View row spread paddingH-15 centerV marginV-15>
@@ -205,6 +216,22 @@ const MyProfile = () => {
           </Picker>
         </View>
       </View>
+      <Button
+        size="large"
+        backgroundColor="#FF5449"
+        label="Delete Profile"
+        style={{ marginTop: 10 }}
+        labelStyle={{ fontFamily: "PlusJakartaSans_500Medium", fontSize: 15 }}
+        onPress={handleShowDeleteDialog}
+      />
+      <DeleteProfileDialogs
+        onFirstYes={() => {
+          setShowDeleteDialog(false);
+        }}
+        visible={showDeleteDialog}
+        onDismiss={handleHideDeleteDialog}
+        onConfirm={() => {console.log('delete account here')}}
+      />
     </ScrollView>
   );
 };