From 53481bad37ab5f6e26c8c4e3f7711048ed4d531e Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 12 May 2023 21:26:36 +0800
Subject: [PATCH] feat: account vchip ui refactor

---
 src/modules/[chain]/account/[address].vue | 36 +++++++++++++++--------
 src/modules/[chain]/tx/[hash].vue         | 13 ++++++--
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/modules/[chain]/account/[address].vue b/src/modules/[chain]/account/[address].vue
index 1bd81e36..01819f07 100644
--- a/src/modules/[chain]/account/[address].vue
+++ b/src/modules/[chain]/account/[address].vue
@@ -130,9 +130,12 @@ loadAccount(props.address);
                   ≈${{ 0 }}
                 </VListItemSubtitle>
                 <template #append>
-                  <VChip color="primary">{{
-                    format.calculatePercent(v.amount, totalAmount)
-                  }}</VChip>
+                  <div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2">
+                    <span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span>
+                    {{
+                      format.calculatePercent(v.amount, totalAmount)
+                    }}
+                  </div>
                 </template>
               </VListItem>
               <VListItem v-for="v in delegations">
@@ -149,9 +152,12 @@ loadAccount(props.address);
                   ≈${{ 0 }}
                 </VListItemSubtitle>
                 <template #append>
-                  <VChip color="primary">{{
-                    format.calculatePercent(v.balance.amount, totalAmount)
-                  }}</VChip>
+                  <div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2">
+                    <span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span>
+                    {{
+                      format.calculatePercent(v.balance.amount, totalAmount)
+                    }}
+                  </div>
                 </template>
               </VListItem>
               <VListItem v-for="v in rewards.total">
@@ -168,9 +174,12 @@ loadAccount(props.address);
                   ≈${{ 0 }}
                 </VListItemSubtitle>
                 <template #append>
-                  <VChip color="primary">{{
-                    format.calculatePercent(v.amount, totalAmount)
-                  }}</VChip>
+                  <div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2">
+                    <span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span>
+                    {{
+                      format.calculatePercent(v.amount, totalAmount)
+                    }}
+                  </div>
                 </template>
               </VListItem>
 
@@ -193,9 +202,12 @@ loadAccount(props.address);
                   ≈${{ 0 }}
                 </VListItemSubtitle>
                 <template #append>
-                  <VChip color="primary">{{
-                    format.calculatePercent(unbondingTotal, totalAmount)
-                  }}</VChip>
+                   <div class="text-xs truncate relative py-2 px-4 rounded-full w-fit text-primary mr-2">
+                    <span class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary"></span>
+                    {{
+                      format.calculatePercent(unbondingTotal, totalAmount)
+                    }}
+                  </div>
                 </template>
               </VListItem>
             </VList>
diff --git a/src/modules/[chain]/tx/[hash].vue b/src/modules/[chain]/tx/[hash].vue
index faaee073..1dc086ef 100644
--- a/src/modules/[chain]/tx/[hash].vue
+++ b/src/modules/[chain]/tx/[hash].vue
@@ -49,10 +49,17 @@ const messages = computed(() => {
             <tr>
               <td>Status</td>
               <td>
-                <VChip v-if="tx.tx_response.code === 0" color="success"
-                  >Success</VChip
+                <VChip color="primary">oioio</VChip>
+                <div
+                  class="text-xs truncate relative py-2 px-4 rounded-full w-fit mr-2"
+                  :class="`text-${tx.tx_response.code === 0 ? 'success': 'error'}`"
                 >
-                <span v-else><VChip color="error">Failded</VChip></span>
+                  <span 
+                    class="inset-x-0 inset-y-0 opacity-10 absolute"
+                    :class="`bg-${tx.tx_response.code === 0 ? 'success': 'error'}`"
+                  ></span>
+                  {{ tx.tx_response.code === 0 ? 'Success': 'Failded' }}
+                </div>
               </td>
             </tr>
             <tr>