From d196c35dc855aa37f26959aaaef803ce6151aac4 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Mon, 8 May 2023 23:33:32 +0800
Subject: [PATCH] feat: contracts UI refactor

---
 .../[chain]/cosmwasm/[code_id]/contracts.vue  | 56 +++++++++++--------
 src/modules/[chain]/gov/[proposal_id].vue     |  2 +-
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
index 05ece808..2785e1ad 100644
--- a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
+++ b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
@@ -93,29 +93,39 @@ const result = ref('');
 </script>
 <template>
   <div>
-    <VCard>
-      <VCardTitle>Contract List of Code: {{ props.code_id }}</VCardTitle>
-      <VTable>
-        <thead>
-          <tr>
-            <th>Contract List</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="v in response.contracts">
-            <td>{{ v }}</td>
-            <td>
-              <VBtn size="small" @click="showInfo(v)">contract</VBtn>
-              <VBtn size="small" @click="showState(v)" class="ml-2"
-                >States</VBtn
-              >
-              <VBtn size="small" @click="showQuery(v)" class="ml-2">Query</VBtn>
-            </td>
-          </tr>
-        </tbody>
-      </VTable>
-    </VCard>
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+      <h2 class="card-title truncate w-full">Contract List of Code: {{ props.code_id }}</h2>
+      <div class="overflow-x-auto">
+        <table class="table  w-full mt-4">
+          <thead>
+            <tr>
+              <th style="position: relative;">Contract List</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="v in response.contracts">
+              <td>{{ v }}</td>
+              <td>
+                <button
+                  class="btn btn-primary btn-sm text-xs mr-2"
+                  @click="showInfo(v)"
+                  >contract</button>
+                <button
+                  class="btn btn-primary btn-sm text-xs mr-2"
+                  @click="showState(v)"
+                >States</button>
+                <button
+                  class="btn btn-primary btn-sm text-xs"
+                  @click="showQuery(v)"
+                >Query</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+   
     <v-dialog v-model="infoDialog" width="auto">
       <v-card>
         <VCardTitle>Contract Detail</VCardTitle>
diff --git a/src/modules/[chain]/gov/[proposal_id].vue b/src/modules/[chain]/gov/[proposal_id].vue
index e3df4e6b..6272ba65 100644
--- a/src/modules/[chain]/gov/[proposal_id].vue
+++ b/src/modules/[chain]/gov/[proposal_id].vue
@@ -291,7 +291,7 @@ const processList = computed(()=>{
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
         <h2 class="card-title">Votes</h2>
         <div class="overflow-x-auto">
-            <table class="table  w-full ">
+            <table class="table  w-full">
                 <tbody>
                     <tr v-for="(item,index) of votes" :key="index">
                         <td>{{ item.voter }}</td>