feat: bg-base-100 bg-base-cotent

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>

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,27 +10,40 @@ const props = defineProps({
   },
 });
 
-const dashboardStore = useDashboard()
+const dashboardStore = useDashboard();
-const conf = computed(() => dashboardStore.chains[props.name] || {})
+const conf = computed(() => dashboardStore.chains[props.name] || {});
 
 const addFavor = (e: Event) => {
   e.stopPropagation();
   e.preventDefault();
-  dashboardStore.favoriteMap[props.name] = !dashboardStore?.favoriteMap?.[props.name];
+  dashboardStore.favoriteMap[props.name] =
-  window.localStorage.setItem('favoriteMap', JSON.stringify(dashboardStore.favoriteMap))
+    !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"
+    <div
-      :class="{ 'text-warning': dashboardStore?.favoriteMap?.[props.name], 'text-gray-300 dark:text-gray-500': !dashboardStore?.favoriteMap?.[props.name] }">
+      @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>

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>

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))
+  localStorage.setItem('favorite', JSON.stringify(state.favorite));
-})
+});
-const keywords = ref('')
+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">
+      <h2 class="mb-6">Cosmos Ecosystem Blockchains 🚀</h2>
-        Cosmos Ecosystem Blockchains 🚀
+    </div>
-      </h2>
+    <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')"
+    <VTextField
-      style="max-width: 300px;" app>
+      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">
+    <div
-      <ChainSummary v-for="(chain, index) in chains" :key="index" :name="chain.chainName" />
+      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>

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);

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;
   }
 }

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: [
+  plugins: [require('daisyui')],
-    require("daisyui")
-  ],
   daisyui: {
     themes: [
-      {
-        myTheme: {
-          info: "#666CFF",
-        }
-      },
       {
         light: {
-          ...require("daisyui/src/colors/themes")["[data-theme=light]"],
+          ...require('daisyui/src/colors/themes')['[data-theme=light]'],
-          info: "#666CFF",
+          info: '#666CFF',
-        }
+          'base-content': '#e9eaeb'
+        },
       },
       {
         dark: {
-          ...require("daisyui/src/colors/themes")["[data-theme=dark]"],
+          ...require('daisyui/src/colors/themes')['[data-theme=dark]'],
-          info: "#666CFF",
+          info: '#666CFF',
-        }
+          'base-100': '#2a334c',
+          'base-content': '#373f57'
+        },
       },
     ],
-  }
+  },
 };