Merge pull request #2385 from logto-io/simeng-log-4566-web-space-size-of-pages

style(ui): layout styling updates

packages/ui/src/components/BrandingHeader/index.module.scss

@@ -1,6 +1,6 @@
 @use '@/scss/underscore' as _;
 
-$logo-height: 60px;
+$logo-height: 50px;
 
 .container {
   width: 100%;
@@ -36,12 +36,8 @@ $logo-height: 60px;
 }
 
 :global(body.desktop) {
-  .container {
-    min-height: 96px;
-  }
-
   .logo:not(:last-child) {
-    margin-bottom: _.unit(4);
+    margin-bottom: _.unit(3);
   }
 
   .headline {

packages/ui/src/components/Input/index.module.scss

@@ -56,7 +56,8 @@
 }
 
 .errorMessage {
-  margin-top: _.unit(2);
+  margin-left: _.unit(0.5);
+  margin-top: _.unit(1);
 }
 
 :global(body.desktop) {

packages/ui/src/components/Passcode/index.module.scss

@@ -27,7 +27,8 @@
 }
 
 .passcode + .errorMessage {
-  margin-top: _.unit(2);
+  margin-left: _.unit(0.5);
+  margin-top: _.unit(1);
 }
 
 :global(body.desktop) {

packages/ui/src/components/SecondaryPageWrapper/index.module.scss

@@ -9,8 +9,12 @@
   margin-top: _.unit(2);
 }
 
-.description {
+.header {
   margin-bottom: _.unit(6);
+}
+
+.description {
+  margin-top: _.unit(2);
   @include _.text-hint;
 }
 
@@ -21,7 +25,6 @@
 
   .title {
     @include _.title;
-    margin-bottom: _.unit(6);
   }
 }
 
@@ -30,8 +33,11 @@
     margin-top: _.unit(12);
   }
 
-  .title {
-    @include _.title_desktop;
+  .header {
     margin-bottom: _.unit(4);
   }
+
+  .title {
+    @include _.title_desktop;
+  }
 }

packages/ui/src/components/SecondaryPageWrapper/index.tsx

@@ -26,10 +26,13 @@ const SecondaryPageWrapper = ({
     <div className={styles.wrapper}>
       <NavBar />
       <div className={styles.container}>
-        {title && <div className={styles.title}>{t(title, titleProps)}</div>}
-        {description && (
-          <div className={styles.description}>{t(description, descriptionProps)}</div>
-        )}
+        <div className={styles.header}>
+          {title && <div className={styles.title}>{t(title, titleProps)}</div>}
+          {description && (
+            <div className={styles.description}>{t(description, descriptionProps)}</div>
+          )}
+        </div>
+
         {children}
       </div>
     </div>

packages/ui/src/containers/EmailForm/index.module.scss

@@ -9,7 +9,8 @@
 
   .inputField,
   .terms,
-  .switch {
+  .switch,
+  .formErrors {
     margin-bottom: _.unit(4);
   }
 
@@ -19,7 +20,7 @@
   }
 
   .formErrors {
-    margin-top: _.unit(-2);
-    margin-bottom: _.unit(4);
+    margin-left: _.unit(0.5);
+    margin-top: _.unit(-3);
   }
 }

packages/ui/src/containers/EmailPassword/index.module.scss

@@ -9,17 +9,28 @@
 
   .inputField,
   .link,
-  .terms {
+  .terms,
+  .formErrors {
     margin-bottom: _.unit(4);
   }
 
   .link {
+    margin-top: _.unit(-1);
     width: auto;
     align-self: start;
   }
 
   .formErrors {
-    margin-top: _.unit(-2);
-    margin-bottom: _.unit(4);
+    margin-top: _.unit(-3);
+    margin-left: _.unit(0.5);
+  }
+}
+
+
+:global(.desktop) {
+  .form {
+    .link {
+      margin-top: _.unit(-2);
+    }
   }
 }

packages/ui/src/containers/EmailPassword/index.tsx

@@ -89,6 +89,8 @@ const EmailPassword = ({ className, autoFocus }: Props) => {
         {...register('password', (value) => requiredValidation('password', value))}
       />
 
+      {errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
+
       {isForgotPasswordEnabled && (
         <ForgotPasswordLink
           className={styles.link}
@@ -96,8 +98,6 @@ const EmailPassword = ({ className, autoFocus }: Props) => {
         />
       )}
 
-      {errorMessage && <ErrorMessage className={styles.formErrors}>{errorMessage}</ErrorMessage>}
-
       <TermsOfUse className={styles.terms} />
 
       <Button title="action.sign_in" onClick={async () => onSubmitHandler()} />

packages/ui/src/containers/PasswordSignInForm/index.module.scss

@@ -9,7 +9,8 @@
 
   .inputField,
   .link,
-  .switch {
+  .switch,
+  .formErrors {
     margin-bottom: _.unit(4);
   }
 
@@ -19,8 +20,20 @@
     width: auto;
   }
 
+  .link {
+    margin-top: _.unit(-1);
+  }
+
   .formErrors {
-    margin-top: _.unit(-2);
-    margin-bottom: _.unit(4);
+    margin-left: _.unit(0.5);
+    margin-top: _.unit(-3);
+  }
+}
+
+:global(.desktop) {
+  .form {
+    .link {
+      margin-top: _.unit(-2);
+    }
   }
 }

packages/ui/src/containers/PhoneForm/index.module.scss

@@ -9,7 +9,8 @@
 
   .inputField,
   .terms,
-  .switch {
+  .switch,
+  .formErrors {
     margin-bottom: _.unit(4);
   }
 
@@ -19,7 +20,7 @@
   }
 
   .formErrors {
-    margin-top: _.unit(-2);
-    margin-bottom: _.unit(4);
+    margin-left: _.unit(0.5);
+    margin-top: _.unit(-3);
   }
 }

packages/ui/src/containers/PhonePassword/index.module.scss

@@ -9,17 +9,27 @@
 
   .inputField,
   .link,
-  .terms {
+  .terms,
+  .formErrors {
     margin-bottom: _.unit(4);
   }
 
   .link {
+    margin-top: _.unit(-1);
     align-self: start;
     width: auto;
   }
 
   .formErrors {
-    margin-top: _.unit(-2);
-    margin-bottom: _.unit(4);
+    margin-top: _.unit(-3);
+    margin-left: _.unit(0.5);
+  }
+}
+
+:global(.desktop) {
+  .form {
+    .link {
+      margin-top: _.unit(-2);
+    }
   }
 }

packages/ui/src/containers/SetPassword/index.module.scss

@@ -7,12 +7,13 @@
     width: 100%;
   }
 
-  .inputField {
+  .inputField,
+  .formErrors {
     margin-bottom: _.unit(4);
   }
 
   .formErrors {
-    margin-top: _.unit(-2);
-    margin-bottom: _.unit(4);
+    margin-left: _.unit(0.5);
+    margin-top: _.unit(-3);
   }
 }

packages/ui/src/containers/UsernameSignIn/index.module.scss

@@ -9,17 +9,26 @@
 
   .inputField,
   .link,
-  .terms {
+  .terms,
+  .formErrors {
     margin-bottom: _.unit(4);
   }
 
   .link {
+    margin-top: _.unit(-1);
     align-self: start;
     width: auto;
   }
 
   .formErrors {
-    margin-top: _.unit(-2);
-    margin-bottom: _.unit(4);
+    margin-top: _.unit(-3);
+  }
+}
+
+:global(.desktop) {
+  .form {
+    .link {
+      margin-top: _.unit(-2);
+    }
   }
 }

packages/ui/src/pages/Register/index.module.scss

@@ -1,15 +1,13 @@
 @use '@/scss/underscore' as _;
 
-.main {
+.main,
+.divider,
+.otherMethods {
   margin-bottom: _.unit(4);
 }
 
-.otherMethodsLink {
-  margin-bottom: _.unit(6);
-}
-
 .createAccount {
-  margin-top: _.unit(6);
+  margin-top: _.unit(2);
   text-align: center;
 }
 
@@ -19,25 +17,13 @@
 
 
 :global(body.mobile) {
-  .divider {
-    margin-bottom: _.unit(5);
-  }
-
   .createAccount {
     padding-bottom: env(safe-area-inset-bottom);
   }
 }
 
 :global(body.desktop) {
-  .main {
-    margin-bottom: _.unit(6);
-  }
-
   .placeHolder {
     flex: 0;
   }
-
-  .divider {
-    margin-bottom: _.unit(4);
-  }
 }

packages/ui/src/pages/Register/index.tsx

@@ -29,6 +29,7 @@ const Register = () => {
         // Other create account methods
         otherMethods.length > 0 && (
           <OtherMethodsLink
+            className={styles.otherMethods}
             methods={otherMethods}
             template="register_with"
             flow={UserFlow.register}
@@ -40,7 +41,11 @@ const Register = () => {
         signUpMethods.length > 0 && socialConnectors.length > 0 && (
           <>
             <Divider label="description.or" className={styles.divider} />
-            <SocialSignInList isCollapseEnabled socialConnectors={socialConnectors} />
+            <SocialSignInList
+              isCollapseEnabled
+              socialConnectors={socialConnectors}
+              className={styles.main}
+            />
           </>
         )
       }

packages/ui/src/pages/SignIn/index.module.scss

@@ -1,15 +1,14 @@
 @use '@/scss/underscore' as _;
 
-.main {
+.main,
+.otherMethods,
+.divider {
   margin-bottom: _.unit(4);
 }
 
-.otherMethodsLink {
-  margin-bottom: _.unit(6);
-}
 
 .createAccount {
-  margin-top: _.unit(6);
+  margin-top: _.unit(2);
   text-align: center;
 }
 
@@ -19,25 +18,13 @@
 
 
 :global(body.mobile) {
-  .divider {
-    margin-bottom: _.unit(5);
-  }
-
   .createAccount {
     padding-bottom: env(safe-area-inset-bottom);
   }
 }
 
 :global(body.desktop) {
-  .main {
-    margin-bottom: _.unit(6);
-  }
-
   .placeHolder {
     flex: 0;
   }
-
-  .divider {
-    margin-bottom: _.unit(4);
-  }
 }

packages/ui/src/pages/SignIn/index.tsx

@@ -29,6 +29,7 @@ const SignIn = () => {
         // Other sign-in methods
         otherMethods.length > 0 && (
           <OtherMethodsLink
+            className={styles.otherMethods}
             methods={otherMethods}
             template="sign_in_with"
             flow={UserFlow.signIn}
@@ -41,7 +42,11 @@ const SignIn = () => {
         signInMethods.length > 0 && socialConnectors.length > 0 && (
           <>
             <Divider label="description.or" className={styles.divider} />
-            <SocialSignInList isCollapseEnabled socialConnectors={socialConnectors} />
+            <SocialSignInList
+              isCollapseEnabled
+              socialConnectors={socialConnectors}
+              className={styles.main}
+            />
           </>
         )
       }