style(ui): rest components style update (#818)

* style(ui): rest components style update

desktop component style update

* fix(ui): fix un-exist classname

fix un-exist classname

* fix(ui): cr fix

cr fix

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

@@ -4,9 +4,6 @@ $logo-height: 60px;
 
 .container {
   width: 100%;
-  height: 15vh;
-  min-height: 92px;
-  max-height: 148px;
   @include _.flex-column;
 }
 
@@ -14,13 +11,38 @@ $logo-height: 60px;
   height: $logo-height;
   width: auto;
   @include _.image-align-center;
+}
 
-  &:not(:last-child) {
+
+:global(body.mobile) {
+  .container {
+    height: 15vh;
+    min-height: 92px;
+    max-height: 148px;
+  }
+
+  .logo:not(:last-child) {
     margin-bottom: _.unit(2);
   }
+
+  .headline {
+    font: var(--font-body);
+    color: var(--color-text);
+  }
 }
 
-.headline {
-  font: var(--font-body);
-  color: var(--color-text);
+
+:global(body.desktop) {
+  .container {
+    height: 96px;
+  }
+
+  .logo:not(:last-child) {
+    margin-bottom: _.unit(4);
+  }
+
+  .headline {
+    font: var(--font-title-small);
+    color: var(--color-text);
+  }
 }

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

@@ -9,7 +9,7 @@
   .line {
     flex: 1;
     height: 1px;
-    background: var(--color-border);
+    background: var(--color-divider);
 
     &:first-child {
       margin-right: _.unit(4);

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

@@ -20,9 +20,7 @@ const PasswordInput = ({ className, value, error, onFocus, onBlur, ...rest }: Pr
 
   return (
     <div className={className}>
-      <div
-        className={classNames(styles.wrapper, onInputFocus && styles.focus, error && styles.error)}
-      >
+      <div className={classNames(styles.wrapper, error && styles.error)}>
         <input
           ref={inputElement}
           type={type}

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

@@ -69,7 +69,7 @@ const PhoneInput = ({
 
   return (
     <div className={className}>
-      <div className={classNames(styles.wrapper, onFocus && styles.focus, error && styles.error)}>
+      <div className={classNames(styles.wrapper, error && styles.error)}>
         {countrySelector}
         <input
           ref={inputReference}

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

@@ -3,21 +3,20 @@
 .wrapper {
   position: relative;
   @include _.flex-row;
-  padding: 0 _.unit(4);
-  border-radius: var(--radius);
   border: _.border();
-  background: var(--color-layer);
-  color: var(--color-text);
+  border-radius: var(--radius);
   // fix in safari input field line-height issue
   height: 46px;
   overflow: hidden;
-
+  transition-property: outline, border;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.2s;
 
   > *:not(:first-child) {
     margin-left: _.unit(1);
   }
 
-  &.focus {
+  &:focus-within {
     border: _.border(var(--color-primary));
   }
 
@@ -27,7 +26,6 @@
 
   input {
     flex: 1;
-    border: none;
     background: none;
     padding: _.unit(3) 0;
     caret-color: var(--color-primary);
@@ -54,3 +52,26 @@
 .actionButton {
   fill: var(--color-icon);
 }
+
+:global(body.mobile) {
+  .wrapper {
+    padding: 0 _.unit(4);
+    background: var(--color-layer);
+    color: var(--color-text);
+  }
+}
+
+:global(body.desktop) {
+  .wrapper {
+    padding: 0 _.unit(3);
+    background: transparent;
+    border: _.border(var(--color-border));
+    border-radius: 6px;
+    outline: 3px solid transparent;
+
+    &:focus-within {
+      border-color: var(--color-primary);
+      outline-color: var(--color-focused-variant);
+    }
+  }
+}

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

@@ -28,13 +28,7 @@ const Input = ({
 
   return (
     <div className={className}>
-      <div
-        className={classNames(
-          styles.wrapper,
-          onInputFocus && styles.focus,
-          error && errorStyling && styles.error
-        )}
-      >
+      <div className={classNames(styles.wrapper, error && errorStyling && styles.error)}>
         <input
           type={type}
           value={value}

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

@@ -20,8 +20,21 @@
     height: 100%;
     font-size: 0;
   }
+}
 
-  > svg {
-    fill: var(--color-primary);
+:global(body.mobile) {
+  .countryCodeSelector {
+    > svg {
+      fill: var(--color-primary);
+    }
+  }
+}
+
+
+:global(body.desktop) {
+  .countryCodeSelector {
+    > svg {
+      fill: var(--color-icon);
+    }
   }
 }

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

@@ -5,15 +5,12 @@
   justify-content: space-between;
 
   input {
-    border-radius: _.unit(2);
-    border: _.border();
-    background: var(--color-layer);
-    caret-color: var(--color-primary);
     width: 44px;
     height: 44px;
     text-align: center;
     font: var(--font-body);
     color: var(--color-text);
+    caret-color: var(--color-primary);
 
     &::-webkit-outer-spin-button,
     &::-webkit-inner-spin-button {
@@ -31,6 +28,36 @@
   }
 }
 
-.errorMessage {
+.passcode + .errorMessage {
   margin-top: _.unit(2);
 }
+
+:global(body.mobile) {
+  .passcode {
+    input {
+      width: 44px;
+      height: 44px;
+      border-radius: _.unit(2);
+      border: _.border();
+      background: var(--color-layer);
+    }
+  }
+}
+
+:global(body.desktop) {
+  .passcode {
+    input {
+      width: 44px;
+      height: 46px;
+      border-radius: _.unit(2);
+      border: _.border(var(--color-border));
+      outline: 3px solid transparent;
+      background: transparent;
+
+      &:focus {
+        border: _.border(var(--color-primary));
+        outline-color: var(--color-focused-variant);
+      }
+    }
+  }
+}

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

@@ -194,6 +194,7 @@ const Passcode = ({ name, className, value, length = defaultLength, error, onCha
             type="text"
             inputMode="numeric"
             maxLength={2} // Allow overwrite input
+            autoComplete="off"
             onPaste={onPasteHandler}
             onInput={onInputHandler}
             onKeyDown={onKeyDownHandler}

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

@@ -15,3 +15,11 @@
     font: var(--font-body);
   }
 }
+
+:global(body.desktop) {
+  .link {
+    &.primary {
+      font: var(--font-body);
+    }
+  }
+}

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

@@ -8,22 +8,28 @@
   transform: translateY(-50%);
   @include _.flex-column;
   pointer-events: none;
+}
 
-  .toast {
-    max-width: 295px;
-    margin: 0 auto;
-    padding: _.unit(2) _.unit(4);
-    font: var(--font-body);
-    color: var(--color-base);
-    border-radius: var(--radius);
-    background: var(--color-toast);
-    text-align: center;
-    opacity: 0%;
-    transition: opacity 0.3s ease-in-out;
-    word-break: break-word;
+.toast {
+  margin: 0 auto;
+  padding: _.unit(2) _.unit(4);
+  max-width: 295px;
+  font: var(--font-body);
+  color: var(--color-text);
+  border-radius: var(--radius);
+  background: var(--color-toast);
+  text-align: center;
+  opacity: 0%;
+  transition: opacity 0.3s ease-in-out;
+  word-break: break-word;
 
-    &[data-visible='true'] {
-      opacity: 100%;
-    }
+  &[data-visible='true'] {
+    opacity: 100%;
+  }
+}
+
+:global(body.desktop) {
+  .toast {
+    padding: _.unit(3) _.unit(4);
   }
 }