feat: disabled now have no shadow

src/components/home/PersonCard.vue

@@ -30,7 +30,7 @@ const status = ref(false);
     <AppBox
       bordered
       class="column person-box"
-      :class="{ 'person-box__disble': v.disabled }"
+      :class="{ 'person-box__disabled': v.disabled }"
       style="padding: 0"
       v-for="(v, i) in list"
       :key="i"
@@ -51,7 +51,7 @@ const status = ref(false);
                     />
                   </q-item-section>
                   <q-item-section class="text-caption">
-                    แก้ไขข้อมูล
+                    {{ $t('edit') }}
                   </q-item-section>
                 </q-item>
                 <q-item clickable v-close-popup>
@@ -63,7 +63,9 @@ const status = ref(false);
                       size="xs"
                     />
                   </q-item-section>
-                  <q-item-section class="text-caption">ลบข้อมูล</q-item-section>
+                  <q-item-section class="text-caption">
+                    {{ $t('delete') }}
+                  </q-item-section>
                 </q-item>
                 <q-item clickable>
                   <q-item-section class="col-4">
@@ -166,8 +168,9 @@ const status = ref(false);
 .person-box {
   background-color: var(--surface-2);
   border-radius: var(--radius-2) !important;
+  transition: 100ms ease-in-out;
 
-  &.person-box__disble {
+  &.person-box__disabled {
     opacity: 0.4;
 
     .status-circle {
@@ -251,7 +254,7 @@ const status = ref(false);
     align-items: center;
   }
 
-  &:hover {
+  &:not(.person-box__disabled):hover {
     --_hover: hsl(var(--gender-male));
     cursor: pointer;
     box-shadow: var(--shadow-2);