[ETCM-398] Redesign input components

.storybook/webpack.config.js

@@ -2,21 +2,34 @@ const path = require('path')
 const webpack = require('webpack')
 const AntdScssThemePlugin = require('antd-scss-theme-plugin')
 const WorkerPlugin = require('worker-plugin')
+const _ = require('lodash/fp')
 
-const disableEslint = (e) => {
+const disableEslint = (config) => {
   return (
-    e.module.rules
+    config.module.rules
       .filter((e) => e.use && e.use.some((e) => e.options && void 0 !== e.options.useEslintrc))
       .forEach((s) => {
-        e.module.rules = e.module.rules.filter((e) => e !== s)
+        config.module.rules = config.module.rules.filter((e) => e !== s)
       }),
-    e
+    config
   )
 }
 
+const setScssRoot = (config, path) =>
+  config.module.rules
+    .filter((rule) => rule.use)
+    .map((rule) => rule.use)
+    .forEach((use) => {
+      use
+        .filter((item) => _.isObject(item) && item.loader.includes('resolve-url-loader'))
+        .forEach((item) => (item.options.root = path))
+    })
+
 module.exports = ({config}) => {
   config = disableEslint(config)
 
+  setScssRoot(config, path.join(__dirname, '../src'))
+
   config.plugins.push(new AntdScssThemePlugin('./src/vars.scss'))
   config.plugins.push(new WorkerPlugin())
   config.plugins.push(

config-overrides.js

@@ -1,3 +1,4 @@
+const path = require('path')
 const {
   override,
   fixBabelImports,
@@ -7,6 +8,7 @@ const {
 } = require('customize-cra')
 const AntdScssThemePlugin = require('antd-scss-theme-plugin')
 const WorkerPlugin = require('worker-plugin')
+const _ = require('lodash/fp')
 
 //
 // This method returns the loaders from create-react-app's webpack config
@@ -55,6 +57,20 @@ const addRawImages = () => (config) => {
   return config
 }
 
+const setScssRoot = (path) => (config) => {
+  getLoaders(config)
+    .filter((rule) => rule.use)
+    .map((rule) => rule.use)
+    .forEach((use) => {
+      use
+        .filter((item) => _.isObject(item) && item.loader.includes('resolve-url-loader'))
+        .forEach((loader) => {
+          loader.options.root = path
+        })
+    })
+  return config
+}
+
 module.exports = override(
   addWebpackPlugin(new AntdScssThemePlugin('./src/vars.scss')),
   addWebpackPlugin(new WorkerPlugin()),
@@ -63,6 +79,7 @@ module.exports = override(
     libraryDirectory: 'es',
     style: true,
   }),
+  setScssRoot(path.join(__dirname, 'src')),
   addLessLoader(),
   addRawImages(),
   disableEsLint(),

src/App.scss

@@ -4,10 +4,11 @@
   display: grid;
   grid-template-columns: auto 1fr;
   overflow: hidden;
-  transition: background-position 0.3s;
+  transition: background-position $bg-transition-duration;
   background-repeat: no-repeat;
   background-position: 100% top;
   background-size: contain;
+  font-weight: 500;
 
   &.wallets {
     background-position: 125% top;

src/Settings.scss

@@ -13,13 +13,13 @@
 
       .settings-label {
         margin-bottom: 0.5rem;
-        font-size: $font-size-xs;
+        font-size: $font-size-s;
         text-transform: uppercase;
       }
 
       .settings-note {
         margin-bottom: 0.6rem;
-        font-size: $font-size-xs;
+        font-size: $font-size-s;
 
         @include themify($themes) {
           color: themed('inactive-text-color');

src/address-book/AddressBook.scss

@@ -1,30 +1,12 @@
 @import '../partial', '../vars';
 
 .AddressBook {
-  margin-top: $router-top-margin;
-
   .toolbar {
     display: grid;
     grid-template-columns: auto 1fr auto;
-    margin-bottom: $dialog-component-spacing;
+    margin-bottom: 3rem;
+    padding-top: $router-top-margin;
     line-height: 30px;
-
-    .line {
-      @extend %line;
-    }
-
-    .action {
-      display: inline-block;
-      min-width: 126px;
-      height: 30px;
-      margin-left: 1rem;
-      font-size: $font-size-s;
-      font-weight: bold;
-      letter-spacing: $letter-spacing-large;
-      text-align: center;
-      text-transform: uppercase;
-      vertical-align: middle;
-    }
   }
 
   .address-list {
@@ -48,6 +30,7 @@
         text-align: right;
 
         > span {
+          @extend %disable-focus-outline;
           padding: 0.25em;
           cursor: pointer;
         }

src/address-book/AddressBook.tsx

@@ -190,21 +190,20 @@ const _AddressBook = ({
 
   return (
     <div className="AddressBook">
+      <div className="main-buttons">
+        <Button
+          data-testid="add-contact-button"
+          type="primary"
+          className="action right-diagonal"
+          onClick={onStartAddNew}
+        >
+          <Trans k={['addressBook', 'book', 'addNew']} />
+        </Button>
+      </div>
       <div className="toolbar">
         <div className="main-title">
           <Trans k={['addressBook', 'book', 'title']} />
         </div>
-        <div className="line"></div>
-        <div>
-          <Button
-            data-testid="add-contact-button"
-            type="primary"
-            className="action"
-            onClick={onStartAddNew}
-          >
-            <Trans k={['addressBook', 'book', 'addNew']} />
-          </Button>
-        </div>
       </div>
       <div className="address-list">
         {sortedLabels.length === 0 ? (

src/address-book/DialogAddressSelect.scss

@@ -22,19 +22,16 @@
       width: 100%;
       height: $dialog-component-height;
       min-height: $dialog-component-height;
-      border-radius: $dialog-component-border-radius;
+      border: none;
 
       @include themify($themes) {
-        border: 1px solid themed('dialog-dark-input-bg');
-        background-color: themed('dialog-dark-input-bg');
         color: themed('secondary-text-color');
       }
     }
 
     .ant-select-selector {
       width: 100%;
       height: $dialog-component-height;
-      margin-top: 1px;
 
       .ant-select-selection-search-input {
         line-height: 3;
@@ -46,7 +43,8 @@
 
       .ant-select-selection-item {
         max-width: 120px;
-        padding-top: 6px;
+        padding-top: 8px;
+        font-weight: 500;
       }
     }
   }

src/common/BorderlessInput.scss

@@ -11,8 +11,8 @@
     resize: none;
 
     @include themify($themes) {
-      border: 1px solid themed('normal-color');
-      background-color: themed('normal-color');
+      border: 1px solid themed('text-color');
+      background-color: themed('dialog-dark-input-bg');
       color: themed('text-color');
     }
 
@@ -23,7 +23,7 @@
     &:hover,
     &:focus {
       @include themify($themes) {
-        background-color: themed('normal-color');
+        background-color: themed('dialog-dark-input-bg');
         color: themed('text-color');
       }
     }

src/common/Dialog.scss

@@ -1,7 +1,5 @@
 @import '../themify', '../vars', '../partial';
 
-$dialog-width: 530px;
-
 .Dialog {
   width: $dialog-width;
   margin: auto;
@@ -24,6 +22,38 @@ $dialog-width: 530px;
   .actions {
     &.grid {
       @extend %two-col-grid-template;
+
+      %diagonal-template {
+        @extend %diagonal-before-after-common;
+        z-index: unset;
+        top: 0px;
+        height: 48px;
+        opacity: 1;
+      }
+
+      .ant-btn {
+        &.left {
+          margin-left: $diagonal-part-width;
+          padding: 0 $diagonal-part-width/2 0 0;
+
+          &::before {
+            @extend %diagonal-template;
+            left: -15px;
+            transform: skew(20deg);
+          }
+        }
+
+        &.right {
+          margin-right: $diagonal-part-width;
+          padding: 0 0 0 $diagonal-part-width/2;
+
+          &::after {
+            @extend %diagonal-template;
+            right: -15px;
+            transform: skew(-20deg);
+          }
+        }
+      }
     }
 
     &.natural > * {

src/common/Dialog.tsx

@@ -120,6 +120,7 @@ const _Dialog: FunctionComponent<DialogProps> = ({
     loading: leftInProgress,
     children: t(['common', 'button', 'cancel']),
     ...leftButtonProps,
+    className: rightButtonProps?.className || 'left',
     onClick: createHandleClick(leftButtonProps, setLeftInProgress, skipValidationLeft),
   }
 
@@ -130,6 +131,7 @@ const _Dialog: FunctionComponent<DialogProps> = ({
     children: t(['common', 'button', 'next']),
     loading: rightInProgress,
     ...rightButtonProps,
+    className: rightButtonProps?.className || 'right',
     onClick: createHandleClick(rightButtonProps, setRightInProgress, skipValidationRight),
   }
 

src/common/MantisModal.scss

@@ -5,18 +5,24 @@
     color: themed('text-color');
   }
 
+  .ant-modal-body {
+    padding: $modal-body-padding;
+  }
+
   .ant-modal-content {
     border-radius: $dialog-component-border-radius * 2;
     box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.4), 0 6px 16px 0 rgba(0, 0, 0, 0.01),
       0 9px 28px 8px rgba(0, 0, 0, 0.2);
 
     @include themify($themes) {
-      background-color: themed('modal-background');
+      background: themed('bg-moving'), themed('modal-background');
+      background-position: right top;
+      background-size: cover;
     }
   }
 
   .ant-modal-close {
-    margin: 29px 46px 0 0;
+    margin: 29px 22px 0 0;
   }
 
   .ant-modal-footer {

src/common/dialog/DialogError.scss

@@ -4,7 +4,7 @@
   margin-bottom: $dialog-component-spacing;
   padding: 15px;
   border-radius: $dialog-component-border-radius;
-  font-size: $font-size-xs;
+  font-size: $font-size-s;
   text-align: center;
 
   @include themify($themes) {

src/common/dialog/DialogFee.scss

@@ -14,8 +14,6 @@
 
   .options .button.inactive,
   .options .button.custom {
-    opacity: $unselected-opacity;
-
     @include themify($themes) {
       background-color: themed('input-bg');
       color: themed('text-color');
@@ -55,15 +53,15 @@
     display: grid;
     grid-template-columns: 0 1fr 1fr 1fr 1fr;
     height: $dialog-component-height;
-    border-radius: $dialog-component-border-radius + 0.1rem;
+    border-radius: $dialog-component-border-radius;
 
     @include themify($themes) {
-      border: 1px solid themed('input-bg');
+      border: 1px solid themed('text-color');
     }
 
     .dark & {
       @include themify($themes) {
-        border: 1px solid themed('dialog-dark-input-bg');
+        border: 1px solid themed('text-color');
       }
     }
 
@@ -74,7 +72,13 @@
       padding: 0;
       border-radius: 0;
       font-size: $font-size-s;
+      letter-spacing: -0.01em;
       text-align: center;
+      text-transform: uppercase;
+
+      @include themify($themes) {
+        background-color: themed('primary-color');
+      }
 
       &.custom {
         border-radius: $dialog-component-border-radius 0 0 $dialog-component-border-radius;
@@ -96,7 +100,7 @@
       }
 
       .fee-amount {
-        font-size: $font-size-xs;
+        font-size: 8px;
       }
     }
 

src/common/dialog/DialogInput.scss

@@ -28,7 +28,7 @@
   .dark & {
     .ant-input {
       @include themify($themes) {
-        border: 1px solid themed('dialog-dark-input-bg');
+        border: 1px solid themed('text-color');
         background-color: themed('dialog-dark-input-bg');
         color: themed('secondary-text-color');
       }