From 16b15b3a8918748452ba71a99865f51bf2d3d8cc Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 19 Sep 2024 13:31:28 +0700
Subject: [PATCH] refactor: statcard new color lime, light-purple

---
 src/components/StatCardComponent.vue | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index 273e8c76..32e37f8f 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -14,13 +14,17 @@ const props = withDefaults(
         | 'yellow'
         | 'red'
         | 'magenta'
-        | 'blue';
+        | 'blue'
+        | 'lime'
+        | 'light-purple';
     }[];
     dark?: boolean;
+    textSize?: string;
     labelI18n?: boolean;
   }>(),
   {
     labelI18n: false,
+    textSize: '12px',
   },
 );
 </script>
@@ -43,8 +47,13 @@ const props = withDefaults(
           />
         </div>
         <div class="col-6 justify-center column">
-          <div class="col-6 ellipsis text-bold" style="width: 100%">
-            {{ labelI18n ? $t(v.label) : v.label }}
+          <div
+            class="col-6 ellipsis text-bold text-caption"
+            style="width: 100%"
+          >
+            <span :style="`font-size: ${textSize}`">
+              {{ labelI18n ? $t(v.label) : v.label }}
+            </span>
             <q-tooltip
               anchor="top middle"
               self="bottom middle"
@@ -108,6 +117,14 @@ const props = withDefaults(
   --_color: var(--pink-8-hsl);
 }
 
+.stat-card__lime {
+  --_color: var(--jungle-8-hsl);
+}
+
+.stat-card__light-purple {
+  --_color: var(--purple-7-hsl);
+}
+
 .stat-card__blue {
   --_color: var(--blue-6-hsl);
 }