From 19fbeb8ffd7d0c5a83c963d1c1d02d24dfedf3dc Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Fri, 12 May 2023 21:42:22 +0800
Subject: [PATCH] feat: CardStatics

---
 src/components/CardStatisticsVertical.vue | 40 ++++++++++++-----------
 src/modules/[chain]/staking/index.vue     | 10 +++---
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/src/components/CardStatisticsVertical.vue b/src/components/CardStatisticsVertical.vue
index e096977b..a6f0725c 100644
--- a/src/components/CardStatisticsVertical.vue
+++ b/src/components/CardStatisticsVertical.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
 interface Props {
   title: string;
   color?: string;
@@ -19,40 +21,40 @@ const isPositive = controlledComputed(
 </script>
 
 <template>
-  <VCard class="h-full flex-col content-between">
-    <VCardText class="d-flex align-center justify-between">
-      <VAvatar
+  <div class="bg-base-100 shadow rounded p-4">
+    <div class="flex items-center justify-between">
+      <div
         v-if="props.icon"
-        rounded
-        size="38"
-        variant="tonal"
-        :color="props.color"
+        class="relative w-9 h-9 rounded overflow-hidden flex items-center justify-center"
       >
-        <VIcon :icon="props.icon" size="24" />
-      </VAvatar>
+        <Icon :class="[`text-${props?.color}`]" :icon="props.icon" size="32" />
+        <div
+          class="absolute top-0 left-0 bottom-0 right-0 opacity-20"
+          :class="[`bg-${props?.color}`]"
+        ></div>
+      </div>
 
       <div
         v-if="props.change"
         :class="isPositive ? 'text-success' : 'text-error'"
-        class="d-flex align-center text-sm font-weight-medium mt-n4"
+        class="flex items-center text-sm font-semibold"
       >
         <span>{{ isPositive ? `+${props.change}` : props.change }}%</span>
-
-        <VIcon :icon="isPositive ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
+        <Icon :icon="isPositive ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
       </div>
-    </VCardText>
+    </div>
 
-    <VCardText class="d-flex flex-col">
-      <h6 class="text-h6 me-2 mt-2 mb-1">
+    <div class="">
+      <h6 class="text-lg font-semibold mt-2 mb-1">
         {{ props.stats }}
       </h6>
       <p class="text-sm">
         {{ props.title }}
       </p>
 
-      <VChip v-if="props.subtitle" size="x-small" class="font-weight-medium">
+      <div v-if="props.subtitle" size="x-small" class="font-semibold">
         <span class="text-truncate">{{ props.subtitle }}</span>
-      </VChip>
-    </VCardText>
-  </VCard>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/src/modules/[chain]/staking/index.vue b/src/modules/[chain]/staking/index.vue
index 58fdd84b..0d972940 100644
--- a/src/modules/[chain]/staking/index.vue
+++ b/src/modules/[chain]/staking/index.vue
@@ -231,14 +231,14 @@ const rank = function (position: number) {
                   style="max-width: 400px"
                 >
                   <div
-                    class="avatar mr-4 relative w-9 rounded-full overflow-hidden"
+                    class="avatar mr-4 relative w-8 h-8 rounded-full overflow-hidden"
                   >
                     <div
-                      class="w-9 rounded-full bg-gray-400 absolute opacity-10"
+                      class="w-8 h-8 rounded-full bg-gray-400 absolute opacity-10"
                     ></div>
-                    <div class="w-9 rounded-full">
+                    <div class="w-8 h-8 rounded-full">
                       <img
-                        v-if="logo(v.description?.identity) !== ''"
+                        v-if="v.description?.identity"
                         v-lazy="logo(v.description?.identity)"
                         class="object-contain"
                       />
@@ -366,7 +366,7 @@ const rank = function (position: number) {
 
 <style>
 .staking-table.table :where(th, td) {
-  padding: 6px 5px;
+  padding: 8px 5px;
   background: transparent;
 }
 </style>