From b522876a8fad837b382eff497da94d1e628fba65 Mon Sep 17 00:00:00 2001
From: simeng-li <simeng@silverhand.io>
Date: Thu, 10 Nov 2022 15:29:42 +0800
Subject: [PATCH] style(ui): layout styling updates

layout styling updates
---
 .../BrandingHeader/index.module.scss          |  8 ++-----
 .../ui/src/components/Input/index.module.scss |  3 ++-
 .../src/components/Passcode/index.module.scss |  3 ++-
 .../SecondaryPageWrapper/index.module.scss    | 14 ++++++++----
 .../components/SecondaryPageWrapper/index.tsx | 11 ++++++----
 .../containers/EmailForm/index.module.scss    |  7 +++---
 .../EmailPassword/index.module.scss           | 17 +++++++++++---
 .../ui/src/containers/EmailPassword/index.tsx |  4 ++--
 .../PasswordSignInForm/index.module.scss      | 19 +++++++++++++---
 .../containers/PhoneForm/index.module.scss    |  7 +++---
 .../PhonePassword/index.module.scss           | 16 +++++++++++---
 .../containers/SetPassword/index.module.scss  |  7 +++---
 .../UsernameSignIn/index.module.scss          | 15 ++++++++++---
 .../ui/src/pages/Register/index.module.scss   | 22 ++++---------------
 packages/ui/src/pages/Register/index.tsx      |  7 +++++-
 .../ui/src/pages/SignIn/index.module.scss     | 21 ++++--------------
 packages/ui/src/pages/SignIn/index.tsx        |  7 +++++-
 17 files changed, 112 insertions(+), 76 deletions(-)

diff --git a/packages/ui/src/components/BrandingHeader/index.module.scss b/packages/ui/src/components/BrandingHeader/index.module.scss
index 8ff312b73..f8e2a1a15 100644
--- a/packages/ui/src/components/BrandingHeader/index.module.scss
+++ b/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 {
diff --git a/packages/ui/src/components/Input/index.module.scss b/packages/ui/src/components/Input/index.module.scss
index 7e8d1db7f..d41289a68 100644
--- a/packages/ui/src/components/Input/index.module.scss
+++ b/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) {
diff --git a/packages/ui/src/components/Passcode/index.module.scss b/packages/ui/src/components/Passcode/index.module.scss
index 67a286d43..e182f14fd 100644
--- a/packages/ui/src/components/Passcode/index.module.scss
+++ b/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) {
diff --git a/packages/ui/src/components/SecondaryPageWrapper/index.module.scss b/packages/ui/src/components/SecondaryPageWrapper/index.module.scss
index fcf505167..8fe177618 100644
--- a/packages/ui/src/components/SecondaryPageWrapper/index.module.scss
+++ b/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;
+  }
 }
diff --git a/packages/ui/src/components/SecondaryPageWrapper/index.tsx b/packages/ui/src/components/SecondaryPageWrapper/index.tsx
index 61e1f31b8..44a718bdd 100644
--- a/packages/ui/src/components/SecondaryPageWrapper/index.tsx
+++ b/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>
diff --git a/packages/ui/src/containers/EmailForm/index.module.scss b/packages/ui/src/containers/EmailForm/index.module.scss
index b7d9e3406..4c7c856ee 100644
--- a/packages/ui/src/containers/EmailForm/index.module.scss
+++ b/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);
   }
 }
diff --git a/packages/ui/src/containers/EmailPassword/index.module.scss b/packages/ui/src/containers/EmailPassword/index.module.scss
index a2028eed0..d2a57a262 100644
--- a/packages/ui/src/containers/EmailPassword/index.module.scss
+++ b/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);
+    }
   }
 }
diff --git a/packages/ui/src/containers/EmailPassword/index.tsx b/packages/ui/src/containers/EmailPassword/index.tsx
index 25619ca44..e883f2616 100644
--- a/packages/ui/src/containers/EmailPassword/index.tsx
+++ b/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()} />
diff --git a/packages/ui/src/containers/PasswordSignInForm/index.module.scss b/packages/ui/src/containers/PasswordSignInForm/index.module.scss
index 43be90694..b0eef7aef 100644
--- a/packages/ui/src/containers/PasswordSignInForm/index.module.scss
+++ b/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);
+    }
   }
 }
diff --git a/packages/ui/src/containers/PhoneForm/index.module.scss b/packages/ui/src/containers/PhoneForm/index.module.scss
index c58c38cd6..456e4fe34 100644
--- a/packages/ui/src/containers/PhoneForm/index.module.scss
+++ b/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);
   }
 }
diff --git a/packages/ui/src/containers/PhonePassword/index.module.scss b/packages/ui/src/containers/PhonePassword/index.module.scss
index 302bd1775..258c2988b 100644
--- a/packages/ui/src/containers/PhonePassword/index.module.scss
+++ b/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);
+    }
   }
 }
diff --git a/packages/ui/src/containers/SetPassword/index.module.scss b/packages/ui/src/containers/SetPassword/index.module.scss
index 516780f91..74d3215ec 100644
--- a/packages/ui/src/containers/SetPassword/index.module.scss
+++ b/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);
   }
 }
diff --git a/packages/ui/src/containers/UsernameSignIn/index.module.scss b/packages/ui/src/containers/UsernameSignIn/index.module.scss
index 302bd1775..e44729ab5 100644
--- a/packages/ui/src/containers/UsernameSignIn/index.module.scss
+++ b/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);
+    }
   }
 }
diff --git a/packages/ui/src/pages/Register/index.module.scss b/packages/ui/src/pages/Register/index.module.scss
index 33e8bdab4..0137d57de 100644
--- a/packages/ui/src/pages/Register/index.module.scss
+++ b/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);
-  }
 }
diff --git a/packages/ui/src/pages/Register/index.tsx b/packages/ui/src/pages/Register/index.tsx
index b4db9f3b9..b45f1286a 100644
--- a/packages/ui/src/pages/Register/index.tsx
+++ b/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}
+            />
           </>
         )
       }
diff --git a/packages/ui/src/pages/SignIn/index.module.scss b/packages/ui/src/pages/SignIn/index.module.scss
index 33e8bdab4..2a074b77e 100644
--- a/packages/ui/src/pages/SignIn/index.module.scss
+++ b/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);
-  }
 }
diff --git a/packages/ui/src/pages/SignIn/index.tsx b/packages/ui/src/pages/SignIn/index.tsx
index 30a887ad9..e3e04495c 100644
--- a/packages/ui/src/pages/SignIn/index.tsx
+++ b/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}
+            />
           </>
         )
       }