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

106
app/pages/admin/members.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">Member Management</h1>
<p class="text-gray-600">
<h1 class="text-2xl font-bold text-highlighted">Member Management</h1>
<p class="text-muted">
Manage Ghost Guild members, their contributions, and access levels
</p>
</div>
@ -18,11 +18,11 @@
<input
v-model="searchQuery"
placeholder="Search members..."
class="border border-gray-300 rounded-lg px-4 py-2 w-80 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
class="border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-4 py-2 w-80 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
<select
v-model="circleFilter"
class="border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
class="border border-default bg-elevated text-default rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="">All Circles</option>
<option value="community">Community</option>
@ -39,8 +39,8 @@
</div>
<!-- Members Table -->
<div class="bg-white rounded-lg shadow overflow-hidden">
<div v-if="pending" class="p-8 text-center">
<div class="bg-elevated rounded-lg shadow overflow-hidden">
<div v-if="pending" class="p-8 text-center text-default">
<div class="inline-flex items-center">
<div
class="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600 mr-3"
@ -54,58 +54,60 @@
</div>
<table v-else class="w-full">
<thead class="bg-gray-50">
<thead class="bg-muted">
<tr>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
>
Name
</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
>
Email
</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
>
Circle
</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
>
Contribution
</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
>
Slack Status
</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
class="px-6 py-3 text-left text-xs font-medium text-dimmed uppercase tracking-wider"
>
Joined
</th>
<th
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
class="px-6 py-3 text-left 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="member in filteredMembers"
:key="member._id"
class="hover:bg-gray-50"
class="hover:bg-muted"
>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm font-medium text-gray-900">
<div class="text-sm font-medium text-highlighted">
{{ member.name }}
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-600">{{ member.email }}</div>
<div class="text-sm text-muted">
{{ member.email }}
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span
@ -127,27 +129,27 @@
:class="
member.slackInvited
? 'bg-green-100 text-green-800'
: 'bg-gray-100 text-gray-800'
: 'bg-accented text-default'
"
class="inline-flex px-2 py-1 text-xs font-semibold rounded-full"
>
{{ member.slackInvited ? "Invited" : "Pending" }}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
<td class="px-6 py-4 whitespace-nowrap text-sm text-muted">
{{ formatDate(member.createdAt) }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
<td class="px-6 py-4 whitespace-nowrap text-sm text-muted">
<div class="flex gap-2">
<button
@click="sendSlackInvite(member)"
class="text-primary-600 hover:text-primary-900"
class="text-primary hover:text-primary"
>
Slack Invite
</button>
<button
@click="editMember(member)"
class="text-primary-600 hover:text-primary-900"
class="text-primary hover:text-primary"
>
Edit
</button>
@ -159,7 +161,7 @@
<div
v-if="!pending && !error && filteredMembers.length === 0"
class="p-8 text-center text-gray-500"
class="p-8 text-center text-dimmed"
>
No members found matching your criteria
</div>
@ -171,26 +173,26 @@
v-if="showCreateModal"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
>
<div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
<div class="px-6 py-4 border-b">
<h3 class="text-lg font-semibold">Add New Member</h3>
<div class="bg-elevated rounded-lg shadow-xl max-w-md w-full mx-4">
<div class="px-6 py-4 border-b border-default">
<h3 class="text-lg font-semibold text-highlighted">Add New Member</h3>
</div>
<form @submit.prevent="createMember" class="p-6 space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1"
<label class="block text-sm font-medium text-default mb-1"
>Name</label
>
<input
v-model="newMember.name"
placeholder="Full name"
required
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
class="w-full border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1"
<label class="block text-sm font-medium text-default mb-1"
>Email</label
>
<input
@ -198,45 +200,47 @@
type="email"
placeholder="email@example.com"
required
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
class="w-full border border-default bg-elevated text-default placeholder-dimmed rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1"
<label class="block text-sm font-medium text-default mb-1"
>Circle</label
>
<select
<USelect
v-model="newMember.circle"
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="community">Community</option>
<option value="founder">Founder</option>
<option value="practitioner">Practitioner</option>
</select>
:items="[
{ label: 'Community', value: 'community' },
{ label: 'Founder', value: 'founder' },
{ label: 'Practitioner', value: 'practitioner' },
]"
class="w-full"
/>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1"
<label class="block text-sm font-medium text-default mb-1"
>Contribution Tier</label
>
<select
<USelect
v-model="newMember.contributionTier"
class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="0">$0/month</option>
<option value="5">$5/month</option>
<option value="15">$15/month</option>
<option value="30">$30/month</option>
<option value="50">$50/month</option>
</select>
:items="[
{ label: '$0/month', value: '0' },
{ label: '$5/month', value: '5' },
{ label: '$15/month', value: '15' },
{ label: '$30/month', value: '30' },
{ label: '$50/month', value: '50' },
]"
class="w-full"
/>
</div>
<div class="flex justify-end gap-3 pt-4">
<button
type="button"
@click="showCreateModal = false"
class="px-4 py-2 text-gray-600 hover:text-gray-900"
class="px-4 py-2 text-muted hover:text-default"
>
Cancel
</button>