chore(baseModal): add support for x-small size option to make the modal smaller in width and height

feat(deleteAccountPage): create a new page for deleting user account with a confirmation modal
feat(routes): add route for delete account page under /account/delete path

src/frontend/src/modals/baseModal/index.tsx

@@ -47,7 +47,7 @@ interface BaseModalProps {
   open?: boolean;
   setOpen?: (open: boolean) => void;
   disable?: boolean;
-  size?: "smaller" | "small" | "medium" | "large" | "large-h-full";
+  size?: "x-small" | "smaller" | "small" | "medium" | "large" | "large-h-full";
 }
 function BaseModal({
   open,
@@ -73,6 +73,10 @@ function BaseModal({
   let height: string;
 
   switch (size) {
+    case "x-small":
+      minWidth = "min-w-[20vw]";
+      height = "h-[10vh]";
+      break;
     case "smaller":
       minWidth = "min-w-[40vw]";
       height = "h-[27vh]";

src/frontend/src/pages/deleteAccountPage/index.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { Button } from "../../components/ui/button";
+import { Input } from "../../components/ui/input";
+import BaseModal from "../../modals/baseModal";
+
+export default function DeleteAccountPage() {
+  const [showConfirmation, setShowConfirmation] = useState(false);
+
+  const handleDeleteAccount = () => {
+    // Implement your account deletion logic here
+    // For example, make an API call to delete the account
+    // Upon successful deletion, you can redirect the user to another page
+    console.log("Account deleted!");
+    // Implement the logic to redirect the user after account deletion.
+    // For example, use react-router-dom's useHistory hook.
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-center bg-muted">
+      <div className="flex w-72 flex-col items-center justify-center gap-2">
+        <span className="mb-4 text-5xl">⛓️</span>
+        <span className="mb-4 text-center text-2xl font-semibold text-primary">
+          Delete your account
+        </span>
+        <Input className="bg-background" placeholder="Confirm password" />
+
+        <BaseModal
+          open={showConfirmation}
+          setOpen={setShowConfirmation}
+          size="x-small"
+        >
+          <BaseModal.Header description="This action is irreversible and will permanently erase all your data and information associated with the account. ">
+            <h3>Are you sure ?</h3>
+          </BaseModal.Header>
+          <BaseModal.Trigger>
+            <Button
+              variant="default"
+              className="w-full hover:bg-status-red"
+              onClick={() => setShowConfirmation(true)}
+            >
+              Delete account
+            </Button>
+          </BaseModal.Trigger>
+          <BaseModal.Content>
+            <div className="flex h-full w-full flex-col justify-end">
+              <Button
+                variant="default"
+                className="w-full hover:bg-status-red"
+                onClick={() => handleDeleteAccount()}
+              >
+                Delete account
+              </Button>
+            </div>
+          </BaseModal.Content>
+        </BaseModal>
+      </div>
+    </div>
+  );
+}

src/frontend/src/routes.tsx

@@ -2,6 +2,7 @@ import { Route, Routes } from "react-router-dom";
 import CommunityPage from "./pages/CommunityPage";
 import FlowPage from "./pages/FlowPage";
 import HomePage from "./pages/MainPage";
+import DeleteAccountPage from "./pages/deleteAccountPage";
 import LoginPage from "./pages/loginPage";
 
 const Router = () => {
@@ -14,6 +15,9 @@ const Router = () => {
       </Route>
       <Route path="*" element={<HomePage />} />
       <Route path="/login" element={<LoginPage />} />
+      <Route path="/account">
+        <Route path="delete" element={<DeleteAccountPage />}></Route>
+      </Route>
     </Routes>
   );
 };