Reuse

web/packages/accounts/components/two-factor/VerifyTwoFactor.tsx

@@ -74,6 +74,7 @@ export function VerifyTwoFactor(props: Props) {
                         </Typography>
                         <Box sx={{ my: 2 }}>
                             <OtpInput
+                                containerStyle={{ justifyContent: "center" }}
                                 shouldAutoFocus={shouldAutoFocus}
                                 value={values.otp}
                                 onChange={onChange(
@@ -117,7 +118,7 @@ const IndividualInput = styled("input")(
     padding: 4px;
     width: 40px !important;
     aspect-ratio: 1;
-    margin-inline: 8px;
+    margin-inline: 6px;
     border: 1px solid ${theme.colors.accent.A700};
     border-radius: 1px;
     outline-color: ${theme.colors.accent.A300};

web/packages/accounts/pages/two-factor/verify.tsx

@@ -1,11 +1,5 @@
 import { PAGES } from "@/accounts/constants/pages";
 import { verifyTwoFactor } from "@/accounts/services/user";
-import {
-    FormPaper,
-    FormPaperFooter,
-    FormPaperTitle,
-} from "@/base/components/FormPaper";
-import { VerticallyCentered } from "@ente/shared/components/Container";
 import LinkButton from "@ente/shared/components/LinkButton";
 import { ApiError } from "@ente/shared/error";
 import {
@@ -19,6 +13,11 @@ import { HttpStatusCode } from "axios";
 import { t } from "i18next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import {
+    AccountsPageContents,
+    AccountsPageFooter,
+    AccountsPageTitle,
+} from "../../components/layouts/centered-paper";
 import {
     VerifyTwoFactor,
     type VerifyTwoFactorCallback,
@@ -73,23 +72,18 @@ const Page: React.FC<PageProps> = ({ appContext }) => {
     };
 
     return (
-        <VerticallyCentered>
-            <FormPaper sx={{ maxWidth: "410px" }}>
-                <FormPaperTitle>{t("two_factor")}</FormPaperTitle>
-                <VerifyTwoFactor onSubmit={onSubmit} buttonText={t("verify")} />
-
-                <FormPaperFooter>
-                    <LinkButton
-                        onClick={() => router.push(PAGES.TWO_FACTOR_RECOVER)}
-                    >
-                        {t("lost_2fa_device")}
-                    </LinkButton>
-                    <LinkButton onClick={logout}>
-                        {t("change_email")}
-                    </LinkButton>
-                </FormPaperFooter>
-            </FormPaper>
-        </VerticallyCentered>
+        <AccountsPageContents>
+            <AccountsPageTitle>{t("two_factor")}</AccountsPageTitle>
+            <VerifyTwoFactor onSubmit={onSubmit} buttonText={t("verify")} />
+            <AccountsPageFooter>
+                <LinkButton
+                    onClick={() => router.push(PAGES.TWO_FACTOR_RECOVER)}
+                >
+                    {t("lost_2fa_device")}
+                </LinkButton>
+                <LinkButton onClick={logout}>{t("change_email")}</LinkButton>
+            </AccountsPageFooter>
+        </AccountsPageContents>
     );
 };