From f618766d54437decd7694a4114a8d1a2a51c1ccb Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 11 Apr 2024 09:43:09 +0700
Subject: [PATCH] feat: dark mode different color

---
 src/components/StatCardComponent.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index 1be919bd..5dc55835 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -6,6 +6,7 @@ const props = defineProps<{
     amount: number;
     label: string;
   }[];
+  dark?: boolean;
 }>();
 
 const color = ['pink', 'purple'];
@@ -15,7 +16,7 @@ const color = ['pink', 'purple'];
   <div
     class="row"
     style="gap: var(--size-4)"
-    :class="{ 'justify-between': $q.screen.lt.md }"
+    :class="{ 'justify-between': $q.screen.lt.md, dark }"
   >
     <AppBox
       v-for="(v, i) in props.branch"
@@ -38,7 +39,7 @@ const color = ['pink', 'purple'];
 
       <div class="column justify-around stat-card-content">
         <div class="col-4 text-h5 text-weight-bold">{{ v.amount }}</div>
-        <div class="text-weight-bold">{{ v.label }}</div>
+        <div class="text-weight-bold">{{ $t(v.label) }}</div>
       </div>
     </AppBox>
   </div>
@@ -77,4 +78,8 @@ svg {
 .color-pink {
   --_color-stat-card: var(--pink-6);
 }
+
+.dark .color-purple {
+  --_color-stat-card: var(--purple-8);
+}
 </style>