ui fixes, added delete account confirmation

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>
   );
 };