From 5e12bba2af2e47771e20e8f2ac399fcefdecb193 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Tue, 23 Apr 2024 14:20:08 +0700
Subject: [PATCH] refactor: stat card color

---
 src/components/StatCardComponent.vue | 56 ++++++++++++++--------------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index 7ad540bf..3f309188 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -15,21 +15,19 @@ const props = withDefaults(
     isBranch: false,
   },
 );
-
-const colorRotate = ['pink', 'purple'];
 </script>
 
 <template>
   <div
-    class="row"
+    class="stat-card row"
     style="gap: var(--size-4)"
     :class="{ 'justify-between': $q.screen.lt.md, dark }"
   >
     <AppBox
-      v-for="(v, i) in props.branch"
+      v-for="v in props.branch"
       :key="v.label"
-      class="bordered wave col-12"
-      :class="{ [`stat__${v.color || colorRotate[i % 2]}`]: true }"
+      class="bordered stat-card__wave col-12"
+      :class="{ [`stat-card__${v.color}`]: true }"
       style="width: 200px; min-width: 150px; box-shadow: var(--shadow-2)"
     >
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
@@ -39,7 +37,7 @@ const colorRotate = ['pink', 'purple'];
         ></path>
       </svg>
 
-      <div class="stat__content">
+      <div class="stat-card__content">
         <div class="text-h5 text-weight-bold">{{ v.count }}</div>
         <div class="text-weight-bold">
           {{ isBranch ? $t(v.label) : v.label }}
@@ -50,48 +48,52 @@ const colorRotate = ['pink', 'purple'];
 </template>
 
 <style scoped>
-.wave {
+.stat-card {
+  --_color: var(--gray-6);
+}
+
+.stat-card__wave {
   position: relative;
   display: flex;
+
+  & svg {
+    width: 200px;
+    position: absolute;
+    left: 0px;
+    bottom: 0;
+    opacity: 0.1;
+
+    & .box-path {
+      fill: var(--_color);
+      fill-opacity: 1;
+    }
+  }
 }
 
-svg {
-  width: 200px;
-  position: absolute;
-  left: 0px;
-  bottom: 0;
-  opacity: 0.1;
-}
-
-.box-path {
-  fill: var(--_color);
-  fill-opacity: 1;
-}
-
-.stat__content {
+.stat-card__content {
   z-index: 2;
   color: var(--_color);
   height: 100%;
   width: 200px;
 }
 
-.stat__purple {
+.stat-card__purple {
   --_color: var(--violet-11);
 }
 
-.stat__pink {
+.stat-card__pink {
   --_color: var(--pink-6);
 }
 
-.stat__green {
+.stat-card__green {
   --_color: var(--teal-10);
 }
 
-.dark .stat__purple {
+.dark .stat-card__purple {
   --_color: var(--purple-8);
 }
 
-.dark .stat__green {
+.dark .stat-card__green {
   --_color: var(--teal-8);
 }
 </style>