From c02c39cd0fb5fa714f88916f71901a54f341a900 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 12 May 2023 20:58:22 +0800
Subject: [PATCH] feat: tx page ui refactor

---
 src/modules/[chain]/tx/[hash].vue | 52 +++++++++++++++++++------------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/modules/[chain]/tx/[hash].vue b/src/modules/[chain]/tx/[hash].vue
index 7d17492e..faaee073 100644
--- a/src/modules/[chain]/tx/[hash].vue
+++ b/src/modules/[chain]/tx/[hash].vue
@@ -25,10 +25,14 @@ const messages = computed(() => {
 </script>
 <template>
   <div>
-    <VCard v-if="tx.tx_response" title="Summary">
-      <VCardItem class="pt-0">
-        <VTable>
-          <tbody>
+    <div
+      v-if="tx.tx_response"
+      class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4"
+    >
+      <h2 class="card-title truncate mb-2">Summary</h2>
+      <div class="overflow-auto-x">
+      <table class="table text-sm">
+        <tbody>
             <tr>
               <td>Tx Hash</td>
               <td>{{ tx.tx_response.txhash }}</td>
@@ -82,23 +86,31 @@ const messages = computed(() => {
               <td>{{ tx.tx.body.memo }}</td>
             </tr>
           </tbody>
-        </VTable>
-      </VCardItem>
-    </VCard>
+        </table>
+      </div>
 
-    <VCard :title="`Messages: (${messages.length})`" class="my-5">
-      <VCardItem class="pt-0" style="border-top: 2px dotted gray">
-        <div v-for="(msg, i) in messages">
-          <div><DynamicComponent :value="msg" /></div>
-        </div>
-        <div v-if="messages.length === 0">No messages</div>
-      </VCardItem>
-    </VCard>
+    </div>
+
+    <div
+      v-if="tx.tx_response"
+      class="bg-base-100 px-4 pt-3 pb-4 rounded shadow mb-4"
+    >
+      <h2 class="card-title truncate mb-2">Messages: ({{messages.length}})</h2>
+      <div class="divider"></div>
+      <div v-for="(msg, i) in messages">
+        <div><DynamicComponent :value="msg" /></div>
+      </div>
+      <div v-if="messages.length === 0">No messages</div>
+    </div>
+
+    
+    <div
+      v-if="tx.tx_response"
+      class="bg-base-100 px-4 pt-3 pb-4 rounded shadow"
+    >
+      <h2 class="card-title truncate mb-2">JSON</h2>
+      <vue-json-pretty :data="tx" :deep="3" />
+    </div>
 
-    <VCard title="JSON">
-      <VCardItem class="pt-0">
-        <vue-json-pretty :data="tx" :deep="3" />
-      </VCardItem>
-    </VCard>
   </div>
 </template>