From da13d3728492f1f8620cc75846613aeb4373cb1d Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sun, 7 May 2023 08:07:19 +0800
Subject: [PATCH] feat: alert UI refactor

---
 src/components/ProposalListItem.vue |  4 ++--
 src/modules/[chain]/block/index.vue | 16 +++++++++-------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index 32faa6df..9681016d 100644
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@@ -59,7 +59,7 @@ const statusMap: Record<string, string> = {
               : 'text-info'
           "
         >
-          <divÏ
+          <div
             class="w-1 h-1 rounded-full mr-2"
             :class="
               statusMap?.[item?.status] === 'PASSED'
@@ -68,7 +68,7 @@ const statusMap: Record<string, string> = {
                 ? 'bg-no'
                 : 'bg-info'
             "
-          ></divÏ>
+          ></div>
           <div class="text-xs">
             {{ statusMap?.[item?.status] || item?.status }}
           </div>
diff --git a/src/modules/[chain]/block/index.vue b/src/modules/[chain]/block/index.vue
index fe459674..72288a7f 100644
--- a/src/modules/[chain]/block/index.vue
+++ b/src/modules/[chain]/block/index.vue
@@ -39,7 +39,7 @@ const format = useFormatter();
           </tr>
         </thead>
         <tbody>
-          <tr v-for="item in store.recents">
+          <tr v-for="(item,index) of store.recents" :key="index">
             <td class="text-sm text-primary">
               <RouterLink
                 :to="`/${props.chain}/block/${item.block?.header?.height}`"
@@ -70,7 +70,7 @@ const format = useFormatter();
           </tr>
         </thead>
         <tbody>
-          <tr v-for="item in store.txsInRecents">
+          <tr v-for="(item,index) of store.txsInRecents" :key="index">
             <td>
               <RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
                 item.hash
@@ -82,11 +82,13 @@ const format = useFormatter();
         </tbody>
       </table>
       <div class="p-4">
-        <v-alert
-          type="info"
-          text="Only show txs in recent blocks"
-          variant="tonal"
-        ></v-alert>
+        <div class="alert relative bg-transparent">
+          <div class="alert  absolute inset-x-0 inset-y-0 w-full h-full bg-info opacity-10"></div>
+          <div class="text-info">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
+            <span>Only show txs in recent blocks</span>
+          </div>
+        </div>
       </div>
     </div>
   </div>