app/components/management-card.tsx

@@ -3,17 +3,21 @@ import { Avatar } from "./ui/avatar";
 import { Button } from "./ui/button";
 import { EditIcon, FingerPrintIcon } from "./icons";
 
-const ManagementCardAvatar = ({ src, onClick }: { src?: string; onClick?: () => void }) => {
+const ManagementCardAvatar = ({ src, button, onClick }: { src?: string; button?: React.ReactNode; onClick?: () => void }) => {
   return (
     <div className="flex justify-center">
       <div className="relative w-fit h-fit">
         <Avatar className="border-2 border-ring h-28 w-28" />
-        <Button
+        {!button
+          ? <Button
               onClick={onClick}
               variant="outline"
               className="absolute bottom-0 right-0 z-50 flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
               <EditIcon />
             </Button>
+          : button
+        }
+        
       </div>
     </div>
   );

app/routes/account.tsx

@@ -8,11 +8,18 @@ import {
   useUpdate,
   useUpdatePassword,
 } from "@refinedev/core";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { z } from "zod";
 import { Field } from "~/components/forms";
 import { GeneralLayout } from "~/components/general-layout";
-import { AddIcon, CloudCheckIcon, CloudIcon, CloudUploadIcon, CrownIcon, TrashIcon } from "~/components/icons";
+import {
+  AddIcon,
+  CloudCheckIcon,
+  CloudIcon,
+  CloudUploadIcon,
+  CrownIcon,
+  EditIcon,
+} from "~/components/icons";
 import { useUppy } from "~/components/lib/uppy";
 import {
   ManagementCard,
@@ -27,6 +34,7 @@ import {
   DialogContent,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from "~/components/ui/dialog";
 import { Input } from "~/components/ui/input";
 import { UsageCard } from "~/components/usage-card";
@@ -46,6 +54,17 @@ export default function MyAccount() {
   return (
     <GeneralLayout>
       <h1 className="text-lg font-bold mb-4">My Account</h1>
+      <Dialog
+        onOpenChange={(open) => {
+          if (!open) {
+            setModal({
+              changeEmail: false,
+              changePassword: false,
+              setupTwoFactor: false,
+              changeAvatar: false,
+            });
+          }
+        }}>
         <UsageCard
           label="Usage"
           currentUsage={2}
@@ -62,7 +81,16 @@ export default function MyAccount() {
         <div className="grid grid-cols-3 gap-x-8">
           <ManagementCard>
             <ManagementCardAvatar
+              button={
+                <DialogTrigger className="absolute bottom-0 right-0 z-50">
+                  <Button
                     onClick={() => setModal({ ...openModal, changeAvatar: true })}
+                    variant="outline"
+                    className=" flex items-center w-10 h-10 p-0 border-white rounded-full justiyf-center hover:bg-secondary-2">
+                    <EditIcon />
+                  </Button>
+                </DialogTrigger>
+              }
             />
           </ManagementCard>
           <ManagementCard>
@@ -71,12 +99,14 @@ export default function MyAccount() {
               {identity?.email}
             </ManagementCardContent>
             <ManagementCardFooter>
+              <DialogTrigger>
                 <Button
                   className="h-12 gap-x-2"
                   onClick={() => setModal({ ...openModal, changeEmail: true })}>
                   <AddIcon />
                   Change Email Address
                 </Button>
+              </DialogTrigger>
             </ManagementCardFooter>
           </ManagementCard>
           <ManagementCard>
@@ -101,12 +131,16 @@ export default function MyAccount() {
               <PasswordDots className="mt-6" />
             </ManagementCardContent>
             <ManagementCardFooter>
+              <DialogTrigger>
                 <Button
                   className="h-12 gap-x-2"
-              onClick={() => setModal({ ...openModal, changePassword: true })}>
+                  onClick={() =>
+                    setModal({ ...openModal, changePassword: true })
+                  }>
                   <AddIcon />
                   Change Password
                 </Button>
+              </DialogTrigger>
             </ManagementCardFooter>
           </ManagementCard>
           <ManagementCard>
@@ -115,12 +149,16 @@ export default function MyAccount() {
               Improve security by enabling 2FA.
             </ManagementCardContent>
             <ManagementCardFooter>
+              <DialogTrigger>
                 <Button
                   className="h-12 gap-x-2"
-              onClick={() => setModal({ ...openModal, setupTwoFactor: true })}>
+                  onClick={() =>
+                    setModal({ ...openModal, setupTwoFactor: true })
+                  }>
                   <AddIcon />
                   Enable Two-Factor Authorization
                 </Button>
+              </DialogTrigger>
             </ManagementCardFooter>
           </ManagementCard>
         </div>
@@ -163,32 +201,15 @@ export default function MyAccount() {
             </ManagementCardFooter>
           </ManagementCard>
         </div>
-      {/* Dialogs must be near to body as possible to open the modal, otherwise will be restricted to parent height-width */}
-      <ChangeAvatarForm
-        open={openModal.changeAvatar}
-        setOpen={(value: boolean) =>
-          setModal({ ...openModal, changeAvatar: value })
-        }
-      />
-      <ChangeEmailForm
-        open={openModal.changeEmail}
-        setOpen={(value: boolean) =>
-          setModal({ ...openModal, changeEmail: value })
-        }
-        currentValue={identity?.email || ""}
-      />
-      <ChangePasswordForm
-        open={openModal.changePassword}
-        setOpen={(value: boolean) =>
-          setModal({ ...openModal, changePassword: value })
-        }
-      />
-      <SetupTwoFactorDialog
-        open={openModal.setupTwoFactor}
-        setOpen={(value: boolean) =>
-          setModal({ ...openModal, setupTwoFactor: value })
-        }
-      />
+        <DialogContent>
+          {openModal.changeAvatar && <ChangeAvatarForm />}
+          {openModal.changeEmail && (
+            <ChangeEmailForm currentValue={identity?.email || ""} />
+          )}
+          {openModal.changePassword && <ChangePasswordForm />}
+          {openModal.setupTwoFactor && <SetupTwoFactorDialog />}
+        </DialogContent>
+      </Dialog>
     </GeneralLayout>
   );
 }
@@ -210,15 +231,7 @@ const ChangeEmailSchema = z
     return true;
   });
 
-const ChangeEmailForm = ({
-  open,
-  setOpen,
-  currentValue,
-}: {
-  open: boolean;
-  setOpen: (value: boolean) => void;
-  currentValue: string;
-}) => {
+const ChangeEmailForm = ({ currentValue }: { currentValue: string }) => {
   const { data: identity } = useGetIdentity<{ id: BaseKey }>();
   const { mutate: updateEmail } = useUpdate();
   const [form, fields] = useForm({
@@ -244,10 +257,10 @@ const ChangeEmailForm = ({
   });
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent className="p-8" forceMount>
+    <>
       <DialogHeader>
         <DialogTitle className="mb-8">Change Email</DialogTitle>
+      </DialogHeader>
       <div className="rounded-full px-4 py-2 w-fit text-sm bg-ring font-bold text-secondary-1">
         {currentValue}
       </div>
@@ -273,9 +286,7 @@ const ChangeEmailForm = ({
         />
         <Button className="w-full h-14">Change Email Address</Button>
       </form>
-        </DialogHeader>
-      </DialogContent>
-    </Dialog>
+    </>
   );
 };
 
@@ -296,13 +307,7 @@ const ChangePasswordSchema = z
     return true;
   });
 
-const ChangePasswordForm = ({
-  open,
-  setOpen,
-}: {
-  open: boolean;
-  setOpen: (value: boolean) => void;
-}) => {
+const ChangePasswordForm = () => {
   const { mutate: updatePassword } = useUpdatePassword<{ password: string }>();
   const [form, fields] = useForm({
     id: "login",
@@ -323,10 +328,10 @@ const ChangePasswordForm = ({
   });
 
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent className="p-8">
+    <>
       <DialogHeader>
         <DialogTitle className="mb-8">Change Password</DialogTitle>
+      </DialogHeader>
       <form {...getFormProps(form)}>
         <Field
           inputProps={{
@@ -351,31 +356,18 @@ const ChangePasswordForm = ({
         />
         <Button className="w-full h-14">Change Password</Button>
       </form>
-        </DialogHeader>
-      </DialogContent>
-    </Dialog>
+    </>
   );
 };
 
-const SetupTwoFactorDialog = ({
-  open,
-  setOpen,
-}: {
-  open: boolean;
-  setOpen: (value: boolean) => void;
-}) => {
+const SetupTwoFactorDialog = () => {
   const [continueModal, setContinue] = useState<boolean>(false);
 
   return (
-    <Dialog
-      open={open}
-      onOpenChange={(value) => {
-        setOpen(value);
-        setContinue(false);
-      }}>
-      <DialogContent className="p-8">
+    <>
       <DialogHeader>
         <DialogTitle className="mb-8">Setup Two-Factor</DialogTitle>
+      </DialogHeader>
       <div className="flex flex-col gap-y-6">
         {continueModal ? (
           <>
@@ -397,27 +389,17 @@ const SetupTwoFactorDialog = ({
             <div className="p-4 border text-primary-2 text-center font-bold">
               HHH7MFGAMPJ44OM44FGAMPJ44O232
             </div>
-                <Button
-                  className="w-full h-14"
-                  onClick={() => setContinue(true)}>
+            <Button className="w-full h-14" onClick={() => setContinue(true)}>
               Continue
             </Button>
           </>
         )}
       </div>
-        </DialogHeader>
-      </DialogContent>
-    </Dialog>
+    </>
   );
 };
 
-const ChangeAvatarForm = ({
-  open,
-  setOpen,
-}: {
-  open: boolean;
-  setOpen: (value: boolean) => void;
-}) => {
+const ChangeAvatarForm = () => {
   const {
     getRootProps,
     getInputProps,
@@ -437,13 +419,16 @@ const ChangeAvatarForm = ({
   const isCompleted = state === "completed";
   const hasStarted = state !== "idle" && state !== "initializing";
 
+  const file = getFiles()?.[0];
+
+  const imagePreview = useMemo(() => {
+    if (file) {
+      return URL.createObjectURL(file.data);
+    }
+  }, [file]);
+
   return (
-    <Dialog
-      open={open}
-      onOpenChange={(value) => {
-        setOpen(value);
-      }}>
-      <DialogContent className="p-8">
+    <>
       <DialogHeader className="mb-6">
         <DialogTitle>Edit Avatar</DialogTitle>
       </DialogHeader>
@@ -464,23 +449,25 @@ const ChangeAvatarForm = ({
         </div>
       ) : null}
 
-          {(!hasStarted && getFiles().length > 0) && (
+      {!hasStarted && file && (
         <div className="border border-border rounded p-4 bg-primary-dark relative">
           <Button
-                className="absolute top-4 right-4 rounded-full aspect-square bg-primary-dark hover:bg-primary p-2 text-sm"
-                onClick={() => removeFile(getFiles()[0].id)}>
-                <Cross2Icon />
+            className="absolute top-1/2 right-1/2 rounded-full bg-gray-800/50 hover:bg-primary p-2 text-sm"
+            onClick={() => removeFile(file?.id)}>
+            <Cross2Icon className="size-4" />
           </Button>
-              <img className="w-full h-48" src={URL.createObjectURL(getFiles()[0].data)} alt="New Avatar Preview" />
+          <img
+            className="w-full h-48 object-contain"
+            src={imagePreview}
+            alt="New Avatar Preview"
+          />
         </div>
       )}
 
       {hasStarted ? (
         <div className="flex flex-col items-center gap-y-2 w-full text-primary-1">
           <CloudCheckIcon className="w-32 h-32" />
-            {isCompleted
-              ? "Upload completed"
-              : `0% completed`}
+          {isCompleted ? "Upload completed" : `0% completed`}
         </div>
       ) : null}
 
@@ -505,8 +492,7 @@ const ChangeAvatarForm = ({
           Upload
         </Button>
       ) : null}
-      </DialogContent>
-    </Dialog>
+    </>
   );
 };