From 53c9ba8fd7925cb3d0dca8ed5149d2ab86f41563 Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Mon, 6 Oct 2025 17:48:38 -0400
Subject: [PATCH] Styling fixes

---
 pages/[slug].vue |  6 +++---
 pages/admin.vue  | 20 ++++++++++++++------
 pages/index.vue  |  8 ++++----
 pages/users.vue  | 27 +++++++++++++++++++++++----
 4 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/pages/[slug].vue b/pages/[slug].vue
index f095335..086e65d 100644
--- a/pages/[slug].vue
+++ b/pages/[slug].vue
@@ -24,14 +24,14 @@
               <button
                 v-if="isAuthenticated"
                 @click="handleLogout"
-                class="px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 whitespace-nowrap"
+                class="px-4 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-md hover:bg-red-100 whitespace-nowrap"
               >
                 Log Out
               </button>
               <NuxtLink 
                 v-else
                 to="/login" 
-                class="px-4 py-2 text-sm font-medium text-blue-600 hover:text-blue-700 whitespace-nowrap"
+                class="px-4 py-2 text-sm font-medium text-green-700 bg-green-50 rounded-md hover:bg-green-100 whitespace-nowrap"
               >
                 Log In
               </NuxtLink>
@@ -140,7 +140,7 @@
                 to="/login"
                 class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 font-medium"
               >
-                Log In / Sign Up
+                Log In
               </NuxtLink>
             </div>
           </ClientOnly>
diff --git a/pages/admin.vue b/pages/admin.vue
index 56612e8..fb80154 100644
--- a/pages/admin.vue
+++ b/pages/admin.vue
@@ -6,12 +6,20 @@
           <NuxtLink to="/">
             <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto cursor-pointer hover:opacity-80" />
           </NuxtLink>
-          <button
-            @click="handleLogout"
-            class="text-sm font-medium text-red-600 hover:text-red-700"
-          >
-            Logout
-          </button>
+          <div class="flex items-center gap-4">
+            <NuxtLink 
+              to="/"
+              class="px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100"
+            >
+              Home
+            </NuxtLink>
+            <button
+              @click="handleLogout"
+              class="px-4 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-md hover:bg-red-100"
+            >
+              Log Out
+            </button>
+          </div>
         </div>
         <h1 class="text-2xl font-bold text-gray-900">Manage Sermons</h1>
       </div>
diff --git a/pages/index.vue b/pages/index.vue
index 5eeed9f..fba1ba4 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,7 +11,7 @@
               <template v-if="isAuthenticated">
                 <button
                   @click="handleLogout"
-                  class="text-sm font-medium text-blue-600 hover:text-blue-700"
+                  class="px-4 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-md hover:bg-red-100"
                 >
                   Log Out
                 </button>
@@ -19,7 +19,7 @@
               <NuxtLink 
                 v-else
                 to="/login" 
-                class="text-sm font-medium text-blue-600 hover:text-blue-700"
+                class="px-4 py-2 text-sm font-medium text-green-700 bg-green-50 rounded-md hover:bg-green-100"
               >
                 Log In
               </NuxtLink>
@@ -67,7 +67,7 @@
                 </NuxtLink>
                 <button
                   @click="handleLogout"
-                  class="text-sm font-medium text-blue-600 hover:text-blue-700"
+                  class="px-4 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-md hover:bg-red-100"
                 >
                   Log Out
                 </button>
@@ -75,7 +75,7 @@
               <NuxtLink 
                 v-else
                 to="/login" 
-                class="text-sm font-medium text-blue-600 hover:text-blue-700"
+                class="px-4 py-2 text-sm font-medium text-green-700 bg-green-50 rounded-md hover:bg-green-100"
               >
                 Log In
               </NuxtLink>
diff --git a/pages/users.vue b/pages/users.vue
index 13de233..fad0995 100644
--- a/pages/users.vue
+++ b/pages/users.vue
@@ -3,12 +3,26 @@
     <!-- Header -->
     <header class="bg-white shadow-sm">
       <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <div class="flex items-center justify-between">
-          <h1 class="text-3xl font-bold text-gray-900">User Management</h1>
-          <NuxtLink to="/" class="text-sm font-medium text-blue-600 hover:text-blue-700">
-            ← Back to Home
+        <div class="flex items-center justify-between mb-4">
+          <NuxtLink to="/">
+            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto cursor-pointer hover:opacity-80" />
           </NuxtLink>
+          <div class="flex items-center gap-4">
+            <NuxtLink 
+              to="/"
+              class="px-4 py-2 text-sm font-medium text-blue-700 bg-blue-50 rounded-md hover:bg-blue-100"
+            >
+              Home
+            </NuxtLink>
+            <button
+              @click="handleLogout"
+              class="px-4 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-md hover:bg-red-100"
+            >
+              Log Out
+            </button>
+          </div>
         </div>
+        <h1 class="text-2xl font-bold text-gray-900">Manage Users</h1>
       </div>
     </header>
 
@@ -271,6 +285,11 @@ async function confirmDelete(user: User) {
   }
 }
 
+async function handleLogout() {
+  await $fetch('/api/auth/logout', { method: 'POST' })
+  await navigateTo('/login')
+}
+
 onMounted(() => {
   loadUsers()
 })