feat: update design

supertokens · Nov 15, 2023 · 598be73 · 598be73
1 parent a9b010f
commit 598be73
Show file tree

Hide file tree

Showing 22 changed files with 172 additions and 96 deletions.
diff --git a/lib/build/components/assets/otpEmailIcon.d.ts b/lib/build/components/assets/otpEmailIcon.d.ts
diff --git a/lib/build/components/assets/otpIcon.d.ts b/lib/build/components/assets/otpIcon.d.ts
diff --git a/lib/build/components/assets/otpSMSIcon.d.ts b/lib/build/components/assets/otpSMSIcon.d.ts
diff --git a/lib/build/emailverification-shared2.js b/lib/build/emailverification-shared2.js
diff --git a/lib/build/index2.js b/lib/build/index2.js
diff --git a/lib/build/multifactorauthprebuiltui.js b/lib/build/multifactorauthprebuiltui.js
diff --git a/lib/build/passwordless-shared2.js b/lib/build/passwordless-shared2.js
diff --git a/lib/build/passwordless-shared3.js b/lib/build/passwordless-shared3.js
diff --git a/lib/build/sessionprebuiltui.js b/lib/build/sessionprebuiltui.js
diff --git a/lib/build/thirdparty-shared2.js b/lib/build/thirdparty-shared2.js
diff --git a/lib/build/thirdpartyemailpasswordprebuiltui.js b/lib/build/thirdpartyemailpasswordprebuiltui.js
diff --git a/lib/build/thirdpartypasswordlessprebuiltui.js b/lib/build/thirdpartypasswordlessprebuiltui.js
diff --git a/lib/ts/components/assets/otpEmailIcon.tsx b/lib/ts/components/assets/otpEmailIcon.tsx
@@ -0,0 +1,17 @@
+export const OTPEmailIcon = () => (
+    <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            id="image 414 (Traced)"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M2.01513 0.0546421C1.19571 0.195435 0.393224 0.877322 0.143564 1.64496C0.0564841 1.9127 -0.00197242 1.84636 0.659082 2.22993C0.91105 2.37612 1.64082 2.80042 2.28084 3.17276C2.92086 3.54514 3.96809 4.1544 4.60811 4.52674C5.24813 4.89905 6.37321 5.55428 7.10833 5.98278C7.84346 6.41131 8.46401 6.7689 8.48736 6.77743C8.52111 6.78982 10.4367 5.69077 12.6253 4.40341C12.7865 4.30852 13.8173 3.70613 14.9159 3.06475L16.9133 1.89856L16.903 1.78079C16.8974 1.71603 16.8178 1.51568 16.7262 1.3356C16.3776 0.650318 15.6775 0.156143 14.8905 0.039982C14.4716 -0.0218423 2.38016 -0.00809191 2.01513 0.0546421ZM6.60933e-06 6.62054C0.000739608 10.251 -0.00834948 10.1158 0.27063 10.655C0.659815 11.4073 1.39721 11.8833 2.30408 11.9675C2.77169 12.0109 14.2345 12.0108 14.7024 11.9673C15.3604 11.9062 15.8152 11.7008 16.2911 11.2498C16.5236 11.0295 16.619 10.9066 16.7395 10.6725C17.0173 10.133 17.0065 10.3025 16.996 6.65494L16.9866 3.40211L15.8322 4.07294C15.1972 4.44186 13.9767 5.15156 13.1201 5.65004C11.2459 6.74049 10.2603 7.31342 9.46206 7.77628C8.76656 8.17962 8.59368 8.23389 8.2745 8.14908C8.14446 8.11454 7.64668 7.84559 6.81451 7.36034C4.15032 5.80665 0.097862 3.44588 0.0268711 3.40617C0.0117346 3.39774 -0.00032324 4.84419 6.60933e-06 6.62054Z"
+            fill="url(#paint0_linear_4445_310)"
+        />
+        <defs>
+            <linearGradient id="paint0_linear_4445_310" x1="8.5" y1="0" x2="8.5" y2="12" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#5FACFF" />
+                <stop offset="1" stop-color="#1686FF" />
+            </linearGradient>
+        </defs>
+    </svg>
+);
diff --git a/lib/ts/components/assets/otpIcon.tsx b/lib/ts/components/assets/otpIcon.tsx
diff --git a/lib/ts/components/assets/otpSMSIcon.tsx b/lib/ts/components/assets/otpSMSIcon.tsx
@@ -0,0 +1,17 @@
+export const OTPSMSIcon = () => (
+    <svg width="17" height="15" viewBox="0 0 17 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            id="image 412 (Traced)"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M2.23143 0.0484105C1.11677 0.26606 0.230705 1.14148 0.0548812 2.19882C0.0207171 2.40417 -0.000319148 3.89779 3.66265e-06 6.09367C0.000595481 10.0175 0.00446909 10.0713 0.330507 10.706C0.544477 11.1223 1.03692 11.597 1.49058 11.8243C1.9253 12.042 2.4213 12.1389 3.10571 12.14L3.65718 12.1409L3.65739 13.3581C3.65755 14.4585 3.66729 14.5903 3.75859 14.733C3.88347 14.9281 4.1338 15.0332 4.37209 14.9906C4.50192 14.9674 5.03536 14.5737 6.32332 13.5507L8.09582 12.1427L11.2701 12.1409C14.8062 12.1389 14.8922 12.1322 15.5441 11.8059C15.9514 11.602 16.4058 11.1868 16.6406 10.8041C16.7198 10.6748 16.8331 10.3886 16.8923 10.1681C16.9951 9.78536 17 9.6 17 6.0949C17 3.67866 16.98 2.31864 16.9417 2.11857C16.7993 1.37604 16.1965 0.620747 15.4792 0.286303C15.2652 0.186472 14.9464 0.0801328 14.7708 0.049999C14.3886 -0.0156495 2.5671 -0.0171356 2.23143 0.0484105ZM5.24433 4.97226C5.37743 5.00736 5.55471 5.1197 5.70901 5.26668C6.20818 5.74216 6.20834 6.40218 5.70933 6.86336C5.19445 7.3393 4.53167 7.33945 4.03228 6.86382C3.54451 6.3992 3.53069 5.75907 3.99822 5.28943C4.33561 4.95053 4.75602 4.84352 5.24433 4.97226ZM8.87594 4.96544C9.55686 5.14589 9.9071 5.95945 9.57246 6.58313C9.13161 7.40469 7.91806 7.41591 7.45342 6.60271C7.32215 6.37302 7.3066 6.29861 7.32494 5.98907C7.34211 5.69977 7.37455 5.59794 7.50653 5.41904C7.804 5.01592 8.36509 4.83005 8.87594 4.96544ZM12.7023 5.05815C13.4409 5.4257 13.5612 6.36097 12.94 6.90635C12.6706 7.14291 12.3468 7.24567 12.0095 7.20164C11.0115 7.07132 10.59 5.99614 11.2623 5.29563C11.6485 4.89313 12.1909 4.80365 12.7023 5.05815Z"
+            fill="url(#paint0_linear_4445_316)"
+        />
+        <defs>
+            <linearGradient id="paint0_linear_4445_316" x1="8.5" y1="0" x2="8.5" y2="15" gradientUnits="userSpaceOnUse">
+                <stop stop-color="#5FACFF" />
+                <stop offset="1" stop-color="#1585FF" />
+            </linearGradient>
+        </defs>
+    </svg>
+);
diff --git a/lib/ts/recipe/passwordless/components/themes/mfa/index.tsx b/lib/ts/recipe/passwordless/components/themes/mfa/index.tsx
@@ -71,7 +71,7 @@ const MFATheme: React.FC<MFAProps & { activeScreen: MFAScreens }> = ({
     ) : activeScreen === MFAScreens.AccessDenied ? (
         <AccessDeniedScreen useShadowDom={false} error={t(featureState.error!)} />
     ) : (
-        <div data-supertokens="container">
+        <div data-supertokens="container pwlessMFA">
             <div data-supertokens="row">
                 {
                     <React.Fragment>

diff --git a/lib/ts/recipe/passwordless/components/themes/mfa/mfaFooter.tsx b/lib/ts/recipe/passwordless/components/themes/mfa/mfaFooter.tsx
@@ -28,11 +28,9 @@ export const MFAFooter = withOverride(
         const claim = useClaimValue(MultiFactorAuthClaim);
 
         return (
-            <div data-supertokens="footerLinkGroup pwlessMFAFooter">
+            <div data-supertokens="footerLinkGroupVert pwlessMFAFooter">
                 {claim.loading === false && (claim.value?.n.length ?? 0) > 1 && (
-                    <div
-                        data-supertokens="secondaryText secondaryLinkWithLeftArrow"
-                        onClick={props.onFactorChooserButtonClicked}>
+                    <div data-supertokens="secondaryText" onClick={props.onFactorChooserButtonClicked}>
                         {t("PWLESS_MFA_FOOTER_CHOOSER_ANOTHER")}
                     </div>
                 )}

diff --git a/lib/ts/recipe/passwordless/components/themes/mfa/mfaOTPFooter.tsx b/lib/ts/recipe/passwordless/components/themes/mfa/mfaOTPFooter.tsx
@@ -35,26 +35,23 @@ export const MFAOTPFooter = withOverride(
         const userContext = useUserContext();
 
         return (
-            <div data-supertokens="footerLinkGroup pwlessMFAOTPFooter">
+            <div data-supertokens="footerLinkGroupVert pwlessMFAOTPFooter">
                 {isSetupAllowed ? (
                     <div
-                        data-supertokens="secondaryText secondaryLinkWithLeftArrow"
+                        data-supertokens="secondaryText"
                         onClick={() =>
                             recipeImplementation.clearLoginAttemptInfo({
                                 userContext,
                             })
                         }>
-                        <ArrowLeftIcon color="rgb(var(--palette-textPrimary))" />
                         {loginAttemptInfo.contactMethod === "EMAIL"
                             ? t("PWLESS_SIGN_IN_UP_CHANGE_CONTACT_INFO_EMAIL")
                             : t("PWLESS_SIGN_IN_UP_CHANGE_CONTACT_INFO_PHONE")}
                     </div>
                 ) : (
                     claim.loading === false &&
                     (claim.value?.n.length ?? 0) > 1 && (
-                        <div
-                            data-supertokens="secondaryText secondaryLinkWithLeftArrow"
-                            onClick={onFactorChooserButtonClicked}>
+                        <div data-supertokens="secondaryText" onClick={onFactorChooserButtonClicked}>
                             {t("PWLESS_MFA_FOOTER_CHOOSER_ANOTHER")}
                         </div>
                     )

diff --git a/lib/ts/recipe/passwordless/recipe.tsx b/lib/ts/recipe/passwordless/recipe.tsx
@@ -20,7 +20,8 @@
 import PasswordlessWebJS from "supertokens-web-js/recipe/passwordless";
 import { PostSuperTokensInitCallbacks } from "supertokens-web-js/utils/postSuperTokensInitCallbacks";
 
-import { OTPIcon } from "../../components/assets/otpIcon";
+import { OTPEmailIcon } from "../../components/assets/otpEmailIcon";
+import { OTPSMSIcon } from "../../components/assets/otpSMSIcon";
 import { SSR_ERROR } from "../../constants";
 import { isTest } from "../../utils";
 import AuthRecipe from "../authRecipe";
@@ -45,14 +46,14 @@ export const otpPhoneFactor = {
     name: "SMS based OTP",
     description: "Get an OTP code on your phone to complete the authentication request",
     path: "/mfa/otp-phone",
-    logo: OTPIcon,
+    logo: OTPSMSIcon,
 };
 export const otpEmailFactor = {
     id: "otp-email",
     name: "Email based OTP",
     description: "Get an OTP code on your email address to complete the authentication request",
     path: "/mfa/otp-email",
-    logo: OTPIcon,
+    logo: OTPEmailIcon,
 };
 
 export const passwordlessFactors = ["otp-phone", "otp-email", "link-phone", "link-email"] as const;