ปรับ look and feel

web/app/pages/auth/callback.vue

@@ -23,30 +23,19 @@ onMounted(async () => {
 <template>
   <section class="mx-auto max-w-xl space-y-4 py-10 text-center">
     <template v-if="busy">
-      <div class="flex items-center justify-center gap-3 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 class="flex items-center justify-center gap-3 text-sm text-muted">
+        <span class="spinner" />
         {{ message }}
       </div>
     </template>
 
     <template v-else>
       <AlertBox type="error">{{ message }}</AlertBox>
-      <div class="flex justify-center gap-3">
-        <button
-          type="button"
-          class="rounded-md bg-sky-600 px-4 py-2 text-sm font-medium text-white hover:bg-sky-700"
-          @click="login()"
-        >
+      <div class="flex flex-col-reverse justify-center gap-2 sm:flex-row">
+        <NuxtLink to="/" class="btn btn-secondary w-full sm:w-auto">กลับหน้าหลัก</NuxtLink>
+        <button type="button" class="btn btn-primary w-full sm:w-auto" @click="login()">
           เข้าสู่ระบบใหม่
         </button>
-        <NuxtLink
-          to="/"
-          class="rounded-md border border-slate-300 px-4 py-2 text-sm hover:bg-slate-100 dark:border-slate-600 dark:hover:bg-slate-800"
-        >
-          กลับหน้าหลัก
-        </NuxtLink>
       </div>
     </template>
   </section>