refactor: add border

src/components/03_customer-management/TableEmpoloyee.vue

@@ -97,12 +97,22 @@ const prop = withDefaults(
           <div class="row items-center" style="flex-wrap: nowrap">
             <div
               style="width: 50px; display: flex; margin-bottom: var(--size-2)"
+            >
+              <div
+                style="
+                  border-radius: 50%;
+                  border-style: solid;
+                  border-width: 2px;
+                  border-color: hsl(var(--pink-6-hsl));
+                  padding: 3px;
+                "
               >
                 <div class="full-width full-height">
                   <q-avatar size="md">
                     <q-img
                       :src="
-                      props.row.profileImageUrl || '/images/employee-avatar.png'
+                        props.row.profileImageUrl ||
+                        '/images/employee-avatar.png'
                       "
                       class="text-center"
                       :ratio="1"
@@ -120,7 +130,11 @@ const prop = withDefaults(
 
                     <q-badge
                       class="absolute-bottom-right no-padding"
-                    style="border-radius: 50%; min-width: 8px; min-height: 8px"
+                      style="
+                        border-radius: 50%;
+                        min-width: 8px;
+                        min-height: 8px;
+                      "
                       :style="{
                         background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
                       }"
@@ -128,6 +142,8 @@ const prop = withDefaults(
                   </q-avatar>
                 </div>
               </div>
+            </div>
+
             <div class="col">
               <div class="col">
                 {{ `${props.row.firstName} ${props.row.lastName}` || '-' }}
@@ -346,4 +362,42 @@ const prop = withDefaults(
   </q-table>
 </template>
 
-<style scoped></style>
+<style scoped>
+.branch-card__icon {
+  background-color: hsla(var(--_branch-card-bg) / 0.15);
+  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.1rem;
+    top: calc(50% - 0.25rem);
+    bottom: calc(50% - 0.25rem);
+    background-color: hsla(var(--_branch-status-color) / 1);
+  }
+
+  & :deep(.q-avatar) {
+    transform: rotate(-45deg);
+    color: hsla(var(--_branch-card-bg) / 1);
+  }
+}
+
+& .symbol-gender {
+  color: hsla(var(--_fg));
+
+  &.symbol-gender__male {
+    --_fg: var(--gender-male);
+  }
+
+  &.symbol-gender__female {
+    --_fg: var(--gender-female);
+  }
+}
+</style>