From 1cdefc0cc1a73f48cf028ff8bc490846ba1f85df Mon Sep 17 00:00:00 2001
From: quangdz1704 <Ntq.1704@gmail.com>
Date: Tue, 9 Jul 2024 16:01:19 +0700
Subject: [PATCH] fix: block

---
 src/components/Countdown.vue                  |  61 ++++-
 src/components/PaginationBar.vue              |   8 +-
 src/layouts/components/DefaultLayout.vue      |  16 +-
 src/layouts/components/NavBarI18n.vue         |  87 ++++----
 src/layouts/components/NavbarSearch.vue       |   2 +-
 .../components/NavbarThemeSwitcher.vue        |   2 +-
 src/modules/[chain]/account/[address].vue     |  74 ++++---
 src/modules/[chain]/block/[height].vue        |  39 ++--
 src/modules/[chain]/block/index.vue           | 209 +++++++++++-------
 src/modules/[chain]/index.vue                 |  16 +-
 src/modules/[chain]/staking/[validator].vue   |  14 +-
 src/modules/[chain]/staking/index.vue         |   2 +-
 src/plugins/i18n/locales/en.json              |   4 +-
 src/router/index.ts                           |  28 +--
 src/style.css                                 |  20 +-
 tailwind.config.js                            |   8 +
 16 files changed, 366 insertions(+), 224 deletions(-)

diff --git a/src/components/Countdown.vue b/src/components/Countdown.vue
index 018606c5..7d51fafd 100644
--- a/src/components/Countdown.vue
+++ b/src/components/Countdown.vue
@@ -14,18 +14,55 @@ const s = ref(0);
     v-if="time"
     :time="time > 0 ? time : 0"
     v-slot="{ days, hours, minutes, seconds }"
-    class="countdown-container justify-items-center"
+    class="countdown-container flex justify-items-center items-start justify-center"
   >
-    <span class="text-primary font-bold" :class="css">{{ days }}</span> days
-    <span class="text-primary font-bold" :class="css">{{ hours }}</span> hours
-    <span class="text-primary font-bold" :class="css">{{ minutes }}</span>
-    minutes
-    <span class="text-primary font-bold w-40" :class="css">
-      <Transition name="slide-up">
-        <span v-if="seconds % 2 === 0" class="countdown">{{ seconds }}</span>
-        <span v-else="seconds % 2 === 1" class="countdown">{{ seconds }}</span>
-      </Transition>
-    </span>
-    <span class="ml-10">seconds</span>
+    <div class="flex flex-col">
+      <span
+        class="!w-14 !h-14 flex items-center justify-center text-link !text-[18px] md:!text-[18px] leading-none !font-semibold border rounded border-link p-4"
+        :class="css"
+      >
+        {{ days }}
+      </span>
+      <p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">days</p>
+    </div>
+    <span class="mt-4">:</span>
+    <div class="flex flex-col">
+      <span
+        class="!w-14 !h-14 flex items-center justify-center text-link !text-[18px] md:!text-[18px] leading-none !font-semibold border rounded border-link p-4"
+        :class="css"
+      >
+        {{ hours }}
+      </span>
+      <p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">hours</p>
+    </div>
+    <span class="mt-4">:</span>
+    <div class="flex flex-col">
+      <span
+        class="!w-14 !h-14 flex items-center justify-center text-link !text-[18px] md:!text-[18px] leading-none !font-semibold border rounded border-link p-4"
+        :class="css"
+      >
+        {{ minutes }}
+      </span>
+      <p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">minutes</p>
+    </div>
+    <span class="mt-4">:</span>
+    <div class="flex flex-col">
+      <span
+        class="!w-14 !h-14 flex items-center justify-center text-link !text-[18px] md:!text-[18px] leading-none !font-semibold border rounded border-link p-4"
+        :class="css"
+      >
+        <div class="relative">
+          <Transition name="slide-up">
+            <span v-if="seconds % 2 === 0" class="countdown">{{
+              seconds
+            }}</span>
+            <span v-else="seconds % 2 === 1" class="countdown">{{
+              seconds
+            }}</span>
+          </Transition>
+        </div>
+      </span>
+      <p class="text-[#B4B7BB] text-xs font-normal capitalize mt-3">secs</p>
+    </div>
   </Countdown>
 </template>
diff --git a/src/components/PaginationBar.vue b/src/components/PaginationBar.vue
index 74d4980b..e46f687a 100644
--- a/src/components/PaginationBar.vue
+++ b/src/components/PaginationBar.vue
@@ -57,9 +57,9 @@ function goPreviousPage() {
       <button
         v-for="{ page, color } in pages"
         :key="page"
-        class="btn bg-gray-100 text-gray-500 hover:text-white border-none dark:bg-[#2E2E33] dark:text-white"
+        class="btn bg-gray-100 text-gray-500 hover:text-white border-none dark:bg-base dark:text-white"
         :class="{
-          '!bg-[rgba(185,153,243,0.2)] !text-white !border !border-solid !border-[#b999f3]':
+          '!bg-[rgba(185,153,243,0.2)] !text-white !border !border-solid !border-link':
             color === 'btn-primary',
           // '!btn-primary': color === 'btn-primary',
         }"
@@ -71,13 +71,13 @@ function goPreviousPage() {
     <div v-if="nextKey && Number(total ?? '0') === 0" class="btn-group">
       <button
         v-if="nextKeys.length > 0"
-        class="btn bg-gray-100 text-gray-500 hover:text-white hover:btn-primary border-none dark:bg-[#2E2E33] dark:text-white"
+        class="btn bg-gray-100 text-gray-500 hover:text-white hover:btn-primary border-none dark:bg-base dark:text-white"
         @click="goPreviousPage()"
       >
         Prev
       </button>
       <button
-        class="btn bg-gray-100 text-gray-500 hover:text-white hover:btn-primary border-none dark:bg-[#2E2E33] dark:text-white"
+        class="btn bg-gray-100 text-gray-500 hover:text-white hover:btn-primary border-none dark:bg-base dark:text-white"
         @click="goNextPage()"
       >
         Next
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index 51fc4c82..ac6b61be 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -167,7 +167,7 @@ function confirm() {
             </div>
             <div
               v-if="item?.badgeContent"
-              class="mr-6 badge badge-sm text-[#2E2E33] font-semibold text-[14px] border-none bg-[#CBAEFF] rounded mx-[6px] h-[22px]"
+              class="mr-6 badge badge-sm text-base font-semibold text-[14px] border-none bg-[#CBAEFF] rounded mx-[6px] h-[22px]"
             >
               <!-- :class="item?.badgeClass" -->
               {{ item?.badgeContent }}
@@ -181,9 +181,9 @@ function confirm() {
               <RouterLink
                 v-if="isNavLink(el)"
                 @click="sidebarShow = false"
-                class="hover:bg-gray-100 dark:hover:bg-[#2E2E33] h-[48px] rounded-lg cursor-pointer px-3 py-2 flex items-center border border-[#242627] borderImage"
+                class="hover:bg-gray-100 dark:hover:bg-base h-[48px] rounded-lg cursor-pointer px-3 py-2 flex items-center border border-[#242627] borderImage"
                 :class="{
-                  '!bg-[#2E2E33] borderImageActive': selected($route, el),
+                  '!bg-base borderImageActive': selected($route, el),
                 }"
                 :to="el.to"
               >
@@ -222,7 +222,7 @@ function confirm() {
           v-if="isNavLink(item)"
           :to="item?.to"
           @click="sidebarShow = false"
-          class="cursor-pointer px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#2E2E33] border-t border-b border-base-300 h-[60px]"
+          class="cursor-pointer px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-base border-t border-b border-base-300 h-[60px]"
         >
           <!-- <Icon
             v-if="item?.icon?.icon"
@@ -245,7 +245,7 @@ function confirm() {
           </div>
           <div
             v-if="item?.badgeContent"
-            class="mr-6 badge badge-sm text-[#2E2E33] font-semibold text-[14px] border-none bg-[#CBAEFF] rounded mx-[6px] h-[22px]"
+            class="mr-6 badge badge-sm text-base font-semibold text-[14px] border-none bg-[#CBAEFF] rounded mx-[6px] h-[22px]"
           >
             <!-- :class="item?.badgeClass" -->
             {{ item?.badgeContent }}
@@ -260,9 +260,9 @@ function confirm() {
       <div class="px-2 mt-6">
         <RouterLink
           to="/wallet/suggest"
-          class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#2E2E33] border border-[#242627] borderImage h-[48px]"
+          class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-base border border-[#242627] borderImage h-[48px]"
           :class="{
-            '!bg-[#2E2E33] borderImageActive': selected($route, {
+            '!bg-base borderImageActive': selected($route, {
               to: { path: '/wallet/suggest', title: 'Wallet Helper' },
             } as NavLink),
           }"
@@ -362,7 +362,7 @@ function confirm() {
         <!-- <NavSearchBar />-->
         <div class="lg:block hidden w-full max-w-[334px] mx-2">
           <input
-            class="input flex-1 w-full !input-bordered bg-[#2E2E33] text-[14px] font-normal h-[44px]"
+            class="input flex-1 w-full !input-bordered bg-base text-[14px] font-normal h-[44px]"
             v-model="searchQuery"
             placeholder="Search by Height, Address and TxHash"
             v-on:keyup.enter="confirm"
diff --git a/src/layouts/components/NavBarI18n.vue b/src/layouts/components/NavBarI18n.vue
index 847fe8a8..e538f5e5 100644
--- a/src/layouts/components/NavBarI18n.vue
+++ b/src/layouts/components/NavBarI18n.vue
@@ -4,65 +4,66 @@ import { Icon } from '@iconify/vue';
 import { useI18n } from 'vue-i18n';
 
 const i18nLangs: Array<{ label: string; i18nLang: string }> = [
-    {
-        label: 'English',
-        i18nLang: 'en',
-    },
-    {
-        label: '中文',
-        i18nLang: 'cn',
-    },
-    {
-        label: 'Indonesian',
-        i18nLang: 'id',
-    },
+  {
+    label: 'English',
+    i18nLang: 'en',
+  },
+  {
+    label: '中文',
+    i18nLang: 'cn',
+  },
+  {
+    label: 'Indonesian',
+    i18nLang: 'id',
+  },
 ];
 
 let locale = ref(useI18n({ useScope: 'global' }).locale);
 watch(locale, (val) => {
-    document.documentElement.setAttribute('lang', val as string);
+  document.documentElement.setAttribute('lang', val as string);
 });
 
 let currentLang = ref(localStorage.getItem('lang') || 'en');
 
 watch(currentLang, (val: string) => {
-    document.documentElement.setAttribute('lang', val as string);
+  document.documentElement.setAttribute('lang', val as string);
 });
 
 const handleLangChange = (lang: string) => {
-    locale.value = lang;
-    currentLang.value = lang;
-    localStorage.setItem('lang', lang);
+  locale.value = lang;
+  currentLang.value = lang;
+  localStorage.setItem('lang', lang);
 };
 </script>
 
 <template>
-    <div
-        class="dropdown"
-        :class="
-            currentLang === 'ar'
-                ? 'dropdown-right'
-                : 'dropdown-bottom dropdown-end'
-        "
+  <div
+    class="dropdown"
+    :class="
+      currentLang === 'ar' ? 'dropdown-right' : 'dropdown-bottom dropdown-end'
+    "
+  >
+    <label
+      tabindex="0"
+      class="btn btn-ghost btn-circle btn-sm ml-2 rounded-lg border border-base-300 bg-base h-[44px] w-[44px]"
     >
-        <label tabindex="0" class="btn btn-ghost btn-circle btn-sm ml-2 rounded-lg border border-base-300 bg-[#2E2E33] h-[44px] w-[44px]">
-            <Icon
-                icon="mdi-translate"
-                class="text-2xl text-gray-500 dark:text-gray-400"
-            />
-        </label>
-        <ul
-            tabindex="0"
-            class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40"
+      <Icon
+        icon="mdi-translate"
+        class="text-2xl text-gray-500 dark:text-gray-400"
+      />
+    </label>
+    <ul
+      tabindex="0"
+      class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40"
+    >
+      <li v-for="lang in i18nLangs" :key="lang.i18nLang">
+        <a
+          class="hover:bg-gray-100 dark:hover:bg-[#373f59]"
+          :class="{ 'text-primary': currentLang === lang.i18nLang }"
+          @click="handleLangChange(lang.i18nLang)"
+          >{{ lang.label }}</a
         >
-            <li v-for="lang in i18nLangs" :key="lang.i18nLang">
-                <a
-                    class="hover:bg-gray-100 dark:hover:bg-[#373f59]"
-                    :class="{ 'text-primary': currentLang === lang.i18nLang }"
-                    @click="handleLangChange(lang.i18nLang)"
-                    >{{ lang.label }}</a
-                >
-            </li>
-        </ul>
-    </div>
+      </li>
+    </ul>
+  </div>
 </template>
diff --git a/src/layouts/components/NavbarSearch.vue b/src/layouts/components/NavbarSearch.vue
index 06ca2763..5c2f1bdb 100644
--- a/src/layouts/components/NavbarSearch.vue
+++ b/src/layouts/components/NavbarSearch.vue
@@ -62,7 +62,7 @@ function confirm() {
 <template>
   <div>
     <button
-      class="btn btn-sm mr-2 lg:hidden block rounded-lg border border-base-300 bg-[#2E2E33] h-[44px] w-[44px]"
+      class="btn btn-sm mr-2 lg:hidden block rounded-lg border border-base-300 bg-base h-[44px] w-[44px]"
       @click="openSearchModal"
     >
       <Icon
diff --git a/src/layouts/components/NavbarThemeSwitcher.vue b/src/layouts/components/NavbarThemeSwitcher.vue
index fec5913f..69b7f94f 100644
--- a/src/layouts/components/NavbarThemeSwitcher.vue
+++ b/src/layouts/components/NavbarThemeSwitcher.vue
@@ -39,7 +39,7 @@ onMounted(() => {
 <template>
   <!-- <div class="tooltip tooltip-bottom delay-1000">
     <button
-      class="btn btn-ghost btn-circle btn-sm mx-2 rounded-lg border border-base-300 bg-[#2E2E33] h-[44px] w-[44px]"
+      class="btn btn-ghost btn-circle btn-sm mx-2 rounded-lg border border-base-300 bg-base h-[44px] w-[44px]"
       @click="changeMode()"
     >
       <Icon
diff --git a/src/modules/[chain]/account/[address].vue b/src/modules/[chain]/account/[address].vue
index ccc5a2d5..d10d4851 100644
--- a/src/modules/[chain]/account/[address].vue
+++ b/src/modules/[chain]/account/[address].vue
@@ -159,7 +159,9 @@ function mapAmount(events: readonly Event[]) {
 <template>
   <div v-if="account">
     <!-- address -->
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+    <div
+      class="m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627]"
+    >
       <div class="flex items-center">
         <!-- img -->
         <div class="inline-flex relative w-11 h-11 rounded-md">
@@ -178,14 +180,18 @@ function mapAmount(events: readonly Event[]) {
         </div>
         <!-- content -->
         <div class="flex flex-1 flex-col truncate pl-4">
-          <h2 class="text-sm card-title">{{ $t('account.address') }}:</h2>
+          <h2 class="text-sm card-title text-white">
+            {{ $t('account.address') }}:
+          </h2>
           <span class="text-xs truncate"> {{ address }}</span>
         </div>
       </div>
     </div>
 
     <!-- Assets -->
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+    <div
+      class="m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627]"
+    >
       <div class="flex justify-between">
         <h2 class="card-title mb-4">{{ $t('account.assets') }}</h2>
         <!-- button -->
@@ -242,10 +248,10 @@ function mapAmount(events: readonly Event[]) {
                 </div>
               </div>
               <div
-                class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2"
+                class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:text-link mr-2"
               >
                 <span
-                  class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:invert text-sm"
+                  class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:bg-[rgba(185,153,243,0.2)] text-sm"
                 ></span>
                 ${{ format.tokenValue(balanceItem) }}
               </div>
@@ -278,10 +284,10 @@ function mapAmount(events: readonly Event[]) {
                 </div>
               </div>
               <div
-                class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2"
+                class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:text-link mr-2"
               >
                 <span
-                  class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:invert text-sm"
+                  class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:bg-[rgba(185,153,243,0.2)] text-sm"
                 ></span>
                 ${{ format.tokenValue(delegationItem?.balance) }}
               </div>
@@ -313,10 +319,10 @@ function mapAmount(events: readonly Event[]) {
                 </div>
               </div>
               <div
-                class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2"
+                class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:text-link mr-2"
               >
                 <span
-                  class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:invert text-sm"
+                  class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:bg-[rgba(185,153,243,0.2)] text-sm"
                 ></span
                 >${{ format.tokenValue(rewardItem, 1e18) }}
               </div>
@@ -352,10 +358,10 @@ function mapAmount(events: readonly Event[]) {
                 </div>
               </div>
               <div
-                class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:invert mr-2"
+                class="text-xs truncate relative py-1 px-3 rounded-full w-fit text-primary dark:text-link mr-2"
               >
                 <span
-                  class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:invert"
+                  class="inset-x-0 inset-y-0 opacity-10 absolute bg-primary dark:bg-[rgba(185,153,243,0.2)]"
                 ></span>
                 ${{
                   format.tokenValue(
@@ -372,16 +378,22 @@ function mapAmount(events: readonly Event[]) {
           <div
             class="mt-4 text-lg font-semibold mr-5 pl-5 border-t pt-4 text-right"
           >
-            {{ $t('account.total_value') }}: ${{ totalValue }}
+            {{ $t('account.total_value') }}: ${{
+              totalValue && !isNaN(Number(totalValue)) ? totalValue : 0
+            }}
           </div>
         </div>
       </div>
     </div>
 
     <!-- Delegations -->
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
+    <div
+      class="m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627]"
+    >
       <div class="flex justify-between">
-        <h2 class="card-title mb-4">{{ $t('account.delegations') }}</h2>
+        <h2 class="card-title mb-4 text-white">
+          {{ $t('account.delegations') }}
+        </h2>
         <div class="flex justify-end mb-4">
           <label
             for="delegate"
@@ -496,10 +508,12 @@ function mapAmount(events: readonly Event[]) {
 
     <!-- Unbonding Delegations -->
     <div
-      class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow"
+      class="m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627]"
       v-if="unbonding && unbonding.length > 0"
     >
-      <h2 class="card-title mb-4">{{ $t('account.unbonding_delegations') }}</h2>
+      <h2 class="card-title mb-4 text-white">
+        {{ $t('account.unbonding_delegations') }}
+      </h2>
       <div class="overflow-x-auto">
         <table class="table text-sm w-full">
           <thead>
@@ -565,8 +579,12 @@ function mapAmount(events: readonly Event[]) {
     </div>
 
     <!-- Transactions -->
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title mb-4">{{ $t('account.transactions') }}</h2>
+    <div
+      class="m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627]"
+    >
+      <h2 class="card-title mb-4 text-white">
+        {{ $t('account.transactions') }}
+      </h2>
       <div class="overflow-x-auto">
         <table class="table w-full text-sm">
           <thead>
@@ -589,14 +607,14 @@ function mapAmount(events: readonly Event[]) {
               <td class="text-sm py-3">
                 <RouterLink
                   :to="`/${chain}/block/${v.height}`"
-                  class="text-primary dark:invert"
+                  class="text-primary dark:text-link"
                   >{{ v.height }}</RouterLink
                 >
               </td>
               <td class="truncate py-3" style="max-width: 200px">
                 <RouterLink
                   :to="`/${chain}/tx/${toHex(v.hash)}`"
-                  class="text-primary dark:invert"
+                  class="text-primary dark:text-link"
                 >
                   {{ toHex(v.hash) }}
                 </RouterLink>
@@ -624,8 +642,10 @@ function mapAmount(events: readonly Event[]) {
     </div>
 
     <!-- Received -->
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title mb-4">{{ $t('account.received') }}</h2>
+    <div
+      class="m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627]"
+    >
+      <h2 class="card-title mb-4 text-white">{{ $t('account.received') }}</h2>
       <div class="overflow-x-auto">
         <table class="table w-full text-sm">
           <thead>
@@ -648,14 +668,14 @@ function mapAmount(events: readonly Event[]) {
               <td class="text-sm py-3">
                 <RouterLink
                   :to="`/${chain}/block/${v.height}`"
-                  class="text-primary dark:invert"
+                  class="text-primary dark:text-link"
                   >{{ v.height }}</RouterLink
                 >
               </td>
               <td class="truncate py-3" style="max-width: 200px">
                 <RouterLink
                   :to="`/${chain}/tx/${toHex(v.hash)}`"
-                  class="text-primary dark:invert"
+                  class="text-primary dark:text-link"
                 >
                   {{ toHex(v.hash) }}
                 </RouterLink>
@@ -683,8 +703,10 @@ function mapAmount(events: readonly Event[]) {
     </div>
 
     <!-- Account -->
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-      <h2 class="card-title mb-4">{{ $t('account.acc') }}</h2>
+    <div
+      class="m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627]"
+    >
+      <h2 class="card-title mb-4 text-white">{{ $t('account.acc') }}</h2>
       <DynamicComponent :value="account" />
     </div>
   </div>
diff --git a/src/modules/[chain]/block/[height].vue b/src/modules/[chain]/block/[height].vue
index 68c00340..908debd9 100644
--- a/src/modules/[chain]/block/[height].vue
+++ b/src/modules/[chain]/block/[height].vue
@@ -76,49 +76,50 @@ onBeforeRouteUpdate(async (to, from, next) => {
   <div>
     <div v-if="isFutureBlock" class="text-center">
       <div v-if="remainingBlocks > 0">
-        <div class="text-primary font-bold text-lg my-10">#{{ target }}</div>
-        <Countdown :time="estimateTime" css="md:!text-5xl font-sans md:mx-5" />
-        <div class="my-5">{{ $t('block.estimated_time') }}: <span class="text-xl font-bold">{{ format.toLocaleDate(estimateDate) }}</span>
+        <div class="text-white font-bold text-lg my-10">#{{ target }}</div>
+        <Countdown :time="estimateTime" css="md:mx-3 mx-2" />
+        <div class="my-5 text-[#B4B7BB] font-normal text-[14px]">{{ $t('block.estimated_time') }}: <span class="text-xl font-normal">{{ format.toLocaleDate(estimateDate) }}</span>
         </div>
         <div class="pt-10 flex justify-center">
-          <table class="table w-max rounded-lg bg-base-100">
+          <div class=" box-content !p-6 rounded-2xl !bg-base">
+          <table class="table w-max rounded-2xl">
             <tbody>
-              <tr class="hover cursor-pointer" @click="edit = !edit">
+              <tr class="hover hover:brightness-150 rounded cursor-pointer !border-base-300" @click="edit = !edit">
                 <td>{{ $t('block.countdown_for_block') }}:</td>
                 <td class="text-right"><span class="md:!ml-40">{{ target }}</span></td>
               </tr>
-              <tr v-if="edit">
+              <tr v-if="edit" class="!border-base-300">
                 <td colspan="2" class="text-center">
                   <h3 class="text-lg font-bold">{{ $t('block.countdown_for_block_input') }}</h3>
                   <p class="py-4">
                   <div class="join">
-                    <input class="input input-bordered join-item" v-model="newHeight" type="number" />
+                    <input class="input input-bordered join-item !bg-base-300" v-model="newHeight" type="number" />
                     <button class="btn btn-primary join-item" @click="updateTarget()">{{ $t('block.btn_update') }}</button>
                   </div>
                   </p>
                 </td>
               </tr>
-              <tr>
+              <tr class="!border-base-300">
                 <td>{{ $t('block.current_height') }}:</td>
                 <td class="text-right">#{{ store.latest?.block?.header.height }}</td>
               </tr>
-              <tr>
+              <tr class="!border-base-300">
                 <td>{{ $t('block.remaining_blocks') }}:</td>
                 <td class="text-right">{{ remainingBlocks }}</td>
               </tr>
-              <tr>
+              <tr class="!border-base-300">
                 <td>{{ $t('block.average_block_time') }}:</td>
                 <td class="text-right">{{ (store.blocktime / 1000).toFixed(1) }}s</td>
               </tr>
             </tbody>
-          </table>
+          </table></div>
         </div>
 
       </div>
     </div>
     <div v-else>
-      <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-        <h2 class="card-title flex flex-row justify-between">
+      <div class="box-content">
+        <h2 class="card-title flex flex-row justify-between text-white">
           <p class="">#{{ current.block?.header?.height }}</p>
           <div class="flex" v-if="props.height">
             <RouterLink :to="`/${store.blockchain.chainName}/block/${height - 1}`"
@@ -136,18 +137,18 @@ onBeforeRouteUpdate(async (to, from, next) => {
         </div>
       </div>
 
-      <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-        <h2 class="card-title flex flex-row justify-between">{{ $t('block.block_header') }}</h2>
+      <div class="box-content">
+        <h2 class="card-title flex flex-row justify-between text-white">{{ $t('block.block_header') }}</h2>
         <DynamicComponent :value="current.block?.header" />
       </div>
 
-      <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
-        <h2 class="card-title flex flex-row justify-between">{{ $t('account.transactions') }}</h2>
+      <div class="box-content">
+        <h2 class="card-title flex flex-row justify-between text-white">{{ $t('account.transactions') }}</h2>
         <TxsElement :value="current.block" />
       </div>
 
-      <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
-        <h2 class="card-title flex flex-row justify-between">{{ $t('block.last_commit') }}</h2>
+      <div class="box-content">
+        <h2 class="card-title flex flex-row justify-between text-white">{{ $t('block.last_commit') }}</h2>
         <DynamicComponent :value="commit" />
       </div>
   </div>
diff --git a/src/modules/[chain]/block/index.vue b/src/modules/[chain]/block/index.vue
index 9b7ed7b6..35c4e079 100644
--- a/src/modules/[chain]/block/index.vue
+++ b/src/modules/[chain]/block/index.vue
@@ -1,62 +1,88 @@
 <script lang="ts" setup>
-import { computed, ref } from '@vue/reactivity';
+import Countdown from '@/components/Countdown.vue';
 import { useBaseStore, useFormatter } from '@/stores';
-import { fromAscii, toBase64 } from '@cosmjs/encoding';
+import { toBase64 } from '@cosmjs/encoding';
+import type { BlockResponse } from '@cosmjs/tendermint-rpc';
+import { computed, ref } from '@vue/reactivity';
+import { watchEffect } from 'vue';
+import { onBeforeRouteUpdate } from 'vue-router';
 const props = defineProps(['chain']);
 
-const tab = ref('blocks');
-
 const base = useBaseStore();
-
 const format = useFormatter();
+const tab = ref('blocks');
+const lastHeight = ref(Number(base.latest?.block?.header.height || 0) + 10000)
+const target = ref(Number(lastHeight.value || 0))
+const current = ref({} as BlockResponse)
 
 const list = computed(() => {
   const recents = base.recents;
+  console.log('first', recents)
   return recents.sort(
     (a, b) => Number(b.block.header.height) - Number(a.block.header.height)
   );
+
 });
+
+watchEffect(() => {
+  if (base.latest?.block?.header.height && lastHeight.value === 10000) {
+    lastHeight.value = Number(base.latest?.block?.header.height || 0) + 10000
+    target.value = Number(lastHeight.value || 0)
+  }
+});
+
+const remainingBlocks = computed(() => {
+  const latest = base.latest?.block?.header.height
+  return latest ? Number(target.value) - Number(latest) : 0
+})
+
+const estimateTime = computed(() => {
+  const seconds = remainingBlocks.value * Number((base.blocktime / 1000).toFixed()) * 1000
+  return seconds
+})
+
+const estimateDate = computed(() => {
+  return new Date(new Date().getTime() + estimateTime.value)
+})
+
+const edit = ref(false)
+const newHeight = ref(lastHeight.value)
+function updateTarget() {
+  target.value = Number(newHeight.value)
+  console.log(target.value)
+}
+
+onBeforeRouteUpdate(async (to, from, next) => {
+  if (from.path !== to.path) {
+    base.fetchBlock(String(to.params.height)).then(x => {
+      current.value = x;
+    });
+    next();
+  }
+});
+
 </script>
 <template>
-  <div>
+  <div class="m-4 md:m-6 border border-base-400 bg-base-500 rounded-2xl">
     <div class="tabs tabs-boxed bg-transparent mb-4">
-      <a
-        class="tab text-gray-400 uppercase"
-        :class="{ 'tab-active': tab === 'blocks' }"
-        @click="tab = 'blocks'"
-        >{{ $t('block.recent') }}</a
-      >
-      <RouterLink
-        class="tab text-gray-400 uppercase"
-        :to="`/${chain}/block/${
-          Number(base.latest?.block?.header.height || 0) + 10000
-        }`"
-        >{{ $t('block.future') }}</RouterLink
-      >
-      <a
-        class="tab text-gray-400 uppercase"
-        :class="{ 'tab-active': tab === 'transactions' }"
-        @click="tab = 'transactions'"
-        >{{ $t('account.transactions') }}</a
-      >
+      <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'blocks' }" @click="tab = 'blocks'">{{
+        $t('block.recent') }}</a>
+      <!-- <RouterLink class="tab text-gray-400 uppercase" :to="`/${chain}/block/${Number(base.latest?.block?.header.height || 0) + 10000
+        }`">{{ $t('block.future') }}</RouterLink> -->
+      <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'future' }" @click="tab = 'future'">{{
+        $t('block.future') }}</a>
+      <a class="tab text-gray-400 uppercase" :class="{ 'tab-active': tab === 'transactions' }"
+        @click="tab = 'transactions'">{{ $t('account.transactions') }}</a>
     </div>
 
-    <div
-      v-show="tab === 'blocks'"
-      class="grid xl:!grid-cols-6 md:!grid-cols-4 grid-cols-1 gap-3"
-    >
-      <RouterLink
-        v-for="item in list"
-        class="flex flex-col justify-between rounded p-4 shadow bg-base-100"
-        :to="`/${chain}/block/${item.block.header.height}`"
-      >
+    <div v-show="tab === 'blocks'" class="grid xl:!grid-cols-6 md:!grid-cols-4 grid-cols-1 gap-3">
+      <!-- <RouterLink v-for="item in list" class="flex flex-col justify-between rounded p-4 shadow bg-base-100"
+        :to="`/${chain}/block/${item.block.header.height}`">
         <div class="flex justify-between">
           <h3 class="text-md font-bold sm:!text-lg">
             {{ item.block.header.height }}
           </h3>
-          <span
-            class="rounded text-xs whitespace-nowrap font-medium text-green-600"
-          >
+          <span class="rounded text-xs whitespace-nowrap font-medium text-green-600">
             {{ format.toDay(item.block?.header?.time.toString(), 'from') }}
           </span>
         </div>
@@ -65,7 +91,7 @@ const list = computed(() => {
             <span>{{
               format.validator(
                 item.block?.header?.proposerAddress &&
-                  toBase64(item.block?.header?.proposerAddress)
+                toBase64(item.block?.header?.proposerAddress)
               )
             }}</span>
           </div>
@@ -73,65 +99,98 @@ const list = computed(() => {
             {{ item.block?.txs.length }} txs
           </span>
         </div>
-      </RouterLink>
+      </RouterLink> -->
+      
     </div>
 
-    <div
-      v-show="tab === 'transactions'"
-      class="bg-base-100 rounded overflow-x-auto"
-    >
+    <div v-show="tab === 'future'" class="bg-base-100 rounded overflow-x-auto">
+      <div class="text-center">
+        <div v-if="remainingBlocks > 0">
+          <div class="text-white font-bold text-lg my-10">#{{ target }}</div>
+          <Countdown :time="estimateTime" css="md:mx-3 mx-2" />
+          <div class="my-5 text-[#B4B7BB] font-normal text-[14px]">{{ $t('block.estimated_time') }}: <span
+              class="text-xl font-normal">{{ format.toLocaleDate(estimateDate) }}</span>
+          </div>
+          <div class="pt-10 flex justify-center">
+            <div class=" box-content !p-6 rounded-2xl !bg-base">
+              <table class="table w-max rounded-2xl">
+                <tbody>
+                  <tr class="hover hover:brightness-150 rounded cursor-pointer !border-base-300" @click="edit = !edit">
+                    <td>{{ $t('block.countdown_for_block') }}:</td>
+                    <td class="text-right"><span class="md:!ml-40">{{ target }}</span></td>
+                  </tr>
+                  <tr v-if="edit" class="!border-base-300">
+                    <td colspan="2" class="text-center">
+                      <h3 class="text-lg font-bold">{{ $t('block.countdown_for_block_input') }}</h3>
+                      <p class="py-4">
+                      <div class="join">
+                        <input class="input input-bordered join-item !bg-base-300" v-model="newHeight" type="number" />
+                        <button class="btn btn-primary join-item" @click="updateTarget()">{{ $t('block.btn_update')
+                          }}</button>
+                      </div>
+                      </p>
+                    </td>
+                  </tr>
+                  <tr class="!border-base-300">
+                    <td>{{ $t('block.current_height') }}:</td>
+                    <td class="text-right">#{{ base.latest?.block?.header.height }}</td>
+                  </tr>
+                  <tr class="!border-base-300">
+                    <td>{{ $t('block.remaining_blocks') }}:</td>
+                    <td class="text-right">{{ remainingBlocks }}</td>
+                  </tr>
+                  <tr class="!border-base-300">
+                    <td>{{ $t('block.average_block_time') }}:</td>
+                    <td class="text-right">{{ (base.blocktime / 1000).toFixed(1) }}s</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <div v-show="tab === 'transactions'" class="bg-base-100    rounded overflow-x-auto">
       <table class="table w-full table-compact">
         <thead class="bg-base-200">
           <tr>
-            <th style="position: relative; z-index: 2">
-              {{ $t('account.height') }}
-            </th>
+            <th>{{ $t('account.messages') }}</th>
             <th style="position: relative; z-index: 2">
               {{ $t('account.hash') }}
             </th>
-            <th>{{ $t('account.messages') }}</th>
             <th>{{ $t('block.fees') }}</th>
+            <th style="position: relative; z-index: 2">
+              {{ $t('account.height') }}
+            </th>
           </tr>
         </thead>
         <tbody>
-          <tr
-            v-for="(item, index) in base.txsInRecents"
-            :index="index"
-            class="hover"
-          >
-            <td class="text-sm text-primary">
-              <RouterLink :to="`/${props.chain}/block/${item.height}`">{{
-                item.height
-              }}</RouterLink>
-            </td>
-            <td class="truncate text-primary" width="50%">
+          <tr v-for="(item, index) in base.txsInRecents" :index="index" class="hover">
+            <td>{{ format.messages(item.tx.body.messages) }}</td>
+            <td class="truncate text-link" width="50%">
               <RouterLink :to="`/${props.chain}/tx/${item.hash}`">{{
                 item.hash
-              }}</RouterLink>
+                }}</RouterLink>
             </td>
-            <td>{{ format.messages(item.tx.body.messages) }}</td>
             <td>{{ format.formatTokens(item.tx.authInfo.fee?.amount) }}</td>
+            <td class="text-sm text-link">
+              <RouterLink :to="`/${props.chain}/block/${item.height}`">{{
+                item.height
+                }}</RouterLink>
+            </td>
           </tr>
         </tbody>
       </table>
       <div class="p-4">
         <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="alert absolute inset-x-0 inset-y-0 w-full h-full bg-info opacity-10"></div>
           <div class="text-info flex gap-2">
-            <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 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>{{ $t('block.only_tx') }}</span>
           </div>
diff --git a/src/modules/[chain]/index.vue b/src/modules/[chain]/index.vue
index b217a534..fdd570fe 100644
--- a/src/modules/[chain]/index.vue
+++ b/src/modules/[chain]/index.vue
@@ -146,7 +146,7 @@ const amount = computed({
             <div class="text-xs my-2">
               {{ $t('index.rank') }}:
               <div
-                class="badge text-xs rounded bg-[#fcebea] dark:bg-[#CBAEFF] text-[#2E2E33] font-semibold h-[22px]"
+                class="badge text-xs rounded bg-[#fcebea] dark:bg-[#CBAEFF] text-base font-semibold h-[22px]"
               >
                 #{{ coinInfo.market_cap_rank }}
               </div>
@@ -171,7 +171,7 @@ const amount = computed({
             <div class="dropdown dropdown-hover w-full">
               <label>
                 <div
-                  class="bg-gray-100 dark:bg-[#2E2E33] flex flex-col items-center justify-between px-4 py-2 cursor-pointer rounded-lg border border-base-300"
+                  class="bg-gray-100 dark:bg-base flex flex-col items-center justify-between px-4 py-2 cursor-pointer rounded-lg border border-base-300"
                 >
                   <div
                     class="flex justify-between gap-2 text-[#B4B7BB] font-normal text-[14px] w-full"
@@ -190,7 +190,7 @@ const amount = computed({
                         {{ ticker?.market?.name || '' }}
                         <Icon icon="mdi:chevron-down" width="20" height="20" />
                       </div>
-                      <div class="text-[#B999F3] text-sm">
+                      <div class="text-link text-sm">
                         {{ shortName(ticker?.base, ticker?.coin_id) }}/{{
                           shortName(ticker?.target, ticker?.target_coin_id)
                         }}
@@ -222,7 +222,7 @@ const amount = computed({
                         class="flex items-center justify-between hover:bg-base-100"
                       >
                         <div class="flex-1">
-                          <div class="text-main text-sm text-[#B999F3]">
+                          <div class="text-main text-sm text-link">
                             <!-- :class="trustColor(item.trust_score)" -->
                             {{ item?.market?.name }}
                           </div>
@@ -257,7 +257,7 @@ const amount = computed({
                 {{ $t('index.buy') }} {{ coinInfo.symbol || '' }}
               </a>
               <label
-                class="btn !px-1 my-5 ml-2 rounded-lg border border-base-300 bg-[#2E2E33] h-[44px] w-[44px]"
+                class="btn !px-1 my-5 ml-2 rounded-lg border border-base-300 bg-base h-[44px] w-[44px]"
                 for="calculator"
               >
                 <svg
@@ -418,14 +418,14 @@ const amount = computed({
           <p class="text-[18px] text-[#f7f7f7] font-semibold">My Wallet</p>
 
           <p
-            class="truncate max-w-[calc(100%-10px)] sm:w-[unset] mt-1 text-[#B999F3] text-[14px] font-normal"
+            class="truncate max-w-[calc(100%-10px)] sm:w-[unset] mt-1 text-link text-[14px] font-normal"
           >
             {{ walletStore.currentAddress || 'Not Connected' }}
           </p>
         </div>
         <RouterLink
           v-if="walletStore.currentAddress"
-          class="float-right inline-flex text-sm cursor-pointer link link-primary no-underline font-medium text-[#B999F3]"
+          class="float-right inline-flex text-sm cursor-pointer link link-primary no-underline font-medium text-link"
           :to="`/${chain}/account/${walletStore.currentAddress}`"
         >
           {{ $t('index.more') }}
@@ -522,7 +522,7 @@ const amount = computed({
             <tr v-for="(item, index) in walletStore.delegations" :key="index">
               <td>
                 <RouterLink
-                  class="link link-primary no-underline text-[#B999F3]"
+                  class="link link-primary no-underline text-link"
                   :to="`/${chain}/staking/${item?.delegation?.validatorAddress}`"
                 >
                   {{
diff --git a/src/modules/[chain]/staking/[validator].vue b/src/modules/[chain]/staking/[validator].vue
index 4dcbf1e1..821a2dfc 100644
--- a/src/modules/[chain]/staking/[validator].vue
+++ b/src/modules/[chain]/staking/[validator].vue
@@ -648,7 +648,7 @@ function mapDelegators(tx: ExtraTxResponse) {
               />
             </div>
             <RouterLink
-              class="text-xs text-[#B999F3]"
+              class="text-xs text-link"
               :to="`/${chain}/account/${addresses.account}`"
             >
               {{ addresses.account }}
@@ -731,10 +731,10 @@ function mapDelegators(tx: ExtraTxResponse) {
             <tr
               v-for="{ balance, delegation } in delegations.delegationResponses"
             >
-              <td class="text-sm text-[#B999F3]">
+              <td class="text-sm text-link">
                 {{ delegation.delegatorAddress }}
               </td>
-              <td class="truncate text-[#B999F3]">
+              <td class="truncate text-link">
                 {{ format.formatToken(balance) }}
               </td>
             </tr>
@@ -768,12 +768,12 @@ function mapDelegators(tx: ExtraTxResponse) {
           </thead>
           <tbody>
             <tr v-for="(item, i) in txs.txs">
-              <td class="text-sm text-[#B999F3]">
+              <td class="text-sm text-link">
                 <RouterLink :to="`/${props.chain}/block/${item.height}`">{{
                   item.height
                 }}</RouterLink>
               </td>
-              <td class="truncate text-[#B999F3]" style="max-width: 200px">
+              <td class="truncate text-link" style="max-width: 200px">
                 <RouterLink :to="`/${props.chain}/tx/${toHex(item.hash)}`">
                   {{ toHex(item.hash) }}
                 </RouterLink>
@@ -829,7 +829,7 @@ function mapDelegators(tx: ExtraTxResponse) {
           </thead>
           <tbody>
             <tr v-for="(item, i) in events.txs">
-              <td class="pr-2 truncate text-[#B999F3]" style="max-width: 250px">
+              <td class="pr-2 truncate text-link" style="max-width: 250px">
                 <RouterLink
                   v-for="d in mapDelegators(item)"
                   :to="`/${props.chain}/account/${d}`"
@@ -861,7 +861,7 @@ function mapDelegators(tx: ExtraTxResponse) {
               </td>
               <td width="150">
                 <RouterLink
-                  class="text-[#B999F3] mb-0"
+                  class="text-link mb-0"
                   :to="`/${props.chain}/block/${item.height}`"
                   >{{ item.height }}</RouterLink
                 ><br />
diff --git a/src/modules/[chain]/staking/index.vue b/src/modules/[chain]/staking/index.vue
index e12db6eb..efc34912 100644
--- a/src/modules/[chain]/staking/index.vue
+++ b/src/modules/[chain]/staking/index.vue
@@ -447,7 +447,7 @@ loadAvatars();
 
                     <div class="flex flex-col">
                       <span
-                        class="text-sm text-primary dark:text-[#B999F3] whitespace-nowrap overflow-hidden"
+                        class="text-sm text-primary dark:text-link whitespace-nowrap overflow-hidden"
                       >
                         <RouterLink
                           :to="{
diff --git a/src/plugins/i18n/locales/en.json b/src/plugins/i18n/locales/en.json
index 78185f3e..9a290f5c 100644
--- a/src/plugins/i18n/locales/en.json
+++ b/src/plugins/i18n/locales/en.json
@@ -80,8 +80,8 @@
     "average_block_time": "Average Block Time",
     "block_header": "Block Header",
     "last_commit": "Last Commit",
-    "recent": "Recent",
-    "future": "Future",
+    "recent": "Recent Block",
+    "future": "Future Block",
     "fees": "Fees",
     "only_tx": "Only show txs in recent blocks"
   },
diff --git a/src/router/index.ts b/src/router/index.ts
index 7dc4a6d0..fea4d25d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,9 +1,9 @@
-import { useBlockchain } from "@/stores";
-import { createRouter, createWebHistory } from "vue-router";
+import { useBlockchain } from '@/stores';
+import { createRouter, createWebHistory } from 'vue-router';
 // @ts-ignore
-import { setupLayouts } from "virtual:generated-layouts";
+import { setupLayouts } from 'virtual:generated-layouts';
 // @ts-ignore
-import routes from "~pages";
+import routes from '~pages';
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -12,15 +12,17 @@ const router = createRouter({
 
 //update current blockchain
 router.beforeEach((to) => {
-    const { chain } = to.params
-    if(chain){
-      const blockchain = useBlockchain()
-      if(chain !== blockchain.chainName) {
-        blockchain.setCurrent(chain.toString())
-      }
-    } 
-})
+  const { chain } = to.params;
+  if (chain) {
+    const blockchain = useBlockchain();
+    if (chain !== blockchain.chainName) {
+      blockchain.setCurrent(chain.toString());
+    }
+  }
+});
+
+// console.log('router', router.getRoutes());
 
 // Docs: https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards
 
-export default router;
\ No newline at end of file
+export default router;
diff --git a/src/style.css b/src/style.css
index d9fcf0c3..6385ae06 100644
--- a/src/style.css
+++ b/src/style.css
@@ -80,9 +80,10 @@ table td {
 
 .countdown {
   position: absolute;
-  width: 45%;
-  text-align: right;
-  float: right;
+  transform: translate(-50%, -50%);
+  /* width: 45%; */
+  /* text-align: right; */
+  /* float: right; */
 }
 
 .validatore-table.table :where(th, td) {
@@ -149,7 +150,7 @@ table td {
 }
 
 .btn-secondary {
-  @apply cursor-pointer bg-[#2E2E33] rounded-lg border border-[#383B40] px-6 py-[14px] h-[48px] text-[14px] font-medium text-white hover:brightness-150 hover:bg-[#2E2E33] hover:border-[#383B40];
+  @apply cursor-pointer bg-base rounded-lg border border-[#383B40] px-6 py-[14px] h-[48px] text-[14px] font-medium text-white hover:brightness-150 hover:bg-base hover:border-[#383B40];
 }
 
 .box-border {
@@ -161,3 +162,14 @@ table td {
   color: white;
   border: 1px solid #b999f3;
 }
+
+.box-content {
+  @apply m-4 md:m-6 mb-4 p-4 md:p-6 rounded-[16px] shadow bg-[#141416] border border-[#242627];
+}
+
+.customTabV2.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]) {
+  background-color: transparent;
+  color: #b999f3;
+  font-weight: 600;
+  border-bottom: 2px solid #b999f3;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 952f8d49..c26db114 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,6 @@
 /** @type {import('tailwindcss').Config} */
+const colors = require('tailwindcss/colors');
+
 module.exports = {
   darkMode: ['class'],
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
@@ -8,9 +10,15 @@ module.exports = {
         yes: '#3fb68b',
         no: '#ff5353',
         info: '#00b2ff',
+        link: '#B999F3',
         main: 'var(--text-main)',
         secondary: 'var(--text-secondary)',
         active: 'var(--bg-active)',
+        base: {
+          DEFAULT: '#2E2E33',
+          400: '#242627',
+          500: '#141416',
+        },
       },
     },
   },