Switch UI components to new design system tokens
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:
parent
9b45652b83
commit
3fea484585
13 changed files with 788 additions and 785 deletions
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="bg-white border-b">
|
||||
<div class="bg-elevated border-b">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="py-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Event Management</h1>
|
||||
<p class="text-gray-600">
|
||||
<h1 class="text-2xl font-bold text-highlighted">Event Management</h1>
|
||||
<p class="text-muted">
|
||||
Create, manage, and monitor Ghost Guild events and workshops
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -15,38 +15,41 @@
|
|||
<!-- Search and Actions -->
|
||||
<div class="mb-6 flex justify-between items-center">
|
||||
<div class="flex gap-4 items-center">
|
||||
<input
|
||||
<UInput
|
||||
v-model="searchQuery"
|
||||
placeholder="Search events..."
|
||||
class="border border-gray-300 rounded-lg px-4 py-2 w-80 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
class="w-80"
|
||||
/>
|
||||
<select
|
||||
<USelect
|
||||
v-model="typeFilter"
|
||||
class="border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="">All Types</option>
|
||||
<option value="community">Community</option>
|
||||
<option value="workshop">Workshop</option>
|
||||
<option value="social">Social</option>
|
||||
<option value="showcase">Showcase</option>
|
||||
</select>
|
||||
<select
|
||||
:items="[
|
||||
{ label: 'All Types', value: '' },
|
||||
{ label: 'Community', value: 'community' },
|
||||
{ label: 'Workshop', value: 'workshop' },
|
||||
{ label: 'Social', value: 'social' },
|
||||
{ label: 'Showcase', value: 'showcase' },
|
||||
]"
|
||||
class="w-full"
|
||||
/>
|
||||
<USelect
|
||||
v-model="statusFilter"
|
||||
class="border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="">All Status</option>
|
||||
<option value="upcoming">Upcoming</option>
|
||||
<option value="ongoing">Ongoing</option>
|
||||
<option value="past">Past</option>
|
||||
</select>
|
||||
<select
|
||||
:items="[
|
||||
{ label: 'All Status', value: '' },
|
||||
{ label: 'Upcoming', value: 'upcoming' },
|
||||
{ label: 'Ongoing', value: 'ongoing' },
|
||||
{ label: 'Past', value: 'past' },
|
||||
]"
|
||||
class="w-full"
|
||||
/>
|
||||
<USelect
|
||||
v-model="seriesFilter"
|
||||
class="border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
<option value="">All Events</option>
|
||||
<option value="series-only">Series Events Only</option>
|
||||
<option value="standalone-only">Standalone Only</option>
|
||||
</select>
|
||||
:items="[
|
||||
{ label: 'All Events', value: '' },
|
||||
{ label: 'Series Events Only', value: 'series-only' },
|
||||
{ label: 'Standalone Only', value: 'standalone-only' },
|
||||
]"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<NuxtLink
|
||||
to="/admin/events/create"
|
||||
|
|
@ -58,7 +61,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Events Table -->
|
||||
<div class="bg-white rounded-lg shadow overflow-hidden">
|
||||
<div class="bg-elevated rounded-lg shadow overflow-hidden">
|
||||
<div v-if="pending" class="p-8 text-center">
|
||||
<div class="inline-flex items-center">
|
||||
<div
|
||||
|
|
@ -73,45 +76,45 @@
|
|||
</div>
|
||||
|
||||
<table v-else class="w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<thead class="bg-muted">
|
||||
<tr>
|
||||
<th
|
||||
class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
class="px-6 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
>
|
||||
Title
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
>
|
||||
Type
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
>
|
||||
Date
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
>
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
class="px-4 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
class="px-4 py-4 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
>
|
||||
Registration
|
||||
</th>
|
||||
<th
|
||||
class="px-6 py-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||
class="px-6 py-4 text-right text-xs font-medium text-dimmed uppercase tracking-wider"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
<tbody class="bg-elevated divide-y divide-default">
|
||||
<tr
|
||||
v-for="event in filteredEvents"
|
||||
:key="event._id"
|
||||
class="hover:bg-gray-50"
|
||||
class="hover:bg-muted"
|
||||
>
|
||||
<!-- Title Column -->
|
||||
<td class="px-6 py-6">
|
||||
|
|
@ -120,7 +123,7 @@
|
|||
v-if="
|
||||
event.featureImage?.url && !event.featureImage?.publicId
|
||||
"
|
||||
class="flex-shrink-0 w-12 h-12 bg-gray-100 rounded-lg overflow-hidden"
|
||||
class="flex-shrink-0 w-12 h-12 bg-accented rounded-lg overflow-hidden"
|
||||
>
|
||||
<img
|
||||
:src="event.featureImage.url"
|
||||
|
|
@ -131,18 +134,18 @@
|
|||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex-shrink-0 w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center"
|
||||
class="flex-shrink-0 w-12 h-12 bg-accented rounded-lg flex items-center justify-center"
|
||||
>
|
||||
<Icon
|
||||
name="heroicons:calendar-days"
|
||||
class="w-6 h-6 text-gray-400"
|
||||
class="w-6 h-6 text-muted"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="text-sm font-semibold text-gray-900 mb-1">
|
||||
<div class="text-sm font-semibold text-highlighted mb-1">
|
||||
{{ event.title }}
|
||||
</div>
|
||||
<div class="text-sm text-gray-500 line-clamp-2">
|
||||
<div class="text-sm text-dimmed line-clamp-2">
|
||||
{{ event.description.substring(0, 100) }}...
|
||||
</div>
|
||||
<div v-if="event.series?.isSeriesEvent" class="mt-2 mb-2">
|
||||
|
|
@ -176,15 +179,15 @@
|
|||
>
|
||||
<Icon
|
||||
name="heroicons:user-group"
|
||||
class="w-3 h-3 text-gray-400"
|
||||
class="w-3 h-3 text-muted"
|
||||
/>
|
||||
<span class="text-xs text-gray-500">{{
|
||||
<span class="text-xs text-dimmed">{{
|
||||
event.targetCircles.join(", ")
|
||||
}}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="!event.isVisible"
|
||||
class="flex items-center text-xs text-gray-500"
|
||||
class="flex items-center text-xs text-dimmed"
|
||||
>
|
||||
<Icon name="heroicons:eye-slash" class="w-3 h-3 mr-1" />
|
||||
Hidden
|
||||
|
|
@ -205,12 +208,12 @@
|
|||
</td>
|
||||
|
||||
<!-- Date Column -->
|
||||
<td class="px-4 py-6 whitespace-nowrap text-sm text-gray-600">
|
||||
<td class="px-4 py-6 whitespace-nowrap text-sm text-muted">
|
||||
<div class="space-y-1">
|
||||
<div class="font-medium">
|
||||
{{ formatDate(event.startDate) }}
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
<div class="text-xs text-dimmed">
|
||||
{{ formatTime(event.startDate) }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -245,11 +248,11 @@
|
|||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800"
|
||||
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-accented text-default"
|
||||
>
|
||||
Optional
|
||||
</div>
|
||||
<div v-if="event.maxAttendees" class="text-xs text-gray-500">
|
||||
<div v-if="event.maxAttendees" class="text-xs text-dimmed">
|
||||
{{ event.registeredCount || 0 }} / {{ event.maxAttendees }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -260,21 +263,21 @@
|
|||
<div class="flex items-center justify-end space-x-2">
|
||||
<NuxtLink
|
||||
:to="`/events/${event.slug || String(event._id)}`"
|
||||
class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors"
|
||||
class="p-2 text-dimmed hover:text-default hover:bg-accented rounded-full transition-colors"
|
||||
title="View Event"
|
||||
>
|
||||
<Icon name="heroicons:eye" class="w-4 h-4" />
|
||||
</NuxtLink>
|
||||
<button
|
||||
@click="editEvent(event)"
|
||||
class="p-2 text-primary-500 hover:text-primary-700 hover:bg-primary-50 rounded-full transition-colors"
|
||||
class="p-2 text-primary hover:text-primary hover:bg-primary/10 rounded-full transition-colors"
|
||||
title="Edit Event"
|
||||
>
|
||||
<Icon name="heroicons:pencil-square" class="w-4 h-4" />
|
||||
</button>
|
||||
<button
|
||||
@click="duplicateEvent(event)"
|
||||
class="p-2 text-primary-500 hover:text-primary-700 hover:bg-primary-50 rounded-full transition-colors"
|
||||
class="p-2 text-primary hover:text-primary hover:bg-primary/10 rounded-full transition-colors"
|
||||
title="Duplicate Event"
|
||||
>
|
||||
<Icon name="heroicons:document-duplicate" class="w-4 h-4" />
|
||||
|
|
@ -294,7 +297,7 @@
|
|||
|
||||
<div
|
||||
v-if="!pending && !error && filteredEvents.length === 0"
|
||||
class="p-8 text-center text-gray-500"
|
||||
class="p-8 text-center text-dimmed"
|
||||
>
|
||||
No events found matching your criteria
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue