misc: finalized design of totp registration

frontend/src/components/mfa/TotpRegistration.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import QRCode from "qrcode";
+import { twMerge } from "tailwind-merge";
 
 import { useGetUserTotpRegistration } from "@app/hooks/api";
 import { useVerifyUserTotpRegistration } from "@app/hooks/api/users/mutation";
@@ -9,9 +10,10 @@ import { Button, ContentLoader, Input } from "../v2";
 
 type Props = {
   onComplete?: () => Promise<void>;
+  shouldCenterQr?: boolean;
 };
 
-const TotpRegistration = ({ onComplete }: Props) => {
+const TotpRegistration = ({ onComplete, shouldCenterQr }: Props) => {
   const { data: registration, isLoading } = useGetUserTotpRegistration();
   const { mutateAsync: verifyUserTotp, isLoading: isVerifyLoading } =
     useVerifyUserTotpRegistration();
@@ -48,16 +50,18 @@ const TotpRegistration = ({ onComplete }: Props) => {
   if (isLoading) {
     return <ContentLoader />;
   }
+
   return (
-    <div className="flex max-w-sm flex-col text-bunker-200">
+    <div className="flex max-w-lg flex-col text-bunker-200">
-      <div className="mb-4 text-center">
+      <div className="mb-8">
-        Download a two-step verification app (Duo, Google Authenticator, etc.) and scan the QR code.
+        1. Download a two-step verification app (Duo, Google Authenticator, etc.) and scan the QR
+        code.
       </div>
-      <div className="mb-10 flex items-center justify-center">
+      <div className={twMerge("mb-8 flex items-center", shouldCenterQr && "justify-center")}>
         <img src={qrCodeUrl} alt="registration-qr" />
       </div>
       <form onSubmit={handleTotpVerify}>
-        <div className="mb-4 text-center">Enter the resulting verification code</div>
+        <div className="mb-4">2. Enter the resulting verification code</div>
         <div className="mb-4 flex flex-row gap-2">
           <Input
             onChange={(e) => setTotp(e.target.value)}

frontend/src/views/Login/Mfa.tsx

@@ -118,6 +118,7 @@ export const Mfa = ({ successCallback, closeMfa, hideLogo, email, method }: Prop
         </div>
         <div className="mx-auto w-max pb-4 pt-4 md:mb-16 md:px-8">
           <TotpRegistration
+            shouldCenterQr
             onComplete={async () => {
               setShouldShowTotpRegistration(false);
               await successCallback();

frontend/src/views/Settings/PersonalSettingsPage/SecuritySection/MFASection.tsx

@@ -203,7 +203,7 @@ export const MFASection = () => {
                   For added security, you can configure a mobile authenticator and set it as your
                   selected 2FA method.
                 </div>
-                <div className="mt-6 flex min-w-full justify-center">
+                <div className="ml-6 mt-6 flex min-w-full">
                   <TotpRegistration
                     onComplete={async () => {
                       await queryClient.invalidateQueries(userKeys.totpConfiguration);