From b57db735ed32f2a654fe7703b445f8bc74a7cace Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Tue, 9 May 2023 22:01:12 +0800
Subject: [PATCH] feat: button style refactor

---
 src/modules/[chain]/block/index.vue                  |  8 ++++----
 src/modules/[chain]/cosmwasm/[code_id]/contracts.vue |  2 ++
 src/modules/[chain]/gov/[proposal_id].vue            |  8 +++++++-
 src/modules/[chain]/ibc/index.vue                    | 11 ++++++++++-
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/modules/[chain]/block/index.vue b/src/modules/[chain]/block/index.vue
index 72288a7f..a3dc369b 100644
--- a/src/modules/[chain]/block/index.vue
+++ b/src/modules/[chain]/block/index.vue
@@ -38,8 +38,8 @@ const format = useFormatter();
             <th>Time</th>
           </tr>
         </thead>
-        <tbody>
-          <tr v-for="(item,index) of store.recents" :key="index">
+        <tbody  v-if="store.recents &&  store.recents.length > 0" >
+          <tr v-for="(item, index) in store.recents" :key="index">
             <td class="text-sm text-primary">
               <RouterLink
                 :to="`/${props.chain}/block/${item.block?.header?.height}`"
@@ -69,8 +69,8 @@ const format = useFormatter();
             <th>Fees</th>
           </tr>
         </thead>
-        <tbody>
-          <tr v-for="(item,index) of store.txsInRecents" :key="index">
+        <tbody v-if="store.txsInRecents &&  store.txsInRecents.length > 0" >
+          <tr v-for="(item,index) in store.txsInRecents" :index="index">
             <td>
               <RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
                 item.hash
diff --git a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
index 2785e1ad..bdaf12a8 100644
--- a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
+++ b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
@@ -139,6 +139,7 @@ const result = ref('');
         </v-card-actions>
       </v-card>
     </v-dialog>
+
     <v-dialog v-model="stateDialog" width="auto">
       <v-card>
         <VCardTitle>Contract States</VCardTitle>
@@ -159,6 +160,7 @@ const result = ref('');
         </v-card-actions>
       </v-card>
     </v-dialog>
+    
     <v-dialog v-model="queryDialog" width="auto">
       <v-card>
         <VCardTitle>Query Contract</VCardTitle>
diff --git a/src/modules/[chain]/gov/[proposal_id].vue b/src/modules/[chain]/gov/[proposal_id].vue
index 6272ba65..39d0b75c 100644
--- a/src/modules/[chain]/gov/[proposal_id].vue
+++ b/src/modules/[chain]/gov/[proposal_id].vue
@@ -300,7 +300,13 @@ const processList = computed(()=>{
                 </tbody>
             </table>
 
-            <VBtn v-if="votePage.next_key" block variant="outlined" @click="loadMore()" :disabled="loading">Load more</VBtn>
+            <button
+                v-if="votePage.next_key" 
+                @click="loadMore()"
+                :disabled="loading"
+                class="btn btn-outline btn-primary w-full"
+                style="border: 1px solid hsl(var(--p));"
+            >Load more</button>
         </div>
     </div>
 </div>
diff --git a/src/modules/[chain]/ibc/index.vue b/src/modules/[chain]/ibc/index.vue
index 1ccd9fe3..b403962f 100644
--- a/src/modules/[chain]/ibc/index.vue
+++ b/src/modules/[chain]/ibc/index.vue
@@ -48,7 +48,16 @@ function color(v: string) {
               </td>
               <td>{{ v.delay_period }}</td>
               <td>
-                <VChip :color="color(v.state)">{{ v.state }}</VChip>
+                <div 
+                  class="text-xs truncate relative py-2 px-4 rounded-full w-fit"
+                  :class="`text-${color(v.state)}`"
+                >
+                  <span 
+                    class="inset-x-0 inset-y-0 opacity-10 absolute"
+                    :class="`bg-${color(v.state)}`"
+                  ></span>
+                  {{ v.state }}
+                </div>
               </td>
             </tr>
           </tbody>