refactor: urgent quotation card (#60)

src/components/05_quotation/QuotationCard.vue

@@ -31,10 +31,13 @@ defineEmits<{
 }>();
 </script>
 <template>
-  <div class="surface-1 rounded bordered q-pa-sm quo-card">
+  <div
+    class="surface-1 rounded q-pa-xs quo-card bordered"
+    :class="{ 'urgent-card': urgent }"
+  >
     <!-- SEC: header -->
     <header class="row items-center no-wrap">
-      <q-img src="/images/quotation-avatar.png" width="2rem" />
+      <q-img src="/images/quotation-avatar-border.png" width="2rem" />
 
       <div class="column q-ml-sm relative-position" style="font-size: 12px">
         <span>
@@ -42,18 +45,15 @@ defineEmits<{
         </span>
         <span
           class="text-caption row items-center"
-          :class="urgent ? 'urgent' : 'app-text-muted'"
-          style="top: 10px"
+          :class="urgent ? 'code' : 'app-text-muted'"
         >
           {{ code }}
-          <q-icon
-            v-if="urgent"
-            name="mdi-fire"
-            size="xs"
-            style="position: absolute; top: 7px"
-          ></q-icon>
         </span>
       </div>
+      <div v-if="urgent" class="tag q-px-xs q-ml-sm">
+        <q-icon name="mdi-fire" size="12px" />
+        <span>{{ $t('general.urgent2') }}</span>
+      </div>
 
       <nav class="col text-right">
         <q-btn
@@ -88,7 +88,7 @@ defineEmits<{
       </nav>
     </header>
 
-    <div class="q-pt-md ellipsis">
+    <div class="ellipsis q-px-sm q-py-sm">
       {{ title || '-' }}
       <q-tooltip anchor="bottom start" self="top left">
         {{ title || '-' }}
@@ -96,47 +96,49 @@ defineEmits<{
     </div>
 
     <!-- SEC: body -->
-    <section class="row no-wrap q-py-md items-center" style="font-size: 90%">
-      <span class="app-text-muted q-pr-sm">{{ $t('general.status') }} :</span>
-      <BadgeComponent :title="status" hsla-color="--blue-6-hsl" />
-    </section>
-    <q-separator />
-    <section class="row q-py-sm">
-      <div class="col-4 app-text-muted q-pr-sm">
-        {{ $t('quotation.customerName') }}
-      </div>
-      <div class="col-8">{{ customerName || '-' }}</div>
-      <div class="col-4 app-text-muted q-pr-sm">
-        {{ $t('quotation.actor') }}
-      </div>
-      <div class="col-8">{{ reporter || '-' }}</div>
-      <div class="col-4 app-text-muted q-pr-sm">
-        {{ $t('quotation.employee') }}
-      </div>
-      <div class="col-8">
-        <BadgeComponent
-          icon="mdi-account-multiple-outline"
-          :title="[workerCount, workerMax].join(' / ')"
-        />
-      </div>
-      <div class="col-4 app-text-muted q-pr-sm">
-        {{ $t('general.createdAt') }}
-      </div>
-      <div class="col-8">
-        {{ createdAt }}
-      </div>
-      <div class="col-4 app-text-muted q-pr-sm">
-        {{ $t('general.validUntil') }}
-      </div>
-      <div class="col-8">
-        {{ validUntil }}
-      </div>
-      <div class="col-4 app-text-muted q-pr-sm">
-        {{ $t('quotation.totalPrice') }}
-      </div>
-      <div class="col-8">
-        {{ formatNumberDecimal(totalPrice || 0, 2) }}
-      </div>
+    <section class="surface-1 rounded q-px-sm">
+      <article class="row no-wrap q-py-sm items-center" style="font-size: 90%">
+        <span class="app-text-muted q-pr-sm">{{ $t('general.status') }} :</span>
+        <BadgeComponent :title="status" hsla-color="--blue-6-hsl" />
+      </article>
+      <q-separator />
+      <article class="row q-py-sm">
+        <div class="col-4 app-text-muted q-pr-sm">
+          {{ $t('quotation.customerName') }}
+        </div>
+        <div class="col-8">{{ customerName || '-' }}</div>
+        <div class="col-4 app-text-muted q-pr-sm">
+          {{ $t('quotation.actor') }}
+        </div>
+        <div class="col-8">{{ reporter || '-' }}</div>
+        <div class="col-4 app-text-muted q-pr-sm">
+          {{ $t('quotation.employee') }}
+        </div>
+        <div class="col-8">
+          <BadgeComponent
+            icon="mdi-account-multiple-outline"
+            :title="[workerCount, workerMax].join(' / ')"
+          />
+        </div>
+        <div class="col-4 app-text-muted q-pr-sm">
+          {{ $t('general.createdAt') }}
+        </div>
+        <div class="col-8">
+          {{ createdAt }}
+        </div>
+        <div class="col-4 app-text-muted q-pr-sm">
+          {{ $t('general.validUntil') }}
+        </div>
+        <div class="col-8">
+          {{ validUntil }}
+        </div>
+        <div class="col-4 app-text-muted q-pr-sm">
+          {{ $t('quotation.totalPrice') }}
+        </div>
+        <div class="col-8">
+          {{ formatNumberDecimal(totalPrice || 0, 2) }}
+        </div>
+      </article>
     </section>
   </div>
 </template>
@@ -175,7 +177,22 @@ span {
   height: 12px;
 }
 
-.urgent {
-  color: hsl(var(--red-6-hsl));
+.urgent-card {
+  background-color: hsla(var(--red-3-hsl) / 0.2) !important;
+  border: 1px solid var(--red-6) !important;
+
+  .code {
+    color: var(--red-6);
+  }
+
+  .tag {
+    font-size: 12px;
+    border-radius: var(--radius-2);
+    background: hsl(var(--red-7-hsl));
+    color: white;
+    -webkit-box-shadow: 0px 0px 6px 0px rgba(240, 62, 62, 1);
+    -moz-box-shadow: 0px 0px 6px 0px rgba(240, 62, 62, 1);
+    box-shadow: 0px 0px 6px 0px rgba(240, 62, 62, 1);
+  }
 }
 </style>

src/i18n/eng.ts

@@ -100,6 +100,7 @@ export default {
     afterEdit: 'After',
     generated: 'System Generated',
     urgent: 'Urgent',
+    urgent2: 'Urgent',
     oldData: 'Select existing data',
     newData: 'Add new ',
     male: 'Male',

src/i18n/tha.ts

@@ -100,6 +100,7 @@ export default {
     afterEdit: 'แก้ใหม่',
     generated: 'ระบบออกให้',
     urgent: 'เร่งด่วน',
+    urgent2: 'ด่วน',
     oldData: 'เลือกข้อมูลที่มีอยู่เเล้ว',
     newData: 'เพิ่มมาใหม่',
     male: 'ชาย',