From 51c173e82d1306cbd88f07b589c0ab779d8f2e93 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 5 May 2023 08:37:12 +0800
Subject: [PATCH] feat: bg-base-100 bg-base-cotent

---
 src/components/CardParameter.vue              |  2 +-
 src/components/ChainSummary.vue               | 37 +++++++----
 src/modules/[chain]/params/index.vue          |  6 +-
 src/pages/index.vue                           | 61 ++++++++++++-------
 src/plugins/vuetify/@core/components/I18n.vue |  6 +-
 src/style.css                                 |  4 --
 tailwind.config.js                            | 28 ++++-----
 7 files changed, 84 insertions(+), 60 deletions(-)

diff --git a/src/components/CardParameter.vue b/src/components/CardParameter.vue
index a301393a..a1c1f3d6 100644
--- a/src/components/CardParameter.vue
+++ b/src/components/CardParameter.vue
@@ -25,7 +25,7 @@ function calculateValue(value: any){
 </script>
 <template>
   <div
-    class="bg-card px-4 pt-3 pb-4 rounded mt-5"
+    class="bg-base-100 px-4 pt-3 pb-4 rounded mt-5"
     v-if="props.cardItem?.items && props.cardItem?.items?.length > 0"
   >
     <div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
diff --git a/src/components/ChainSummary.vue b/src/components/ChainSummary.vue
index 19d0dd67..ff6536e5 100644
--- a/src/components/ChainSummary.vue
+++ b/src/components/ChainSummary.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { getLogo, useDashboard, } from '@/stores/useDashboard';
+import { getLogo, useDashboard } from '@/stores/useDashboard';
 import { computed } from 'vue';
-import { Icon } from '@iconify/vue'
+import { Icon } from '@iconify/vue';
 
 const props = defineProps({
   name: {
@@ -10,28 +10,41 @@ const props = defineProps({
   },
 });
 
-const dashboardStore = useDashboard()
-const conf = computed(() => dashboardStore.chains[props.name] || {})
+const dashboardStore = useDashboard();
+const conf = computed(() => dashboardStore.chains[props.name] || {});
 
 const addFavor = (e: Event) => {
   e.stopPropagation();
   e.preventDefault();
-  dashboardStore.favoriteMap[props.name] = !dashboardStore?.favoriteMap?.[props.name];
-  window.localStorage.setItem('favoriteMap', JSON.stringify(dashboardStore.favoriteMap))
-}
-
+  dashboardStore.favoriteMap[props.name] =
+    !dashboardStore?.favoriteMap?.[props.name];
+  window.localStorage.setItem(
+    'favoriteMap',
+    JSON.stringify(dashboardStore.favoriteMap)
+  );
+};
 </script>
 <template>
-  <RouterLink :to="`/${name}`" class="bg-base-100 rounded shadow flex items-center px-3 py-3 cursor-pointer">
+  <RouterLink
+    :to="`/${name}`"
+    class="bg-base-100 hover:bg-base-content rounded shadow flex items-center px-3 py-3 cursor-pointer"
+  >
     <div class="w-8 h-8 rounded-full overflow-hidden">
       <img :src="conf.logo" />
     </div>
     <div class="font-semibold ml-4 text-base flex-1">
       {{ conf?.prettyName || props.name }}
     </div>
-    <div @click="addFavor" class="pl-4 text-xl"
-      :class="{ 'text-warning': dashboardStore?.favoriteMap?.[props.name], 'text-gray-300 dark:text-gray-500': !dashboardStore?.favoriteMap?.[props.name] }">
+    <div
+      @click="addFavor"
+      class="pl-4 text-xl"
+      :class="{
+        'text-warning': dashboardStore?.favoriteMap?.[props.name],
+        'text-gray-300 dark:text-gray-500':
+          !dashboardStore?.favoriteMap?.[props.name],
+      }"
+    >
       <Icon icon="mdi-star" />
     </div>
   </RouterLink>
-</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 51e49eef..7a67439e 100644
--- a/src/modules/[chain]/params/index.vue
+++ b/src/modules/[chain]/params/index.vue
@@ -14,7 +14,7 @@ onMounted(() => {
 <template>
   <div class="overflow-hidden">
     <!-- Chain ID -->
-    <div class="bg-card px-4 pt-3 pb-4 rounded">
+    <div class="bg-base-100 px-4 pt-3 pb-4 rounded">
       <div class="text-base mb-3 text-main">{{ chain.title }}</div>
       <div
         class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4"
@@ -40,13 +40,13 @@ onMounted(() => {
         <!-- Slashing Parameters -->
         <CardParameter :cardItem="store.slashing"/>
         <!-- Application Version -->
-        <div class="bg-card px-4 pt-3 pb-4 rounded-sm mt-6">
+        <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>
             <ArrayObjectElement :value="store.appVersion?.items" :thead="false"/>
         </div>
         
         <!-- Node Information -->
-        <div class="bg-card px-4 pt-3 pb-4ß rounded-sm mt-6">
+        <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>
             <ArrayObjectElement :value="store.nodeVersion?.items" :thead="false"/>
         </div>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index acf1dced..202275b5 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,24 +1,29 @@
 <script lang="ts" setup>
-import { useDashboard, LoadingStatus, type ChainConfig } from '@/stores/useDashboard';
+import {
+  useDashboard,
+  LoadingStatus,
+  type ChainConfig,
+} from '@/stores/useDashboard';
 import ChainSummary from '@/components/ChainSummary.vue';
 import { computed, ref } from 'vue';
 import { useBlockchain } from '@/stores';
 
-const dashboard = useDashboard()
+const dashboard = useDashboard();
 
 dashboard.$subscribe((mutation, state) => {
-  localStorage.setItem('favorite', JSON.stringify(state.favorite))
-})
-const keywords = ref('')
+  localStorage.setItem('favorite', JSON.stringify(state.favorite));
+});
+const keywords = ref('');
 const chains = computed(() => {
   if (keywords.value) {
-    return Object.values(dashboard.chains).filter((x: ChainConfig) => x.chainName.indexOf(keywords.value) > -1)
+    return Object.values(dashboard.chains).filter(
+      (x: ChainConfig) => x.chainName.indexOf(keywords.value) > -1
+    );
   } else {
-    return Object.values(dashboard.chains)
+    return Object.values(dashboard.chains);
   }
-})
-const chain = useBlockchain()
-
+});
+const chain = useBlockchain();
 </script>
 <template>
   <div class="">
@@ -29,29 +34,43 @@ const chain = useBlockchain()
       <h1 class="text-primary text-3xl md:text-6xl font-bold mr-2">
         Ping dashboard
       </h1>
-      <div class="badge badge-info badge-outline mt-1 text-sm md:mt-8">Beta</div>
+      <div class="badge badge-info badge-outline mt-1 text-sm md:mt-8">
+        Beta
+      </div>
     </div>
     <div class="text-center text-base">
       <p class="mb-1">
         {{ $t('index.slogan') }}
       </p>
-      <h2 class="mb-6">
-        Cosmos Ecosystem Blockchains 🚀
-      </h2>
+      <h2 class="mb-6">Cosmos Ecosystem Blockchains 🚀</h2>
+    </div>
+    <div
+      v-if="dashboard.status !== LoadingStatus.Loaded"
+      class="flex justify-center"
+    >
+      <progress class="progress progress-info w-80 h-1"></progress>
     </div>
-    <div v-if="dashboard.status !== LoadingStatus.Loaded" class="flex justify-center"><progress
-        class="progress progress-info w-80 h-1"></progress></div>
 
-    <VTextField v-model="keywords" variant="underlined" :placeholder="$t('index.search_placeholder')"
-      style="max-width: 300px;" app>
+    <VTextField
+      v-model="keywords"
+      variant="underlined"
+      :placeholder="$t('index.search_placeholder')"
+      style="max-width: 300px"
+      app
+    >
       <template #append-inner>
         {{ chains.length }}/{{ dashboard.length }}
       </template>
     </VTextField>
 
-    <div class="grid grid-cols-2 gap-4 mt-6 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5">
-      <ChainSummary v-for="(chain, index) in chains" :key="index" :name="chain.chainName" />
+    <div
+      class="grid grid-cols-2 gap-4 mt-6 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5"
+    >
+      <ChainSummary
+        v-for="(chain, index) in chains"
+        :key="index"
+        :name="chain.chainName"
+      />
     </div>
-
   </div>
 </template>
diff --git a/src/plugins/vuetify/@core/components/I18n.vue b/src/plugins/vuetify/@core/components/I18n.vue
index f3f9a04d..bf63162f 100644
--- a/src/plugins/vuetify/@core/components/I18n.vue
+++ b/src/plugins/vuetify/@core/components/I18n.vue
@@ -22,13 +22,13 @@ watch(locale, (val) => {
   document.documentElement.setAttribute('lang', val as string);
 });
 
-const currentLang = ref([localStorage.getItem('lang') || 'en']);
+const currentLang = ref(localStorage.getItem('lang') || 'en');
 </script>
 
 <template>
   <div class="dropdown dropdown-end">
     <label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
-      <Icon icon="mdi-translate" style="font-size: 24px" />
+      <Icon icon="mdi-translate" class="text-2xl" />
     </label>
     <ul
       tabindex="0"
@@ -36,6 +36,8 @@ const currentLang = ref([localStorage.getItem('lang') || 'en']);
     >
       <li v-for="lang in props.languages" :key="lang.i18nLang">
         <a
+          class="hover:bg-base-content"
+          :class="{ 'text-primary': currentLang === lang.i18nLang }"
           @click="
             locale = lang.i18nLang;
             $emit('change', lang.i18nLang);
diff --git a/src/style.css b/src/style.css
index 2c25f20c..2f33f540 100644
--- a/src/style.css
+++ b/src/style.css
@@ -6,16 +6,12 @@
   :root {
     --text-main: #333;
     --text-secondary: #4b525d;
-    --bg-card: #fff;
     --bg-active: #fbfbfc;
-    --bg-hover: #eee;
   }
 
   html.dark {
     --text-main: #f7f7f7;
     --text-secondary: #6f6e84;
-    --bg-card: #28334e;
     --bg-active: #242b40;
-    --bg-hover: #303044;
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 920c6cb6..c7ee96da 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -11,34 +11,28 @@ module.exports = {
         primary: '#666cff',
         main: 'var(--text-main)',
         secondary: 'var(--text-secondary)',
-        card: 'var(--bg-card)',
-        hover: 'var(--bg-hover)',
         active: 'var(--bg-active)',
       },
     },
   },
-  plugins: [
-    require("daisyui")
-  ],
+  plugins: [require('daisyui')],
   daisyui: {
     themes: [
-      {
-        myTheme: {
-          info: "#666CFF",
-        }
-      },
       {
         light: {
-          ...require("daisyui/src/colors/themes")["[data-theme=light]"],
-          info: "#666CFF",
-        }
+          ...require('daisyui/src/colors/themes')['[data-theme=light]'],
+          info: '#666CFF',
+          'base-content': '#e9eaeb'
+        },
       },
       {
         dark: {
-          ...require("daisyui/src/colors/themes")["[data-theme=dark]"],
-          info: "#666CFF",
-        }
+          ...require('daisyui/src/colors/themes')['[data-theme=dark]'],
+          info: '#666CFF',
+          'base-100': '#2a334c',
+          'base-content': '#373f57'
+        },
       },
     ],
-  }
+  },
 };