fix: notifications now are not transparent. Modals for my account now close whe nfinished

app/components/ui/toast.tsx

@@ -60,7 +60,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-background px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
       className
     )}
     {...props}

app/components/ui/toaster.tsx

@@ -6,31 +6,37 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from "~/components/ui/toast"
-import { useToast } from "~/components/ui/use-toast"
+} from "~/components/ui/toast";
+import { useToast } from "~/components/ui/use-toast";
 
 export function Toaster() {
-  const { toasts } = useToast()
+  const { toasts } = useToast();
 
   return (
     <ToastProvider>
-      {toasts.map(({ id, title, description, action, cancelMutation, ...props }) => {
-        const undoButton = cancelMutation ? <ToastAction altText="Undo" onClick={cancelMutation}>Undo</ToastAction> : undefined
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            {undoButton}
-            <ToastClose />
-          </Toast>
-        )
-      })}
+      {toasts.map(
+        ({ id, title, description, action, cancelMutation, ...props }) => {
+          const undoButton = cancelMutation ? (
+            <ToastAction altText="Undo" onClick={cancelMutation}>
+              Undo
+            </ToastAction>
+          ) : undefined;
+          return (
+            <Toast key={id} {...props} variant={"default"}>
+              <div className="grid gap-1">
+                {title && <ToastTitle>{title}</ToastTitle>}
+                {description && (
+                  <ToastDescription>{description}</ToastDescription>
+                )}
+              </div>
+              {action}
+              {undoButton}
+              <ToastClose />
+            </Toast>
+          );
+        },
+      )}
       <ToastViewport />
     </ToastProvider>
-  )
+  );
 }

app/routes/account.tsx

@@ -9,7 +9,7 @@ import {
   useUpdate,
   useUpdatePassword,
 } from "@refinedev/core";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { z } from "zod";
 import { Field } from "~/components/forms";
 import { GeneralLayout } from "~/components/general-layout";
@@ -53,21 +53,28 @@ export default function MyAccount() {
     changeAvatar: false,
   });
 
+  const closeModal = () => {
+    setModal({
+      changeEmail: false,
+      changePassword: false,
+      setupTwoFactor: false,
+      changeAvatar: false,
+    });
+  };
+  const isModalOpen = Object.values(openModal).some(isOpen => isOpen);
+
   return (
-    <Authenticated key="account" v3LegacyAuthProviderCompatible>
+    <Authenticated key="account">
       <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,
-              });
+              closeModal();
             }
-          }}>
+          }}
+          open={isModalOpen}
+          >
           <UsageCard
             label="Usage"
             currentUsage={2}
@@ -213,12 +220,12 @@ export default function MyAccount() {
             </ManagementCard>
           </div>
           <DialogContent>
-            {openModal.changeAvatar && <ChangeAvatarForm />}
+            {openModal.changeAvatar && <ChangeAvatarForm close={closeModal} />}
             {openModal.changeEmail && (
-              <ChangeEmailForm currentValue={identity?.email || ""} />
+              <ChangeEmailForm currentValue={identity?.email || ""} close={closeModal} />
             )}
-            {openModal.changePassword && <ChangePasswordForm />}
-            {openModal.setupTwoFactor && <SetupTwoFactorDialog />}
+            {openModal.changePassword && <ChangePasswordForm close={closeModal} />}
+            {openModal.setupTwoFactor && <SetupTwoFactorDialog close={closeModal} />}
           </DialogContent>
         </Dialog>
       </GeneralLayout>
@@ -243,9 +250,9 @@ const ChangeEmailSchema = z
     return true;
   });
 
-const ChangeEmailForm = ({ currentValue }: { currentValue: string }) => {
+const ChangeEmailForm = ({ currentValue, close }: { currentValue: string, close: () => void }) => {
   const { data: identity } = useGetIdentity<{ id: BaseKey }>();
-  const { mutate: updateEmail } = useUpdate();
+  const { mutate: updateEmail, isSuccess } = useUpdate();
   const [form, fields] = useForm({
     id: "login",
     constraint: getZodConstraint(ChangeEmailSchema),
@@ -269,6 +276,12 @@ const ChangeEmailForm = ({ currentValue }: { currentValue: string }) => {
     },
   });
 
+  useEffect(() => {
+    if (isSuccess) {
+      close();
+    }
+  }, [isSuccess, close]);
+
   return (
     <>
       <DialogHeader>
@@ -320,8 +333,8 @@ const ChangePasswordSchema = z
     return true;
   });
 
-const ChangePasswordForm = () => {
-  const { mutate: updatePassword } =
+const ChangePasswordForm = ({ close }: { close: () => void }) => {
+  const { mutate: updatePassword, isSuccess } =
     useUpdatePassword<UpdatePasswordFormRequest>();
   const [form, fields] = useForm({
     id: "login",
@@ -342,6 +355,12 @@ const ChangePasswordForm = () => {
     },
   });
 
+  useEffect(() => {
+    if (isSuccess) {
+      close();
+    }
+  }, [isSuccess, close]);
+
   return (
     <>
       <DialogHeader>
@@ -375,7 +394,7 @@ const ChangePasswordForm = () => {
   );
 };
 
-const SetupTwoFactorDialog = () => {
+const SetupTwoFactorDialog = ({ close }: { close: () => void }) => {
   const [continueModal, setContinue] = useState<boolean>(false);
 
   return (
@@ -414,7 +433,7 @@ const SetupTwoFactorDialog = () => {
   );
 };
 
-const ChangeAvatarForm = () => {
+const ChangeAvatarForm = ({ close }: { close: () => void }) => {
   const {
     getRootProps,
     getInputProps,
@@ -424,9 +443,6 @@ const ChangeAvatarForm = () => {
     removeFile,
     cancelAll,
   } = useUppy();
-
-  console.log({ state, files: getFiles() });
-
   const isUploading = state === "uploading";
   const isCompleted = state === "completed";
   const hasStarted = state !== "idle" && state !== "initializing";
@@ -439,6 +455,12 @@ const ChangeAvatarForm = () => {
     }
   }, [file]);
 
+  useEffect(() => {
+    if (isCompleted) {
+      close();
+    }
+  }, [isCompleted, close]);
+
   return (
     <>
       <DialogHeader className="mb-6">

app/routes/dashboard.tsx

@@ -11,7 +11,7 @@ import { Authenticated } from "@refinedev/core";
 
 export default function Dashboard() {
   return (
-    <Authenticated key="dashboard" v3LegacyAuthProviderCompatible>
+    <Authenticated key="dashboard">
       <GeneralLayout>
         <h1 className="font-bold mb-4 text-3xl">Dashboard</h1>
         <UpgradeAccountBanner />