feat: update design

lib/ts/components/assets/totpIcon.tsx

@@ -0,0 +1,32 @@
+export const TOTPIcon = () => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="23" viewBox="0 4 22 23" fill="none">
+        <path
+            d="M7.56428 15.8664L5.26639 18.1643C5.11403 18.3167 4.90738 18.4023 4.69192 18.4023C4.47645 18.4023 4.2698 18.3167 4.11744 18.1643C3.96508 18.012 3.87949 17.8053 3.87949 17.5898C3.87949 17.3744 3.96508 17.1677 4.11744 17.0154L6.41533 14.7175C6.56769 14.5651 6.77434 14.4795 6.98981 14.4795C7.20528 14.4795 7.41192 14.5651 7.56428 14.7175C7.71664 14.8698 7.80224 15.0765 7.80224 15.292C7.80224 15.5074 7.71664 15.7141 7.56428 15.8664Z"
+            fill="#73B6FF"
+        />
+        <path
+            d="M5.17026 13.4675L1.72342 16.9143C1.57106 17.0667 1.36442 17.1523 1.14895 17.1523C0.933477 17.1523 0.726833 17.0667 0.574473 16.9143C0.422113 16.762 0.336519 16.5553 0.336519 16.3398C0.336519 16.1244 0.422113 15.9177 0.574473 15.7654L4.02131 12.3185C4.17367 12.1662 4.38032 12.0806 4.59579 12.0806C4.81125 12.0806 5.0179 12.1662 5.17026 12.3185C5.32262 12.4709 5.40821 12.6775 5.40821 12.893C5.40821 13.1085 5.32262 13.3151 5.17026 13.4675Z"
+            fill="#73B6FF"
+        />
+        <path
+            d="M10.0492 18.1315L6.60233 21.5784C6.44997 21.7307 6.24332 21.8163 6.02785 21.8163C5.81238 21.8163 5.60574 21.7307 5.45338 21.5784C5.30102 21.426 5.21542 21.2194 5.21542 21.0039C5.21542 20.7884 5.30102 20.5818 5.45338 20.4294L8.90022 16.9826C9.05258 16.8302 9.25922 16.7446 9.47469 16.7446C9.69016 16.7446 9.89681 16.8302 10.0492 16.9826C10.2015 17.135 10.2871 17.3416 10.2871 17.5571C10.2871 17.7725 10.2015 17.9792 10.0492 18.1315Z"
+            fill="#73B6FF"
+        />
+        <path
+            d="M16.935 4.28797L4.96211 8.24925C4.38349 8.47179 4.29448 9.27295 4.87309 9.49549L8.96789 11.3649L14.8876 7.13653L10.6592 13.0562L12.5286 17.151C12.7956 17.6851 13.5523 17.6406 13.7303 17.0175L17.6916 5.04462C17.8696 4.59953 17.4246 4.15444 16.935 4.28797Z"
+            fill="url(#paint0_linear_3828_8733)"
+        />
+        <defs>
+            <linearGradient
+                id="paint0_linear_3828_8733"
+                x1="16.9576"
+                y1="4.56946"
+                x2="9.50502"
+                y2="12.0221"
+                gradientUnits="userSpaceOnUse">
+                <stop stopColor="#5FABFF" />
+                <stop offset="1" stopColor="#1485FF" />
+            </linearGradient>
+        </defs>
+    </svg>
+);

lib/ts/recipe/totp/components/themes/mfa/blockedScreen.tsx

@@ -12,18 +12,21 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
+import ArrowLeftIcon from "../../../../../components/assets/arrowLeftIcon";
 import { BlockedIcon } from "../../../../../components/assets/blockedIcon";
 import { withOverride } from "../../../../../components/componentOverride/withOverride";
 import { useTranslation } from "../../../../../translation/translationContext";
 import { FormRow } from "../../../../emailpassword/components/library";
 
 import { RetryButton } from "./retryButton";
 
-const TOTPBlockedScreen: React.FC<{ nextRetryAt: number; onRetry: () => void }> = (props) => {
+const TOTPBlockedScreen: React.FC<{ nextRetryAt: number; onRetry: () => void; onSignOutClicked: () => void }> = (
+    props
+) => {
     const t = useTranslation();
 
     return (
-        <div data-supertokens="container">
+        <div data-supertokens="container totp">
             <div data-supertokens="row noFormRow">
                 <BlockedIcon />
                 <div data-supertokens="headerTitle">{t("TOTP_BLOCKED_TITLE")}</div>
@@ -32,6 +35,10 @@ const TOTPBlockedScreen: React.FC<{ nextRetryAt: number; onRetry: () => void }>
                 <FormRow key="form-button">
                     <RetryButton nextRetryAt={props.nextRetryAt} onClick={props.onRetry} />
                 </FormRow>
+                <div data-supertokens="secondaryText secondaryLinkWithLeftArrow" onClick={props.onSignOutClicked}>
+                    <ArrowLeftIcon color="rgb(var(--palette-textPrimary))" />
+                    {t("TOTP_MFA_LOGOUT")}
+                </div>
             </div>
         </div>
     );

lib/ts/recipe/totp/components/themes/mfa/index.tsx

@@ -63,13 +63,17 @@ const SignInUpTheme: React.FC<TOTPMFAProps & { activeScreen: TOTPMFAScreens }> =
     };
 
     return activeScreen === TOTPMFAScreens.Blocked ? (
-        <BlockedScreen nextRetryAt={featureState.nextRetryAt!} onRetry={props.onRetryClicked} />
+        <BlockedScreen
+            nextRetryAt={featureState.nextRetryAt!}
+            onRetry={props.onRetryClicked}
+            onSignOutClicked={props.onSignOutClicked}
+        />
     ) : activeScreen === TOTPMFAScreens.AccessDenied ? (
         <AccessDeniedScreen error={t(featureState.error!)} useShadowDom={false} />
     ) : activeScreen === TOTPMFAScreens.Loading ? (
         <LoadingScreen />
     ) : (
-        <div data-supertokens="container">
+        <div data-supertokens="container totp">
             <div data-supertokens="row">
                 {featureState.loaded && (
                     <React.Fragment>

lib/ts/recipe/totp/components/themes/mfa/loadingScreen.tsx

@@ -17,7 +17,7 @@ import { withOverride } from "../../../../../components/componentOverride/withOv
 
 const TOTPLoadingScreen: React.FC = () => {
     return (
-        <div data-supertokens="container delayedRender">
+        <div data-supertokens="container delayedRender totp">
             <div data-supertokens="row">
                 <div data-supertokens="spinner delayedRender">
                     <SpinnerIcon />