From ed43d109f099725d5cfdc8b4946225d25702b227 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sat, 6 May 2023 17:22:10 +0800
Subject: [PATCH] feat: Ibc UI refactor

---
 src/modules/[chain]/block/[height].vue      |  2 +-
 src/modules/[chain]/gov/[proposal_id].vue   | 16 -----------
 src/modules/[chain]/ibc/[connection_id].vue | 31 +++++++++++++--------
 3 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/src/modules/[chain]/block/[height].vue b/src/modules/[chain]/block/[height].vue
index cd632820..77daca25 100644
--- a/src/modules/[chain]/block/[height].vue
+++ b/src/modules/[chain]/block/[height].vue
@@ -60,7 +60,7 @@ onBeforeRouteUpdate(async (to, from, next) => {
     </div>
 
 
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
       <h2 class="card-title flex flex-row justify-between">
         Last Commit
       </h2>
diff --git a/src/modules/[chain]/gov/[proposal_id].vue b/src/modules/[chain]/gov/[proposal_id].vue
index 8f3c2bfe..7428ca55 100644
--- a/src/modules/[chain]/gov/[proposal_id].vue
+++ b/src/modules/[chain]/gov/[proposal_id].vue
@@ -303,21 +303,5 @@ const processList = computed(()=>{
         </table>
         <VBtn v-if="votePage.next_key" block variant="outlined" @click="loadMore()" :disabled="loading">Load more</VBtn>
     </div>
-    <!-- <VCard>
-        <VCardItem>
-            <VCardTitle>
-                Votes
-            </VCardTitle>
-            <VTable>
-                <tbody>
-                    <tr v-for="x in votes">
-                        <td>{{ x.voter }}</td>
-                        <td>{{ x.option }}</td>
-                    </tr>
-                </tbody>
-            </VTable>
-            <VBtn v-if="votePage.next_key" block variant="outlined" @click="loadMore()" :disabled="loading">Load more</VBtn>
-        </VCardItem>
-    </VCard> -->
 </div>
 </template>
diff --git a/src/modules/[chain]/ibc/[connection_id].vue b/src/modules/[chain]/ibc/[connection_id].vue
index e4373d1e..9a3974ee 100644
--- a/src/modules/[chain]/ibc/[connection_id].vue
+++ b/src/modules/[chain]/ibc/[connection_id].vue
@@ -41,7 +41,7 @@ function color(v: string) {
 </script>
 <template>
     <div>
-        <div class="bg-white py-24 sm:py-32">
+        <div class="px-4 pt-3 pb-4 bg-base-100  rounded mb-4 shadow py-24 sm:py-32">
             <div class="mx-auto max-w-7xl px-6 lg:px-8">
                 <dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
                 <div class="mx-auto flex max-w-xs flex-col gap-y-4">
@@ -60,9 +60,10 @@ function color(v: string) {
                 </dl>
             </div>                        
         </div>
-        <VCard class="my-2">
-            <VCardTitle>IBC Client State</VCardTitle>
-            <VCardText>
+
+        <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+            <h2 class="card-title">IBC Client State </h2>
+            <div class="text-sm">
                 <br>update after expiry: {{ clientState.client_state?.allow_update_after_expiry }}
                 <br>allow_update_after_misbehaviour: {{ clientState.client_state?.allow_update_after_misbehaviour }}
                 <br>trust_level: {{ clientState.client_state?.trust_level?.numerator }}/{{ clientState.client_state?.trust_level?.denominator }}
@@ -73,14 +74,20 @@ function color(v: string) {
                 <br>type: {{ clientState.client_state?.['@type'] }}
                 <br>upgrade_path: {{ clientState.client_state?.upgrade_path }}
                 <br> {{ clientState.client_state?.max_clock_drift }}
-            </VCardText>
-        </VCard>
+            </div>
+        </div>
 
-        <VCard class="my-2">
-            <VCardTitle>Channels</VCardTitle>
-            <VTable>
+        <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+            <h2 class="card-title">Channels </h2>
+            <table class="table w-full mt-4">
                 <thead>
-                    <tr><th>Channel Id</th><th>Port Id</th><th>Counterparty</th><th>Hops</th><th>Version</th><th>Ordering</th><th>State</th></tr>
+                    <tr><th>Channel Id</th>
+                        <th>Port Id</th>
+                        <th>Counterparty</th>
+                        <th>Hops</th>
+                        <th>Version</th>
+                        <th>Ordering</th>
+                        <th>State</th></tr>
                 </thead>
                 <tbody>
                     <tr v-for="v in channels">
@@ -93,7 +100,7 @@ function color(v: string) {
                         <td><VChip :color="color(v.state)">{{ v.state }}</VChip></td>
                     </tr>
                 </tbody>
-            </VTable>
-        </VCard> 
+            </table>
+         </div>
     </div>
 </template>