แก้สี tap เมื่อกดอัพเดท status

src/modules/01_exam/components/ExamPayment.vue

@@ -1,16 +1,17 @@
 <template>
-  <q-card class="my-card q-mb-sm" bordered>
-    <q-card-actions class="q-pa-md text-left row" :class="getClass(status)">
-      <div class="text-black text-bold col-12" style="font-size: 16px">
-        {{ message(status) }}
-      </div>
-      <div class="text-black col-12" v-if="status === 'rejected'">
-        <li>{{ rejectMessage }}</li>
-      </div>
-      <!-- <q-space /> -->
-    </q-card-actions>
-  </q-card>
-
+  <div>
+    <q-card class="my-card q-mb-sm" bordered>
+      <q-card-actions class="q-pa-md text-left row justify-center" :class="getClass(status)">
+        <div class="text-bold col-12" :style="{ color: getFontColor(status) }">
+          {{ message(status) }}
+        </div>
+        <div class="col-12" v-if="status === 'rejected'" :style="{ color: getFontColor(status) }">
+          <li>{{ rejectMessage }}</li>
+        </div>
+        <!-- <q-space /> -->
+      </q-card-actions>
+    </q-card>
+  </div>
   <div class="d-flex justify-content-center align-items-center row col-12">
     <!-- <div class="text-center q-pb-lg">
       <q-badge
@@ -101,13 +102,13 @@ const setStatus = (val: string) => {
 const getClass = (val: string) => {
   switch (val) {
     case 'processing':
-      return 'bg-lime-12'
+      return 'bg-yellow-3'
     case 'rejected':
-      return 'bg-deep-orange-11'
+      return 'bg-red-2'
     case 'success':
-      return 'bg-green-12'
+      return 'bg-light-green-11'
     default:
-      return 'bg-blue-4'
+      return 'bg-light-blue-1'
   }
 }
 const message = (val: string) => {
@@ -122,6 +123,19 @@ const message = (val: string) => {
       return 'รออัปโหลดหลักฐานชำระเงิน'
   }
 }
+const getFontColor = (val: string) => {
+  switch (val) {
+    case 'processing':
+      return 'orange'
+    case 'rejected':
+      return 'red'
+    case 'success':
+      return 'green'
+    default:
+      return 'blue'
+  }
+}
+console.log(getFontColor)
 </script>
 
 <style lang="scss" scoped>