style(ui): refactor page level styling for both mobile & desktop (#795)

* style(ui): refactor page level stylign for both mobile & desktop

 refactor page level stylign for both mobile & desktop

* fix(ui): center align create account

cernter align create account

* fix(ui): ci fix

ci fix

* fix(ui): cr fix

cr fix

* feat(ui): content  update

content update

packages/phrases/src/locales/en.ts

@@ -41,6 +41,7 @@ const translation = {
       cancel: 'Cancel',
       bind: 'Binding with {{address}}',
       back: 'Go Back',
+      nav_back: 'Back',
     },
     description: {
       not_found: '404 Not Found',

packages/phrases/src/locales/zh-cn.ts

@@ -43,6 +43,7 @@ const translation = {
       confirm: '确认',
       bind: '绑定到 {{address}}',
       back: '返回',
+      nav_back: '返回',
     },
     description: {
       not_found: '404 页面不存在',

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

@@ -5,7 +5,6 @@
   @include _.flex-row;
   font: var(--font-body);
   color: var(--color-caption);
-  margin: _.unit(5) 0;
 
   .line {
     flex: 1;

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

@@ -8,12 +8,20 @@
   padding: _.unit(3) _.unit(10);
   position: relative;
 
-  svg {
+  .backButton {
     position: absolute;
     left: _.unit(-2);
     top: 50%;
     transform: translateY(-50%);
-    fill: var(--color-text);
+    color: --color-text;
+    font: var(--font-caption);
+    @include _.flex-row;
+    cursor: pointer;
+  }
+
+  svg {
+    fill: currentColor;
+    margin-right: _.unit(2);
   }
 
   .title {

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import { isMobile } from 'react-device-detect';
+import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
 import { NavArrowIcon } from '@/components/Icons';
@@ -11,14 +13,20 @@ type Props = {
 
 const NavBar = ({ title }: Props) => {
   const navigate = useNavigate();
+  const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
 
   return (
     <div className={styles.navBar}>
-      <NavArrowIcon
+      <div
+        className={styles.backButton}
         onClick={() => {
           navigate(-1);
         }}
-      />
+      >
+        <NavArrowIcon />
+        {!isMobile && <span>{t('action.nav_back')}</span>}
+      </div>
+
       {title && <div className={styles.title}>{title}</div>}
     </div>
   );

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

@@ -3,7 +3,6 @@
 .passcode {
   @include _.flex-row;
   justify-content: space-between;
-  margin: 0 auto;
 
   input {
     border-radius: _.unit(2);

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

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

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

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

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

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

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

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

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

@@ -2,9 +2,7 @@
 
 .socialIconList {
   @include _.flex-row;
-  @include _.container-width;
   justify-content: center;
-  margin: 0 auto;
 
   .socialButton {
     margin-right: _.unit(8);
@@ -20,9 +18,7 @@
 }
 
 .socialLinkList {
-  margin: 0 auto;
   @include _.flex-column;
-  @include _.container-width;
 
   .socialLinkButton {
     margin-bottom: _.unit(4);

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

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

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

@@ -4,22 +4,36 @@
 .wrapper {
   @include _.full-page;
   @include _.flex-column;
-  justify-content: flex-start;
 }
 
-.connector {
-  margin: _.unit(30) 0;
+.connector > img {
+  width: 96px;
+  height: 96px;
+  @include _.image-align-center;
 }
 
 .loadingLabel {
   margin-bottom: _.unit(6);
 }
 
-.placeHolder {
+.container {
   flex: 1;
+  @include _.flex-column;
 }
 
 .button {
-  @include _.container-width;
+  @include _.full-width;
   margin-bottom: _.unit(4);
 }
+
+:global(body.mobile) {
+  .connector {
+    margin-bottom: _.unit(6);
+  }
+}
+
+:global(body.desktop) {
+  .connector {
+    margin-bottom: _.unit(1);
+  }
+}

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

@@ -41,9 +41,10 @@ const Callback = () => {
 
   return (
     <div className={styles.wrapper}>
-      {connectorLabel}
-      <div className={styles.loadingLabel}>loading...</div>
-      <div className={styles.placeHolder} />
+      <div className={styles.container}>
+        {connectorLabel}
+        <div className={styles.loadingLabel}>loading...</div>
+      </div>
       <Button className={styles.button} onClick={socialCallbackHandler}>
         {t('action.continue')}
       </Button>

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

@@ -3,14 +3,15 @@
 .wrapper {
   @include _.full-page;
   @include _.flex-column;
-  justify-content: flex-start;
 
-  .header {
-    margin-top: _.unit(30);
+  img {
+    width: 96px;
+    height: 96px;
+    @include _.image-align-center;
   }
 
   .content {
-    margin-top: _.unit(24);
+    margin-top: _.unit(2);
     @include _.text-hint;
   }
 }

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

@@ -2,7 +2,6 @@ import React, { useEffect, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { consent } from '@/apis/consent';
-import BrandingHeader from '@/components/BrandingHeader';
 import useApi from '@/hooks/use-api';
 import { PageContext } from '@/hooks/use-page-context';
 
@@ -10,7 +9,7 @@ import * as styles from './index.module.scss';
 
 const Consent = () => {
   const { experienceSettings } = useContext(PageContext);
-  const { logoUrl = '' } = experienceSettings?.branding ?? {};
+  const logoUrl = experienceSettings?.branding.logoUrl;
   const { result, run: asyncConsent } = useApi(consent);
 
   const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
@@ -27,7 +26,7 @@ const Consent = () => {
 
   return (
     <div className={styles.wrapper}>
-      <BrandingHeader className={styles.header} logo={logoUrl} />
+      <img src={logoUrl} />
       <div className={styles.content}>{t('description.loading')}</div>
     </div>
   );

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

@@ -3,32 +3,40 @@
 .wrapper {
   @include _.full-page;
   @include _.flex-column;
-  align-items: stretch;
 
   .container {
     flex: 1;
     @include _.flex-column;
-    justify-content: flex-start;
-  }
-
-  .icon {
-    margin-top: _.unit(22);
-  }
-
-  .title {
-    @include _.title;
-    margin-bottom: _.unit(4);
+    @include _.full-width;
   }
 
   .message {
     @include _.text-hint;
   }
+}
 
-  .placeHolder {
-    flex: 1;
+
+:global(body.mobile) {
+  .title {
+    @include _.title;
+    margin-bottom: _.unit(4);
   }
 
-  .backBtn {
-    margin-bottom: _.unit(10);
+  .backButton {
+    @include _.full-width;
+    margin-bottom: _.unit(4);
+  }
+}
+
+:global(body.desktop) {
+  .title {
+    @include _.title;
+    font: var(--font-title-medium);
+    margin-bottom: _.unit(2);
+  }
+
+  .backButton {
+    @include _.full-width;
+    margin-bottom: _.unit(12);
   }
 }

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

@@ -21,19 +21,18 @@ const ErrorPage = ({ title = 'description.not_found', message }: Props) => {
     <div className={styles.wrapper}>
       <NavBar />
       <div className={styles.container}>
-        <ErrorIcon className={styles.icon} />
+        <ErrorIcon />
         <div className={styles.title}>{t(title)}</div>
         {message && <div className={styles.message}>{message}</div>}
-        <div className={styles.placeHolder} />
-        <Button
-          className={styles.backBtn}
-          onClick={() => {
-            navigate(-1);
-          }}
-        >
-          {t('action.back')}
-        </Button>
       </div>
+      <Button
+        className={styles.backButton}
+        onClick={() => {
+          navigate(-1);
+        }}
+      >
+        {t('action.back')}
+      </Button>
     </div>
   );
 };

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

@@ -5,18 +5,40 @@
 }
 
 .container {
+  @include _.full-width;
   margin-top: _.unit(2);
 }
 
 .title {
-  width: 100%;
   @include _.title;
   margin-bottom: _.unit(1);
 }
 
 .detail {
-  width: 100%;
   margin-bottom: _.unit(6);
-  font: var(--font-body);
   color: var(--color-caption);
 }
+
+:global(body.mobile) {
+  .container {
+    margin-top: _.unit(2);
+  }
+
+  .detail {
+    font: var(--font-body);
+  }
+}
+
+:global(body.desktop) {
+  .container {
+    margin-top: _.unit(12);
+  }
+
+  .title {
+    font: var(--font-title-medium);
+  }
+
+  .detail {
+    font: var(--font-caption);
+  }
+}

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

@@ -5,12 +5,32 @@
 }
 
 .container {
+  @include _.full-width;
   margin-top: _.unit(2);
 }
 
 
 .title {
-  width: 100%;
   @include _.title;
-  margin-bottom: _.unit(6);
+}
+
+:global(body.mobile) {
+  .container {
+    margin-top: _.unit(2);
+  }
+
+  .title {
+    margin-bottom: _.unit(6);
+  }
+}
+
+:global(body.desktop) {
+  .container {
+    margin-top: _.unit(12);
+  }
+
+  .title {
+    font: var(--font-title-medium);
+    margin-bottom: _.unit(4);
+  }
 }

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

@@ -5,12 +5,32 @@
 }
 
 .container {
+  @include _.full-width;
   margin-top: _.unit(2);
 }
 
 
 .title {
-  width: 100%;
   @include _.title;
-  margin-bottom: _.unit(6);
+}
+
+:global(body.mobile) {
+  .container {
+    margin-top: _.unit(2);
+  }
+
+  .title {
+    margin-bottom: _.unit(6);
+  }
+}
+
+:global(body.desktop) {
+  .container {
+    margin-top: _.unit(12);
+  }
+
+  .title {
+    font: var(--font-title-medium);
+    margin-bottom: _.unit(4);
+  }
 }

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

@@ -2,39 +2,57 @@
 
 .wrapper {
   @include _.full-page;
-  @include _.flex-column;
-  justify-content: flex-start;
-
-  .header {
-    margin: _.unit(8);
-    margin-bottom: _.unit(12);
-  }
+  @include _.flex-column(normal ,normal);
+  @include _.full-width;
 
   .terms {
     margin-bottom: _.unit(4);
   }
 
-  .divider {
-    @include _.container-width;
-  }
-
   .primarySignIn {
     margin-bottom: _.unit(5);
   }
 
-  .primarySocial {
-    margin-bottom: _.unit(4);
-  }
-
   .otherMethodsLink {
-    margin-bottom: _.unit(1);
+    margin-bottom: _.unit(6);
   }
 
   .createAccount {
-    margin-top: _.unit(8);
+    margin-top: _.unit(6);
+    text-align: center;
   }
 
   .placeHolder {
     flex: 1;
   }
 }
+
+:global(body.mobile) {
+  .header {
+    margin-top: _.unit(3);
+    margin-bottom: _.unit(12);
+  }
+
+  .primarySocial {
+    margin-bottom: _.unit(8);
+  }
+
+  .divider {
+    margin-bottom: _.unit(5);
+  }
+}
+
+:global(body.desktop) {
+  .header {
+    margin-top: _.unit(6);
+    margin-bottom: _.unit(6);
+  }
+
+  .primarySocial {
+    margin-bottom: _.unit(12);
+  }
+
+  .divider {
+    margin-bottom: _.unit(4);
+  }
+}

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

@@ -5,5 +5,23 @@
 }
 
 .container {
-  margin-top: _.unit(2);
+  @include _.full-width;
+}
+
+:global(body.mobile) {
+  .container {
+    margin-top: _.unit(2);
+  }
+}
+
+:global(body.desktop) {
+  .container {
+    margin-top: _.unit(12);
+  }
+
+  .title {
+    @include _.title;
+    font: var(--font-title-medium);
+    margin-bottom: _.unit(8);
+  }
 }

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { isMobile } from 'react-device-detect';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 
@@ -21,8 +22,9 @@ const SocialRegister = () => {
 
   return (
     <div className={styles.wrapper}>
-      <NavBar title={t('description.bind_account_title')} />
+      <NavBar title={isMobile ? t('description.bind_account_title') : undefined} />
       <div className={styles.container}>
+        {!isMobile && <div className={styles.title}>{t('description.bind_account_title')}</div>}
         <SocialCreateAccount connectorId={connector} />
       </div>
     </div>

packages/ui/src/scss/_desktop.scss

@@ -52,12 +52,15 @@ $font-family: -apple-system,
 
 @mixin fonts {
   --font-title: 600 32px/40px #{$font-family};
+  --font-title-medium: 600 28px/36px #{$font-family};
+  --font-title-small: 600 24px/32px #{$font-family};
   --font-body-bold: 500 16px/20px #{$font-family};
   --font-body: 400 16px/20px #{$font-family};
   --font-body-small: 500 14px/18px #{$font-family};
-  --font-caption: 400 14px/18px #{$font-family};
+  --font-caption: 500 14px/20px #{$font-family};
 }
 
 @mixin layout {
   --radius: 8px;
+  --max-width: 400px;
 }

packages/ui/src/scss/_mobile.scss

@@ -58,4 +58,5 @@ $font-family: -apple-system,
 
 @mixin layout {
   --radius: 8px;
+  --max-width: 360px;
 }

packages/ui/src/scss/_underscore.scss

@@ -2,11 +2,11 @@
   @return #{$factor * 4}px;
 }
 
-@mixin flex-column {
+@mixin flex-column($align-items: center, $justify-content: center) {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  align-items: $align-items;
+  justify-content: $justify-content;
 }
 
 @mixin flex-row {
@@ -34,9 +34,10 @@
   align-self: stretch;
 }
 
-@mixin container-width {
+@mixin full-width {
   width: 100%;
-  max-width: 360px;
+  max-width: var(--max-width);
+  margin: 0 auto;
 }
 
 @function border($color: transparent, $width: 1) {