From 06574f2f2c02ffa35f917a3eb5b8e640acb2b4b5 Mon Sep 17 00:00:00 2001
From: "Alisa | side.one" <alisa@side.one>
Date: Sun, 28 May 2023 00:45:38 +0800
Subject: [PATCH] feat: style

---
 src/components/CardStatisticsVertical.vue     |  2 +-
 src/components/PaginationBar.vue              | 10 ++-
 src/modules/[chain]/account/[address].vue     |  2 +-
 .../[chain]/cosmwasm/[code_id]/contracts.vue  | 86 +++++-------------
 src/modules/[chain]/cosmwasm/index.vue        | 90 +++++++++----------
 src/modules/[chain]/staking/[validator].vue   |  2 +-
 src/modules/[chain]/uptime/index.vue          |  2 +-
 7 files changed, 75 insertions(+), 119 deletions(-)

diff --git a/src/components/CardStatisticsVertical.vue b/src/components/CardStatisticsVertical.vue
index d71bee6b..50a66408 100644
--- a/src/components/CardStatisticsVertical.vue
+++ b/src/components/CardStatisticsVertical.vue
@@ -53,7 +53,7 @@ const isPositive = controlledComputed(
       </p>
 
       <div v-if="props.subtitle" size="x-small" class="font-semibold">
-        <span class="text-truncate">{{ props.subtitle }}</span>
+        <span class="truncate">{{ props.subtitle }}</span>
       </div>
     </div>
   </div>
diff --git a/src/components/PaginationBar.vue b/src/components/PaginationBar.vue
index 9e4a6096..0720bfd0 100644
--- a/src/components/PaginationBar.vue
+++ b/src/components/PaginationBar.vue
@@ -36,10 +36,14 @@ function gotoPage(pageNum: number) {
 
 </script>
 <template>
-    <div class="my-5 text-center">
+    <div class="my-5">
         <div v-if="total && limit" class="btn-group">
-            <button v-for="{ page, color } in pages" class="btn btn-md" :class="color" @click="gotoPage(page)">{{ page
-            }}</button>
+            <button v-for="{ page, color } in pages" :key="page"
+                class="btn bg-gray-100 text-gray-500 hover:text-white border-none dark:bg-gray-800 dark:text-white" :class="{
+                    '!bg-primary text-white': color === 'btn-primary',
+                }" @click="gotoPage(page)">
+                {{ page }}
+            </button>
         </div>
     </div>
 </template>
diff --git a/src/modules/[chain]/account/[address].vue b/src/modules/[chain]/account/[address].vue
index 47172326..f3687a17 100644
--- a/src/modules/[chain]/account/[address].vue
+++ b/src/modules/[chain]/account/[address].vue
@@ -458,7 +458,7 @@ loadAccount(props.address);
                   v.height
                 }}</RouterLink>
               </td>
-              <td class="text-truncate text-primary py-3" style="max-width: 200px">
+              <td class="truncate text-primary py-3" style="max-width: 200px">
                 <RouterLink :to="`/${chain}/tx/${v.txhash}`">
                 {{ v.txhash }}
               </RouterLink>
diff --git a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
index 5d98cf1c..bcd636f3 100644
--- a/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
+++ b/src/modules/[chain]/cosmwasm/[code_id]/contracts.vue
@@ -121,28 +121,17 @@ const result = ref('');
             <tr v-for="(v, index) in response.contracts" :key="index" class="hover">
               <td>{{ v }}</td>
               <td>
-                <label
-                  @click="showInfo(v)"
-                  for="modal-contract-detail"
-                  class="btn btn-primary btn-sm text-xs mr-2"
-                  >contract</label
-                >
+                <label @click="showInfo(v)" for="modal-contract-detail"
+                  class="btn btn-primary btn-xs text-xs mr-2">contract</label>
 
-                <label
-                  class="btn btn-primary btn-sm text-xs mr-2"
-                  for="modal-contract-states"
-                  @click="showState(v)"
-                >
+                <label class="btn btn-primary btn-xs text-xs mr-2" for="modal-contract-states" @click="showState(v)">
                   States
                 </label>
-                <label
-                  for="modal-contract-query"
-                  class="btn btn-primary btn-sm text-xs mr-2"
-                  @click="showQuery(v)"
-                >
+                <label for="modal-contract-query" class="btn btn-primary btn-xs text-xs mr-2" @click="showQuery(v)">
                   Query
                 </label>
-                <label for="wasm_execute_contract" class="btn btn-primary btn-sm text-xs" @click="dialog.open('wasm_execute_contract', {contract: v})">
+                <label for="wasm_execute_contract" class="btn btn-primary btn-xs text-xs"
+                  @click="dialog.open('wasm_execute_contract', { contract: v })">
                   Execute
                 </label>
               </td>
@@ -150,9 +139,10 @@ const result = ref('');
           </tbody>
         </table>
         <div class="flex justify-between">
-          <PaginationBar :limit="50" :total="response.pagination?.total" :callback="loadContract"/>
-          <label for="wasm_instantiate_contract" class="btn btn-primary my-5" @click="dialog.open('wasm_instantiate_contract', {codeId: props.code_id})">Instantiate Contract</label>
-        </div>   
+          <PaginationBar :limit="50" :total="response.pagination?.total" :callback="loadContract" />
+          <label for="wasm_instantiate_contract" class="btn btn-primary my-5"
+            @click="dialog.open('wasm_instantiate_contract', { codeId: props.code_id })">Instantiate Contract</label>
+        </div>
       </div>
     </div>
 
@@ -162,12 +152,7 @@ const result = ref('');
         <div>
           <div class="flex items-center justify-between px-3 pt-2">
             <div class="text-lg">Contract Detail</div>
-            <label
-              @click="infoDialog = false"
-              for="modal-contract-detail"
-              class="btn btn-sm btn-circle"
-              >✕</label
-            >
+            <label @click="infoDialog = false" for="modal-contract-detail" class="btn btn-sm btn-circle">✕</label>
           </div>
           <div>
             <DynamicComponent :value="info" />
@@ -180,27 +165,22 @@ const result = ref('');
     <label for="modal-contract-states" class="modal cursor-pointer">
       <label class="modal-box w-11/12 max-w-5xl" for="">
         <div>
-          <div class="flex items-center justify-between px-3 pt-2">
+          <div class="flex items-center justify-between px-3 pt-2 mb-4">
             <div class="text-lg">Contract States</div>
-            <label
-              @click="infoDialog = false"
-              for="modal-contract-states"
-              class="btn btn-sm btn-circle"
-              >✕</label
-            >
+            <label @click="infoDialog = false" for="modal-contract-states" class="btn btn-sm btn-circle">✕</label>
           </div>
           <div class="overflow-auto">
             <table class="table table-compact w-full text-sm">
               <tr v-for="(v, index) in state.models" :key="index" class="hover">
-                <td class="text-right" :data-tip="format.hexToString(v.key)">
-                    <span class="font-bold float-right">{{ format.hexToString(v.key) }}</span>
+                <td class="" :data-tip="format.hexToString(v.key)">
+                  <span class="font-bold">{{ format.hexToString(v.key) }}</span>
                 </td>
                 <td class="text-left w-3/4" :title="format.base64ToString(v.value)">
                   {{ format.base64ToString(v.value) }}
                 </td>
               </tr>
             </table>
-            <PaginationBar :limit="pageRequest.limit" :total="state.pagination?.total" :callback="pageload"/>
+            <PaginationBar :limit="pageRequest.limit" :total="state.pagination?.total" :callback="pageload" />
           </div>
         </div>
       </label>
@@ -212,33 +192,16 @@ const result = ref('');
         <div>
           <div class="flex items-center justify-between px-3 pt-2 mb-4">
             <div class="text-lg font-semibold">Query Contract</div>
-            <label
-              @click="infoDialog = false"
-              for="modal-contract-query"
-              class="btn btn-sm btn-circle"
-              >✕</label
-            >
+            <label @click="infoDialog = false" for="modal-contract-query" class="btn btn-sm btn-circle">✕</label>
           </div>
           <div class="px-3">
             <div>
               <div class="grid grid-cols-2 gap-4 mb-4">
-                <div
-                  class="form-control border rounded px-4"
-                  v-for="(item, index) of radioContent"
-                  :key="index"
-                  :class="{ 'pt-2': index === 0 }"
-                >
-                  <label
-                    class="label cursor-pointer justify-start"
-                    @click="selectedRadio = item?.value"
-                  >
-                    <input
-                      type="radio"
-                      name="radio-10"
-                      class="radio radio-sm radio-primary mr-4"
-                      :checked="item?.value === selectedRadio"
-                      style="border: 1px solid #d2d6dc"
-                    />
+                <div class="form-control border rounded px-4" v-for="(item, index) of radioContent" :key="index"
+                  :class="{ 'pt-2': index === 0 }">
+                  <label class="label cursor-pointer justify-start" @click="selectedRadio = item?.value">
+                    <input type="radio" name="radio-10" class="radio radio-sm radio-primary mr-4"
+                      :checked="item?.value === selectedRadio" style="border: 1px solid #d2d6dc" />
                     <div>
                       <div class="text-base font-semibold">
                         {{ item?.title }}
@@ -253,10 +216,7 @@ const result = ref('');
               <VTextarea v-model="result" label="Result" />
             </div>
             <div class="mt-4 mb-4">
-              <button
-                class="btn !btn-yes !border-yes px-4 text-white"
-                @click="queryContract()"
-              >
+              <button class="btn !btn-yes !border-yes px-4 text-white" @click="queryContract()">
                 Query Contract
               </button>
             </div>
diff --git a/src/modules/[chain]/cosmwasm/index.vue b/src/modules/[chain]/cosmwasm/index.vue
index a8e07f62..b1b31c2d 100644
--- a/src/modules/[chain]/cosmwasm/index.vue
+++ b/src/modules/[chain]/cosmwasm/index.vue
@@ -15,60 +15,52 @@ const wasmStore = useWasmStore();
 const dialog = useTxDialog()
 
 function pageload(pageNum: number) {
-  pageRequest.value.setPage(pageNum)
-  wasmStore.wasmClient.getWasmCodeList(pageRequest.value).then((x) => {
-    codes.value = x;
-  });
+    pageRequest.value.setPage(pageNum)
+    wasmStore.wasmClient.getWasmCodeList(pageRequest.value).then((x) => {
+        codes.value = x;
+    });
 }
 pageload(1)
 </script>
 <template>
-  <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-    <h2 class="card-title truncate w-full">Cosmos Wasm Smart Contracts</h2>
-    <div class="overflow-x-auto">
-      <table class="table table-compact w-full mt-4 text-sm">
-        <thead>
-          <tr>
-            <th>Code Id</th>
-            <th>Code Hash</th>
-            <th>Creator</th>
-            <th>Permissions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="v in codes.code_infos">
-            <td>{{ v.code_id }}</td>
-            <td>
-              <RouterLink
-                :to="`/${props.chain}/cosmwasm/${v.code_id}/contracts`"
-                class="text-truncate max-w-[200px] block text-primary"
-                :title="v.data_hash"
-              >
-                {{ v.data_hash }}
-              </RouterLink>
-            </td>
-            <td>{{ v.creator }}</td>
-            <td>
-              {{ v.instantiate_permission?.permission }}
-              <span
-                >{{ v.instantiate_permission?.address }}
-                {{ v.instantiate_permission.addresses.join(', ') }}</span
-              >
-            </td>
-          </tr>
-        </tbody>
-      </table>
-      <div class="flex justify-between">
-        <PaginationBar :limit="pageRequest.limit" :total="codes.pagination?.total" :callback="pageload"/>
-        <label
-            for="wasm_store_code"
-            class="btn btn-primary my-5"
-            @click="dialog.open('wasm_store_code', {})"
-            >Upload Smart Contract</label
-          >
-      </div>
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+        <h2 class="card-title truncate w-full">Cosmos Wasm Smart Contracts</h2>
+        <div class="overflow-x-auto">
+            <table class="table table-compact w-full mt-4 text-sm">
+                <thead>
+                    <tr>
+                        <th>Code Id</th>
+                        <th>Code Hash</th>
+                        <th>Creator</th>
+                        <th>Permissions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(v, index) in codes.code_infos" :key="index">
+                        <td>{{ v.code_id }}</td>
+                        <td>
+                            <RouterLink :to="`/${props.chain}/cosmwasm/${v.code_id}/contracts`"
+                                class="truncate max-w-[200px] block text-primary" :title="v.data_hash">
+                                {{ v.data_hash }}
+                            </RouterLink>
+                        </td>
+                        <td>{{ v.creator }}</td>
+                        <td>
+                            {{ v.instantiate_permission?.permission }}
+                            <span>{{ v.instantiate_permission?.address }}
+                                {{ v.instantiate_permission.addresses.join(', ') }}</span>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+            <div class="flex justify-between">
+                <PaginationBar :limit="pageRequest.limit" :total="codes.pagination?.total" :callback="pageload" />
+                <label for="wasm_store_code" class="btn btn-primary my-5" @click="dialog.open('wasm_store_code', {})">Upload
+                    Smart
+                    Contract</label>
+            </div>
+        </div>
     </div>
-  </div>
 </template>
 
 <route>
diff --git a/src/modules/[chain]/staking/[validator].vue b/src/modules/[chain]/staking/[validator].vue
index cb65fb9a..7f7264b2 100644
--- a/src/modules/[chain]/staking/[validator].vue
+++ b/src/modules/[chain]/staking/[validator].vue
@@ -344,7 +344,7 @@ onMounted(() => {
                   item.height
                 }}</RouterLink>
               </td>
-              <td class="text-truncate text-primary" style="max-width: 200px">
+              <td class="truncate text-primary" style="max-width: 200px">
                 <RouterLink :to="`/${props.chain}/tx/${item.txhash}`">
                   {{ item.txhash }}
                 </RouterLink>
diff --git a/src/modules/[chain]/uptime/index.vue b/src/modules/[chain]/uptime/index.vue
index 467a5fd5..73d0469b 100644
--- a/src/modules/[chain]/uptime/index.vue
+++ b/src/modules/[chain]/uptime/index.vue
@@ -131,7 +131,7 @@ function changeTab(v: string) {
             <div class="grid grid-cols-4 gap-x-4 mt-4" :class="tab === '2' ? '' : 'hidden'">
                 <div v-for="({ v, signing, hex }, i) in list" :key="i">
                     <div class="flex items-center justify-between py-0">
-                        <label class="text-truncate text-sm">
+                        <label class="truncate text-sm">
                             <span class="ml-1 text-black dark:text-white">{{ i + 1 }}.{{ v.description.moniker }}</span>
                         </label>
                         <div v-if="Number(signing?.missed_blocks_counter || 0) > 10"