MFA: Fix factors dialog closing when factors re-render. Removed debugging line setting the popup to Infinite

packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-list.tsx

@@ -168,7 +168,6 @@ function ConfirmUnenrollFactorModal(
         error: (error: string) => {
           return error;
         },
-        duration: Infinity
       });
     },
     [props, t, unEnroll],
@@ -245,9 +244,8 @@ function FactorsTable({
 
             <td>
               <Badge
-                variant={'info'}
                 className={'inline-flex capitalize'}
-                color={factor.status === 'verified' ? 'success' : 'normal'}
+                variant={factor.status === 'verified' ? 'success' : 'outline'}
               >
                 {factor.status}
               </Badge>

packages/features/accounts/src/components/personal-account-settings/mfa/multi-factor-auth-setup-dialog.tsx

@@ -23,6 +23,7 @@ import {
   DialogDescription,
   DialogHeader,
   DialogTitle,
+  DialogTrigger,
 } from '@kit/ui/dialog';
 import {
   Form,
@@ -56,12 +57,13 @@ export function MultiFactorAuthSetupDialog(props: { userId: string }) {
   }, [t]);
 
   return (
-    <>
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <Button onClick={() => setIsOpen(true)}>
+      <DialogTrigger asChild>
+        <Button>
           <Trans i18nKey={'account:setupMfaButtonLabel'} />
         </Button>
+      </DialogTrigger>
 
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
       <DialogContent
         onInteractOutside={(e) => e.preventDefault()}
         onEscapeKeyDown={(e) => e.preventDefault()}
@@ -85,7 +87,6 @@ export function MultiFactorAuthSetupDialog(props: { userId: string }) {
         </div>
       </DialogContent>
     </Dialog>
-    </>
   );
 }