From 9d57f91962b6894cf82965ad0bba1e6aee41d0fd Mon Sep 17 00:00:00 2001
From: trungbach <trunga2k29@gmail.com>
Date: Tue, 9 Jul 2024 18:18:44 +0700
Subject: [PATCH] style: update UI uptime, consensus

---
 src/components/ChainSummary.vue               |  6 +-
 src/components/ProposalListItem.vue           |  8 +-
 src/components/UptimeBar.vue                  |  7 +-
 src/modules/[chain]/consensus/index.vue       | 86 ++++++-------------
 src/modules/[chain]/gov/[proposal_id].vue     | 26 +++---
 src/modules/[chain]/gov/index.vue             |  4 +-
 .../ibc/connection/[connection_id].vue        | 10 +--
 src/modules/[chain]/ibc/index.vue             |  6 +-
 src/modules/[chain]/params/index.vue          |  2 +-
 src/modules/[chain]/supply/index.vue          |  6 +-
 src/modules/[chain]/uptime/index.vue          | 12 ++-
 src/pages/index.vue                           |  4 +-
 12 files changed, 77 insertions(+), 100 deletions(-)

diff --git a/src/components/ChainSummary.vue b/src/components/ChainSummary.vue
index 48437177..d0ef42bd 100644
--- a/src/components/ChainSummary.vue
+++ b/src/components/ChainSummary.vue
@@ -29,10 +29,12 @@ const addFavor = (e: Event) => {
     :to="`/${name}`"
     class="bg-base-100 hover:bg-gray-100 dark:bg-[#141416] dark:hover:bg-[#2E2E33] rounded-md shadow flex items-center px-3 py-3 cursor-pointer border border-base-300 borderImage"
   >
-    <div class="w-8 h-8 rounded-full overflow-hidden">
+    <div class="w-8 h-8 rounded-full overflow-hidden dark:bg-white">
       <img :src="conf.logo" />
     </div>
-    <div class="font-semibold ml-4 text-base flex-1 truncate capitalize">
+    <div
+      class="font-semibold ml-4 text-base flex-1 truncate capitalize text-white"
+    >
       {{ conf?.prettyName || props.name }}
     </div>
     <div
diff --git a/src/components/ProposalListItem.vue b/src/components/ProposalListItem.vue
index 33fba82b..164c019c 100644
--- a/src/components/ProposalListItem.vue
+++ b/src/components/ProposalListItem.vue
@@ -54,7 +54,11 @@ function metaItem(metadata: string | undefined): {
   <div class="bg-white dark:bg-transparent rounded-lg text-sm">
     <table class="table-compact w-full table-fixed hidden lg:!table">
       <tbody>
-        <tr v-for="(item, index) in proposals?.proposals" :key="index">
+        <tr
+          v-for="(item, index) in proposals?.proposals"
+          :key="index"
+          class="hover:bg-[#47474B] cursor-pointer border-b border-b-[#242627] px-4"
+        >
           <td class="px-4 w-20">
             <label
               for="proposal-detail-modal"
@@ -68,7 +72,7 @@ function metaItem(metadata: string | undefined): {
             <div>
               <RouterLink
                 :to="`/${chain.chainName}/gov/${item?.proposalId}`"
-                class="text-main text-base mb-1 block hover:text-indigo-400 truncate"
+                class="text-base mb-1 block text-indigo-400 truncate"
               >
                 {{ item?.title }}
               </RouterLink>
diff --git a/src/components/UptimeBar.vue b/src/components/UptimeBar.vue
index d91a321b..a8e9ca47 100644
--- a/src/components/UptimeBar.vue
+++ b/src/components/UptimeBar.vue
@@ -21,7 +21,8 @@ const bars = computed(() => {
 
     uptime.push({
       height: element.height,
-      color: has > -1 ? 'bg-green-500' : 'bg-red-500',
+      color: has > -1 ? 'bg-[rgba(39,120,77,0.50)]' : 'bg-red-500',
+      border: has > -1 ? 'border-[#319660]' : 'border-[#FF5252]',
     });
     uptime.shift();
   });
@@ -29,12 +30,12 @@ const bars = computed(() => {
 });
 </script>
 <template>
-  <div class="flex items-center justify-evenly gap-0.5">
+  <div class="flex items-center justify-evenly gap-0.5 mb-3">
     <div class="cursor-default" v-for="(item, index) in bars" :key="index">
       <div
         class="tooltip"
         :data-tip="item.height"
-        :class="item.color"
+        :class="['border', item.color, item.border]"
         style="width: 4px"
       >
         &nbsp;
diff --git a/src/modules/[chain]/consensus/index.vue b/src/modules/[chain]/consensus/index.vue
index 01839d48..7d2d512d 100644
--- a/src/modules/[chain]/consensus/index.vue
+++ b/src/modules/[chain]/consensus/index.vue
@@ -153,23 +153,24 @@ async function update() {
 </script>
 
 <template>
-  <div>
-    <!--  -->
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
+  <div class="px-6">
+    <div class="pt-3 pb-4">
       <div class="form-control">
-        <label class="input-group input-group-md w-full flex">
-          <!-- <input
-            type="text"
-            placeholder="Button on both side"
-            class="input input-bordered input-md w-full"
+        <label
+          class="input-group input-group-md w-[80vw] md:w-[40vw] flex flex-wrap md:ml-auto"
+        >
+          <select
             v-model="rpc"
-          /> -->
-          <select v-model="rpc" class="select select-bordered w-full flex-1">
+            class="select select-bordered flex-1 mb-2 md:mb-0"
+          >
             <option v-for="(item, index) in rpcList" :key="index">
               {{ item?.address }}/consensus_state
             </option>
           </select>
-          <button class="btn btn-primary" @click="onChange">
+          <button
+            class="btn btn-primary bg-[#2E2E33] border border-[#383B40]"
+            @click="onChange"
+          >
             {{ $t('consensus.monitor') }}
           </button>
         </label>
@@ -182,83 +183,44 @@ async function update() {
     <div class="mt-4" v-if="roundState['height/round/step']">
       <div class="grid grid-cols-1 md:!grid-cols-4 auto-cols-auto gap-4 pb-4">
         <div
-          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
+          class="bg-base-100 px-4 py-3 rounded-lg border border-[#383B40] shadow flex justify-center items-center"
         >
-          <div class="text-sm mb-1 flex flex-col truncate">
+          <div class="text-sm mb-1 flex flex-col truncate items-center">
             <h4 class="text-lg font-semibold text-main">{{ rate }}</h4>
             <span class="text-md">{{ $t('consensus.onboard_rate') }}</span>
           </div>
-          <div class="avatar placeholder">
-            <div
-              class="bg-rose-100 text-neutral-content rounded-full w-12 h-12"
-            >
-              <span class="text-2xl text-error font-semibold">{{
-                $t('consensus.o')
-              }}</span>
-            </div>
-          </div>
         </div>
         <!-- Height -->
         <div
-          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
+          class="bg-base-100 px-4 py-3 rounded-lg border border-[#383B40] shadow flex justify-center items-center"
         >
-          <div class="text-sm mb-1 flex flex-col truncate">
+          <div class="text-sm mb-1 flex flex-col truncate items-center">
             <h4 class="text-lg font-semibold text-main">{{ height }}</h4>
             <span class="text-md">{{ $t('account.height') }}</span>
           </div>
-          <div class="avatar placeholder">
-            <div
-              class="bg-green-100 text-neutral-content rounded-full w-12 h-12"
-            >
-              <span class="text-2xl text-success font-semibold">{{
-                $t('consensus.h')
-              }}</span>
-            </div>
-          </div>
         </div>
         <!-- Round -->
         <div
-          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
+          class="bg-base-100 px-4 py-3 rounded-lg border border-[#383B40] shadow flex justify-center items-center"
         >
-          <div class="text-sm mb-1 flex flex-col truncate">
+          <div class="text-sm mb-1 flex flex-col truncate items-center">
             <h4 class="text-lg font-semibold text-main">{{ round }}</h4>
             <span class="text-md">{{ $t('consensus.round') }}</span>
           </div>
-          <div class="avatar placeholder">
-            <div
-              class="bg-violet-100 text-neutral-content rounded-full w-12 h-12"
-            >
-              <span class="text-2xl text-primary font-semibold">{{
-                $t('consensus.r')
-              }}</span>
-            </div>
-          </div>
         </div>
         <!-- Step -->
         <div
-          class="bg-base-100 px-4 py-3 rounded shadow flex justify-between items-center"
+          class="bg-base-100 px-4 py-3 rounded-lg border border-[#383B40] shadow flex justify-center items-center"
         >
-          <div class="text-sm mb-1 flex flex-col truncate">
+          <div class="text-sm mb-1 flex flex-col truncate items-center">
             <h4 class="text-lg font-semibold text-main">{{ step }}</h4>
             <span class="text-md">{{ $t('consensus.step') }}</span>
           </div>
-          <div class="avatar placeholder">
-            <div
-              class="bg-blue-100 text-neutral-content rounded-full w-12 h-12"
-            >
-              <span class="text-2xl text-info font-semibold">{{
-                $t('consensus.s')
-              }}</span>
-            </div>
-          </div>
         </div>
       </div>
     </div>
     <!-- update -->
-    <div
-      class="bg-base-100 p-4 rounded shadow"
-      v-if="roundState['height/round/step']"
-    >
+    <div class="section" v-if="roundState['height/round/step']">
       <div class="flex flex-1 flex-col truncate">
         <h2 class="text-sm card-title text-error mb-6">
           {{ $t('consensus.updated_at') }} {{ newTime || '' }}
@@ -311,13 +273,15 @@ async function update() {
 
     <!-- alert-info -->
     <div
-      class="text-[#00cfe8] bg-[rgba(0,207,232,0.12)] rounded shadow mt-4 alert-info"
+      class="text-[#00cfe8] bg-[rgba(0,207,232,0.12)] rounded shadow mt-4 alert-info section"
     >
       <div
         class="drop-shadow-md px-4 pt-2 pb-2"
         style="box-shadow: rgba(0, 207, 232, 0.4) 0px 6px 15px -7px"
       >
-        <h2 class="text-base font-semibold">{{ $t('consensus.tips') }}</h2>
+        <h2 class="text-base font-semibold text-white">
+          {{ $t('consensus.tips') }}
+        </h2>
       </div>
       <div class="px-4 py-4">
         <ul style="list-style-type: disc" class="pl-8">
diff --git a/src/modules/[chain]/gov/[proposal_id].vue b/src/modules/[chain]/gov/[proposal_id].vue
index 62823577..48b022d6 100644
--- a/src/modules/[chain]/gov/[proposal_id].vue
+++ b/src/modules/[chain]/gov/[proposal_id].vue
@@ -238,13 +238,13 @@ function metaItem(metadata: string | undefined): {
 </script>
 
 <template>
-  <div>
+  <div class="px-6">
     <div class="px-4 pt-3 pb-4 rounded mb-4 shadow">
       <h2
-        class="card-title flex flex-col md:!justify-between md:!flex-row mb-2"
+        class="card-title flex flex-col md:!justify-between md:!flex-row mb-2 text-white"
       >
         <p class="truncate w-full">
-          {{ proposal_id }}.
+          #{{ proposal_id }}
           {{ proposal.content?.title }}
         </p>
         <div
@@ -276,11 +276,13 @@ function metaItem(metadata: string | undefined): {
     <!-- flex-col lg:!!flex-row flex -->
     <div class="gap-4 mb-4 grid lg:!!grid-cols-3 auto-rows-max">
       <!-- flex-1 -->
-      <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
-        <h2 class="card-title mb-1">{{ $t('gov.tally') }}</h2>
+      <div class="section">
+        <h2 class="card-title mb-1 text-white">
+          {{ $t('gov.tally') }}
+        </h2>
         <div class="mb-1" v-for="(item, index) of processList" :key="index">
           <label class="block text-sm mb-1">{{ item.name }}</label>
-          <div class="h-5 w-full relative">
+          <div class="h-5 w-full relative mb-3">
             <div
               class="absolute inset-x-0 inset-y-0 w-full opacity-10 rounded-sm"
               :class="`${item.class}`"
@@ -290,7 +292,7 @@ function metaItem(metadata: string | undefined): {
               :class="`${item.class}`"
               :style="`width: ${
                 item.value === '-' || item.value === 'NaN%' ? '0%' : item.value
-              }`"
+              }, max-width: 100%`"
             ></div>
             <p
               class="absolute inset-x-0 inset-y-0 text-center text-sm text-[#666] dark:text-[#eee] flex items-center justify-center"
@@ -308,15 +310,15 @@ function metaItem(metadata: string | undefined): {
           >
           <label
             for="deposit"
-            class="btn btn-primary float-right btn-sm mx-1"
+            class="btn btn-primary rounded-lg float-right btn-sm mx-1 bg-[#2E2E33] border border-[#383B40]"
             @click="dialog.open('deposit', { proposal_id })"
             >{{ $t('gov.btn_deposit') }}</label
           >
         </div>
       </div>
 
-      <div class="bg-base-100 px-4 pt-3 pb-5 rounded shadow lg:!!col-span-2">
-        <h2 class="card-title">{{ $t('gov.timeline') }}</h2>
+      <div class="section">
+        <h2 class="card-title text-white">{{ $t('gov.timeline') }}</h2>
 
         <div class="px-1">
           <div class="flex items-center mb-4 mt-2">
@@ -420,8 +422,8 @@ function metaItem(metadata: string | undefined): {
       </div>
     </div>
 
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title">{{ $t('gov.votes') }}</h2>
+    <div class="section">
+      <h2 class="card-title text-white">{{ $t('gov.votes') }}</h2>
       <div class="overflow-x-auto">
         <table class="table w-full table-zebra">
           <tbody>
diff --git a/src/modules/[chain]/gov/index.vue b/src/modules/[chain]/gov/index.vue
index a6282e6a..d9bddce1 100644
--- a/src/modules/[chain]/gov/index.vue
+++ b/src/modules/[chain]/gov/index.vue
@@ -38,8 +38,8 @@ function page(p: number) {
 }
 </script>
 <template>
-  <div>
-    <div class="tabs tabs-boxed bg-transparent mb-4 text-center">
+  <div class="mx-6 section">
+    <div class="tabs tabs-boxed bg-transparent mb-4 text-center customTab">
       <a
         class="tab text-gray-400 uppercase"
         :class="{
diff --git a/src/modules/[chain]/ibc/connection/[connection_id].vue b/src/modules/[chain]/ibc/connection/[connection_id].vue
index 56254769..4390a172 100644
--- a/src/modules/[chain]/ibc/connection/[connection_id].vue
+++ b/src/modules/[chain]/ibc/connection/[connection_id].vue
@@ -135,7 +135,7 @@ function color(v: string) {
 }
 </script>
 <template>
-  <div class="">
+  <div class="mx-6">
     <div class="px-4 pt-3 pb-4 bg-base-200 rounded mb-4 shadow">
       <div class="mx-auto max-w-7xl px-6 lg:!px-8">
         <dl class="grid grid-cols-1 gap-x-6 text-center lg:!grid-cols-3">
@@ -173,8 +173,8 @@ function color(v: string) {
       </div>
     </div>
 
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title mb-4 overflow-hidden">
+    <div class="section">
+      <h2 class="card-title mb-4 overflow-hidden text-white">
         {{ $t('ibc.title_2')
         }}<span class="ml-2 text-sm text-break">{{
           clientState?.clientState?.typeUrl
@@ -261,8 +261,8 @@ function color(v: string) {
         </table>
       </div>
     </div>
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow overflow-hidden">
-      <h2 class="card-title">{{ $t('ibc.channels') }}</h2>
+    <div class="section">
+      <h2 class="card-title text-white">{{ $t('ibc.channels') }}</h2>
       <div class="overflow-auto">
         <table class="table w-full mt-4">
           <thead>
diff --git a/src/modules/[chain]/ibc/index.vue b/src/modules/[chain]/ibc/index.vue
index 60327e88..62ef9679 100644
--- a/src/modules/[chain]/ibc/index.vue
+++ b/src/modules/[chain]/ibc/index.vue
@@ -14,10 +14,10 @@ onMounted(() => {
 </script>
 <template>
   <div>
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
+    <div class="section">
       <div class="flex flex-wrap gap-4 items-center">
-        <h2 class="card-title py-4">{{ $t('ibc.title') }}</h2>
-        <div class="tabs tabs-boxed">
+        <h2 class="card-title py-4 text-white">{{ $t('ibc.title') }}</h2>
+        <div class="tabs tabs-boxed customTab">
           <a
             class="tab"
             :class="{ 'tab-active': tab === 'registry' }"
diff --git a/src/modules/[chain]/params/index.vue b/src/modules/[chain]/params/index.vue
index c68b6993..55c617e8 100644
--- a/src/modules/[chain]/params/index.vue
+++ b/src/modules/[chain]/params/index.vue
@@ -35,7 +35,7 @@ onMounted(() => {
     </div>
   </div>
   <div
-    class="overflow-hidden grid grid-cols-1 md:!grid-cols-1 lg:!grid-cols-2 2xl:!grid-cols-2 gap-4"
+    class="overflow-hidden grid grid-cols-1 md:!grid-cols-1 lg:!grid-cols-2 2xl:!grid-cols-2 gap-4 mx-4"
   >
     <!-- minting Parameters  -->
     <CardParameter :cardItem="store.mint" />
diff --git a/src/modules/[chain]/supply/index.vue b/src/modules/[chain]/supply/index.vue
index cd2e0ceb..57cebddc 100644
--- a/src/modules/[chain]/supply/index.vue
+++ b/src/modules/[chain]/supply/index.vue
@@ -37,15 +37,15 @@ function pageload(p: number) {
 }
 </script>
 <template>
-  <div class="overflow-auto">
+  <div class="overflow-auto section mx-6">
     <table class="table table-compact">
       <thead>
-        <tr>
+        <tr class="text-white">
           <td>Token</td>
           <td>Amount</td>
         </tr>
       </thead>
-      <tr v-for="item in list">
+      <tr v-for="item in list" class="border-b border-b-[#242627] px-4">
         <td>{{ item.denom }}</td>
         <td>{{ item.amount }}</td>
       </tr>
diff --git a/src/modules/[chain]/uptime/index.vue b/src/modules/[chain]/uptime/index.vue
index 2607f761..c7ff61cd 100644
--- a/src/modules/[chain]/uptime/index.vue
+++ b/src/modules/[chain]/uptime/index.vue
@@ -19,6 +19,7 @@ import type {
   Params,
   ValidatorSigningInfo,
 } from 'cosmjs-types/cosmos/slashing/v1beta1/slashing';
+import { Icon } from '@iconify/vue';
 
 const props = defineProps(['chain']);
 
@@ -178,12 +179,15 @@ function fetchAllKeyRotation() {
       </RouterLink>
     </div>
     <div class="bg-base-100 px-5 pt-5">
-      <div class="flex items-center gap-x-4">
+      <div
+        class="flex items-center gap-x-4 dark:bg-[#2E2E33] border border-gray-200 dark:border-gray-700 rounded-lg py-2"
+      >
+        <Icon icon="mdi:magnify" class="text-2xl text-gray-400 ml-3" />
         <input
           type="text"
           v-model="keyword"
-          placeholder="Keywords to filter validators"
-          class="input input-sm w-full flex-1 border border-gray-200 dark:border-gray-600"
+          placeholder="Search validators by name"
+          class="w-full flex-1 outline-none text-base text-white dark:bg-[#2E2E33]"
         />
         <button
           v-if="chainStore.isConsumerChain"
@@ -210,7 +214,7 @@ function fetchAllKeyRotation() {
       >
         <div v-for="({ v, signing, hex }, i) in list" :key="i">
           <div class="flex items-center justify-between py-0 w-[298px]">
-            <label class="truncate text-sm">
+            <label class="truncate text-sm mb-1">
               <span class="ml-1 text-black dark:text-white"
                 >{{ i + 1 }}.{{ v.description.moniker }}</span
               >
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 123005da..db2b3b83 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -45,7 +45,7 @@ const featured = computed(() => {
 const chainStore = useBlockchain();
 </script>
 <template>
-  <div class="">
+  <div class="section dark:bg-base-200 ml-3">
     <div
       v-if="dashboard.status !== LoadingStatus.Loaded"
       class="flex justify-center"
@@ -81,7 +81,7 @@ const chainStore = useBlockchain();
       <Icon icon="mdi:magnify" class="text-2xl text-gray-400 ml-3" />
       <input
         :placeholder="$t('pages.search_placeholder')"
-        class="px-4 h-10 bg-[#2E2E33] flex-1 outline-none text-base"
+        class="px-4 h-10 bg-[#2E2E33] flex-1 outline-none text-base text-white"
         v-model="keywords"
       />
       <div class="px-4 text-base hidden md:!block">