From b2dd46447d09b1d0b098c8cd2c61ba263bd4640b Mon Sep 17 00:00:00 2001
From: trungbach <trunga2k29@gmail.com>
Date: Mon, 8 Jul 2024 17:20:37 +0700
Subject: [PATCH] style: update ui paramerter pages

---
 src/components/CardParameter.vue         | 21 ++++++++---
 src/components/ChainSummary.vue          |  2 +-
 src/layouts/components/DefaultLayout.vue | 44 +++++++++++-----------
 src/layouts/components/NavFooter.vue     | 20 ++++------
 src/modules/[chain]/params/index.vue     | 47 +++++++++++++++---------
 src/pages/index.vue                      | 19 +++-------
 src/plugins/i18n/locales/cn.json         |  2 +-
 src/plugins/i18n/locales/en.json         |  2 +-
 src/plugins/i18n/locales/id.json         |  2 +-
 9 files changed, 85 insertions(+), 74 deletions(-)

diff --git a/src/components/CardParameter.vue b/src/components/CardParameter.vue
index 9a5cd9e7..9ecd86c6 100644
--- a/src/components/CardParameter.vue
+++ b/src/components/CardParameter.vue
@@ -8,6 +8,9 @@ const props = defineProps({
   cardItem: {
     type: Object as PropType<{ title: string; items: Array<any> }>,
   },
+  grid: {
+    type: Object as PropType<number>,
+  },
 });
 
 const formatter = useFormatter();
@@ -51,22 +54,28 @@ function calculateValue(value: any) {
 </script>
 <template>
   <div
-    class="bg-base-100 px-4 pt-3 pb-4 rounded mt-5"
+    class="bg-base-100 px-6 py-6 rounded-[16px] mt-5"
     v-if="props.cardItem?.items && props.cardItem?.items?.length > 0"
   >
-    <div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
+    <div class="text-base font-semibold mb-3 text-white">
+      {{ props.cardItem?.title }}
+    </div>
     <div
-      class="grid grid-cols-2 md:!grid-cols-4 lg:!grid-cols-5 2xl:!grid-cols-6 gap-4"
+      class="grid grid-cols-2 md:!grid-cols-2 gap-4"
+      :class="{
+        [`lg:!grid-cols-${props.grid}`]: props.grid,
+        [`2xl:!grid-cols-${props.grid}`]: props.grid,
+      }"
     >
       <div
         v-for="(item, index) of props.cardItem?.items"
         :key="index"
-        class="rounded-sm bg-active px-4 py-2"
+        class="rounded-lg bg-[rgba(180,183,187,0.10)] px-4 py-2"
       >
-        <div class="text-xs mb-2 text-secondary capitalize text-break">
+        <div class="text-sm mb-2 text-[#B4B7BB] capitalize text-break">
           {{ formatTitle(item?.subtitle) }}
         </div>
-        <div class="text-base text-main text-break">
+        <div class="text-[14px] text-white text-break font-semibold">
           {{ calculateValue(item?.value) }}
         </div>
       </div>
diff --git a/src/components/ChainSummary.vue b/src/components/ChainSummary.vue
index 53edb036..48437177 100644
--- a/src/components/ChainSummary.vue
+++ b/src/components/ChainSummary.vue
@@ -27,7 +27,7 @@ const addFavor = (e: Event) => {
 <template>
   <RouterLink
     :to="`/${name}`"
-    class="bg-base-100 hover:bg-gray-100 dark:hover:bg-[#373f59] rounded shadow flex items-center px-3 py-3 cursor-pointer"
+    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">
       <img :src="conf.logo" />
diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue
index fafdf349..e17822f9 100644
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -113,12 +113,15 @@ function confirm() {
       class="w-64 fixed z-50 left-0 top-0 bottom-0 overflow-auto bg-base-100 border-r border-gray-100 dark:border-[#383B40]"
       :class="{ block: sidebarShow, 'hidden xl:!block': !sidebarShow }"
     >
-      <div class="flex justify-between mt-1 pl-4 py-4 mb-1 border-b border-[#383B40]">
-        <RouterLink to="/" class="flex flex-1 items-center w-full justify-center">
+      <div
+        class="flex justify-between mt-1 pl-4 py-4 mb-1 border-b border-[#383B40]"
+      >
+        <RouterLink
+          to="/"
+          class="flex flex-1 items-center w-full justify-center"
+        >
           <img class="w-10 h-10" src="../../assets/logo.svg" />
-          <h1 class="ml-3 text-2xl font-semibold dark:text-white">
-            OraiScan
-          </h1>
+          <h1 class="ml-3 text-2xl font-semibold dark:text-white">OraiScan</h1>
         </RouterLink>
         <div
           class="pr-4 cursor-pointer xl:!hidden flex items-center"
@@ -127,10 +130,7 @@ function confirm() {
           <Icon icon="mdi-close" class="text-2xl" />
         </div>
       </div>
-      <div
-        v-for="(item, index) of blockchain.computedChainMenu"
-        :key="index"
-        >
+      <div v-for="(item, index) of blockchain.computedChainMenu" :key="index">
         <!-- class="px-2" -->
         <div
           v-if="isNavGroup(item)"
@@ -138,7 +138,7 @@ function confirm() {
           class="collapse"
           :class="{
             'collapse-arrow': item?.children?.length > 0,
-            'collapse-open': sidebarOpen, // index === 0 && 
+            'collapse-open': sidebarOpen, // index === 0 &&
             'collapse-close': index === 0 && !sidebarOpen,
           }"
         >
@@ -167,7 +167,7 @@ function confirm() {
             <div
               class="text-base text-gray-700 dark:text-gray-200 whitespace-nowrap text-[16px] uppercase font-semibold"
               :class="{
-                'capitalize': item?.icon?.icon
+                capitalize: item?.icon?.icon,
               }"
             >
               {{ item?.title }}
@@ -175,7 +175,7 @@ function confirm() {
             <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="item?.badgeClass" -->
               {{ item?.badgeContent }}
             </div>
@@ -251,9 +251,9 @@ function confirm() {
             {{ item?.title }}
           </div>
           <div
-            v-if="item?.badgeContent"              
+            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="item?.badgeClass" -->
             {{ item?.badgeContent }}
           </div>
@@ -340,13 +340,13 @@ function confirm() {
 
         <!-- <NavSearchBar />-->
         <div class="lg:block hidden w-full max-w-[334px]">
-            <input
-              class="input flex-1 w-full !input-bordered bg-[#2E2E33] text-[14px] font-normal h-[44px]"
-              v-model="searchQuery"
-              placeholder="Search by Height, Address and TxHash"
-              v-on:keyup.enter="confirm"
-            />
-            <!-- <div
+          <input
+            class="input flex-1 w-full !input-bordered bg-[#2E2E33] text-[14px] font-normal h-[44px]"
+            v-model="searchQuery"
+            placeholder="Search by Height, Address and TxHash"
+            v-on:keyup.enter="confirm"
+          />
+          <!-- <div
               class="mt-2 text-right text-sm text-error"
               v-show="errorMessage"
             >
@@ -360,7 +360,7 @@ function confirm() {
       </div>
 
       <!-- 👉 Pages -->
-      <div style="min-height: calc(100vh - 180px)" class="px-3">
+      <div style="min-height: calc(100vh - 180px)" class="px-6">
         <RouterView v-slot="{ Component }">
           <Transition mode="out-in">
             <Component :is="Component" />
diff --git a/src/layouts/components/NavFooter.vue b/src/layouts/components/NavFooter.vue
index babc284e..d8ea9a39 100644
--- a/src/layouts/components/NavFooter.vue
+++ b/src/layouts/components/NavFooter.vue
@@ -1,37 +1,33 @@
 <template>
   <!-- footer -->
   <footer
-    class="flex items-center h-12 mt-5 text-sm bg-gray-100 dark:bg-[#171d30] py-2 z-10 w-full"
+    class="flex items-center h-12 mt-5 text-sm bg-gray-100 dark:bg-[#18181A] px-6 py-3 z-10 w-full"
   >
     <div class="flex flex-1">
       &copy;&nbsp;
-      {{ new Date().getFullYear() }}&nbsp;
-      Made With&nbsp;
-      <img src="../../assets/images/heart.svg" />&nbsp;
-      By&nbsp;
+      {{ new Date().getFullYear() }}&nbsp; Made With&nbsp;
+      <img src="../../assets/images/heart.svg" />&nbsp; By&nbsp;
       <a
-        class="link link-primary no-underline"
+        class="link no-underline text-white"
         href="https://ping.pub"
         target="_blank"
         rel="noopener noreferrer"
         >Ping.pub</a
       >
     </div>
-    <div
-      class="hidden md:!block"
-    >
+    <div class="hidden md:!block">
       <a
-        class="link link-primary no-underline mr-4"
+        class="link link-primary no-underline mr-4 text-white"
         href="https://github.com/ping-pub/explorer/blob/master/LICENSE"
         target="noopener noreferrer"
         >License</a
       >
       <a
-        class="link link-primary no-underline"
+        class="link link-primary no-underline text-white"
         href="https://github.com/ping-pub/explorer"
         target="noopener noreferrer"
         >Github</a
       >
     </div>
   </footer>
-</template>
\ No newline at end of file
+</template>
diff --git a/src/modules/[chain]/params/index.vue b/src/modules/[chain]/params/index.vue
index 35fcac73..c68b6993 100644
--- a/src/modules/[chain]/params/index.vue
+++ b/src/modules/[chain]/params/index.vue
@@ -12,44 +12,57 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div class="overflow-hidden">
-    <!-- Chain ID -->
-    <div class="bg-base-100 px-4 pt-3 pb-4 rounded">
-      <div class="text-base mb-3 text-main">{{ chain.title }}</div>
+  <!-- Chain ID -->
+  <div class="px-4 pt-3 pb-4">
+    <div class="text-base font-semibold mb-3 text-white">
+      {{ chain.title }}
+    </div>
+    <div
+      class="grid grid-cols-2 md:!grid-cols-4 lg:!grid-cols-4 2xl:!grid-cols-4 gap-4"
+    >
       <div
-        class="grid grid-cols-2 md:!grid-cols-4 lg:!grid-cols-5 2xl:!grid-cols-6 gap-4"
+        v-for="(item, index) of chain.items"
+        :key="index"
+        class="rounded-lg px-4 py-2 border border-[#383B40]"
       >
-        <div
-          v-for="(item, index) of chain.items"
-          :key="index"
-          class="rounded-sm bg-active px-4 py-2"
-        >
-          <div class="text-xs mb-2 text-secondary">
-            {{ formatTitle(item.subtitle) }}
-          </div>
-          <div class="text-base text-main">{{ item.value }}</div>
+        <div class="text-center text-base mb-1 text-main font-semibold">
+          {{ item.value }}
+        </div>
+        <div class="text-center text-xs text-[#B4B7BB]">
+          {{ formatTitle(item.subtitle) }}
         </div>
       </div>
     </div>
+  </div>
+  <div
+    class="overflow-hidden grid grid-cols-1 md:!grid-cols-1 lg:!grid-cols-2 2xl:!grid-cols-2 gap-4"
+  >
     <!-- minting Parameters  -->
     <CardParameter :cardItem="store.mint" />
     <!-- Staking Parameters  -->
     <CardParameter :cardItem="store.staking" />
     <!-- Governance Parameters -->
     <CardParameter :cardItem="store.gov" />
+  </div>
+
+  <div class="px-4 pt-3 pb-4">
     <!-- Distribution Parameters -->
     <CardParameter :cardItem="store.distribution" />
     <!-- Slashing Parameters -->
-    <CardParameter :cardItem="store.slashing" />
+    <CardParameter :cardItem="store.slashing" :grid="5" />
     <!-- Application Version -->
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded-sm mt-6">
-      <div class="text-base mb-3 text-main">{{ store.appVersion?.title }}</div>
+      <div class="text-base mb-3 text-white font-semibold">
+        {{ store.appVersion?.title }}
+      </div>
       <ArrayObjectElement :value="store.appVersion?.items" :thead="false" />
     </div>
 
     <!-- Node Information -->
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded-sm mt-6">
-      <div class="text-base mb-3 text-main">{{ store.nodeVersion?.title }}</div>
+      <div class="text-base mb-3 text-white font-semibold">
+        {{ store.nodeVersion?.title }}
+      </div>
       <ArrayObjectElement :value="store.nodeVersion?.items" :thead="false" />
     </div>
   </div>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 88c8732e..123005da 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -46,13 +46,6 @@ const chainStore = useBlockchain();
 </script>
 <template>
   <div class="">
-    <div
-      class="flex md:!flex-row flex-col items-center justify-center mb-6 mt-14 gap-2"
-    >
-      <h1 class="text-primary dark:invert text-3xl md:!text-6xl font-bold">
-        {{ $t('pages.title') }}
-      </h1>
-    </div>
     <div
       v-if="dashboard.status !== LoadingStatus.Loaded"
       class="flex justify-center"
@@ -62,14 +55,14 @@ const chainStore = useBlockchain();
 
     <div
       v-if="featured.length > 0"
-      class="text-center text-base mt-6 text-primary"
+      class="text-left text-base mt-6 text-white font-semibold"
     >
       <h2 class="mb-6">Featured Blockchains</h2>
     </div>
 
     <div
       v-if="featured.length > 0"
-      class="grid grid-cols-1 gap-4 mt-6 md:!grid-cols-3 lg:!grid-cols-4 2xl:!grid-cols-5"
+      class="grid grid-cols-1 gap-8 mt-6 md:!grid-cols-3 lg:!grid-cols-4 2xl:!grid-cols-5"
     >
       <ChainSummary
         v-for="(chain, index) in featured"
@@ -78,17 +71,17 @@ const chainStore = useBlockchain();
       />
     </div>
 
-    <div class="text-center text-base mt-6 text-primary">
+    <div class="text-left text-base mt-12 text-white font-semibold">
       <h2 class="mb-6">{{ $t('pages.description') }}</h2>
     </div>
 
     <div
-      class="flex items-center rounded-lg bg-base-100 border border-gray-200 dark:border-gray-700 mt-10"
+      class="flex items-center rounded-lg bg-[#2E2E33] border border-gray-200 dark:border-gray-700 mt-10"
     >
       <Icon icon="mdi:magnify" class="text-2xl text-gray-400 ml-3" />
       <input
         :placeholder="$t('pages.search_placeholder')"
-        class="px-4 h-10 bg-transparent flex-1 outline-none text-base"
+        class="px-4 h-10 bg-[#2E2E33] flex-1 outline-none text-base"
         v-model="keywords"
       />
       <div class="px-4 text-base hidden md:!block">
@@ -97,7 +90,7 @@ const chainStore = useBlockchain();
     </div>
 
     <div
-      class="grid grid-cols-1 gap-4 mt-6 md:!grid-cols-3 lg:!grid-cols-4 2xl:!grid-cols-5"
+      class="grid grid-cols-1 gap-8 mt-6 md:!grid-cols-3 lg:!grid-cols-4 2xl:!grid-cols-5"
     >
       <ChainSummary
         v-for="(chain, index) in chains"
diff --git a/src/plugins/i18n/locales/cn.json b/src/plugins/i18n/locales/cn.json
index caa21bb3..7ea3a054 100644
--- a/src/plugins/i18n/locales/cn.json
+++ b/src/plugins/i18n/locales/cn.json
@@ -23,7 +23,7 @@
   "pages": {
     "title": "OraiScan Dashboard",
     "slogan": "OraiScan Dashboard 是一个区块链浏览器，也是一个网页钱包，还有更多 ... 🛠",
-    "description": "Cosmos Ecosystem Blockchains 🚀",
+    "description": "Cosmos Ecosystem Blockchains",
     "search_placeholder": "搜索区块链",
     "add_to_favorite": "加入收藏夹",
     "title_all": "404",
diff --git a/src/plugins/i18n/locales/en.json b/src/plugins/i18n/locales/en.json
index 01e32f05..ad577bc1 100644
--- a/src/plugins/i18n/locales/en.json
+++ b/src/plugins/i18n/locales/en.json
@@ -27,7 +27,7 @@
     "tag": "Beta",
     "tag_all": "Page Not Found",
     "slogan": "OraiScan Dashboard is not just an explorer but also a wallet and more ... 🛠",
-    "description": "Cosmos Ecosystem Blockchains 🚀",
+    "description": "Cosmos Ecosystem Blockchains",
     "search_placeholder": "Search Chain",
     "description_all": "We couldn't find the page you are looking for.",
     "btn_index": "Back to Home"
diff --git a/src/plugins/i18n/locales/id.json b/src/plugins/i18n/locales/id.json
index 6c4d706d..affdf950 100644
--- a/src/plugins/i18n/locales/id.json
+++ b/src/plugins/i18n/locales/id.json
@@ -26,7 +26,7 @@
     "tag": "Beta",
     "tag_all": "Halaman Tidak Ditemukan",
     "slogan": "OraiScan Dashboard bukan hanya sebuah penjelajah tetapi juga sebuah dompet dan masih banyak lagi ... 🛠",
-    "description": "Cosmos Ecosystem Blockchains 🚀",
+    "description": "Cosmos Ecosystem Blockchains",
     "search_placeholder": "Telusuri Rantai",
     "description_all": "Kami tidak dapat menemukan halaman yang anda cari.",
     "btn_index": "Kembali ke awal"