refactor(ui): refactor page layout and base style (#726)

* refactor(ui): refine page layout

refine page layout

* fix(ui): fix content element height issue

fix content elment height issue

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

@@ -5,7 +5,11 @@ $font-family: 'PingFang SC', 'SF Pro Display', 'Siyuan Heiti', 'Roboto';
 $font-family-small: 'PingFang SC', 'SF Pro Text', 'Siyuan Heiti', 'Roboto';
 
 .content {
-  min-height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  min-height: 100%;
   background: var(--color-base);
   color: var(--color-text);
   font: var(--font-body);

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

@@ -2,15 +2,15 @@
 
 .navBar {
   width: 100%;
-  margin-bottom: _.unit(6);
+  min-height: 44px;
   @include _.flex-row;
   justify-content: center;
+  padding: _.unit(3) _.unit(10);
   position: relative;
-  padding: _.unit(3) 0;
 
   svg {
     position: absolute;
-    left: _.unit(-2);
+    left: _.unit(4);
     top: 50%;
     transform: translateY(-50%);
     fill: var(--color-icon);

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

@@ -2,7 +2,7 @@
 
 .passcode {
   @include _.flex-row;
-  @include _.mobile-container-width;
+  @include _.container-width;
   justify-content: space-between;
   margin: 0 auto;
 

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

@@ -1,7 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .form {
-  @include _.mobile-container-width;
+  @include _.container-width;
   @include _.flex-column;
   margin: 0 auto;
 

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

@@ -1,7 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .form {
-  @include _.mobile-container-width;
+  @include _.container-width;
   margin: 0 auto;
   @include _.flex-column;
 

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

@@ -3,7 +3,7 @@
 .form {
   margin: 0 auto;
   @include _.flex-column;
-  @include _.mobile-container-width;
+  @include _.container-width;
 
   > * {
     width: 100%;

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

@@ -4,7 +4,7 @@
 .container {
   margin: 0 auto;
   @include _.flex-column;
-  @include _.mobile-container-width;
+  @include _.container-width;
 
   > * {
     width: 100%;

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

@@ -2,7 +2,7 @@
 
 .socialIconList {
   @include _.flex-row;
-  @include _.mobile-container-width;
+  @include _.container-width;
   justify-content: center;
   margin: 0 auto;
 
@@ -22,7 +22,7 @@
 .socialLinkList {
   margin: 0 auto;
   @include _.flex-column;
-  @include _.mobile-container-width;
+  @include _.container-width;
 
   .socialLinkButton {
     margin-bottom: _.unit(4);

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

@@ -3,7 +3,7 @@
 .form {
   margin: 0 auto;
   @include _.flex-column;
-  @include _.mobile-container-width;
+  @include _.container-width;
 
   > * {
     width: 100%;

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

@@ -2,13 +2,11 @@
 
 
 .wrapper {
-  position: relative;
-  padding: _.unit(8) _.unit(5);
-  @include _.flex-column;
+  @include _.page-wrapper;
 }
 
 .connector {
-  margin: _.unit(20) 0;
+  margin: _.unit(30) 0;
 }
 
 .loadingLabel {
@@ -16,5 +14,5 @@
 }
 
 .button {
-  @include _.mobile-container-width;
+  @include _.container-width;
 }

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

@@ -1,15 +1,14 @@
 @use '@/scss/underscore' as _;
 
 .wrapper {
-  position: relative;
-  padding: _.unit(8) _.unit(5);
-  @include _.flex-column;
+  @include _.page-wrapper;
 
   .header {
-    margin: _.unit(30) 0;
+    margin-top: _.unit(30);
   }
 
   .content {
+    margin-top: _.unit(24);
     @include _.text-hint;
   }
 }

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

@@ -1,9 +1,8 @@
 @use '@/scss/underscore' as _;
 
 .wrapper {
-  position: relative;
-  padding: _.unit(8) _.unit(5);
-  @include _.flex-column;
+  @include _.page-wrapper;
+  padding-top: _.unit(2);
 }
 
 .title {

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

@@ -43,12 +43,14 @@ const Passcode = () => {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <>
       <NavBar />
-      <div className={styles.title}>{t('action.enter_passcode')}</div>
-      <div className={styles.detail}>{t('description.enter_passcode', { address: target })}</div>
-      <PasscodeValidation type={type} method={method} target={target} />
-    </div>
+      <div className={styles.wrapper}>
+        <div className={styles.title}>{t('action.enter_passcode')}</div>
+        <div className={styles.detail}>{t('description.enter_passcode', { address: target })}</div>
+        <PasscodeValidation type={type} method={method} target={target} />
+      </div>
+    </>
   );
 };
 

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

@@ -1,11 +1,11 @@
 @use '@/scss/underscore' as _;
 
 .wrapper {
-  position: relative;
-  padding: _.unit(8) _.unit(5);
-  @include _.flex-column;
+  @include _.page-wrapper;
+  padding-top: _.unit(2);
 }
 
+
 .title {
   width: 100%;
   @include _.title;

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

@@ -34,11 +34,13 @@ const Register = () => {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <>
       <NavBar />
-      <div className={styles.title}>{t('action.create_account')}</div>
-      {registerForm}
-    </div>
+      <div className={styles.wrapper}>
+        <div className={styles.title}>{t('action.create_account')}</div>
+        {registerForm}
+      </div>
+    </>
   );
 };
 

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

@@ -1,9 +1,8 @@
 @use '@/scss/underscore' as _;
 
 .wrapper {
-  position: relative;
-  padding: _.unit(8) _.unit(5);
-  @include _.flex-column;
+  @include _.page-wrapper;
+  padding-top: _.unit(2);
 }
 
 

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

@@ -34,11 +34,13 @@ const SecondarySignIn = () => {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <>
       <NavBar />
-      <div className={styles.title}>{t('action.sign_in')}</div>
-      {signInForm}
-    </div>
+      <div className={styles.wrapper}>
+        <div className={styles.title}>{t('action.sign_in')}</div>
+        {signInForm}
+      </div>
+    </>
   );
 };
 

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

@@ -1,11 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .wrapper {
-  position: relative;
-  padding: _.unit(8) _.unit(5);
-  min-height: 100vh;
-  @include _.flex-column;
-  justify-content: flex-start;
+  @include _.page-wrapper;
 
   .header {
     margin: _.unit(8);
@@ -17,7 +13,7 @@
   }
 
   .divider {
-    @include _.mobile-container-width;
+    @include _.container-width;
   }
 
   .primarySignIn {

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

@@ -1,7 +1,5 @@
 @use '@/scss/underscore' as _;
 
 .wrapper {
-  position: relative;
-  padding: _.unit(8) _.unit(5);
-  @include _.flex-column;
+  @include _.page-wrapper;
 }

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

@@ -20,10 +20,12 @@ const SocialRegister = () => {
   }
 
   return (
-    <div className={styles.wrapper}>
+    <>
       <NavBar title={t('description.bind_account_title')} />
-      <SocialCreateAccount connectorId={connector} />
-    </div>
+      <div className={styles.wrapper}>
+        <SocialCreateAccount connectorId={connector} />
+      </div>
+    </>
   );
 };
 

packages/ui/src/scss/_underscore.scss

@@ -29,7 +29,14 @@
   color: var(--color-text);
 }
 
-@mixin mobile-container-width {
+@mixin page-wrapper {
+  position: relative;
+  padding: unit(6) unit(5);
+  @include flex-column;
+  justify-content: flex-start;
+}
+
+@mixin container-width {
   width: 100%;
   max-width: 360px;
 }