Merge branch 'feat/mfa/recipe-setup' into feat/mfa/otp

supertokens · Nov 15, 2023 · a9b010f · a9b010f
2 parents 907930e + ea768d1
commit a9b010f
Show file tree

Hide file tree

Showing 22 changed files with 74 additions and 55 deletions.
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-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/recipe/multifactorauth/components/themes/factorChooser/index.tsx b/lib/ts/recipe/multifactorauth/components/themes/factorChooser/index.tsx
@@ -37,7 +37,7 @@ export function FactorChooserTheme(props: FactorChooserThemeProps): JSX.Element
         );
     }
     return (
-        <div data-supertokens="container">
+        <div data-supertokens="container mfa">
             <FactorChooserHeader
                 onBackButtonClicked={props.onBackButtonClicked}
                 showBackButton={props.showBackButton}

diff --git a/lib/ts/recipe/multifactorauth/components/themes/styles.css b/lib/ts/recipe/multifactorauth/components/themes/styles.css
@@ -1,24 +1,30 @@
 @import "../../../../styles/styles.css";
 
-[data-supertokens~="container"] {
-    padding-top: 24px;
+[data-supertokens~="mfa"][data-supertokens~="container"] {
+    padding-top: 34px;
 }
 
-[data-supertokens~="row"] {
-    padding-top: 16px;
-    padding-bottom: 8px;
+[data-supertokens~="mfa"] [data-supertokens~="row"] {
+    padding-top: 6px;
+    padding-bottom: 6px;
 }
 
-[data-supertokens~="factorChooserList"] {
-    padding-top: 4px;
+[data-supertokens~="mfa"] [data-supertokens~="headerTitle"] {
+    font-size: var(--font-size-3);
+    font-weight: 600;
+    line-height: 30px;
+}
+
+[data-supertokens~="mfa"] [data-supertokens~="factorChooserList"] {
+    margin-bottom: 12px;
 }
 
 [data-supertokens~="factorChooserOption"] {
     display: flex;
     flex-direction: row;
     border-radius: 6px;
     border: 1px solid rgb(var(--palette-inputBorder));
-    padding: 16px;
+    padding: 20px 16px;
     cursor: pointer;
     margin-top: 12px;
 }
@@ -45,6 +51,7 @@
 [data-supertokens~="factorName"] {
     color: rgb(var(--palette-textPrimary));
     font-size: var(--font-size-1);
+    font-weight: 500;
     margin: 4px;
 }
 
@@ -53,12 +60,12 @@
 }
 
 [data-supertokens~="factorDescription"] {
-    color: rgb(var(--palette-textSecondary));
+    color: rgb(var(--palette-textGray));
     font-size: var(--font-size-0);
     margin: 4px;
 }
 
-[data-supertokens~="secondaryLinkWithLeftArrow"] {
-    margin-bottom: 32px;
+[data-supertokens~="mfa"] [data-supertokens~="secondaryLinkWithLeftArrow"] {
+    margin-bottom: 26px;
     text-align: right;
 }
diff --git a/lib/ts/recipe/multifactorauth/components/themes/themeBase.tsx b/lib/ts/recipe/multifactorauth/components/themes/themeBase.tsx
@@ -28,7 +28,7 @@ export const ThemeBase: React.FC<
             {children}
             {loadDefaultFont && (
                 <link
-                    href="//fonts.googleapis.com/css?family=Rubik:wght@300;400;600;500;700"
+                    href="//fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700"
                     rel="stylesheet"
                     type="text/css"></link>
             )}

diff --git a/lib/ts/recipe/multifactorauth/components/themes/translations.ts b/lib/ts/recipe/multifactorauth/components/themes/translations.ts
@@ -3,8 +3,8 @@ import { defaultTranslationsCommon } from "../../../../translation/translations"
 export const defaultTranslationsMultiFactorAuth = {
     en: {
         ...defaultTranslationsCommon.en,
-        MULTI_FACTOR_CHOOSER_HEADER_TITLE: "Please select a second factor",
-        MULTI_FACTOR_AUTH_LOGOUT: "Logout",
+        MULTI_FACTOR_CHOOSER_HEADER_TITLE: "Please select another factor",
+        MULTI_FACTOR_AUTH_LOGOUT: "Log out",
 
         MFA_NO_AVAILABLE_OPTIONS: "You have no available secondary factors.",
         MFA_NO_AVAILABLE_OPTIONS_LOGIN:

diff --git a/lib/ts/recipe/multitenancy/components/themes/themeBase.tsx b/lib/ts/recipe/multitenancy/components/themes/themeBase.tsx
@@ -28,7 +28,7 @@ export const ThemeBase: React.FC<
             {children}
             {loadDefaultFont && (
                 <link
-                    href="//fonts.googleapis.com/css?family=Rubik:wght@300;400;600;500;700"
+                    href="//fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700"
                     rel="stylesheet"
                     type="text/css"></link>
             )}

diff --git a/lib/ts/recipe/passwordless/components/themes/themeBase.tsx b/lib/ts/recipe/passwordless/components/themes/themeBase.tsx
@@ -28,7 +28,7 @@ export const ThemeBase: React.FC<
             {children}
             {loadDefaultFont && (
                 <link
-                    href="//fonts.googleapis.com/css?family=Rubik:wght@300;400;600;500;700"
+                    href="//fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700"
                     rel="stylesheet"
                     type="text/css"></link>
             )}

diff --git a/lib/ts/recipe/session/components/themes/accessDeniedScreenTheme/index.tsx b/lib/ts/recipe/session/components/themes/accessDeniedScreenTheme/index.tsx
@@ -41,16 +41,16 @@ const AccessDeniedScreen: FC<AccessDeniedThemeProps> = (props) => {
     };
 
     return (
-        <div data-supertokens="center">
+        <div data-supertokens="center accessDenied">
             <div data-supertokens="container">
                 <div data-supertokens="row">
                     <ErrorRoundIcon />
                     <div data-supertokens="headerTitle">{t("ACCESS_DENIED")}</div>
                     <div data-supertokens="divider"></div>
                     {props.error && <div data-supertokens="primaryText accessDeniedError"> {props.error}</div>}
                     <div data-supertokens="buttonsGroup">
-                        <LogoutButton onClick={onLogout} />
                         <BackButton onClick={onBackButtonClicked} />
+                        <LogoutButton onClick={onLogout} />
                     </div>
                 </div>
             </div>

diff --git a/lib/ts/recipe/session/components/themes/styles.css b/lib/ts/recipe/session/components/themes/styles.css
@@ -16,18 +16,17 @@
 @import "../../../../styles/styles.css";
 
 /* Override */
-[data-supertokens~="row"] {
-    padding-top: 32px;
-    padding-bottom: 32px;
+[data-supertokens~="accessDenied"] [data-supertokens~="row"] {
+    padding-bottom: 24px;
 }
 
-[data-supertokens~="divider"] {
+[data-supertokens~="accessDenied"] [data-supertokens~="divider"] {
     padding: 0;
-    margin: 24px 0;
+    margin: 34px 0 18px 0;
 }
 
-[data-supertokens~="headerTitle"] {
-    padding-top: 24px;
+[data-supertokens~="accessDenied"] [data-supertokens~="headerTitle"] {
+    margin: 10px 0 0 0;
     font-style: normal;
     font-weight: 700;
     font-size: 20px;
@@ -45,13 +44,14 @@
 }
 
 [data-supertokens~="buttonsGroup"] {
-    margin-top: 24px;
+    margin-top: 34px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }
 
 [data-supertokens~="buttonBase"] {
+    font-family: "Rubik", sans-serif;
     font-size: var(--font-size-1);
     line-height: 21px;
     font-weight: 500;
@@ -71,3 +71,7 @@
     gap: 6px;
     color: rgb(var(--palette-textGray));
 }
+
+[data-supertokens~="primaryText"][data-supertokens~="accessDeniedError"] {
+    font-weight: 400;
+}
diff --git a/lib/ts/recipe/session/components/themes/themeBase.tsx b/lib/ts/recipe/session/components/themes/themeBase.tsx
@@ -28,7 +28,7 @@ export const ThemeBase: React.FC<
             {children}
             {loadDefaultFont && (
                 <link
-                    href="//fonts.googleapis.com/css?family=Rubik:wght@300;400;600;500;700"
+                    href="//fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700"
                     rel="stylesheet"
                     type="text/css"></link>
             )}

diff --git a/lib/ts/recipe/thirdparty/components/themes/themeBase.tsx b/lib/ts/recipe/thirdparty/components/themes/themeBase.tsx
@@ -28,7 +28,7 @@ export const ThemeBase: React.FC<
             {children}
             {loadDefaultFont && (
                 <link
-                    href="//fonts.googleapis.com/css?family=Rubik:wght@300;400;600;500;700"
+                    href="//fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700"
                     rel="stylesheet"
                     type="text/css"></link>
             )}

diff --git a/lib/ts/recipe/thirdpartyemailpassword/components/themes/themeBase.tsx b/lib/ts/recipe/thirdpartyemailpassword/components/themes/themeBase.tsx
@@ -28,7 +28,7 @@ export const ThemeBase: React.FC<
             {children}
             {loadDefaultFont && (
                 <link
-                    href="//fonts.googleapis.com/css?family=Rubik:wght@300;400;600;500;700"
+                    href="//fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700"
                     rel="stylesheet"
                     type="text/css"></link>
             )}

diff --git a/lib/ts/recipe/thirdpartypasswordless/components/themes/themeBase.tsx b/lib/ts/recipe/thirdpartypasswordless/components/themes/themeBase.tsx
@@ -28,7 +28,7 @@ export const ThemeBase: React.FC<
             {children}
             {loadDefaultFont && (
                 <link
-                    href="//fonts.googleapis.com/css?family=Rubik:wght@300;400;600;500;700"
+                    href="//fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700"
                     rel="stylesheet"
                     type="text/css"></link>
             )}

diff --git a/lib/ts/styles/styles.css b/lib/ts/styles/styles.css
@@ -86,7 +86,7 @@
     width: fit-content;
     border-radius: 6px 6px 0 0;
     padding: 4px 9px;
-    font-weight: 300;
+    font-weight: 400;
     font-size: var(--font-size-0);
     letter-spacing: 0.4px;
 }
@@ -110,15 +110,20 @@
     font-size: var(--font-size-4);
     line-height: 40px;
     letter-spacing: 0.58px;
-    font-weight: 800;
+    font-weight: 600;
     margin-bottom: 2px;
     color: rgb(var(--palette-textTitle));
 }
 
 [data-supertokens~="headerSubtitle"] {
+    font-weight: 400;
     margin-bottom: 21px;
 }
 
+[data-supertokens~="headerSubtitle"][data-supertokens~="secondaryText"] {
+    font-weight: 400;
+}
+
 [data-supertokens~="privacyPolicyAndTermsAndConditions"] {
     max-width: 300px;
     margin-top: 10px;
@@ -205,11 +210,13 @@
 }
 
 [data-supertokens~="linkButton"] {
+    font-family: "Rubik", sans-serif;
     background-color: transparent;
     border: 0;
 }
 
 [data-supertokens~="secondaryLinkWithLeftArrow"] {
+    font-weight: 500;
     margin-top: 10px;
     margin-bottom: 40px;
     cursor: pointer;
@@ -223,6 +230,7 @@
 }
 
 [data-supertokens~="button"] {
+    font-family: "Rubik", sans-serif;
     background-color: rgb(var(--palette-primary));
     color: rgb(var(--palette-buttonText));
     width: 100%;

diff --git a/package-lock.json b/package-lock.json