refactor(ui): main flow ui refine part 2 (#742)

* refactor(ui): main flow ui refine

main flow ui refine

* fix(ui): cr fix

cr fix

* fix(ui): fix confirm password border styling

fix confirm password border styling

packages/phrases/src/locales/en.ts

@@ -47,7 +47,7 @@ const translation = {
       terms_of_use: 'Terms of Use',
       create_account: 'Create Account',
       forgot_password: 'Forgot Password?',
-      or: 'Or',
+      or: 'or',
       enter_passcode: 'The passcode has been sent to {{address}}',
       passcode_sent: 'The passcode has been sent',
       resend_after_seconds: 'Resend after {{seconds}} seconds',

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

@@ -1,8 +1,15 @@
 @use '@/scss/underscore' as _;
 
 /* Foundation */
-$font-family: 'PingFang SC', 'SF Pro Display', 'Siyuan Heiti', 'Roboto';
-$font-family-small: 'PingFang SC', 'SF Pro Text', 'Siyuan Heiti', 'Roboto';
+$font-family: -apple-system,
+  system-ui,
+  'BlinkMacSystemFont',
+  'Segoe UI',
+  'Roboto',
+  'Helvetica Neue',
+  'Helvetica',
+  'Arial',
+  sans-serif;
 
 .content {
   position: absolute;
@@ -56,6 +63,6 @@ $font-family-small: 'PingFang SC', 'SF Pro Text', 'Siyuan Heiti', 'Roboto';
   --font-title: 600 32px/40px #{$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-small};
-  --font-caption: 400 14px/18px #{$font-family-small};
+  --font-body-small: 500 14px/18px #{$font-family};
+  --font-caption: 400 14px/18px #{$font-family};
 }

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

@@ -6,7 +6,7 @@
 
 .container {
   background: var(--color-dialogue);
-  padding: _.unit(6) _.unit(5);
+  padding: _.unit(5);
   border-radius: var(--radius);
 }
 

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

@@ -37,6 +37,12 @@ const ConfirmModal = ({
       overlayClassName={classNames(modalStyles.overlay, styles.overlay)}
       parentSelector={() => document.querySelector('main') ?? document.body}
       ariaHideApp={false}
+      onAfterOpen={() => {
+        document.body.classList.add('static');
+      }}
+      onAfterClose={() => {
+        document.body.classList.remove('static');
+      }}
     >
       <div className={styles.container}>
         <div className={styles.content}>{children}</div>

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

@@ -1,6 +1,8 @@
 @use '@/scss/underscore' as _;
 
 .container {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
   padding: _.unit(5);
   background: var(--color-dialogue);
 }

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

@@ -26,6 +26,12 @@ const Drawer = ({ className, isOpen = false, children, onClose }: Props) => {
       appElement={document.querySelector('main') ?? document.body}
       closeTimeoutMS={300}
       onRequestClose={onClose}
+      onAfterOpen={() => {
+        document.body.classList.add('static');
+      }}
+      onAfterClose={() => {
+        document.body.classList.remove('static');
+      }}
     >
       <div className={styles.container}>
         <div className={styles.header}>

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

@@ -8,6 +8,9 @@
   border: _.border();
   background: var(--color-layer);
   color: var(--color-text);
+  // fix in safari input field line-height issue
+  height: 46px;
+  overflow: hidden;
 
 
   > *:not(:first-child) {

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

@@ -10,6 +10,7 @@ export type Props = HTMLProps<HTMLInputElement> & {
   className?: string;
   error?: ErrorType;
   onClear?: () => void;
+  errorStyling?: boolean;
 };
 
 const Input = ({
@@ -17,6 +18,7 @@ const Input = ({
   type = 'text',
   value,
   error,
+  errorStyling = true,
   onFocus,
   onBlur,
   onClear,
@@ -27,7 +29,11 @@ const Input = ({
   return (
     <div className={className}>
       <div
-        className={classNames(styles.wrapper, onInputFocus && styles.focus, error && styles.error)}
+        className={classNames(
+          styles.wrapper,
+          onInputFocus && styles.focus,
+          error && errorStyling && styles.error
+        )}
       >
         <input
           type={type}

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

@@ -13,7 +13,7 @@
     left: _.unit(4);
     top: 50%;
     transform: translateY(-50%);
-    fill: var(--color-icon);
+    fill: var(--color-text);
   }
 
   .title {

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

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

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

@@ -5,7 +5,6 @@ import React, {
   useEffect,
   FormEventHandler,
   KeyboardEventHandler,
-  FocusEventHandler,
   ClipboardEventHandler,
 } from 'react';
 
@@ -88,7 +87,6 @@ const Passcode = ({ name, className, value, length = defaultLength, error, onCha
       if (value) {
         const nextTarget = inputReferences.current[targetId + 1];
         nextTarget?.focus();
-        nextTarget?.select();
       }
     },
     [codes, onChange]
@@ -116,18 +114,15 @@ const Passcode = ({ name, className, value, length = defaultLength, error, onCha
       case 'Backspace':
         if (!value) {
           previousTarget?.focus();
-          previousTarget?.select();
         }
         break;
       case 'ArrowLeft':
         event.preventDefault();
         previousTarget?.focus();
-        previousTarget?.select();
         break;
       case 'ArrowRight':
         event.preventDefault();
         nextTarget?.focus();
-        nextTarget?.select();
         break;
       case 'ArrowUp':
       case 'ArrowDown':
@@ -138,10 +133,6 @@ const Passcode = ({ name, className, value, length = defaultLength, error, onCha
     }
   }, []);
 
-  const onFocusHandler: FocusEventHandler<HTMLInputElement> = useCallback(({ target }) => {
-    target.select();
-  }, []);
-
   const onPasteHandler: ClipboardEventHandler<HTMLInputElement> = useCallback(
     (event) => {
       if (!(event.target instanceof HTMLInputElement)) {
@@ -206,7 +197,6 @@ const Passcode = ({ name, className, value, length = defaultLength, error, onCha
             onPaste={onPasteHandler}
             onInput={onInputHandler}
             onKeyDown={onKeyDownHandler}
-            onFocus={onFocusHandler}
           />
         ))}
       </div>

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

@@ -13,10 +13,6 @@
     margin-bottom: _.unit(4);
   }
 
-  .confirmPassword > * {
-    border: _.border();
-  }
-
   .terms {
     margin: _.unit(8) 0 _.unit(4);
   }

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

@@ -100,7 +100,7 @@ const CreateAccount = ({ className }: Props) => {
         }}
       />
       <Input
-        className={classNames(styles.inputField, styles.confirmPassword)}
+        className={styles.inputField}
         name="confirm_password"
         type="password"
         autoComplete="current-password"
@@ -108,6 +108,7 @@ const CreateAccount = ({ className }: Props) => {
         {...fieldRegister('confirmPassword', (confirmPassword) =>
           confirmPasswordValidation(fieldValue.password, confirmPassword)
         )}
+        errorStyling={false}
         onClear={() => {
           setFieldValue((state) => ({ ...state, confirmPassword: '' }));
         }}

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

@@ -3,6 +3,10 @@
 
 .textLink {
   text-align: center;
+
+  .signInMethodLink {
+    font-size: inherit;
+  }
 }
 
 .methodsLinkList {

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

@@ -3,6 +3,8 @@
 
 .wrapper {
   @include _.page-wrapper;
+  position: absolute;
+  inset: 0;
 }
 
 .connector {
@@ -13,6 +15,11 @@
   margin-bottom: _.unit(6);
 }
 
+.placeHolder {
+  flex: 1;
+}
+
 .button {
   @include _.container-width;
+  margin-bottom: _.unit(4);
 }

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

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

packages/ui/src/scss/modal.module.scss

@@ -26,6 +26,10 @@
 /* stylelint-disable selector-class-pattern */
 /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
 :global {
+  .static {
+    overflow: hidden;
+  }
+
   .ReactModal__Content[role='popup'] {
     transform: translateY(100%);
     transition: transform 0.3s ease-in-out;

packages/ui/src/scss/normalized.scss

@@ -6,6 +6,11 @@ body {
 
 * {
   box-sizing: border-box;
+  -webkit-tap-highlight-color: transparent;
+}
+
+a {
+  text-underline-offset: 2px;
 }
 
 input {