From ef7a95b6b3ab22d30526f7fe891cac317427cca3 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Fri, 5 Apr 2024 10:37:00 +0700
Subject: [PATCH] fix: Personnel => card status

---
 src/components/home/PersonCard.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index 0cda9566..42f25852 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -35,6 +35,7 @@ const status = ref(false);
       :key="i"
     >
       <div class="q-pa-md column items-center">
+        <!-- kebab menu -->
         <div class="full-width text-right">
           <q-btn flat round padding="sm" icon="mdi-dots-vertical" size="sm">
             <q-menu :offset="[0, 10]" style="width: 130px">
@@ -81,6 +82,7 @@ const status = ref(false);
           </q-btn>
         </div>
 
+        <!-- profile -->
         <div style="position: relative">
           <AppCircle
             bordered
@@ -91,16 +93,17 @@ const status = ref(false);
             <div class="status-circle">
               <q-icon
                 :name="`mdi-${v.disabled ? 'close' : 'check'}`"
-                :style="`color:${v.disabled ? 'var(--border-color)' : 'white'}`"
+                :style="`color:${v.disabled ? 'var(--gray-6)' : 'white'}`"
               />
             </div>
           </AppCircle>
         </div>
 
+        <!-- name symbol -->
         <span class="items-center row q-my-sm">
           {{ v.name }}
           <iconify-icon
-            class="q-px-sm"
+            class="q-pl-sm"
             :class="{
               'symbol-gender': v.male || v.female,
               'symbol-gender__male': !v.disabled && v.male,
@@ -110,7 +113,7 @@ const status = ref(false);
             :icon="`material-symbols:${v.male ? 'male' : 'female'}`"
             width="20px"
           />
-          <iconify-icon class="locale" icon="circle-flags:th" />
+          <!-- <iconify-icon class="locale q-pl-sm" icon="circle-flags:th" /> -->
         </span>
         <span
           class="badge q-px-sm"
@@ -124,6 +127,8 @@ const status = ref(false);
           {{ v.badge }}
         </span>
       </div>
+
+      <!-- detail -->
       <q-separator />
       <div
         class="q-pt-sm q-pb-md q-px-lg q-gutter-x-xl person-detail rounded-b"
@@ -160,7 +165,7 @@ const status = ref(false);
     opacity: 0.4;
 
     .status-circle {
-      background-color: var(--surface-2);
+      background-color: var(--surface-1);
     }
 
     .locale {