Update styles and icons

LICENSE

@@ -187,7 +187,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [yyyy] [name of copyright owner]
+   Copyright 2021 Soramitsu Co Ltd
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "polkaswap-exchange-web",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "license": "Apache-2.0",
   "private": true,
   "author": "Stefan Popov <popov@soramitsu.co.jp>",
@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@metamask/detect-provider": "^1.2.0",
-    "@soramitsu/soramitsu-js-ui": "^0.7.13",
-    "@soramitsu/soraneo-wallet-web": "^0.6.5",
+    "@soramitsu/soramitsu-js-ui": "^0.8.2",
+    "@soramitsu/soraneo-wallet-web": "^0.7.3",
     "@walletconnect/web3-provider": "^1.3.3",
     "axios": "^0.19.2",
     "core-js": "^3.6.4",

src/App.vue

@@ -12,7 +12,7 @@
             <div class="account">
               <div class="account-name">{{ accountInfo }}</div>
               <div class="account-icon">
-                <s-icon v-if="!accountConnected" name="wallet" size="20" />
+                <s-icon v-if="!accountConnected" name="finance-wallet-24" />
                 <div v-else class="account-avatar"/>
               </div>
             </div>
@@ -82,7 +82,7 @@
             </li>
             <sidebar-item-content
               :title="t(`footerMenu.help`)"
-              icon="icon-info"
+              icon="notifications-info-24"
               tag="li"
               class="el-menu-item menu-item--small"
               @click.native="openHelpDialog"
@@ -241,30 +241,6 @@ export default class App extends Mixins(TransactionMixin, LoadingMixin) {
 </script>
 
 <style lang="scss">
-@font-face {
-  font-family: "SoraB";
-  src: url("~@/assets/fonts/Sora-Bold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "SoraEB";
-  src: url("~@/assets/fonts/Sora-ExtraBold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "SoraSB";
-  src: url("~@/assets/fonts/Sora-SemiBold.otf");
-  font-weight: normal;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Sora";
-  src: url("~@/assets/fonts/Sora-Regular.otf");
-  font-weight: normal;
-  font-style: normal;
-}
 html {
   overflow-y: hidden;
   font-size: var(--s-font-size-small);

src/components/BrandedTooltip.vue

@@ -23,19 +23,41 @@ export default {}
 $tooltip-padding-top: $inner-spacing-mini * 0.5;
 $tooltip-padding-bottom: $inner-spacing-mini * 0.75;
 
-.el-tooltip__popper.is-light.info-tooltip {
+.el-tooltip__popper.is-light.s-border-radius-small /* .info-tooltip TODO: use it everywhere */ {
   max-width: 236px;
   padding: $tooltip-padding-top $inner-spacing-mini $tooltip-padding-bottom;
   line-height: $s-line-height-base;
   background-color: var(--s-color-brand-day);
   color: var(--s-color-utility-body);
-
   .popper__arrow {
     border-bottom-color: var(--s-color-brand-day);
-
-    &:after {
+    &::after {
       border-bottom-color: inherit;
     }
   }
+  &[x-placement^="top"] .popper__arrow {
+    border-top-color: var(--s-color-brand-day);
+    &::after {
+      border-top-color: inherit;
+    }
+  }
+  &[x-placement^="bottom"] .popper__arrow {
+    border-bottom-color: var(--s-color-brand-day);
+    &::after {
+      border-top-color: inherit;
+    }
+  }
+  &[x-placement^="right"] .popper__arrow {
+    border-right-color: var(--s-color-brand-day);
+    &::after {
+      border-right-color: inherit;
+    }
+  }
+  &[x-placement^="left"] .popper__arrow {
+    border-left-color: var(--s-color-brand-day);
+    &::after {
+      border-left-color: inherit;
+    }
+  }
 }
 </style>

src/components/ConfirmBridgeTransactionDialog.vue

@@ -11,7 +11,7 @@
           {{ formatAssetSymbol(asset.symbol) }}
         </div>
       </div>
-      <s-icon class="icon-divider" name="arrow-bottom-rounded" size="medium" />
+      <s-icon class="icon-divider" name="arrows-arrow-bottom-24" />
       <div class="tokens-info-container">
         <span class="token-value">{{ amount }}</span>
         <div v-if="asset" class="token token-ethereum">

src/components/ConfirmRemoveLiquidity.vue

@@ -6,7 +6,7 @@
     <div class="tokens">
       <div class="tokens-info-container">
         <span class="token-value">{{ formattedFromValue }}</span>
-        <s-icon class="icon-divider" name="plus-rounded" size="medium" />
+        <s-icon class="icon-divider" name="plus-16" />
         <span class="token-value">{{ formattedToValue }}</span>
       </div>
       <div class="tokens-info-container">

src/components/ConfirmSwap.vue

@@ -12,7 +12,7 @@
           {{ tokenFrom.symbol }}
         </div>
       </div>
-      <s-icon class="icon-divider" name="arrow-bottom-rounded" size="medium" />
+      <s-icon class="icon-divider" name="arrows-arrow-bottom-24" />
       <div class="tokens-info-container">
         <span class="token-value">{{ formattedToValue }}</span>
         <div v-if="tokenTo" class="token">
@@ -126,7 +126,7 @@ export default class ConfirmSwap extends Mixins(TransactionMixin, DialogMixin, N
   .transaction-number {
     color: var(--s-color-base-content-primary);
     font-feature-settings: $s-font-feature-settings-common;
-    @include font-weight(600);
+    font-weight: 600;
     word-break: break-all;
   }
 }

src/components/GenericPageHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="headerClasses">
-    <s-button v-if="hasButtonBack" type="action" size="medium" icon="chevron-left-rounded" @click="handleBack" />
+    <s-button v-if="hasButtonBack" type="action" size="medium" icon="arrows-chevron-left-rounded-24" @click="handleBack" />
     <h3 class="page-header-title">{{ title }}</h3>
     <branded-tooltip
       v-if="!!tooltip"
@@ -9,7 +9,7 @@
       :content="tooltip"
       :placement="tooltipPlacement"
     >
-      <s-icon name="info" size="16" />
+      <s-icon name="info-16" />
     </branded-tooltip>
     <slot />
   </div>
@@ -96,7 +96,7 @@ $title-padding: calc(#{var(--s-size-small)} + #{$inner-spacing-small});
       }
     }
   }
-  &-tooltip .s-icon-info {
+  &-tooltip .s-icon-info-16 {
     margin-top: auto;
     margin-bottom: auto;
     margin-left: $inner-spacing-mini;

src/components/HelpDialog.vue

@@ -11,7 +11,7 @@
           target="_blank"
         >
           <span>{{ link.title }}</span>
-          <s-icon name="external-link" size="16" />
+          <s-icon name="external-link-16" />
         </a>
         <s-divider v-if="index !== links.length - 1" class="help-links-item_divider" />
       </div>

src/components/InfoCard.vue

@@ -20,7 +20,7 @@ export default class InfoCard extends Mixins(TranslationMixin) {
   &__title {
     line-height: $s-line-height-big;
     color: var(--s-color-base-content-primary);
-    @include font-weight(600);
+    font-weight: 600;
   }
   &__data {
     display: flex;

src/components/InfoLine.vue

@@ -2,7 +2,7 @@
   <div class="info-line">
     <span class="info-line-label">{{ label }}</span>
     <s-tooltip v-if="tooltipContent" :class="tooltipClasses" popper-class="info-tooltip info-tooltip--info-line" border-radius="mini" :content="tooltipContent" theme="light" placement="right-start" animation="none" :show-arrow="false">
-      <s-icon name="info" size="16" />
+      <s-icon name="info-16" />
     </s-tooltip>
     <span class="info-line-value">{{ value }}<span v-if="assetSymbol" class="asset-symbol">{{ ' ' + assetSymbol }}</span></span>
     <slot />

src/components/ResultDialog.vue

@@ -11,7 +11,7 @@
       <!-- This link was hidden due to PSS-205 task. We'll return it back later.  -->
       <!-- <s-icon name="external-link" @click="handleTransactionInfo" /> -->
       <!-- Add correct icons and add functionality -->
-      <!-- <s-icon name="arrow-bottom-rounded" /> -->
+      <!-- <s-icon name="arrows-arrow-bottom-24" /> -->
     </div>
     <s-divider />
     <template #footer>
@@ -72,13 +72,13 @@ $transactionIconSize: 68px;
     letter-spacing: $s-letter-spacing-type;
     background-color: var(--s-color-base-background);
     border-radius: var(--s-border-radius-mini);
-    @include font-weight(700);
+    font-weight: 700;
     white-space: nowrap;
   }
   &-info {
     margin-right: $inner-spacing-mini;
     font-feature-settings: $s-font-feature-settings-common;
-    @include font-weight(600);
+    font-weight: 600;
   }
   .s-icon-external-link {
     cursor: pointer;

src/components/SelectRegisteredAsset.vue

@@ -13,9 +13,11 @@
         size="medium"
         border-radius="mini"
         @focus="handleSearchFocus"
-      />
-      <!-- TODO: Change the icon -->
-      <s-button class="s-button--clear" icon="circle-x" @click="handleClearSearch" />
+      >
+        <template #suffix>
+          <s-button class="s-button--clear" icon="clear-X-16" @click="handleClearSearch" />
+        </template>
+      </s-input>
     </s-form-item>
     <!-- TODO: Move each tab to separate component -->
     <s-tabs v-model="tabValue" class="s-tabs--exchange" type="rounded" @click="handleTabClick">
@@ -197,7 +199,7 @@ export default class SelectRegisteredAsset extends Mixins(TranslationMixin, Dial
       return assets.filter(asset =>
         (KnownAssets.get(asset.address) && this.t(`assetNames.${asset.symbol}`).toLowerCase().includes(query)) ||
         `${asset.symbol}`.toLowerCase().includes(query) ||
-        `${asset[this.addressSymbol]}`.toLowerCase().includes(query)
+        `${asset[this.addressSymbol]}`.toLowerCase() === query
       )
     }
 
@@ -301,7 +303,6 @@ $tabs-item-height: $tabs-container-height - $tabs-container-padding * 2;
       padding: $inner-spacing-mini 0 $inner-spacing-big !important;
     }
   }
-  @include search-item-unscoped;
   .s-tabs.s-tabs--exchange {
     &#{$tabs-class} {
       #{$tabs-class}__header {
@@ -328,7 +329,7 @@ $tabs-item-height: $tabs-container-height - $tabs-container-padding * 2;
           width: 50%;
           line-height: $tabs-item-height;
           font-feature-settings: $s-font-feature-settings-title;
-          @include font-weight(700, true);
+          font-weight: 700 !important;
           text-align: center;
           &:hover {
             background-color: var(--s-color-base-background-hover);
@@ -368,7 +369,6 @@ $select-asset-horizontal-spacing: $inner-spacing-big;
   width: calc(100% - 2 * #{$select-asset-horizontal-spacing});
 }
 .asset-search {
-  // TODO: Fix input styles (paddings and icon position)
   margin-bottom: $inner-spacing-medium;
 }
 .asset-item {
@@ -383,7 +383,7 @@ $select-asset-horizontal-spacing: $inner-spacing-big;
   }
   &__name, &__balance {
     font-size: var(--s-font-size-small);
-    @include font-weight(600);
+    font-weight: 600;
   }
   &__balance {
     white-space: nowrap;
@@ -397,7 +397,7 @@ $select-asset-horizontal-spacing: $inner-spacing-big;
   font-size: $s-heading3-caps-font-size;
   line-height: $s-line-height-base;
   letter-spacing: $s-letter-spacing-type;
-  @include font-weight(700, true);
+  font-weight: 700 !important;
   font-feature-settings: $s-font-feature-settings-type;
   text-transform: uppercase;
   .asset-list + & {

src/components/SelectToken.vue

@@ -12,8 +12,11 @@
         prefix="el-icon-search"
         size="medium"
         border-radius="mini"
-      />
-      <s-button class="s-button--clear" icon="circle-x" @click="handleClearSearch" />
+      >
+        <template #suffix>
+          <s-button class="s-button--clear" icon="clear-X-16" @click="handleClearSearch" />
+        </template>
+      </s-input>
     </div>
     <div v-if="filteredTokens && filteredTokens.length > 0" class="token-list">
       <div v-for="token in filteredTokens" @click="selectToken(token)" :key="token.address" class="token-item">
@@ -118,7 +121,7 @@ export default class SelectToken extends Mixins(TranslationMixin, DialogMixin, L
       return this.assetsList.filter(t =>
         (KnownAssets.get(t.address) && this.t(`assetNames.${t.symbol}`).toLowerCase().includes(query)) ||
         t.symbol?.toLowerCase?.()?.includes?.(query) ||
-        t.address?.toLowerCase?.()?.includes?.(query)
+        t.address?.toLowerCase?.() === query
       )
     }
 
@@ -178,8 +181,6 @@ export default class SelectToken extends Mixins(TranslationMixin, DialogMixin, L
 
 <style lang="scss">
 .token-select {
-  @include search-item-unscoped('token-select__search');
-
   .el-dialog {
     overflow: hidden;
     &__body {
@@ -232,10 +233,10 @@ $token-item-height: 71px;
     white-space: nowrap;
     font-size: var(--s-font-size-small);
     margin-bottom: $inner-spacing-mini;
-    @include font-weight(600);
+    font-weight: 600;
   }
   &__amount {
-    @include font-weight(600);
+    font-weight: 600;
   }
 
   .token-logo {