jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Switch UI components to new design system tokens

Browse source 
Standardizes color values and styling using the new tokens:
- Replaces hardcoded colors with semantic variables
- Updates background/text/border classes for light/dark mode
- Migrates inputs to UInput/USelect/UTextarea components
- Removes redundant style declarations
This commit is contained in:
Jennie Robinson Faber 2025-10-13 15:05:29 +01:00
parent 9b45652b83
commit 3fea484585
13 changed files with 788 additions and 785 deletions
Download patch file Download diff file Expand all files Collapse all files

56
app/layouts/admin.vue
View file

@ -1,13 +1,13 @@
<template>
<div class="min-h-screen bg-gray-50">
<div class="min-h-screen bg-muted">
<!-- Admin Navigation -->
<nav class="bg-white border-b border-gray-200 shadow-sm">
<nav class="bg-elevated border-b border-default shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-4">
<div class="flex items-center gap-8">
<NuxtLink
to="/"
class="text-xl font-bold text-gray-900 hover:text-primary"
class="text-xl font-bold text-highlighted hover:text-primary"
>
Ghost Guild
</NuxtLink>
@ -18,8 +18,8 @@
:class="[
'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
$route.path === '/admin'
? 'bg-primary-100 text-primary-700 shadow-sm'
: 'text-gray-600 hover:text-primary hover:bg-primary-50',
? 'bg-primary/10 text-primary shadow-sm'
: 'text-muted hover:text-primary hover:bg-primary/5',
]"
>
<svg
@ -49,8 +49,8 @@
:class="[
'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
$route.path.includes('/admin/members')
? 'bg-primary-100 text-primary-700 shadow-sm'
: 'text-gray-600 hover:text-primary hover:bg-primary-50',
? 'bg-primary/10 text-primary shadow-sm'
: 'text-muted hover:text-primary hover:bg-primary/5',
]"
>
<svg
@ -74,8 +74,8 @@
:class="[
'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
$route.path.includes('/admin/events')
? 'bg-primary-100 text-primary-700 shadow-sm'
: 'text-gray-600 hover:text-primary hover:bg-primary-50',
? 'bg-primary/10 text-primary shadow-sm'
: 'text-muted hover:text-primary hover:bg-primary/5',
]"
>
<svg
@ -99,8 +99,8 @@
:class="[
'px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200',
$route.path.includes('/admin/series')
? 'bg-primary-100 text-primary-700 shadow-sm'
: 'text-gray-600 hover:text-primary hover:bg-primary-50',
? 'bg-primary/10 text-primary shadow-sm'
: 'text-muted hover:text-primary hover:bg-primary/5',
]"
>
<svg
@ -129,7 +129,7 @@
v-click-outside="() => (showUserMenu = false)"
>
<button
class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100 cursor-pointer transition-colors"
class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-muted cursor-pointer transition-colors"
>
<div
class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center"
@ -148,7 +148,7 @@
/>
</svg>
</div>
<span class="hidden md:block text-sm font-medium text-gray-700"
<span class="hidden md:block text-sm font-medium text-default"
>Admin</span
>
<svg
@ -169,11 +169,11 @@
<!-- User Menu Dropdown -->
<div
v-if="showUserMenu"
class="absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50"
class="absolute right-0 mt-2 w-56 bg-elevated rounded-lg shadow-lg border border-default py-1 z-50"
>
<NuxtLink
to="/"
class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
class="flex items-center px-4 py-2 text-sm text-default hover:bg-muted"
>
<svg
class="w-4 h-4 mr-3 text-gray-400"
@ -198,7 +198,7 @@
</NuxtLink>
<NuxtLink
to="/admin/settings"
class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
class="flex items-center px-4 py-2 text-sm text-default hover:bg-muted"
>
<svg
class="w-4 h-4 mr-3 text-gray-400"
@ -221,7 +221,7 @@
</svg>
Settings
</NuxtLink>
<hr class="my-1 border-gray-200" />
<hr class="my-1 border-default" />
<button
@click="logout"
class="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50"
@ -249,7 +249,7 @@
</nav>
<!-- Mobile Navigation -->
<div class="md:hidden bg-white border-b border-gray-200">
<div class="md:hidden bg-elevated border-b border-default">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center gap-2 py-3 overflow-x-auto">
<NuxtLink
@ -257,8 +257,8 @@
:class="[
'px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors',
$route.path === '/admin'
? 'bg-primary-100 text-primary-700'
: 'text-gray-600 hover:text-primary hover:bg-primary-50',
? 'bg-primary/10 text-primary'
: 'text-muted hover:text-primary hover:bg-primary/5',
]"
>
Dashboard
@ -269,8 +269,8 @@
:class="[
'px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors',
$route.path.includes('/admin/members')
? 'bg-primary-100 text-primary-700'
: 'text-gray-600 hover:text-primary hover:bg-primary-50',
? 'bg-primary/10 text-primary'
: 'text-muted hover:text-primary hover:bg-primary/5',
]"
>
Members
@ -281,8 +281,8 @@
:class="[
'px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors',
$route.path.includes('/admin/events')
? 'bg-primary-100 text-primary-700'
: 'text-gray-600 hover:text-primary hover:bg-primary-50',
? 'bg-primary/10 text-primary'
: 'text-muted hover:text-primary hover:bg-primary/5',
]"
>
Events
@ -293,8 +293,8 @@
:class="[
'px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors',
$route.path.includes('/admin/series')
? 'bg-primary-100 text-primary-700'
: 'text-gray-600 hover:text-primary hover:bg-primary-50',
? 'bg-primary/10 text-primary'
: 'text-muted hover:text-primary hover:bg-primary/5',
]"
>
Series
@ -309,10 +309,10 @@
</main>
<!-- Footer -->
<footer class="bg-white border-t border-gray-200 mt-auto">
<footer class="bg-elevated border-t border-default mt-auto">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="py-8 text-center">
<p class="text-sm text-gray-600">
<p class="text-sm text-muted">
&copy; 2025 Ghost Guild. Admin Panel.
</p>
</div>