ปรับ look and feel

web/app/components/AlertBox.vue

@@ -10,18 +10,18 @@ const props = withDefaults(
 const styles = computed(() => {
   switch (props.type) {
     case 'error':
-      return 'border-red-300 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300'
+      return 'alert-error'
     case 'success':
-      return 'border-emerald-300 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300'
+      return 'alert-success'
     default:
-      return 'border-sky-300 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-950 dark:text-sky-300'
+      return 'alert-info'
   }
 })
 const icon = computed(() => (props.type === 'error' ? '⚠️' : props.type === 'success' ? '✅' : 'ℹ️'))
 </script>
 
 <template>
-  <div role="alert" class="rounded-md border px-4 py-3 text-sm" :class="styles">
+  <div role="alert" class="alert" :class="styles">
     <span class="mr-2" aria-hidden="true">{{ icon }}</span>
     <slot />
   </div>

web/app/components/AuthGate.vue

@@ -4,25 +4,18 @@ const { ready, isAuthenticated, login } = useAuth()
 </script>
 
 <template>
-  <div v-if="!ready" class="flex items-center justify-center gap-3 py-16 text-sm text-slate-500 dark:text-slate-400">
-    <span class="h-4 w-4 animate-spin rounded-full border-2 border-slate-300 border-t-slate-600 dark:border-slate-600 dark:border-t-slate-300" />
+  <div v-if="!ready" class="flex items-center justify-center gap-3 py-16 text-sm text-muted">
+    <span class="spinner" />
     กำลังตรวจสอบสถานะการเข้าสู่ระบบ…
   </div>
 
-  <div
-    v-else-if="!isAuthenticated"
-    class="rounded-lg border border-slate-200 bg-white p-8 text-center dark:border-slate-700 dark:bg-slate-800"
-  >
-    <h2 class="text-lg font-semibold">ต้องเข้าสู่ระบบก่อนใช้งานหน้านี้</h2>
-    <p class="mt-2 text-sm text-slate-600 dark:text-slate-300">
+  <div v-else-if="!isAuthenticated" class="card mx-auto max-w-md p-8 text-center">
+    <h2 class="text-section-title">ต้องเข้าสู่ระบบก่อนใช้งานหน้านี้</h2>
+    <p class="mt-2 text-body-lg text-muted">
       ระบบยืนยันตัวตนผ่าน Keycloak (realm <span class="font-mono">word-versioning</span>)
       — กดปุ่มด้านล่างเพื่อเปิดหน้าเข้าสู่ระบบ
     </p>
-    <button
-      type="button"
-      class="mt-4 rounded-md bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-700"
-      @click="login()"
-    >
+    <button type="button" class="btn btn-primary mt-6 w-full sm:w-auto" @click="login()">
       เข้าสู่ระบบด้วย Keycloak
     </button>
   </div>