From ba66eaf9594c71e138082a09d7499686bfee37d9 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Wed, 7 Aug 2024 10:10:09 +0000
Subject: [PATCH] fix: person card status & profile banner

---
 src/components/ProfileBanner.vue   |  3 ++-
 src/components/home/PersonCard.vue | 30 +++++++++++++++++++++++++-----
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/ProfileBanner.vue b/src/components/ProfileBanner.vue
index dc980082..98e3b19c 100644
--- a/src/components/ProfileBanner.vue
+++ b/src/components/ProfileBanner.vue
@@ -144,7 +144,7 @@ const showOverlay = ref(false);
         >
           <div class="column">
             <span class="text-bold q-pt-xs text-body1">{{ title }}</span>
-            <span class="app-text-muted">{{ caption }}</span>
+            <span v-if="title" class="app-text-muted">{{ caption }}</span>
           </div>
 
           <!-- icon -->
@@ -158,6 +158,7 @@ const showOverlay = ref(false);
               dense
               size="md"
               padding="none"
+              color="positive"
               :model-value="toggleStatus !== 'INACTIVE'"
               @click="$emit('update:toggleStatus', toggleStatus)"
             />
diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index 146adef7..52a64d26 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -169,7 +169,7 @@ defineEmits<{
       <!-- profile -->
       <AppCircle
         bordered
-        class="avatar"
+        class="avatar relative-position"
         style="border: 2px solid var(--border-color); overflow: visible"
         @click="$emit('editProfile')"
       >
@@ -191,7 +191,27 @@ defineEmits<{
             </div>
           </template>
         </q-img>
-        <div class="avatar__status"></div>
+        <q-badge
+          class="absolute-bottom-right"
+          style="
+            border-radius: 50%;
+            width: 16px;
+            height: 16px;
+            z-index: 2;
+            background: var(--border-color);
+          "
+        >
+          <q-badge
+            class="absolute-center"
+            style="
+              border-radius: 7px;
+              width: 14px;
+              height: 14px;
+              background: hsl(var(--positive-bg));
+            "
+          ></q-badge>
+          <!-- :style="`background: hsl(var(${active ? '--positive-bg' : '--text-mute'}))`" -->
+        </q-badge>
       </AppCircle>
 
       <!-- name symbol -->
@@ -330,7 +350,7 @@ defineEmits<{
 
 .avatar {
   block-size: 5rem;
-  transform: rotate(45deg);
+  /* transform: rotate(45deg); */
 
   & .avatar__status {
     content: ' ';
@@ -346,9 +366,9 @@ defineEmits<{
     background-color: hsla(var(--positive-bg) / 1);
   }
 
-  & :deep(.q-img) {
+  /* & :deep(.q-img) {
     transform: rotate(-45deg);
-  }
+  } */
 }
 
 .edit-profile {