From 460345b3454f5fddedad0619c7ec7007b90c9d7e Mon Sep 17 00:00:00 2001
From: Jarsen <695552027@qq.com>
Date: Mon, 14 Aug 2023 09:45:40 +0800
Subject: [PATCH] fix: UI issue

---
 components/transfer/Transfer.vue             |  7 ++--
 components/transfer/TransferConfirmModal.vue | 34 +++++++++++---------
 locales/en.json                              |  3 +-
 3 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/components/transfer/Transfer.vue b/components/transfer/Transfer.vue
index 8fb5c2fb6a..38c2f0a5a4 100644
--- a/components/transfer/Transfer.vue
+++ b/components/transfer/Transfer.vue
@@ -26,7 +26,7 @@
 
     <div class="is-flex mb-5">
       <div class="token-price py-2 px-4 is-flex is-align-items-center">
-        <img class="mr-2 is-20x20" :src="tokenIcon" alt="token" />
+        <img class="mr-2 square-20" :src="tokenIcon" alt="token" />
         {{ unit }} ${{ currentTokenValue }}
       </div>
     </div>
@@ -563,7 +563,10 @@ watch(
     width: 32px;
     height: 32px;
   }
-
+  .square-20 {
+    width: 20px;
+    height: 20px;
+  }
   .fixed-height {
     height: 51px;
   }
diff --git a/components/transfer/TransferConfirmModal.vue b/components/transfer/TransferConfirmModal.vue
index 3f051a194d..9635a2a13a 100644
--- a/components/transfer/TransferConfirmModal.vue
+++ b/components/transfer/TransferConfirmModal.vue
@@ -3,44 +3,48 @@
     <div
       class="modal-width is-flex is-flex-direction-column is-justify-content-space-between">
       <div>
-        <div
+        <header
           class="is-flex is-justify-content-center is-align-items-center header px-6 py-3">
           <span class="is-size-5 has-text-weight-bold">
             {{ $t('teleport.send') }}
             <span class="is-uppercase">{{ unit }}</span>
           </span>
-          <NeoIcon
-            class="position-right is-clickable mr-6"
+          <NeoButton
+            class="position-right mr-6"
+            variant="text"
             icon="close"
-            pack="fas"
+            no-shadow
+            icon-pack="fas"
             @click.native="closeModal" />
-        </div>
+        </header>
         <div
-          class="px-6 is-scrollable"
-          :class="{
-            'is-bordered-top': isExpandList,
-          }">
+          :class="[
+            {
+              'is-bordered-top': isExpandList,
+            },
+            'px-6 is-scrollable',
+          ]">
           <div
             class="is-flex is-justify-content-space-between is-align-items-center py-4">
             <span class="has-text-weight-bold is-size-6">{{
-              $t('transfers.network')
+              $t('activity.network')
             }}</span>
-            <div class="is-flex is-align-items-center">
-              <img class="mr-2 is-24x24" :src="tokenIcon" alt="token" />
+            <span class="is-flex is-align-items-center">
+              <img class="mr-2 image is-24x24" :src="tokenIcon" alt="token" />
               {{ network }}
-            </div>
+            </span>
           </div>
           <div
             class="is-flex is-justify-content-space-between is-align-items-center py-4 is-bordered-top">
             <span class="has-text-weight-bold is-size-6 is-capitalized">{{
               $t('general.from')
             }}</span>
-            <div class="is-flex is-align-items-center">
+            <span class="is-flex is-align-items-center">
               <Avatar :value="accountId" :size="24" />
               <span class="ml-2 is-size-6">
                 <Identity :address="accountId" hide-identity-popover />
               </span>
-            </div>
+            </span>
           </div>
 
           <div
diff --git a/locales/en.json b/locales/en.json
index 666fff17ab..4755fa4ea4 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -98,11 +98,10 @@
     "addAddress": "Add recipient",
     "payMeLink": "Pay me link",
     "setSameAmount": "Set one amount that will be sent to all recipients",
-    "network": "Network",
     "sendTo": "Sending to",
     "recipients": "recipients",
     "totalAmount": "Total Amount",
-     "transferable": "Transferable"
+    "transferable": "Transferable"
   },
   "topCollections": {
     "timeFrames": {