hanko-auth component styled slightly different

Changing the max-width and adding padding around in the container can bring a nicer UI for the user's first impression of the Hanko components
teamhanko · Sep 22, 2023 · a016dfa · a016dfa
1 parent 736f069
commit a016dfa
Show file tree

Hide file tree

Showing 5 changed files with 350 additions and 322 deletions.
diff --git a/frontend/elements/README.md b/frontend/elements/README.md
@@ -112,21 +112,21 @@ You can also pass certain options:
 
 ```javascript
 const defaultOptions = {
-  shadow: true,                    // Set to false if you do not want the web component to be attached to the shadow DOM.
-  injectStyles: true,              // Set to false if you do not want to inject any default styles.
-  enablePasskeys: true,            // Set to false if you do not want to display passkey-related content.
+  shadow: true, // Set to false if you do not want the web component to be attached to the shadow DOM.
+  injectStyles: true, // Set to false if you do not want to inject any default styles.
+  enablePasskeys: true, // Set to false if you do not want to display passkey-related content.
   hidePasskeyButtonOnLogin: false, // Hides the button to sign in with a passkey on the login page.
-  translations: null,              // Additional translations can be added here. English is used when the option is not
-                                   // present or set to `null`, whereas setting an empty object `{}` prevents the elements
-                                   // from displaying any translations.
-  translationsLocation: "/i18n",   // The URL or path where the translation files are located.
-  fallbackLanguage: "en",          // The fallback language to be used if a translation is not available.
-  storageKey: "hanko",             // The name of the cookie the session token is stored in and the prefix / name of local storage keys
+  translations: null, // Additional translations can be added here. English is used when the option is not
+  // present or set to `null`, whereas setting an empty object `{}` prevents the elements
+  // from displaying any translations.
+  translationsLocation: "/i18n", // The URL or path where the translation files are located.
+  fallbackLanguage: "en", // The fallback language to be used if a translation is not available.
+  storageKey: "hanko", // The name of the cookie the session token is stored in and the prefix / name of local storage keys
 };
 
 const { hanko } = await register(
   "https://hanko.yourdomain.com",
-  defaultOptions
+  defaultOptions,
 );
 ```
 
@@ -232,7 +232,7 @@ hanko.onAuthFlowCompleted((authFlowCompletedDetail) => {
   // Login, registration or recovery has been completed successfully. You can now take control and redirect the
   // user to protected pages.
   console.info(
-    `User successfully completed the registration or authorization process (user-id: "${authFlowCompletedDetail.userID}")`
+    `User successfully completed the registration or authorization process (user-id: "${authFlowCompletedDetail.userID}")`,
   );
 });
 ```
@@ -255,7 +255,7 @@ frontend.
 hanko.onSessionCreated((sessionDetail) => {
   // A new JWT has been issued.
   console.info(
-    `Session created or updated (user-id: "${sessionDetail.userID}", jwt: ${sessionDetail.jwt})`
+    `Session created or updated (user-id: "${sessionDetail.userID}", jwt: ${sessionDetail.jwt})`,
   );
 });
 ```
@@ -349,7 +349,7 @@ variables including default values can be found below:
 hanko-auth,
 hanko-profile {
   /* Color Scheme */
-  --color: #171717;
+  --color: #444444;
   --color-shade-1: #8f9095;
   --color-shade-2: #e5e6ef;
 
@@ -363,30 +363,30 @@ hanko-profile {
 
   /* Font Styles */
   --font-weight: 400;
-  --font-size: 14px;
+  --font-size: 16px;
   --font-family: sans-serif;
 
   /* Border Styles */
-  --border-radius: 4px;
+  --border-radius: 8px;
   --border-style: solid;
   --border-width: 1px;
 
   /* Item Styles */
-  --item-height: 34px;
+  --item-height: 42px;
   --item-margin: 0.5rem 0;
 
   /* Container Styles */
-  --container-padding: 0;
-  --container-max-width: 600px;
+  --container-padding: 30px;
+  --container-max-width: 410px;
 
   /* Headline Styles */
   --headline1-font-size: 24px;
   --headline1-font-weight: 600;
-  --headline1-margin: 0 0 0.5rem;
+  --headline1-margin: 0 0 1rem;
 
   --headline2-font-size: 14px;
   --headline2-font-weight: 600;
-  --headline2-margin: 1rem 0 0.25rem;
+  --headline2-margin: 1rem 0 0.5rem;
 
   /* Divider Styles */
   --divider-padding: 0 42px;
@@ -397,7 +397,7 @@ hanko-profile {
   --link-text-decoration-hover: underline;
 
   /* Input Styles */
-  --input-min-width: 12em;
+  --input-min-width: 14em;
 
   /* Button Styles */
   --button-min-width: max-content;