refactor(ui): reorg the ui page layout structure (#3355)

packages/ui/src/App.tsx

@@ -2,9 +2,9 @@ import { SignInMode } from '@logto/schemas';
 import { useEffect, useRef } from 'react';
 import { Route, Routes, BrowserRouter, Navigate } from 'react-router-dom';
 
-import AppBoundary from './containers/AppBoundary';
-import AppContent from './containers/AppContent';
-import LoadingLayerProvider from './containers/LoadingLayerProvider';
+import AppLayout from './Layout/AppLayout';
+import AppBoundary from './Providers/AppBoundary';
+import LoadingLayerProvider from './Providers/LoadingLayerProvider';
 import usePageContext from './hooks/use-page-context';
 import usePreview from './hooks/use-preview';
 import initI18n from './i18n/init';
@@ -74,7 +74,7 @@ const App = () => {
       <Provider value={context}>
         <AppBoundary>
           <Routes>
-            <Route element={<AppContent />}>
+            <Route element={<AppLayout />}>
               <Route
                 path="unknown-session"
                 element={<ErrorPage message="error.invalid_session" />}

packages/ui/src/Layout/AppLayout/index.tsx

@@ -7,7 +7,7 @@ import { parseHtmlTitle } from '@/utils/sign-in-experience';
 
 import * as styles from './index.module.scss';
 
-const AppContent = () => {
+const AppLayout = () => {
   const { isMobile } = usePlatform();
   const location = useLocation();
 
@@ -25,7 +25,7 @@ const AppContent = () => {
     <div className={styles.viewBox}>
       <div className={styles.container}>
         <div className={styles.placeHolder} />
-        <main className={styles.main}>
+        <main id="main-form" className={styles.main}>
           <Outlet />
           {isMobile && <LogtoSignature />}
         </main>
@@ -36,4 +36,4 @@ const AppContent = () => {
   );
 };
 
-export default AppContent;
+export default AppLayout;

packages/ui/src/Layout/LandingPageLayout/index.tsx

@@ -7,7 +7,7 @@ import BrandingHeader from '@/components/BrandingHeader';
 import { PageContext } from '@/hooks/use-page-context';
 import { getBrandingLogoUrl } from '@/utils/logo';
 
-import AppNotification from '../AppNotification';
+import AppNotification from '../../containers/AppNotification';
 import * as styles from './index.module.scss';
 
 type Props = {
@@ -16,7 +16,7 @@ type Props = {
   title?: TFuncKey;
 };
 
-const LandingPageContainer = ({ children, className, title }: Props) => {
+const LandingPageLayout = ({ children, className, title }: Props) => {
   const { experienceSettings, theme, platform } = useContext(PageContext);
 
   if (!experienceSettings) {
@@ -45,4 +45,4 @@ const LandingPageContainer = ({ children, className, title }: Props) => {
   );
 };
 
-export default LandingPageContainer;
+export default LandingPageLayout;

packages/ui/src/Layout/SecondaryPageLayout/index.tsx

@@ -4,7 +4,7 @@ import type { TFuncKey } from 'react-i18next';
 import NavBar from '@/components/NavBar';
 import usePlatform from '@/hooks/use-platform';
 
-import { InlineNotification } from '../Notification';
+import { InlineNotification } from '../../components/Notification';
 import * as styles from './index.module.scss';
 
 type Props = {
@@ -16,7 +16,7 @@ type Props = {
   children: React.ReactNode;
 };
 
-const SecondaryPageWrapper = ({
+const SecondaryPageLayout = ({
   title,
   description,
   titleProps,
@@ -50,4 +50,4 @@ const SecondaryPageWrapper = ({
   );
 };
 
-export default SecondaryPageWrapper;
+export default SecondaryPageLayout;

packages/ui/src/Layout/StaticPageLayout/index.module.scss

@@ -0,0 +1,7 @@
+@use '@/scss/underscore' as _;
+
+
+.wrapper {
+  @include _.full-page;
+  @include _.flex-column;
+}

packages/ui/src/Layout/StaticPageLayout/index.tsx

@@ -0,0 +1,11 @@
+import * as styles from './index.module.scss';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const StaticPageLayout = ({ children }: Props) => {
+  return <div className={styles.wrapper}>{children}</div>;
+};
+
+export default StaticPageLayout;

packages/ui/src/Providers/AppBoundary/index.tsx

@@ -1,13 +1,13 @@
 import { conditionalString } from '@silverhand/essentials';
 import type { ReactNode } from 'react';
-import { useCallback, useContext, useEffect } from 'react';
+import { useContext, useEffect } from 'react';
 
-import Toast from '@/components/Toast';
 import useColorTheme from '@/hooks/use-color-theme';
 import { PageContext } from '@/hooks/use-page-context';
 import useTheme from '@/hooks/use-theme';
 
 import ConfirmModalProvider from '../ConfirmModalProvider';
+import ToastProvider from '../ToastProvider';
 import * as styles from './index.module.scss';
 
 type Props = {
@@ -18,7 +18,7 @@ const AppBoundary = ({ children }: Props) => {
   // Set Primary Color
   useColorTheme();
   const theme = useTheme();
-  const { platform, toast, setToast } = useContext(PageContext);
+  const { platform } = useContext(PageContext);
 
   // Set Theme Mode
   useEffect(() => {
@@ -32,15 +32,9 @@ const AppBoundary = ({ children }: Props) => {
     document.body.classList.add(platform === 'mobile' ? 'mobile' : 'desktop');
   }, [platform]);
 
-  // Prevent internal eventListener rebind
-  const hideToast = useCallback(() => {
-    setToast('');
-  }, [setToast]);
-
   return (
     <ConfirmModalProvider>
-      <Toast message={toast} callback={hideToast} />
-      {children}
+      <ToastProvider>{children}</ToastProvider>
     </ConfirmModalProvider>
   );
 };

packages/ui/src/Providers/ToastProvider/index.tsx

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+import { useCallback, useContext } from 'react';
+
+import Toast from '@/components/Toast';
+import { PageContext } from '@/hooks/use-page-context';
+
+type Props = {
+  children: ReactNode;
+};
+
+const ToastProvider = ({ children }: Props) => {
+  const { toast, setToast } = useContext(PageContext);
+
+  // Prevent internal eventListener rebind
+  const hideToast = useCallback(() => {
+    setToast('');
+  }, [setToast]);
+
+  return (
+    <>
+      {children}
+      <Toast message={toast} callback={hideToast} />
+    </>
+  );
+};
+
+export default ToastProvider;

packages/ui/src/hooks/use-confirm-modal.ts

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 
-import { ConfirmModalContext } from '@/containers/ConfirmModalProvider';
+import { ConfirmModalContext } from '@/Providers/ConfirmModalProvider';
 
-export type { ModalContentRenderProps } from '@/containers/ConfirmModalProvider';
+export type { ModalContentRenderProps } from '@/Providers/ConfirmModalProvider';
 
 export const useConfirmModal = () => useContext(ConfirmModalContext);

packages/ui/src/hooks/use-preview.ts

@@ -2,8 +2,8 @@ import { ConnectorPlatform } from '@logto/schemas';
 import { conditionalString } from '@silverhand/essentials';
 import { useEffect, useState } from 'react';
 
-import * as appStyles from '@/containers/AppBoundary/index.module.scss';
-import * as styles from '@/containers/AppContent/index.module.scss';
+import * as styles from '@/Layout/AppLayout/index.module.scss';
+import * as appStyles from '@/Providers/AppBoundary/index.module.scss';
 import type { Context } from '@/hooks/use-page-context';
 import initI18n from '@/i18n/init';
 import { changeLanguage } from '@/i18n/utils';

packages/ui/src/pages/Callback/index.module.scss

@@ -1,12 +1,6 @@
 @use '@/scss/underscore' as _;
 
 
-.wrapper {
-  @include _.full-page;
-  @include _.flex-column;
-}
-
-
 .connectorContainer {
   flex: 1;
 }

packages/ui/src/pages/Callback/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
+import StaticPageLayout from '@/Layout/StaticPageLayout';
 import SocialLanding from '@/containers/SocialLanding';
 import useSocialCallbackHandler from '@/hooks/use-social-callback-handler';
 
@@ -28,9 +29,9 @@ const Callback = () => {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <StaticPageLayout>
       <SocialLanding isLoading className={styles.connectorContainer} connectorId={connectorId} />
-    </div>
+    </StaticPageLayout>
   );
 };
 

packages/ui/src/pages/Consent/index.module.scss

@@ -1,13 +1,8 @@
 @use '@/scss/underscore' as _;
 
-.wrapper {
-  @include _.full-page;
-  @include _.flex-column;
-
-  img {
-    width: 96px;
-    height: 96px;
-    @include _.image-align-center;
-    margin-bottom: _.unit(4);
-  }
+.img {
+  width: 96px;
+  height: 96px;
+  @include _.image-align-center;
+  margin-bottom: _.unit(4);
 }

packages/ui/src/pages/Consent/index.tsx

@@ -1,6 +1,7 @@
 import { conditional } from '@silverhand/essentials';
 import { useEffect, useContext, useState } from 'react';
 
+import StaticPageLayout from '@/Layout/StaticPageLayout';
 import { consent } from '@/apis/consent';
 import { LoadingIcon } from '@/components/LoadingLayer';
 import useApi from '@/hooks/use-api';
@@ -41,10 +42,10 @@ const Consent = () => {
   }, [asyncConsent, handleError]);
 
   return (
-    <div className={styles.wrapper}>
-      {brandingLogo && <img alt="logo" src={brandingLogo} />}
+    <StaticPageLayout>
+      {brandingLogo && <img alt="logo" className={styles.img} src={brandingLogo} />}
       {loading && <LoadingIcon />}
-    </div>
+    </StaticPageLayout>
   );
 };
 

packages/ui/src/pages/Continue/SetEmailOrPhone/index.tsx

@@ -2,7 +2,7 @@ import type { MissingProfile } from '@logto/schemas';
 import { SignInIdentifier } from '@logto/schemas';
 import type { TFuncKey } from 'react-i18next';
 
-import SecondaryPageWrapper from '@/components/SecondaryPageWrapper';
+import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
 import useSendVerificationCode from '@/hooks/use-send-verification-code';
 import type { VerificationCodeIdentifier } from '@/types';
 import { UserFlow } from '@/types';
@@ -69,7 +69,7 @@ const SetEmailOrPhone = ({ missingProfile, notification }: Props) => {
   };
 
   return (
-    <SecondaryPageWrapper {...pageContent[missingProfile]} notification={notification}>
+    <SecondaryPageLayout {...pageContent[missingProfile]} notification={notification}>
       <IdentifierProfileForm
         autoFocus
         errorMessage={errorMessage}
@@ -78,7 +78,7 @@ const SetEmailOrPhone = ({ missingProfile, notification }: Props) => {
         onSubmit={handleSubmit}
       />
       <SocialIdentityNotification missingProfileTypes={formSettings[missingProfile].enabledTypes} />
-    </SecondaryPageWrapper>
+    </SecondaryPageLayout>
   );
 };
 

packages/ui/src/pages/Continue/SetPassword/index.tsx

@@ -1,4 +1,4 @@
-import SecondaryPageWrapper from '@/components/SecondaryPageWrapper';
+import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
 import SetPasswordForm from '@/containers/SetPassword';
 import { passwordMinLength } from '@/utils/form';
 
@@ -8,13 +8,13 @@ const SetPassword = () => {
   const { setPassword } = useSetPassword();
 
   return (
-    <SecondaryPageWrapper
+    <SecondaryPageLayout
       title="description.set_password"
       description="error.invalid_password"
       descriptionProps={{ min: passwordMinLength }}
     >
       <SetPasswordForm autoFocus onSubmit={setPassword} />
-    </SecondaryPageWrapper>
+    </SecondaryPageLayout>
   );
 };
 

packages/ui/src/pages/Continue/SetUsername/index.tsx

@@ -1,7 +1,7 @@
 import { SignInIdentifier } from '@logto/schemas';
 import type { TFuncKey } from 'react-i18next';
 
-import SecondaryPageWrapper from '@/components/SecondaryPageWrapper';
+import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
 
 import IdentifierProfileForm from '../IdentifierProfileForm';
 import useSetUsername from './use-set-username';
@@ -22,7 +22,7 @@ const SetUsername = (props: Props) => {
   };
 
   return (
-    <SecondaryPageWrapper
+    <SecondaryPageLayout
       title="description.enter_username"
       description="description.enter_username_description"
       {...props}
@@ -35,7 +35,7 @@ const SetUsername = (props: Props) => {
         enabledTypes={[SignInIdentifier.Username]}
         onSubmit={handleSubmit}
       />
-    </SecondaryPageWrapper>
+    </SecondaryPageLayout>
   );
 };
 

packages/ui/src/pages/ErrorPage/index.module.scss

@@ -1,24 +1,19 @@
 @use '@/scss/underscore' as _;
 
-.wrapper {
-  @include _.full-page;
+.container {
+  flex: 1;
   @include _.flex-column;
+  @include _.full-width;
+}
 
-  .container {
-    flex: 1;
-    @include _.flex-column;
-    @include _.full-width;
-  }
+.title {
+  margin-top: _.unit(8);
+  text-align: center;
+}
 
-  .title {
-    margin-top: _.unit(8);
-    text-align: center;
-  }
-
-  .message {
-    @include _.text-hint;
-    text-align: center;
-  }
+.message {
+  @include _.text-hint;
+  text-align: center;
 }
 
 

packages/ui/src/pages/ErrorPage/index.tsx

@@ -3,6 +3,7 @@ import type { TFuncKey } from 'react-i18next';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
+import StaticPageLayout from '@/Layout/StaticPageLayout';
 import EmptyStateDark from '@/assets/icons/empty-state-dark.svg';
 import EmptyState from '@/assets/icons/empty-state.svg';
 import Button from '@/components/Button';
@@ -25,7 +26,7 @@ const ErrorPage = ({ title = 'description.not_found', message, rawMessage }: Pro
   const errorMessage = rawMessage ?? (message && t(message));
 
   return (
-    <div className={styles.wrapper}>
+    <StaticPageLayout>
       <NavBar />
       <div className={styles.container}>
         {theme === 'light' ? <EmptyState /> : <EmptyStateDark />}
@@ -39,7 +40,7 @@ const ErrorPage = ({ title = 'description.not_found', message, rawMessage }: Pro
           navigate(-1);
         }}
       />
-    </div>
+    </StaticPageLayout>
   );
 };
 

packages/ui/src/pages/ForgotPassword/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { validate } from 'superstruct';
 
-import SecondaryPageWrapper from '@/components/SecondaryPageWrapper';
+import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
 import { useForgotPasswordSettings } from '@/hooks/use-sie';
 import { passwordIdentifierStateGuard } from '@/types/guard';
 import { identifierInputDescriptionMap } from '@/utils/form';
@@ -47,7 +47,7 @@ const ForgotPassword = () => {
   const defaultValue = (identifierState?.identifier === defaultType && identifierState.value) || '';
 
   return (
-    <SecondaryPageWrapper
+    <SecondaryPageLayout
       title="description.reset_password"
       description="description.reset_password_description"
       descriptionProps={{
@@ -60,7 +60,7 @@ const ForgotPassword = () => {
         defaultValue={defaultValue}
         enabledTypes={enabledMethods}
       />
-    </SecondaryPageWrapper>
+    </SecondaryPageLayout>
   );
 };
 

packages/ui/src/pages/Register/IdentifierRegisterForm/index.test.tsx

@@ -2,11 +2,11 @@ import { SignInIdentifier } from '@logto/schemas';
 import { assert } from '@silverhand/essentials';
 import { fireEvent, act, waitFor } from '@testing-library/react';
 
+import ConfirmModalProvider from '@/Providers/ConfirmModalProvider';
 import renderWithPageContext from '@/__mocks__/RenderWithPageContext';
 import SettingsProvider from '@/__mocks__/RenderWithPageContext/SettingsProvider';
 import { registerWithUsernamePassword } from '@/apis/interaction';
 import { sendVerificationCodeApi } from '@/apis/utils';
-import ConfirmModalProvider from '@/containers/ConfirmModalProvider';
 import { UserFlow } from '@/types';
 import { getDefaultCountryCallingCode } from '@/utils/country-code';
 

packages/ui/src/pages/Register/index.tsx

@@ -1,9 +1,9 @@
 import { SignInMode } from '@logto/schemas';
 import { useTranslation } from 'react-i18next';
 
+import LandingPageLayout from '@/Layout/LandingPageLayout';
 import Divider from '@/components/Divider';
 import TextLink from '@/components/TextLink';
-import LandingPageContainer from '@/containers/LandingPageContainer';
 import SocialSignInList from '@/containers/SocialSignInList';
 import TermsAndPrivacy from '@/containers/TermsAndPrivacy';
 import { useSieMethods } from '@/hooks/use-sie';
@@ -21,7 +21,7 @@ const Register = () => {
   }
 
   return (
-    <LandingPageContainer title="description.create_your_account">
+    <LandingPageLayout title="description.create_your_account">
       {signUpMethods.length > 0 && (
         <IdentifierRegisterForm signUpMethods={signUpMethods} className={styles.main} />
       )}
@@ -48,7 +48,7 @@ const Register = () => {
           </>
         )
       }
-    </LandingPageContainer>
+    </LandingPageLayout>
   );
 };
 

packages/ui/src/pages/RegisterPassword/index.tsx

@@ -1,6 +1,6 @@
 import { SignInIdentifier } from '@logto/schemas';
 
-import SecondaryPageWrapper from '@/components/SecondaryPageWrapper';
+import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
 import SetPassword from '@/containers/SetPassword';
 import { useSieMethods } from '@/hooks/use-sie';
 import { passwordMinLength } from '@/utils/form';
@@ -17,7 +17,7 @@ const RegisterPassword = () => {
   }
 
   return (
-    <SecondaryPageWrapper
+    <SecondaryPageLayout
       title="description.new_password"
       description="error.invalid_password"
       descriptionProps={{ min: passwordMinLength }}
@@ -28,7 +28,7 @@ const RegisterPassword = () => {
           void setPassword(password);
         }}
       />
-    </SecondaryPageWrapper>
+    </SecondaryPageLayout>
   );
 };
 

packages/ui/src/pages/ResetPassword/index.tsx

@@ -1,4 +1,4 @@
-import SecondaryPageWrapper from '@/components/SecondaryPageWrapper';
+import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
 import SetPassword from '@/containers/SetPassword';
 import { passwordMinLength } from '@/utils/form';
 
@@ -8,7 +8,7 @@ const ResetPassword = () => {
   const { resetPassword, errorMessage, clearErrorMessage } = useResetPassword();
 
   return (
-    <SecondaryPageWrapper
+    <SecondaryPageLayout
       title="description.new_password"
       description="error.invalid_password"
       descriptionProps={{ min: passwordMinLength }}
@@ -19,7 +19,7 @@ const ResetPassword = () => {
         clearErrorMessage={clearErrorMessage}
         onSubmit={resetPassword}
       />
-    </SecondaryPageWrapper>
+    </SecondaryPageLayout>
   );
 };
 

packages/ui/src/pages/SignIn/index.tsx

@@ -1,9 +1,9 @@
 import { SignInMode } from '@logto/schemas';
 import { useTranslation } from 'react-i18next';
 
+import LandingPageLayout from '@/Layout/LandingPageLayout';
 import Divider from '@/components/Divider';
 import TextLink from '@/components/TextLink';
-import LandingPageContainer from '@/containers/LandingPageContainer';
 import SocialSignInList from '@/containers/SocialSignInList';
 import TermsAndPrivacyLinks from '@/containers/TermsAndPrivacyLinks';
 import { useSieMethods } from '@/hooks/use-sie';
@@ -21,7 +21,7 @@ const SignIn = () => {
   }
 
   return (
-    <LandingPageContainer title="description.welcome_to_sign_in">
+    <LandingPageLayout title="description.welcome_to_sign_in">
       <Main signInMethods={signInMethods} socialConnectors={socialConnectors} />
       {
         // Create Account footer
@@ -42,7 +42,7 @@ const SignIn = () => {
         )
       }
       <TermsAndPrivacyLinks className={styles.terms} />
-    </LandingPageContainer>
+    </LandingPageLayout>
   );
 };
 

packages/ui/src/pages/SignInPassword/index.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { validate } from 'superstruct';
 
-import SecondaryPageWrapper from '@/components/SecondaryPageWrapper';
+import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
 import { useSieMethods } from '@/hooks/use-sie';
 import ErrorPage from '@/pages/ErrorPage';
 import { passwordIdentifierStateGuard } from '@/types/guard';
@@ -33,7 +33,7 @@ const SignInPassword = () => {
   }
 
   return (
-    <SecondaryPageWrapper
+    <SecondaryPageLayout
       title="description.enter_password"
       description="description.enter_password_for"
       descriptionProps={{
@@ -50,7 +50,7 @@ const SignInPassword = () => {
         value={value}
         isVerificationCodeEnabled={methodSetting.verificationCode}
       />
-    </SecondaryPageWrapper>
+    </SecondaryPageLayout>
   );
 };
 

packages/ui/src/pages/SocialLanding/index.module.scss

@@ -1,12 +1,5 @@
 @use '@/scss/underscore' as _;
 
-
-.wrapper {
-  @include _.full-page;
-  @include _.flex-column;
-}
-
-
 .connectorContainer {
   flex: 1;
 }

packages/ui/src/pages/SocialLanding/index.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
+import StaticPageLayout from '@/Layout/StaticPageLayout';
 import SocialLandingContainer from '@/containers/SocialLanding';
 import useSocialLandingHandler from '@/hooks/use-social-landing-handler';
 
@@ -27,13 +28,13 @@ const SocialLanding = () => {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <StaticPageLayout>
       <SocialLandingContainer
         className={styles.connectorContainer}
         connectorId={connectorId}
         isLoading={loading}
       />
-    </div>
+    </StaticPageLayout>
   );
 };
 

packages/ui/src/pages/SocialLinkAccount/index.tsx

@@ -3,7 +3,7 @@ import type { TFuncKey } from 'react-i18next';
 import { useParams, useLocation } from 'react-router-dom';
 import { is } from 'superstruct';
 
-import SecondaryPageWrapper from '@/components/SecondaryPageWrapper';
+import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
 import SocialLinkAccountContainer from '@/containers/SocialLinkAccount';
 import { useSieMethods } from '@/hooks/use-sie';
 import ErrorPage from '@/pages/ErrorPage';
@@ -48,9 +48,9 @@ const SocialLinkAccount = () => {
   const { relatedUser } = state;
 
   return (
-    <SecondaryPageWrapper title={getPageTitle(signUpMethods)}>
+    <SecondaryPageLayout title={getPageTitle(signUpMethods)}>
       <SocialLinkAccountContainer connectorId={connectorId} relatedUser={relatedUser} />
-    </SecondaryPageWrapper>
+    </SecondaryPageLayout>
   );
 };
 

packages/ui/src/pages/VerificationCode/index.tsx

@@ -2,7 +2,7 @@ import { t } from 'i18next';
 import { useParams, useLocation } from 'react-router-dom';
 import { validate } from 'superstruct';
 
-import SecondaryPageWrapper from '@/components/SecondaryPageWrapper';
+import SecondaryPageLayout from '@/Layout/SecondaryPageLayout';
 import VerificationCodeContainer from '@/containers/VerificationCode';
 import { useSieMethods } from '@/hooks/use-sie';
 import ErrorPage from '@/pages/ErrorPage';
@@ -40,7 +40,7 @@ const VerificationCode = () => {
   }
 
   return (
-    <SecondaryPageWrapper
+    <SecondaryPageLayout
       title="action.enter_passcode"
       description="description.enter_passcode"
       descriptionProps={{
@@ -54,7 +54,7 @@ const VerificationCode = () => {
         target={value}
         hasPasswordButton={useFlow === UserFlow.signIn && methodSettings?.password}
       />
-    </SecondaryPageWrapper>
+    </SecondaryPageLayout>
   );
 };