From d3c37124660e0532a2d0c0a3e2d6d78627ff0046 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 6 Mar 2025 11:14:09 +0700
Subject: [PATCH] style: refine notification dialog layout and update button
 classes

---
 src/pages/00_notification/MainPage.vue   |  4 ++--
 src/pages/00_notification/NotiDialog.vue | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/pages/00_notification/MainPage.vue b/src/pages/00_notification/MainPage.vue
index 97bd755c..b581fd68 100644
--- a/src/pages/00_notification/MainPage.vue
+++ b/src/pages/00_notification/MainPage.vue
@@ -115,7 +115,7 @@ onMounted(async () => {
           flat
           dense
           size="xs"
-          class="app-text-muted-2 q-ml-sm q-mt-xs"
+          class="app-text-muted-2 q-ml-sm"
           @click="async () => await deleteNoti()"
         >
           <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
@@ -127,7 +127,7 @@ onMounted(async () => {
           flat
           dense
           size="xs"
-          class="app-text-muted-2 q-mx-sm q-mt-xs"
+          class="app-text-muted-2 q-mx-sm"
           @click="async () => await markAsRead()"
         >
           <q-tooltip>{{ $t('noti.markAsRead') }}</q-tooltip>
diff --git a/src/pages/00_notification/NotiDialog.vue b/src/pages/00_notification/NotiDialog.vue
index 63a37f9d..b15f8731 100644
--- a/src/pages/00_notification/NotiDialog.vue
+++ b/src/pages/00_notification/NotiDialog.vue
@@ -35,8 +35,12 @@ async function fetchNoti() {
     </template>
 
     <section v-if="noti" class="q-pa-md col full-width">
-      <div class="surface-1 rounded bordered q-pa-md full-height full-width">
-        {{ noti.title }}
+      <article
+        class="surface-1 rounded bordered q-pa-md full-height full-width"
+      >
+        <div class="text-bold">
+          {{ noti.title }}
+        </div>
         <div class="text-caption app-text-muted">
           {{
             dateFormatJS({
@@ -50,7 +54,7 @@ async function fetchNoti() {
         <div class="text-caption">
           {{ noti.detail }}
         </div>
-      </div>
+      </article>
     </section>
 
     <template #footer>