diff --git a/web/packages/accounts/pages/two-factor/setup.tsx b/web/packages/accounts/pages/two-factor/setup.tsx index 9f503f75fe..6a2260f0fa 100644 --- a/web/packages/accounts/pages/two-factor/setup.tsx +++ b/web/packages/accounts/pages/two-factor/setup.tsx @@ -94,7 +94,7 @@ const Instructions: React.FC = ({ twoFactorSecret }) => { const [setupMode, setSetupMode] = useState<"qr" | "manual">("qr"); return ( - + {setupMode == "qr" ? ( = ({ twoFactorSecret }) => { onChangeMode={() => setSetupMode("qr")} /> )} - + ); }; @@ -119,13 +119,13 @@ const SetupManualMode: React.FC = ({ twoFactorSecret, onChangeMode, }) => ( - - + <> + {t("two_factor_manual_entry_message")} {t("scan_qr_title")} - + ); interface SetupQRModeProps { @@ -138,7 +138,7 @@ const SetupQRMode: React.FC = ({ onChangeMode, }) => ( <> - + {t("two_factor_qr_help")} {!twoFactorSecret ? ( @@ -154,19 +154,15 @@ const SetupQRMode: React.FC = ({ ); -const QRCode = styled("img")( - ({ theme }) => ` +const QRCode = styled("img")(` height: 200px; width: 200px; - margin: ${theme.spacing(2)}; -`, -); +`); const LoadingQRCode = styled(VerticallyCentered)( ({ theme }) => ` width: 200px; aspect-ratio:1; border: 1px solid ${theme.vars.palette.stroke.muted}; - margin: ${theme.spacing(2)}; `, );