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

2023-05-05 08:37:12 +08:00 · 2023-05-05 08:37:12 +08:00 · 51c173e82d
commit 51c173e82d
parent d39b4caf16
7 changed files with 84 additions and 60 deletions
--- 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>
--- 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,27 +10,40 @@ 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>
--- 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>
--- 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>
--- 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);
--- 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;
  }
 }
--- 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'
+        },
      },
    ],
-  }
+  },
 };