From ec57bae4915011b3bc2f6a426a95c8a803f8cc59 Mon Sep 17 00:00:00 2001
From: Methapon2001 <61303214+Methapon2001@users.noreply.github.com>
Date: Thu, 4 Jul 2024 14:38:38 +0700
Subject: [PATCH] refacotr: styling

---
 .../01_branch-management/BranchCard.vue       | 42 +++++++++++++------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index 2de05a9b..0dda583a 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -77,10 +77,9 @@ defineProps<{
 
 <style scoped>
 .branch-card {
-  --_branch-card-row-fg: 0 0% 100%;
-  --_branch-card-row-bg: var(--blue-5-hsl);
-  --_branch-badge-fg: var(--green-8-hsl);
-  --_branch-badge-bg: var(--green-6-hsl);
+  --_branch-card-fg: 0 0% 100%;
+  --_branch-card-bg: var(--blue-5-hsl);
+  --_branch-status-color: var(--green-6-hsl);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -91,12 +90,28 @@ defineProps<{
     margin-bottom: var(--size-2);
 
     & .branch-card__icon {
-      background-color: hsla(var(--_branch-card-row-bg) / 0.1);
+      background-color: hsla(var(--_branch-card-bg) / 0.1);
       border-radius: 50%;
       padding: var(--size-1);
+      position: relative;
+      transform: rotate(45deg);
+
+      &::after {
+        content: ' ';
+        display: block;
+        block-size: 0.5rem;
+        aspect-ratio: 1;
+        position: absolute;
+        border-radius: 50%;
+        right: -0.25rem;
+        top: calc(50% - 0.25rem);
+        bottom: calc(50% - 0.25rem);
+        background-color: hsla(var(--_branch-status-color) / 1);
+      }
 
       & :deep(.q-icon) {
-        color: hsla(var(--_branch-card-row-bg) / 1);
+        transform: rotate(-45deg);
+        color: hsla(var(--_branch-card-bg) / 1);
       }
     }
 
@@ -127,10 +142,10 @@ defineProps<{
   }
 
   &.branch-card__none {
-    --_branch-card-row-bg: var(--gray-3-hsl);
+    --_branch-card-bg: var(--gray-3-hsl);
 
     &.branch-card__dark {
-      --_branch-card-row-bg: var(--gray-9-hsl);
+      --_branch-card-bg: var(--gray-9-hsl);
     }
 
     &:not(.branch-card__dark) .branch-card__header {
@@ -143,18 +158,19 @@ defineProps<{
   }
 
   &.branch-card__hq {
-    --_branch-card-row-bg: var(--pink-6-hsl);
+    --_branch-card-bg: var(--pink-6-hsl);
   }
 
   &.branch-card__br {
-    --_branch-card-row-bg: var(--violet-11-hsl);
+    --_branch-card-bg: var(--violet-11-hsl);
   }
 
   &.branch-card__inactive {
-    --_branch-badge-fg: var(--red-4-hsl);
+    --_branch-status-color: var(--red-4-hsl);
     --_branch-badge-bg: var(--red-4-hsl);
-    filter: grayscale(40%);
-    opacity: 0.5;
+    filter: grayscale(1);
+    background-color: hsl(var(--gray-1-hsl) / 0.4);
+    opacity: 0.7;
   }
 }
 </style>