improve UI

src/components/UptimeBar.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { Commit } from '@/types';
+import { computed, type PropType } from 'vue';
 
 const props = defineProps({
   blocks: { type: Array as PropType<Commit[]> },
@@ -8,6 +9,7 @@ const props = defineProps({
 
 const bars = computed(() => {
   const uptime = Array(50).fill({ height: 0, color: 'bg-secondary' });
+  if(!props.blocks) return uptime
   props.blocks.forEach((element) => {
     const has = element.signatures?.findIndex(
       (sig) => sig.validator_address === props.validator
@@ -29,10 +31,14 @@ const bars = computed(() => {
         <span
           :class="item.color"
           class="rounded"
-          style="width: 1.5%"
+          style="width: 1.3%"
         >&nbsp;
         </span>
       </div>
     </div>
   </div>
 </template>
+
+<style>
+  
+</style>

src/components/dynamic/ObjectElement.vue

@@ -8,7 +8,7 @@ const props = defineProps(['value']);
     <table class="table w-full text-sm">
       <tbody>
         <tr v-for="(v, k) of value">
-          <td class="text-capitalize" style="max-width: 200px">{{ k }}</td>
+          <td class="text-capitalize" style="max-width: 100px">{{ String(k).replaceAll("_", " ") }}</td>
           <td>
             <div
               class="overflow-hidden w-auto whitespace-normal"

src/modules/[chain]/gov/[proposal_id].vue

@@ -155,7 +155,7 @@ const processList = computed(() => {
     { name: 'Turnout', value: turnout.value, class: 'bg-info' },
     { name: 'Yes', value: yes.value, class: 'bg-success' },
     { name: 'No', value: no.value, class: 'bg-error' },
-    { name: 'No With Veto', value: veto.value, class: 'bg-primary' },
+    { name: 'No With Veto', value: veto.value, class: 'bg-red-800' },
     { name: 'Abstain', value: abstain.value, class: 'bg-warning' },
   ];
 });

src/modules/[chain]/staking/index.vue

@@ -315,7 +315,7 @@ const rank = function (position: number) {
                 <label
                   v-else
                   for="delegate"
-                  class="btn btn-xs bg-primary"
+                  class="btn btn-xs bg-primary capitalize"
                   @click="
                     dialog.open('delegate', {
                       validator_address: v.operator_address,

src/modules/[chain]/tx/[hash].vue

@@ -49,9 +49,8 @@ const messages = computed(() => {
             <tr>
               <td>Status</td>
               <td>
-                <div class="badge badge-primary badge-sm">oioio</div>
                 <div
-                  class="text-xs truncate relative py-2 px-4 rounded-full w-fit mr-2"
+                  class="text-xs truncate relative py-2 px-4 w-fit mr-2"
                   :class="`text-${
                     tx.tx_response.code === 0 ? 'success' : 'error'
                   }`"

src/modules/[chain]/uptime/index.vue

@@ -30,7 +30,8 @@ const local = ref(
     string[]
   >
 );
-const selected = ref(local.value[chainStore.chainName] as string[]); // favorite validators on selected blockchain
+const currentPined = local.value[chainStore.chainName]
+const selected = ref(currentPined || []); // favorite validators on selected blockchain
 
 const signingInfo = ref({} as Record<string, SigningInfo>);
 
@@ -49,7 +50,7 @@ onMounted(() => {
     latest.value = b;
     commits.value.unshift(b.block.last_commit);
     const height = Number(b.block.header?.height || 0);
-    if (height > 0) {
+    if (height === 0) {
       // constructs sequence for loading blocks
       let promise = Promise.resolve();
       for (let i = height - 1; i > height - 50; i -= 1) {
@@ -84,7 +85,6 @@ const commits2 = computed(() => {
   return all.length > 50 ? all.slice(all.length - 50): all
 })
 
-
 onUnmounted(() => {
   live.value = false;
 });
@@ -110,23 +110,18 @@ watchEffect(() => {
         <span class="">Favorite</span>
       </button>
     </div>
-
     <div
-      class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-x-4 mt-4"
+      class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-x-4 mt-4"
     >
-      <div v-for="(v, i) in validators" :key="i">
-        <div class="flex items-center justify-between">
-          <VCheckbox
-            v-model="selected"
-            color="warning"
-            :value="v.operator_address"
-          >
-            <template v-slot:label>
-              <span class="text-truncate text-sm"
-                >{{ i + 1 }}. {{ v.description.moniker }}</span
-              >
-            </template>
-          </VCheckbox>
+      <div v-for="(v, i) in validators" :key="i" >
+        <div class="flex items-center justify-between py-0">
+          <label class="text-truncate text-sm">
+            <input type="checkbox"
+              v-model="selected"
+              :value="v.operator_address"
+            />
+            <span class="ml-1 text-black dark:text-white">{{ i + 1 }}.{{ v.description.moniker }}</span>
+          </label>
           <div
             v-if="
               Number(