ui fixes, added delete account confirmation

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;