Styling fixes

This commit is contained in:
2025-10-06 17:48:38 -04:00
parent 067053525b
commit 53c9ba8fd7
4 changed files with 44 additions and 17 deletions

View File

@@ -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>

View File

@@ -6,13 +6,21 @@
<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="text-sm font-medium text-red-600 hover:text-red-700"
class="px-4 py-2 text-sm font-medium text-red-700 bg-red-50 rounded-md hover:bg-red-100"
>
Logout
Log Out
</button>
</div>
</div>
<h1 class="text-2xl font-bold text-gray-900">Manage Sermons</h1>
</div>
</header>

View File

@@ -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>

View File

@@ -3,13 +3,27 @@
<!-- 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>
<!-- Main Content -->
@@ -271,6 +285,11 @@ async function confirmDelete(user: User) {
}
}
async function handleLogout() {
await $fetch('/api/auth/logout', { method: 'POST' })
await navigateTo('/login')
}
onMounted(() => {
loadUsers()
})