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

122
app/pages/admin/index.vue
View file

@ -1,10 +1,10 @@
<template>
<div>
<div class="bg-white border-b">
<div class="bg-elevated border-b border-default">
<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">Admin Dashboard</h1>
<p class="text-gray-600">
<h1 class="text-2xl font-bold text-highlighted">Admin Dashboard</h1>
<p class="text-muted">
Manage Ghost Guild members, events, and community operations
</p>
</div>
@ -14,10 +14,10 @@
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<!-- Quick Stats -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-lg shadow p-6">
<div class="bg-elevated rounded-lg shadow p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600">Total Members</p>
<p class="text-sm text-muted">Total Members</p>
<p class="text-2xl font-bold text-blue-600">
{{ stats.totalMembers || 0 }}
</p>
@ -42,10 +42,10 @@
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="bg-elevated rounded-lg shadow p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600">Active Events</p>
<p class="text-sm text-muted">Active Events</p>
<p class="text-2xl font-bold text-green-600">
{{ stats.activeEvents || 0 }}
</p>
@ -70,10 +70,10 @@
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="bg-elevated rounded-lg shadow p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600">Monthly Revenue</p>
<p class="text-sm text-muted">Monthly Revenue</p>
<p class="text-2xl font-bold text-purple-600">
${{ stats.monthlyRevenue || 0 }}
</p>
@ -98,10 +98,10 @@
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="bg-elevated rounded-lg shadow p-6">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-600">Pending Slack Invites</p>
<p class="text-sm text-muted">Pending Slack Invites</p>
<p class="text-2xl font-bold text-orange-600">
{{ stats.pendingSlackInvites || 0 }}
</p>
@ -128,8 +128,8 @@
</div>
<!-- Quick Actions -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<div class="bg-white rounded-lg shadow p-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
<div class="bg-elevated rounded-lg shadow p-6">
<div class="text-center">
<div
class="w-16 h-16 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-4"
@ -148,8 +148,10 @@
></path>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Add New Member</h3>
<p class="text-gray-600 text-sm mb-4">
<h3 class="text-lg font-semibold mb-2 text-highlighted">
Add New Member
</h3>
<p class="text-muted text-sm mb-4">
Add a new member to the Ghost Guild community
</p>
<button
@ -161,7 +163,7 @@
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="bg-elevated rounded-lg shadow p-6">
<div class="text-center">
<div
class="w-16 h-16 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-4"
@ -180,8 +182,10 @@
></path>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">Create Event</h3>
<p class="text-gray-600 text-sm mb-4">
<h3 class="text-lg font-semibold mb-2 text-highlighted">
Create Event
</h3>
<p class="text-muted text-sm mb-4">
Schedule a new community event or workshop
</p>
<button
@ -192,49 +196,19 @@
</button>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6">
<div class="text-center">
<div
class="w-16 h-16 bg-purple-100 rounded-2xl flex items-center justify-center mx-auto mb-4"
>
<svg
class="w-8 h-8 text-purple-600"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
></path>
</svg>
</div>
<h3 class="text-lg font-semibold mb-2">View Analytics</h3>
<p class="text-gray-600 text-sm mb-4">
Review member engagement and growth metrics
</p>
<button
disabled
class="w-full bg-gray-300 text-gray-500 py-2 px-4 rounded-lg cursor-not-allowed"
>
Coming Soon
</button>
</div>
</div>
</div>
<!-- Recent Activity -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div class="bg-white rounded-lg shadow">
<div class="px-6 py-4 border-b border-gray-200">
<div class="bg-elevated rounded-lg shadow">
<div class="px-6 py-4 border-b border-default">
<div class="flex justify-between items-center">
<h3 class="text-lg font-semibold">Recent Members</h3>
<h3 class="text-lg font-semibold text-highlighted">
Recent Members
</h3>
<button
@click="navigateTo('/admin/members')"
class="text-sm text-primary-600 hover:text-primary-900"
class="text-sm text-primary hover:text-primary"
>
View All
</button>
@ -251,11 +225,15 @@
<div
v-for="member in recentMembers"
:key="member._id"
class="flex items-center justify-between p-3 rounded-lg border border-gray-200"
class="flex items-center justify-between p-3 rounded-lg border border-default"
>
<div>
<p class="font-medium">{{ member.name }}</p>
<p class="text-sm text-gray-600">{{ member.email }}</p>
<p class="font-medium text-highlighted">
{{ member.name }}
</p>
<p class="text-sm text-muted">
{{ member.email }}
</p>
</div>
<div class="text-right">
<span
@ -264,25 +242,27 @@
>
{{ member.circle }}
</span>
<p class="text-xs text-gray-500">
<p class="text-xs text-dimmed">
{{ formatDate(member.createdAt) }}
</p>
</div>
</div>
</div>
<div v-else class="text-center py-6 text-gray-500">
<div v-else class="text-center py-6 text-dimmed">
No recent members
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow">
<div class="px-6 py-4 border-b border-gray-200">
<div class="bg-elevated rounded-lg shadow">
<div class="px-6 py-4 border-b border-default">
<div class="flex justify-between items-center">
<h3 class="text-lg font-semibold">Upcoming Events</h3>
<h3 class="text-lg font-semibold text-highlighted">
Upcoming Events
</h3>
<button
@click="navigateTo('/admin/events')"
class="text-sm text-primary-600 hover:text-primary-900"
class="text-sm text-primary hover:text-primary"
>
View All
</button>
@ -299,11 +279,13 @@
<div
v-for="event in upcomingEvents"
:key="event._id"
class="flex items-center justify-between p-3 rounded-lg border border-gray-200"
class="flex items-center justify-between p-3 rounded-lg border border-default"
>
<div>
<p class="font-medium">{{ event.title }}</p>
<p class="text-sm text-gray-600">
<p class="font-medium text-highlighted">
{{ event.title }}
</p>
<p class="text-sm text-muted">
{{ formatDateTime(event.startDate) }}
</p>
</div>
@ -314,13 +296,13 @@
>
{{ event.eventType }}
</span>
<p class="text-xs text-gray-500">
<p class="text-xs text-dimmed">
{{ event.location || "Online" }}
</p>
</div>
</div>
</div>
<div v-else class="text-center py-6 text-gray-500">
<div v-else class="text-center py-6 text-dimmed">
No upcoming events
</div>
</div>
@ -349,7 +331,7 @@ const getCircleBadgeClasses = (circle) => {
founder: "bg-purple-100 text-purple-800",
practitioner: "bg-green-100 text-green-800",
};
return classes[circle] || "bg-gray-100 text-gray-800";
return classes[circle] || "bg-accented text-default";
};
const getEventTypeBadgeClasses = (type) => {
@ -359,7 +341,7 @@ const getEventTypeBadgeClasses = (type) => {
social: "bg-purple-100 text-purple-800",
showcase: "bg-orange-100 text-orange-800",
};
return classes[type] || "bg-gray-100 text-gray-800";
return classes[type] || "bg-accented text-default";
};
const formatDate = (dateString) => {