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

Migrate design system from ethereal/cool to warm/craft/guild theme

Browse source 
Replace ghost/whisper/sparkle color palettes with guild/candlelight/parchment/ember/earth tokens.
Switch typography from NB Television Pro to Quietism serif. Update all 25 Vue components,
layouts, and pages to new design system. Add circle color tokens, typography scale, prose-guild
class, and warm texture effects. Clean up stale documentation files.
This commit is contained in:
Jennie Robinson Faber 2026-02-24 20:01:11 +00:00
parent d588c49946
commit a62e167876
39 changed files with 1300 additions and 2087 deletions
Download patch file Download diff file Expand all files Collapse all files

98
app/pages/member/dashboard.vue
View file

@ -16,9 +16,9 @@
>
<div class="text-center">
<div
class="w-8 h-8 border-4 border-whisper-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
class="w-8 h-8 border-4 border-candlelight-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
/>
<p class="text-ghost-300">Loading your dashboard...</p>
<p class="text-guild-300">Loading your dashboard...</p>
</div>
</div>
@ -28,11 +28,11 @@
class="flex justify-center items-center py-20"
>
<div class="text-center max-w-md">
<div class="w-16 h-16 bg-ghost-800 border border-ghost-600 rounded-full flex items-center justify-center mx-auto mb-4">
<Icon name="heroicons:lock-closed" class="w-8 h-8 text-ghost-400" />
<div class="w-16 h-16 bg-guild-800 border border-guild-600 rounded-full flex items-center justify-center mx-auto mb-4">
<Icon name="heroicons:lock-closed" class="w-8 h-8 text-guild-400" />
</div>
<h2 class="text-xl font-semibold text-ghost-100 mb-2">Sign in required</h2>
<p class="text-ghost-400 mb-6">Please sign in to access your member dashboard.</p>
<h2 class="text-xl font-semibold text-guild-100 mb-2">Sign in required</h2>
<p class="text-guild-400 mb-6">Please sign in to access your member dashboard.</p>
<UButton @click="openLoginModal({ title: 'Sign in to your dashboard', description: 'Enter your email to access your member dashboard' })">
Sign In
</UButton>
@ -45,23 +45,23 @@
<MemberStatusBanner :dismissible="true" />
<!-- Welcome Card -->
<UCard
class="sparkle-field"
:ui="{
root: 'bg-ghost-900 border border-ghost-700',
header: 'border-b border-ghost-700',
body: 'bg-ghost-900',
root: 'bg-guild-900 border border-guild-700',
header: 'border-b border-guild-700',
body: 'bg-guild-900',
}"
>
<template #header>
<div class="flex items-start justify-between gap-4">
<div class="flex-1">
<h1 class="text-2xl font-bold text-ghost-100 ethereal-text">
<h1 class="text-2xl font-bold text-guild-100 warm-text">
Welcome to Ghost Guild, {{ memberData?.name }}!
</h1>
<p
:class="[
'mt-2',
isActive ? 'text-ghost-300' : statusConfig.textColor,
isActive ? 'text-guild-300' : statusConfig.textColor,
]"
>
{{
@ -78,7 +78,7 @@
</div>
<div v-else class="flex-shrink-0">
<div
class="w-16 h-16 bg-ghost-700 border border-ghost-600 flex items-center justify-center text-ghost-200 font-bold text-xl"
class="w-16 h-16 bg-guild-700 border border-guild-600 flex items-center justify-center text-guild-200 font-bold text-xl"
>
{{ memberData?.name?.charAt(0)?.toUpperCase() }}
</div>
@ -87,14 +87,14 @@
</template>
<div class="flex flex-wrap gap-4 text-sm">
<div class="bg-ghost-800 border border-ghost-600 px-4 py-2">
<span class="text-ghost-200">Circle:</span>
<div class="bg-guild-800 border border-guild-600 px-4 py-2">
<span class="text-guild-200">Circle:</span>
<span class="font-medium text-stone-50 ml-1 capitalize">{{
memberData?.circle
}}</span>
</div>
<div class="bg-ghost-800 border border-ghost-600 px-4 py-2">
<span class="text-ghost-200">Contribution:</span>
<div class="bg-guild-800 border border-guild-600 px-4 py-2">
<span class="text-guild-200">Contribution:</span>
<span class="font-medium text-stone-50 ml-1"
>${{ memberData?.contributionTier }} CAD/month</span
>
@ -105,13 +105,13 @@
<!-- Quick Links -->
<UCard
:ui="{
root: 'bg-ghost-900 border border-ghost-700',
header: 'border-b border-ghost-700 bg-ghost-900',
body: 'bg-ghost-900',
root: 'bg-guild-900 border border-guild-700',
header: 'border-b border-guild-700 bg-guild-900',
body: 'bg-guild-900',
}"
>
<template #header>
<h2 class="text-xl font-bold text-ghost-100 ethereal-text">
<h2 class="text-xl font-bold text-guild-100 warm-text">
Quick Links
</h2>
</template>
@ -122,9 +122,9 @@
variant="outline"
:disabled="!canPeerSupport"
:class="[
'border-ghost-600 text-ghost-200 justify-start',
'border-guild-600 text-guild-200 justify-start',
canPeerSupport
? 'hover:bg-ghost-800 hover:border-whisper-500'
? 'hover:bg-guild-800 hover:border-candlelight-500'
: 'opacity-50 cursor-not-allowed',
]"
block
@ -141,7 +141,7 @@
to="https://wiki.ghostguild.org"
target="_blank"
variant="outline"
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500 justify-start"
block
>
Browse Resources
@ -150,7 +150,7 @@
<UButton
to="/member/profile"
variant="outline"
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500 justify-start"
block
>
Update Profile
@ -159,7 +159,7 @@
<UButton
to="/events"
variant="outline"
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500 justify-start"
block
>
View Events
@ -168,7 +168,7 @@
<UButton
to="/members"
variant="outline"
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500 justify-start"
block
>
Browse Members
@ -177,7 +177,7 @@
<UButton
to="/member/profile#account"
variant="outline"
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 justify-start"
class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500 justify-start"
block
>
Manage Account
@ -188,14 +188,14 @@
<!-- Your Registered Events -->
<UCard
:ui="{
root: 'bg-ghost-900 border border-ghost-700',
header: 'border-b border-ghost-700 bg-ghost-900',
body: 'bg-ghost-900',
root: 'bg-guild-900 border border-guild-700',
header: 'border-b border-guild-700 bg-guild-900',
body: 'bg-guild-900',
}"
>
<template #header>
<div class="flex items-center justify-between">
<h2 class="text-xl font-bold text-ghost-100 ethereal-text">
<h2 class="text-xl font-bold text-guild-100 warm-text">
Your Upcoming Events
</h2>
<div class="flex items-center gap-2">
@ -204,7 +204,7 @@
@click="copyCalendarLink"
variant="ghost"
size="sm"
class="text-ghost-300 hover:text-ghost-100"
class="text-guild-300 hover:text-guild-100"
icon="heroicons:calendar"
>
{{
@ -215,7 +215,7 @@
to="/events"
variant="ghost"
size="sm"
class="text-ghost-300 hover:text-ghost-100"
class="text-guild-300 hover:text-guild-100"
>
Browse All Events
</UButton>
@ -225,7 +225,7 @@
<div v-if="loadingEvents" class="text-center py-8">
<div
class="w-6 h-6 border-2 border-whisper-500 border-t-transparent rounded-full animate-spin mx-auto"
class="w-6 h-6 border-2 border-candlelight-500 border-t-transparent rounded-full animate-spin mx-auto"
></div>
</div>
@ -234,7 +234,7 @@
v-for="evt in registeredEvents"
:key="evt._id"
:to="`/events/${evt.slug || evt._id}`"
class="block p-4 border border-ghost-700 hover:border-whisper-500 transition-colors"
class="block p-4 border border-guild-700 hover:border-candlelight-500 transition-colors"
>
<div class="flex items-start gap-4">
<div
@ -252,18 +252,18 @@
</div>
<div
v-else
class="flex-shrink-0 w-20 h-20 bg-ghost-800 border border-ghost-600 flex items-center justify-center"
class="flex-shrink-0 w-20 h-20 bg-guild-800 border border-guild-600 flex items-center justify-center"
>
<Icon
name="heroicons:calendar-days"
class="w-8 h-8 text-whisper-400"
class="w-8 h-8 text-candlelight-400"
/>
</div>
<div class="flex-1 min-w-0">
<h3 class="font-semibold text-ghost-100 mb-1">
<h3 class="font-semibold text-guild-100 mb-1">
{{ evt.title }}
</h3>
<div class="flex items-center gap-4 text-sm text-ghost-400">
<div class="flex items-center gap-4 text-sm text-guild-400">
<span class="flex items-center gap-1">
<Icon name="heroicons:calendar" class="w-4 h-4" />
{{ formatEventDate(evt.startDate) }}
@ -277,7 +277,7 @@
<div class="flex-shrink-0">
<Icon
name="heroicons:chevron-right"
class="w-5 h-5 text-ghost-500"
class="w-5 h-5 text-guild-500"
/>
</div>
</div>
@ -287,15 +287,15 @@
<div v-else class="text-center py-8">
<Icon
name="heroicons:calendar-days"
class="w-12 h-12 text-ghost-600 mx-auto mb-3"
class="w-12 h-12 text-guild-600 mx-auto mb-3"
/>
<p class="text-ghost-400 mb-4">
<p class="text-guild-400 mb-4">
You haven't registered for any upcoming events
</p>
<UButton
to="/events"
size="sm"
class="border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500"
class="border-guild-600 text-guild-200 hover:bg-guild-800 hover:border-candlelight-500"
>
Browse Events
</UButton>
@ -304,15 +304,15 @@
<!-- Calendar subscription instructions -->
<div
v-if="registeredEvents.length > 0 && showCalendarInstructions"
class="mt-4 p-4 bg-ghost-800 border border-ghost-600"
class="mt-4 p-4 bg-guild-800 border border-guild-600"
>
<div class="flex items-start justify-between gap-4">
<div class="flex-1">
<h4 class="text-sm font-semibold text-ghost-100 mb-2">
<h4 class="text-sm font-semibold text-guild-100 mb-2">
How to Subscribe to Your Calendar
</h4>
<ul
class="text-xs text-ghost-300 space-y-1 list-disc list-inside"
class="text-xs text-guild-300 space-y-1 list-disc list-inside"
>
<li>
<strong>Google Calendar:</strong> Click "+" → "From URL" →
@ -327,14 +327,14 @@
→ Paste the link
</li>
</ul>
<p class="text-xs text-ghost-400 mt-2">
<p class="text-xs text-guild-400 mt-2">
Your calendar will automatically update when you register or
unregister from events.
</p>
</div>
<button
@click="showCalendarInstructions = false"
class="text-ghost-400 hover:text-ghost-200"
class="text-guild-400 hover:text-guild-200"
>
<Icon name="heroicons:x-mark" class="w-5 h-5" />
</button>