From 687f9cc3c9a7aa73635a90cd8e8816a04512e582 Mon Sep 17 00:00:00 2001
From: Mihail Polev <mpolev364@gmail.com>
Date: Mon, 9 May 2022 19:22:11 +0700
Subject: [PATCH] =?UTF-8?q?devop:=20=F0=9F=94=A7=20fixes=20and=20updates?=
 =?UTF-8?q?=20UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/extension/src/ui/action/App.vue      |  2 +-
 .../action/components/base-button/index.vue   | 70 +++++++++++++-
 .../ui/action/components/base-input/index.vue |  4 +-
 .../action/components/network-menu/index.vue  |  4 +
 .../icons/common/custom-network-icon.vue      | 22 +++++
 .../ui/action/icons/common/slider-icon.vue    | 23 +++++
 .../action/icons/common/test-network-icon.vue | 39 ++++++++
 .../ui/action/icons/password/visible-icon.vue | 20 ++++
 .../components/accounts-list-item.vue         |  2 -
 .../components/add-network-header.vue         | 25 ++++-
 .../components/add-network-search.vue         | 93 +++++++++++++++++--
 .../src/ui/action/views/add-network/index.vue | 80 +++++++++++++++-
 .../src/ui/action/views/deposit/index.vue     |  1 +
 .../components/network-activity-action.vue    | 23 ++++-
 .../components/network-nfts-category.vue      |  1 +
 .../components/network-nfts-item.vue          | 13 ++-
 .../ui/action/views/swap-best-offer/index.vue |  4 +-
 .../src/ui/action/views/swap/index.vue        |  6 +-
 .../onboard/create-wallet/recovery-phrase.vue |  2 +-
 19 files changed, 404 insertions(+), 30 deletions(-)
 create mode 100644 packages/extension/src/ui/action/icons/common/custom-network-icon.vue
 create mode 100644 packages/extension/src/ui/action/icons/common/slider-icon.vue
 create mode 100644 packages/extension/src/ui/action/icons/common/test-network-icon.vue
 create mode 100644 packages/extension/src/ui/action/icons/password/visible-icon.vue

diff --git a/packages/extension/src/ui/action/App.vue b/packages/extension/src/ui/action/App.vue
index 0b78876f1..c36539927 100644
--- a/packages/extension/src/ui/action/App.vue
+++ b/packages/extension/src/ui/action/App.vue
@@ -15,7 +15,7 @@
       <div class="app__menu-footer">
         <a class="app__menu-add" @click="addNetworkToggle()">
           <add-icon />
-          Add a network
+          Manage networks
         </a>
 
         <div>
diff --git a/packages/extension/src/ui/action/components/base-button/index.vue b/packages/extension/src/ui/action/components/base-button/index.vue
index c5bd15537..8f6334577 100644
--- a/packages/extension/src/ui/action/components/base-button/index.vue
+++ b/packages/extension/src/ui/action/components/base-button/index.vue
@@ -10,7 +10,7 @@
     }"
     @click="click()"
   >
-    {{ title }}
+    <span>{{ title }}</span>
   </a>
 </template>
 
@@ -54,7 +54,7 @@ defineProps({
 @import "~@action/styles/theme.less";
 
 .button {
-  background: @primary;
+  background-color: @primary;
   box-shadow: 0px 0.25px 1px rgba(0, 0, 0, 0.039),
     0px 0.85px 3px rgba(0, 0, 0, 0.19);
   border-radius: 10px;
@@ -69,6 +69,41 @@ defineProps({
   color: @white;
   text-align: center;
   cursor: pointer;
+  position: relative;
+  overflow: hidden;
+
+  span {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    left: 0;
+    top: 0;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    opacity: 0;
+    background: linear-gradient(
+        0deg,
+        rgba(255, 255, 255, 0.08),
+        rgba(255, 255, 255, 0.08)
+      ),
+      @primary;
+    transition: opacity 300ms ease-in-out;
+  }
+
+  &:hover {
+    &::after {
+      opacity: 1;
+    }
+  }
 
   &.disabled {
     pointer-events: none;
@@ -81,22 +116,53 @@ defineProps({
     color: @primaryLabel;
     background: transparent;
     box-shadow: none;
+
+    &::after {
+      background: rgba(0, 0, 0, 0.04);
+    }
   }
 
   &.gray {
     background: @buttonBg;
     box-shadow: none;
     color: @primaryLabel;
+
+    &::after {
+      background: linear-gradient(
+          0deg,
+          rgba(255, 255, 255, 0.08),
+          rgba(255, 255, 255, 0.08)
+        ),
+        @buttonBg !important;
+    }
   }
 
   &.red {
     background: @error;
     color: @white;
+
+    &::after {
+      background: linear-gradient(
+          0deg,
+          rgba(255, 255, 255, 0.08),
+          rgba(255, 255, 255, 0.08)
+        ),
+        @error !important;
+    }
   }
 
   &.orange {
     background: @orange;
     color: @white;
+
+    &::after {
+      background: linear-gradient(
+          0deg,
+          rgba(255, 255, 255, 0.08),
+          rgba(255, 255, 255, 0.08)
+        ),
+        @orange !important;
+    }
   }
 }
 </style>
diff --git a/packages/extension/src/ui/action/components/base-input/index.vue b/packages/extension/src/ui/action/components/base-input/index.vue
index 5285c59f7..fa331df60 100644
--- a/packages/extension/src/ui/action/components/base-input/index.vue
+++ b/packages/extension/src/ui/action/components/base-input/index.vue
@@ -14,7 +14,8 @@
       class="base-input__hide"
       @click="toggleVisibility"
     >
-      <hide-icon />
+      <visible-icon v-if="showPassword" />
+      <hide-icon v-else />
     </a>
   </div>
 </template>
@@ -28,6 +29,7 @@ export default {
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import HideIcon from "@action/icons/password/hide-icon.vue";
+import VisibleIcon from "@action/icons/password/visible-icon.vue";
 let showPassword = ref(false);
 const props = defineProps({
   placeholder: {
diff --git a/packages/extension/src/ui/action/components/network-menu/index.vue b/packages/extension/src/ui/action/components/network-menu/index.vue
index a51399155..78284e4f0 100644
--- a/packages/extension/src/ui/action/components/network-menu/index.vue
+++ b/packages/extension/src/ui/action/components/network-menu/index.vue
@@ -90,6 +90,10 @@ defineProps({
     svg {
       margin-bottom: 1px;
     }
+
+    &:hover {
+      opacity: 0.6;
+    }
   }
 
   .router-link-active {
diff --git a/packages/extension/src/ui/action/icons/common/custom-network-icon.vue b/packages/extension/src/ui/action/icons/common/custom-network-icon.vue
new file mode 100644
index 000000000..bdb4c7feb
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/common/custom-network-icon.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.4787 4.92422C16.4671 6.06515 17.8422 8.15408 17.9873 10.5745C18.7022 10.6834 19.3788 10.9088 19.9971 11.2307C19.999 11.154 20 11.0771 20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C11.0771 20 11.154 19.999 11.2307 19.9971C10.9088 19.3788 10.6834 18.7022 10.5745 17.9873C10.2587 17.9683 9.94846 17.9285 9.64527 17.869C8.96788 16.7314 8.49154 15.32 8.23143 13.7915C9.14211 13.9313 10.0746 14 11 14C11.0776 14 11.1553 13.9995 11.233 13.9985C11.5317 13.4256 11.9134 12.9028 12.362 12.446C11.9124 12.4819 11.4572 12.5 11 12.5C9.99255 12.5 8.99467 12.412 8.04468 12.2398C8.01497 11.8299 7.99999 11.4158 7.99999 11C7.99999 8.43848 8.56874 5.93887 9.64527 4.13099C10.0836 4.04504 10.5365 4 11 4C11.4837 4 11.9559 4.04906 12.412 4.14247C13.4391 5.75816 14 8.21118 14 10.8125C14 10.9534 13.9984 11.0942 13.9951 11.2348C14.4656 10.989 14.9701 10.7992 15.4995 10.6741C15.4852 8.6612 15.1574 6.6277 14.4787 4.92422ZM4.00348 10.7772C4.7367 11.2319 5.59055 11.6002 6.52061 11.8778C6.50684 11.5851 6.49999 11.2922 6.49999 11C6.49999 8.87912 6.86087 6.72104 7.61102 4.8736C5.51852 6.03359 4.08298 8.2345 4.00348 10.7772ZM7.61102 17.1264C7.15297 15.9983 6.84006 14.7544 6.66582 13.4739C5.78846 13.2499 4.94994 12.9532 4.17935 12.5813C4.6309 14.5368 5.9018 16.1789 7.61102 17.1264ZM22 17C22 19.7614 19.7614 22 17 22C14.2386 22 12 19.7614 12 17C12 14.2386 14.2386 12 17 12C19.7614 12 22 14.2386 22 17ZM19.7071 15.7071C20.0977 15.3166 20.0977 14.6834 19.7071 14.2929C19.3166 13.9024 18.6834 13.9024 18.2929 14.2929L15.2929 17.2929L16.7071 18.7071L19.7071 15.7071ZM14.9426 17.7567C15.0269 17.7368 15.1155 17.762 15.1768 17.8232L16.1768 18.8232C16.2381 18.8845 16.2632 18.9731 16.2433 19.0574C16.2234 19.1418 16.1613 19.2098 16.0791 19.2372L14.5791 19.7372C14.4892 19.7671 14.3902 19.7437 14.3232 19.6768C14.2563 19.6098 14.2329 19.5108 14.2628 19.4209L14.7628 17.9209C14.7902 17.8387 14.8582 17.7766 14.9426 17.7567Z"
+      fill="#5F6368"
+    />
+  </svg>
+</template>
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/icons/common/slider-icon.vue b/packages/extension/src/ui/action/icons/common/slider-icon.vue
new file mode 100644
index 000000000..e531f7194
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/common/slider-icon.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg
+    width="40"
+    height="40"
+    viewBox="0 0 40 40"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M23 15.5C23.8284 15.5 24.5 14.8284 24.5 14C24.5 13.1716 23.8284 12.5 23 12.5C22.1716 12.5 21.5 13.1716 21.5 14C21.5 14.8284 22.1716 15.5 23 15.5ZM23 17C24.3062 17 25.4175 16.1652 25.8293 15H27C27.5523 15 28 14.5523 28 14C28 13.4477 27.5523 13 27 13H25.8293C25.4175 11.8348 24.3062 11 23 11C21.6938 11 20.5825 11.8348 20.1707 13H13C12.4477 13 12 13.4477 12 14C12 14.5523 12.4477 15 13 15H20.1707C20.5825 16.1652 21.6938 17 23 17ZM19.8293 21C19.4175 22.1652 18.3062 23 17 23C15.6938 23 14.5825 22.1652 14.1707 21H13C12.4477 21 12 20.5523 12 20C12 19.4477 12.4477 19 13 19H14.1707C14.5825 17.8348 15.6938 17 17 17C18.3062 17 19.4175 17.8348 19.8293 19H27C27.5523 19 28 19.4477 28 20C28 20.5523 27.5523 21 27 21H19.8293ZM25.8293 25C25.4175 23.8348 24.3062 23 23 23C21.6938 23 20.5825 23.8348 20.1707 25H13C12.4477 25 12 25.4477 12 26C12 26.5523 12.4477 27 13 27H20.1707C20.5825 28.1652 21.6938 29 23 29C24.3062 29 25.4175 28.1652 25.8293 27H27C27.5523 27 28 26.5523 28 26C28 25.4477 27.5523 25 27 25H25.8293ZM24.5 26C24.5 26.8284 23.8284 27.5 23 27.5C22.1716 27.5 21.5 26.8284 21.5 26C21.5 25.1716 22.1716 24.5 23 24.5C23.8284 24.5 24.5 25.1716 24.5 26ZM18.5 20C18.5 20.8284 17.8284 21.5 17 21.5C16.1716 21.5 15.5 20.8284 15.5 20C15.5 19.1716 16.1716 18.5 17 18.5C17.8284 18.5 18.5 19.1716 18.5 20Z"
+      fill="#202124"
+    />
+  </svg>
+</template>
+
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/icons/common/test-network-icon.vue b/packages/extension/src/ui/action/icons/common/test-network-icon.vue
new file mode 100644
index 000000000..8f26f22c8
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/common/test-network-icon.vue
@@ -0,0 +1,39 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.00001 3C7.44773 3 7.00001 3.44772 7.00001 4C7.00001 4.55228 7.44773 5 8.00001 5H16C16.5523 5 17 4.55228 17 4C17 3.44772 16.5523 3 16 3H8.00001Z"
+      fill="#5F6368"
+    />
+    <path
+      d="M8.00001 12C7.44773 12 7.00001 12.4477 7.00001 13C7.00001 13.5523 7.44773 14 8.00001 14H16C16.5523 14 17 13.5523 17 13C17 12.4477 16.5523 12 16 12H8.00001Z"
+      fill="#5F6368"
+    />
+    <path
+      d="M8.00001 17C8.00001 16.4477 8.44773 16 9.00001 16C9.5523 16 10 16.4477 10 17C10 17.5523 9.5523 18 9.00001 18C8.44773 18 8.00001 17.5523 8.00001 17Z"
+      fill="#5F6368"
+    />
+    <path
+      d="M14 15C13.4477 15 13 15.4477 13 16C13 16.5523 13.4477 17 14 17C14.5523 17 15 16.5523 15 16C15 15.4477 14.5523 15 14 15Z"
+      fill="#5F6368"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M10 5V9.06816C10 9.09153 10.0001 9.11554 10.0001 9.14013C10.0006 9.41051 10.0013 9.75109 9.94234 10.0944C9.89114 10.3926 9.80628 10.6841 9.68936 10.9631C9.55477 11.2844 9.37138 11.5714 9.22578 11.7992C9.21253 11.82 9.1996 11.8402 9.18705 11.8599L5.81697 17.1557C5.28562 17.9907 4.96341 18.5008 4.76652 18.8834C4.75408 18.9076 4.74276 18.9301 4.73247 18.9511C4.75568 18.9537 4.78077 18.9562 4.80785 18.9587C5.23633 18.998 5.83966 19 6.82937 19H17.1707C18.1604 19 18.7637 18.998 19.1922 18.9587C19.2193 18.9562 19.2443 18.9537 19.2676 18.9511C19.2573 18.9301 19.2459 18.9076 19.2335 18.8834C19.0366 18.5008 18.7144 17.9907 18.1831 17.1557L14.813 11.8599C14.8004 11.8402 14.7875 11.82 14.7743 11.7992C14.6287 11.5714 14.4453 11.2844 14.3107 10.9631C14.1938 10.6841 14.1089 10.3926 14.0577 10.0944C13.9987 9.75109 13.9994 9.41051 13.9999 9.14013C14 9.11554 14 9.09153 14 9.06816V5H10ZM14.8996 5.00751L14.8978 5.00732L14.8996 5.00751ZM13.9927 4.10221L13.9925 4.10039L13.9927 4.10221ZM10.0073 4.1022L10.0075 4.10039L10.0073 4.1022ZM9.1004 5.00751L9.10218 5.00732L9.1004 5.00751ZM8.10901 3.54601C8.00001 3.75992 8.00001 4.03995 8.00001 4.6V9.06816C8.00001 9.41474 8.00001 9.58803 7.97118 9.756C7.94558 9.90511 7.90314 10.0508 7.84469 10.1904C7.77884 10.3476 7.6858 10.4938 7.49973 10.7862L4.12965 16.082C3.10952 17.6851 2.59946 18.4866 2.64891 19.1489C2.69201 19.7262 2.9831 20.2564 3.44695 20.6027C3.97919 21 4.92925 21 6.82937 21H17.1707C19.0708 21 20.0208 21 20.5531 20.6027C21.0169 20.2564 21.308 19.7262 21.3511 19.1489C21.4006 18.4866 20.8905 17.6851 19.8704 16.082L16.5003 10.7862C16.3142 10.4938 16.2212 10.3476 16.1553 10.1904C16.0969 10.0508 16.0544 9.90511 16.0289 9.756C16 9.58803 16 9.41474 16 9.06816V4.6C16 4.03995 16 3.75992 15.891 3.54601C15.7951 3.35785 15.6422 3.20487 15.454 3.10899C15.2401 3 14.9601 3 14.4 3H9.60001C9.03996 3 8.75994 3 8.54602 3.10899C8.35786 3.20487 8.20488 3.35785 8.10901 3.54601Z"
+      fill="#5F6368"
+    />
+  </svg>
+</template>
+
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/icons/password/visible-icon.vue b/packages/extension/src/ui/action/icons/password/visible-icon.vue
new file mode 100644
index 000000000..7f22bd021
--- /dev/null
+++ b/packages/extension/src/ui/action/icons/password/visible-icon.vue
@@ -0,0 +1,20 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M8.00002 2.66675C4.66669 2.66675 1.82002 4.74008 0.666687 7.66675C1.82002 10.5934 4.66669 12.6667 8.00002 12.6667C11.3334 12.6667 14.18 10.5934 15.3334 7.66675C14.18 4.74008 11.3334 2.66675 8.00002 2.66675ZM8.00002 11.0001C6.16002 11.0001 4.66669 9.50675 4.66669 7.66675C4.66669 5.82675 6.16002 4.33341 8.00002 4.33341C9.84002 4.33341 11.3334 5.82675 11.3334 7.66675C11.3334 9.50675 9.84002 11.0001 8.00002 11.0001ZM8.00002 5.66675C6.89335 5.66675 6.00002 6.56008 6.00002 7.66675C6.00002 8.77341 6.89335 9.66675 8.00002 9.66675C9.10669 9.66675 10 8.77341 10 7.66675C10 6.56008 9.10669 5.66675 8.00002 5.66675Z"
+      fill="#5F6368"
+    />
+  </svg>
+</template>
+<style scoped>
+svg {
+  display: inline-block;
+  vertical-align: baseline;
+}
+</style>
diff --git a/packages/extension/src/ui/action/views/accounts/components/accounts-list-item.vue b/packages/extension/src/ui/action/views/accounts/components/accounts-list-item.vue
index f555e87ee..e58eb1851 100644
--- a/packages/extension/src/ui/action/views/accounts/components/accounts-list-item.vue
+++ b/packages/extension/src/ui/action/views/accounts/components/accounts-list-item.vue
@@ -97,8 +97,6 @@ defineProps({
   }
 
   &__info {
-    font-variant: small-caps;
-
     &-name {
       font-style: normal;
       font-weight: 500;
diff --git a/packages/extension/src/ui/action/views/add-network/components/add-network-header.vue b/packages/extension/src/ui/action/views/add-network/components/add-network-header.vue
index b9b2c5d55..8d06774ad 100644
--- a/packages/extension/src/ui/action/views/add-network/components/add-network-header.vue
+++ b/packages/extension/src/ui/action/views/add-network/components/add-network-header.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="add-network__header">
-    <h2>Add network</h2>
+  <div class="add-network__header" :class="{ border: isScroll }">
+    <h3>Manage networks {{ isScroll }}</h3>
 
     <a class="add-network__close" @click="close()">
       <close-icon />
@@ -22,6 +22,10 @@ defineProps({
     type: Function,
     default: () => ({}),
   },
+  isScroll: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
@@ -31,12 +35,13 @@ defineProps({
 .add-network {
   &__header {
     width: 100%;
-    height: 68px;
     background: @white;
     box-sizing: border-box;
     padding: 24px 72px 12px 32px;
+    position: relative;
+    z-index: 4;
 
-    h2 {
+    h3 {
       font-style: normal;
       font-weight: bold;
       font-size: 24px;
@@ -44,6 +49,17 @@ defineProps({
       margin: 0;
       color: @primaryLabel;
     }
+
+    &.border {
+      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05),
+        0px 0px 1px rgba(0, 0, 0, 0.25);
+      padding: 14px 72px 12px 32px;
+
+      h3 {
+        font-size: 20px;
+        line-height: 28px;
+      }
+    }
   }
 
   &__close {
@@ -52,6 +68,7 @@ defineProps({
     right: 8px;
     border-radius: 8px;
     cursor: pointer;
+    font-size: 0;
 
     &:hover {
       background: @black007;
diff --git a/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue b/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
index e8976b65b..a1dad460b 100644
--- a/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
+++ b/packages/extension/src/ui/action/views/add-network/components/add-network-search.vue
@@ -4,7 +4,18 @@
       <base-search :input="searchInput" :is-border="true" />
     </div>
     <div class="add-network__search-add">
-      <base-button title="Custom network" :click="action" />
+      <a @click="action">
+        <slider-icon />
+      </a>
+    </div>
+    <div v-show="openList" class="add-network__search-list">
+      <a class="add-network__search-list-item">
+        <custom-network-icon /><span>Custom network</span>
+      </a>
+      <div class="add-network__search-list-item">
+        <test-network-icon /><span>Show testnets</span>
+        <Switch :check="testNetwork" :is-checked="false" />
+      </div>
     </div>
   </div>
 </template>
@@ -16,8 +27,14 @@ export default {
 </script>
 
 <script setup lang="ts">
+import { ref } from "vue";
 import BaseSearch from "@action/components/base-search/index.vue";
-import BaseButton from "@action/components/base-button/index.vue";
+import SliderIcon from "@action/icons/common/slider-icon.vue";
+import CustomNetworkIcon from "@action/icons/common/custom-network-icon.vue";
+import TestNetworkIcon from "@action/icons/common/test-network-icon.vue";
+import Switch from "@action/components/switch/index.vue";
+
+let openList = ref(false);
 
 const props = defineProps({
   input: {
@@ -33,7 +50,11 @@ const searchInput = (text: string) => {
 };
 
 const action = () => {
-  console.log("Custom network action");
+  openList.value = !openList.value;
+};
+
+const testNetwork = () => {
+  console.log("testNetwork");
 };
 </script>
 
@@ -51,14 +72,74 @@ const action = () => {
     justify-content: space-between;
     align-items: center;
     flex-direction: row;
+    position: relative;
 
     &-input {
-      width: 238px;
-      margin-right: 16px;
+      width: 348px;
+      margin-right: 8px;
     }
 
     &-add {
-      width: 142px;
+      width: 40px;
+      font-size: 0;
+      border-radius: 8px;
+
+      &:hover {
+        background: @black007;
+      }
+
+      a {
+        cursor: pointer;
+      }
+    }
+
+    &-list {
+      width: 256px;
+      height: 104px;
+      background: @white;
+      box-shadow: 0px 0.5px 5px rgba(0, 0, 0, 0.039),
+        0px 3.75px 11px rgba(0, 0, 0, 0.19);
+      border-radius: 12px;
+      position: absolute;
+      top: 52px;
+      right: 0;
+      z-index: 4;
+      padding: 4px;
+      box-sizing: border-box;
+
+      &-item {
+        width: 100%;
+        height: 48px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: row;
+        cursor: pointer;
+
+        &:hover,
+        &.active {
+          background: rgba(0, 0, 0, 0.04);
+          border-radius: 8px;
+        }
+
+        svg {
+          margin-right: 12px;
+          margin-left: 12px;
+        }
+
+        span {
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 20px;
+          letter-spacing: 0.25px;
+          color: @primaryLabel;
+        }
+
+        .switch {
+          margin-left: 52px;
+        }
+      }
     }
   }
 }
diff --git a/packages/extension/src/ui/action/views/add-network/index.vue b/packages/extension/src/ui/action/views/add-network/index.vue
index 7109e5c24..e8c0cd379 100644
--- a/packages/extension/src/ui/action/views/add-network/index.vue
+++ b/packages/extension/src/ui/action/views/add-network/index.vue
@@ -2,8 +2,22 @@
   <div class="add-network__container">
     <div class="add-network__overlay" @click="close()"></div>
     <div class="add-network__wrap">
-      <add-network-header :close="close" />
-      <custom-scrollbar class="add-network__scroll-area" :settings="settings">
+      <div
+        class="add-network__header"
+        :class="{ border: isHasScroll() && scrollProgress > 0 }"
+      >
+        <h3>Manage networks</h3>
+
+        <a class="add-network__close" @click="close()">
+          <close-icon />
+        </a>
+      </div>
+      <custom-scrollbar
+        ref="manageNetworkScrollRef"
+        class="add-network__scroll-area"
+        :settings="settings"
+        @ps-scroll-y="handleScroll"
+      >
         <add-network-search :input="search" />
 
         <h3 class="add-network__list-header">Popular</h3>
@@ -35,7 +49,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import AddNetworkHeader from "./components/add-network-header.vue";
+import { ref, defineExpose } from "vue";
+import CloseIcon from "@action/icons/common/close-icon.vue";
 import AddNetworkSearch from "./components/add-network-search.vue";
 import AddNetworkItem from "./components/add-network-item.vue";
 import CustomScrollbar from "@action/components/custom-scrollbar/index.vue";
@@ -50,7 +65,10 @@ const popular = getAllNetworks().filter((net) =>
   popularNames.includes(net.name)
 );
 const all = getAllNetworks();
+let scrollProgress = ref(0);
+const manageNetworkScrollRef = ref(null);
 
+defineExpose({ manageNetworkScrollRef });
 defineProps({
   close: {
     type: Function,
@@ -61,6 +79,20 @@ defineProps({
 const search = (value: string) => {
   console.log(value);
 };
+const handleScroll = (e: any) => {
+  let progress = Number(e.target.lastChild.style.top.replace("px", ""));
+  scrollProgress.value = progress;
+  console.log(isHasScroll() && scrollProgress.value > 0);
+};
+const isHasScroll = () => {
+  if (manageNetworkScrollRef.value) {
+    return (manageNetworkScrollRef.value as HTMLElement).$el.classList.contains(
+      "ps--active-y"
+    );
+  }
+
+  return false;
+};
 </script>
 
 <style lang="less" scoped>
@@ -72,6 +104,48 @@ const search = (value: string) => {
   height: auto;
   box-sizing: border-box;
 
+  &__header {
+    width: 100%;
+    background: @white;
+    box-sizing: border-box;
+    padding: 24px 72px 12px 32px;
+    position: relative;
+    z-index: 4;
+
+    h3 {
+      font-style: normal;
+      font-weight: bold;
+      font-size: 24px;
+      line-height: 32px;
+      margin: 0;
+      color: @primaryLabel;
+    }
+
+    &.border {
+      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.05),
+        0px 0px 1px rgba(0, 0, 0, 0.25);
+      padding: 14px 72px 12px 32px;
+
+      h3 {
+        font-size: 20px;
+        line-height: 28px;
+      }
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 0;
+
+    &:hover {
+      background: @black007;
+    }
+  }
+
   &__wrap {
     background: @white;
     box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.039),
diff --git a/packages/extension/src/ui/action/views/deposit/index.vue b/packages/extension/src/ui/action/views/deposit/index.vue
index e64b8f22e..8f49a7e9d 100644
--- a/packages/extension/src/ui/action/views/deposit/index.vue
+++ b/packages/extension/src/ui/action/views/deposit/index.vue
@@ -164,6 +164,7 @@ const copy = (address: string) => {
     right: 8px;
     border-radius: 8px;
     cursor: pointer;
+    font-size: 0;
 
     &:hover {
       background: @black007;
diff --git a/packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue b/packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue
index 66dc0f8e1..ce1085e1d 100644
--- a/packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue
+++ b/packages/extension/src/ui/action/views/network-activity/components/network-activity-action.vue
@@ -5,11 +5,11 @@
         class="network-activity__action-item"
         @click="(depositAction as ()=>void)"
       >
-        <Deposit /><br />Deposit
+        <Deposit />Deposit
       </a>
       <div class="network-activity__action-devider"></div>
       <a class="network-activity__action-item" @click="(buyAction as ()=>void)">
-        <Buy /><br />Buy
+        <Buy />Buy
       </a>
       <div class="network-activity__action-devider"></div>
       <router-link
@@ -19,7 +19,7 @@
         }"
         class="network-activity__action-item"
       >
-        <Send /><br />Send
+        <Send />Send
       </router-link>
       <div class="network-activity__action-devider"></div>
       <router-link
@@ -29,7 +29,7 @@
           params: { id: !!selected ? selected : null },
         }"
       >
-        <Swap /><br />Swap
+        <Swap />Swap
       </router-link>
     </div>
   </div>
@@ -90,6 +90,8 @@ defineProps({
       justify-content: space-around;
       align-items: center;
       flex-direction: row;
+      padding: 4px;
+      box-sizing: border-box;
     }
     &-item {
       display: block;
@@ -102,8 +104,18 @@ defineProps({
       text-align: center;
       letter-spacing: 0.5px;
       color: @primaryLabel;
-      width: 100px;
       cursor: pointer;
+      height: 64px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      min-width: 100px;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.04);
+        border-radius: 8px;
+      }
 
       svg {
         margin-bottom: 0;
@@ -113,6 +125,7 @@ defineProps({
       height: 48px;
       width: 1px;
       background: @darkBg;
+      margin: 0 4px 0 4px;
     }
   }
 }
diff --git a/packages/extension/src/ui/action/views/network-nfts/components/network-nfts-category.vue b/packages/extension/src/ui/action/views/network-nfts/components/network-nfts-category.vue
index 41bff4039..db1f84b48 100644
--- a/packages/extension/src/ui/action/views/network-nfts/components/network-nfts-category.vue
+++ b/packages/extension/src/ui/action/views/network-nfts/components/network-nfts-category.vue
@@ -71,6 +71,7 @@ defineProps({
       justify-content: flex-start;
       align-items: flex-start;
       flex-direction: row;
+      flex-wrap: wrap;
     }
   }
 }
diff --git a/packages/extension/src/ui/action/views/network-nfts/components/network-nfts-item.vue b/packages/extension/src/ui/action/views/network-nfts/components/network-nfts-item.vue
index 44d228532..c34f40134 100644
--- a/packages/extension/src/ui/action/views/network-nfts/components/network-nfts-item.vue
+++ b/packages/extension/src/ui/action/views/network-nfts/components/network-nfts-item.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="network-nfts__item">
-    <img :src="item.image" alt="" @error="imageLoadError" />
+    <div class="network-nfts__item-image">
+      <img :src="item.image" alt="" @error="imageLoadError" />
+    </div>
     <h4>{{ item.name }}</h4>
     <p>{{ $filters.formatFiatValue(item.valueUSD).value }} <span>USD</span></p>
   </div>
@@ -42,9 +44,16 @@ defineProps({
       margin-right: 0;
     }
 
+    &-image {
+      border-radius: 12px;
+      width: 128px;
+      height: 128px;
+      background: @buttonBg;
+    }
+
     img {
       border-radius: 12px;
-      max-width: 128px;
+      width: 128px;
     }
 
     h4 {
diff --git a/packages/extension/src/ui/action/views/swap-best-offer/index.vue b/packages/extension/src/ui/action/views/swap-best-offer/index.vue
index 7b5530b2b..88b92f602 100644
--- a/packages/extension/src/ui/action/views/swap-best-offer/index.vue
+++ b/packages/extension/src/ui/action/views/swap-best-offer/index.vue
@@ -38,7 +38,7 @@
 
       <div class="swap-best-offer__buttons" :class="{ border: isHasScroll() }">
         <div class="swap-best-offer__buttons-cancel">
-          <base-button title="Back" :click="back" :gray="true" />
+          <base-button title="Back" :click="back" :no-background="true" />
         </div>
         <div class="swap-best-offer__buttons-send">
           <base-button
@@ -63,7 +63,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { defineProps, ref } from "vue";
+import { defineProps, defineExpose, ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import CloseIcon from "@action/icons/common/close-icon.vue";
 import BaseButton from "@action/components/base-button/index.vue";
diff --git a/packages/extension/src/ui/action/views/swap/index.vue b/packages/extension/src/ui/action/views/swap/index.vue
index d71b2ac7e..96f6b2340 100644
--- a/packages/extension/src/ui/action/views/swap/index.vue
+++ b/packages/extension/src/ui/action/views/swap/index.vue
@@ -28,7 +28,11 @@
 
         <div class="swap__buttons">
           <div class="swap__buttons-cancel">
-            <base-button title="Cancel" :gray="true" @click="$router.go(-1)" />
+            <base-button
+              title="Cancel"
+              :no-background="true"
+              @click="$router.go(-1)"
+            />
           </div>
           <div class="swap__buttons-send">
             <base-button
diff --git a/packages/extension/src/ui/onboard/create-wallet/recovery-phrase.vue b/packages/extension/src/ui/onboard/create-wallet/recovery-phrase.vue
index 1e5fa2878..ff70239b3 100644
--- a/packages/extension/src/ui/onboard/create-wallet/recovery-phrase.vue
+++ b/packages/extension/src/ui/onboard/create-wallet/recovery-phrase.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="recovery-phrase">
-    <h3>Secret recovery phrase</h3>
+    <h3>Your secret recovery phrase</h3>
     <p>
       Write it down on paper. Resist temptation to email it to yourself or
       screenshot it.