fix: styling fixes

supertokens · Apr 30, 2024 · 9388af9 · 9388af9
1 parent 353dae8
commit 9388af9
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 9 deletions.
diff --git a/lib/build/index2.js b/lib/build/index2.js
diff --git a/lib/build/passwordlessprebuiltui.js b/lib/build/passwordlessprebuiltui.js
diff --git a/...recipe/passwordless/components/themes/signInUpEPCombo/continueWithPasswordlessFooter.d.ts b/...recipe/passwordless/components/themes/signInUpEPCombo/continueWithPasswordlessFooter.d.ts
diff --git a/lib/build/thirdpartyprebuiltui.js b/lib/build/thirdpartyprebuiltui.js
diff --git a/lib/ts/recipe/authRecipe/components/theme/authPage/index.tsx b/lib/ts/recipe/authRecipe/components/theme/authPage/index.tsx
@@ -42,7 +42,7 @@ export function AuthPageTheme(props: AuthPageThemeProps): JSX.Element {
         );
     }
     return (
-        <div data-supertokens="container auth-page">
+        <div data-supertokens={`container authPage ${props.factorIds.length > 1 ? "multiFactor" : "singleFactor"}`}>
             <div data-supertokens="row">
                 <AuthPageHeader
                     factorIds={props.factorIds}

diff --git a/lib/ts/recipe/passwordless/components/themes/styles.css b/lib/ts/recipe/passwordless/components/themes/styles.css
@@ -101,3 +101,7 @@
 [data-supertokens~="continueWithPasswordlessButtonWrapper"] {
     margin: 9px 0;
 }
+
+[data-supertokens~="continueWithSupertokensLink"] {
+    margin-top: 9px;
+}
diff --git a/lib/ts/recipe/thirdparty/components/themes/styles.css b/lib/ts/recipe/thirdparty/components/themes/styles.css
@@ -17,6 +17,11 @@
     color: black;
 }
 
+[data-supertokens~="multiFactor"] [data-supertokens~="button"][data-supertokens~="providerButton"] {
+    margin: auto;
+    max-width: 240px;
+}
+
 [data-supertokens~="button"][data-supertokens~="providerButton"]:hover {
     filter: none;
     background-color: #fafafa;
@@ -27,6 +32,10 @@
     margin-left: 66px;
 }
 
+[data-supertokens~="multiFactor"] [data-supertokens~="providerButtonLeft"] {
+    margin-left: 30px;
+}
+
 [data-supertokens~="providerButtonLogo"] {
     height: 30px;
     display: flex;

diff --git a/stories/authPage.stories.tsx b/stories/authPage.stories.tsx
@@ -29,6 +29,10 @@ export type Args = {
 
 const meta: Meta<Args> = {
     title: "Auth page",
+    parameters: {
+        // Sets the delay (in milliseconds). This will make sure
+        chromatic: { delay: 300 },
+    },
     render: (args, { loaded: { path, funcOverrides } }) => {
         const { prebuiltUIs, key } = useMemo(() => {
             const { prebuiltUIs, recipeList, defaultToSignUp } = buildInit(unflattenArgs(args), funcOverrides);
@@ -45,6 +49,27 @@ const meta: Meta<Args> = {
 
         return (
             <ErrorBoundary key={key}>
+                <style>
+                    {`
+                    *, *::before, *::after {
+                        animation-delay: -1s !important;
+                        animation-duration: 0s !important;
+                        animation-iteration-count: 1 !important;
+                        background-attachment: initial !important;
+                        scroll-behavior: auto !important;
+                        transition-duration: 0s !important;
+                        transition: none !important;
+                    }
+
+                    img, video, iframe {
+                        background: blue !important;
+                        filter: brightness(1) contrast(0) !important;
+                    }
+
+                    svg {
+                        shape-rendering: geometricPrecision !important;
+                    }`}
+                </style>
                 <RoutingComponent
                     key={key}
                     path={args.path ?? path ?? "/auth"}

diff --git a/test/end-to-end/mfa.factorscreen.otp.test.js b/test/end-to-end/mfa.factorscreen.otp.test.js
@@ -448,7 +448,7 @@ describe("SuperTokens SignIn w/ MFA", function () {
                         "[data-supertokens~=pwless-mfa][data-supertokens~=footer] [data-supertokens~=secondaryText]:nth-child(1)"
                     );
                     await Promise.all([logoutButton.click(), page.waitForNavigation({ waitUntil: "networkidle0" })]);
-                    await waitForSTElement(page, "[data-supertokens~=auth-page]");
+                    await waitForSTElement(page, "[data-supertokens~=authPage]");
                     assert.strictEqual(await page.url(), `${TEST_CLIENT_BASE_URL}/auth/`);
                 });
 
@@ -466,7 +466,7 @@ describe("SuperTokens SignIn w/ MFA", function () {
                         "[data-supertokens~=pwless-mfa][data-supertokens~=otpFooter] [data-supertokens~=secondaryText]:nth-child(1)"
                     );
                     await Promise.all([logoutButton.click(), page.waitForNavigation({ waitUntil: "networkidle0" })]);
-                    await waitForSTElement(page, "[data-supertokens~=auth-page]");
+                    await waitForSTElement(page, "[data-supertokens~=authPage]");
                     assert.strictEqual(await page.url(), `${TEST_CLIENT_BASE_URL}/auth/`);
 
                     // This part checks that the login attempt info has been cleared

diff --git a/test/end-to-end/mfa.factorscreen.totp.test.js b/test/end-to-end/mfa.factorscreen.totp.test.js
@@ -419,7 +419,7 @@ describe("SuperTokens SignIn w/ MFA", function () {
                     "[data-supertokens~=totp-mfa][data-supertokens~=deviceSetupFooter] [data-supertokens~=secondaryText]:nth-child(1)"
                 );
                 await Promise.all([logoutButton.click(), page.waitForNavigation({ waitUntil: "networkidle0" })]);
-                await waitForSTElement(page, "[data-supertokens~=auth-page]");
+                await waitForSTElement(page, "[data-supertokens~=authPage]");
                 assert.strictEqual(await page.url(), `${TEST_CLIENT_BASE_URL}/auth/`);
             });
 
@@ -438,7 +438,7 @@ describe("SuperTokens SignIn w/ MFA", function () {
                     "[data-supertokens~=totp-mfa][data-supertokens~=codeVerificationFooter] [data-supertokens~=secondaryText]:nth-child(1)"
                 );
                 await Promise.all([logoutButton.click(), page.waitForNavigation({ waitUntil: "networkidle0" })]);
-                await waitForSTElement(page, "[data-supertokens~=auth-page]");
+                await waitForSTElement(page, "[data-supertokens~=authPage]");
                 assert.strictEqual(await page.url(), `${TEST_CLIENT_BASE_URL}/auth/`);
             });
         });