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

84
app/pages/member/profile.vue
View file

@ -18,7 +18,7 @@
<div
class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
></div>
<p class="text-gray-600 dark:text-ghost-400">
<p class="text-gray-600 dark:text-guild-400">
Loading your profile...
</p>
</div>
@ -30,11 +30,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 profile settings.</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 profile settings.</p>
<UButton @click="openLoginModal({ title: 'Sign in to your profile', description: 'Enter your email to manage your profile settings' })">
Sign In
</UButton>
@ -52,7 +52,7 @@
<!-- Basic Information -->
<div>
<h2
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-ghost-100 ethereal-text"
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
>
Basic Information
</h2>
@ -124,7 +124,7 @@
:class="
formData.avatar === ghost.value
? 'border-blue-400 bg-blue-500/20'
: 'border-ghost-700 bg-ghost-800/50 hover:border-ghost-600'
: 'border-guild-700 bg-guild-800/50 hover:border-guild-600'
"
@click="formData.avatar = ghost.value"
>
@ -153,7 +153,7 @@
<!-- Professional Info -->
<div>
<h2
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-ghost-100 ethereal-text"
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
>
Professional Information
</h2>
@ -222,7 +222,7 @@
<!-- Community Connections -->
<div>
<h2
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-ghost-100 ethereal-text"
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
>
Community Connections
</h2>
@ -238,7 +238,7 @@
<!-- Tags input -->
<div>
<label
class="block text-sm font-medium text-gray-800 dark:text-ghost-200 mb-2"
class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
>
Skills & Topics
</label>
@ -270,7 +270,7 @@
<!-- Description textarea -->
<div>
<label
class="block text-sm font-medium text-gray-800 dark:text-ghost-200 mb-2"
class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
>
Details
</label>
@ -300,7 +300,7 @@
<!-- Tags input -->
<div>
<label
class="block text-sm font-medium text-gray-800 dark:text-ghost-200 mb-2"
class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
>
Skills & Topics
</label>
@ -332,7 +332,7 @@
<!-- Description textarea -->
<div>
<label
class="block text-sm font-medium text-gray-800 dark:text-ghost-200 mb-2"
class="block text-sm font-medium text-gray-800 dark:text-guild-200 mb-2"
>
Details
</label>
@ -357,7 +357,7 @@
<!-- Peer Support -->
<div>
<h2
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-ghost-100 ethereal-text"
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
>
Peer Support
</h2>
@ -368,12 +368,12 @@
<USwitch v-model="formData.peerSupportEnabled" />
<div>
<p
class="font-medium text-gray-800 dark:text-ghost-200"
class="font-medium text-gray-800 dark:text-guild-200"
>
Offer Peer Support
</p>
<p
class="text-sm text-gray-600 dark:text-ghost-400 mt-1"
class="text-sm text-gray-600 dark:text-guild-400 mt-1"
>
Make yourself available to support other members
</p>
@ -478,7 +478,7 @@
/>
<template #hint>
<span
class="text-xs text-gray-500 dark:text-ghost-500"
class="text-xs text-gray-500 dark:text-guild-500"
>
{{ formData.peerSupportMessage?.length || 0 }}/200
characters
@ -506,7 +506,7 @@
<!-- Directory Settings -->
<div>
<h2
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-ghost-100 ethereal-text"
class="text-2xl font-semibold mb-8 text-gray-900 dark:text-guild-100 warm-text"
>
Directory Visibility
</h2>
@ -514,10 +514,10 @@
<div class="flex items-start gap-4">
<USwitch v-model="formData.showInDirectory" />
<div>
<p class="font-medium text-gray-800 dark:text-ghost-200">
<p class="font-medium text-gray-800 dark:text-guild-200">
Show in Member Directory
</p>
<p class="text-sm text-gray-600 dark:text-ghost-400 mt-1">
<p class="text-sm text-gray-600 dark:text-guild-400 mt-1">
Allow other members to discover and connect with you
through the directory
</p>
@ -544,7 +544,7 @@
<!-- Actions -->
<div
class="flex justify-between items-center pt-4 border-t border-ghost-800/50"
class="flex justify-between items-center pt-4 border-t border-guild-800/50"
>
<UButton
type="button"
@ -574,20 +574,20 @@
<!-- Current Membership -->
<div>
<h2
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-ghost-100 ethereal-text"
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-guild-100 warm-text"
>
Current Membership
</h2>
<div
class="backdrop-blur-sm bg-white/80 dark:bg-ghost-800/50 border border-gray-200 dark:border-ghost-700 rounded-lg p-6 space-y-4"
class="backdrop-blur-sm bg-white/80 dark:bg-guild-800/50 border border-gray-200 dark:border-guild-700 rounded-lg p-6 space-y-4"
>
<!-- Status Badge -->
<div
class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-ghost-700"
class="flex items-center justify-between pb-4 border-b border-gray-200 dark:border-guild-700"
>
<div>
<p class="text-sm text-gray-600 dark:text-ghost-400">
<p class="text-sm text-gray-600 dark:text-guild-400">
Membership Status
</p>
<div class="flex items-center gap-2 mt-1">
@ -620,21 +620,21 @@
<div class="flex items-start justify-between">
<div>
<p class="text-sm text-gray-600 dark:text-ghost-400">
<p class="text-sm text-gray-600 dark:text-guild-400">
Circle
</p>
<p
class="text-lg font-medium text-gray-900 dark:text-ghost-100 capitalize"
class="text-lg font-medium text-gray-900 dark:text-guild-100 capitalize"
>
{{ memberData.circle }}
</p>
</div>
<div>
<p class="text-sm text-gray-600 dark:text-ghost-400">
<p class="text-sm text-gray-600 dark:text-guild-400">
Contribution Level
</p>
<p
class="text-lg font-medium text-gray-900 dark:text-ghost-100"
class="text-lg font-medium text-gray-900 dark:text-guild-100"
>
${{ contributionTierDetails?.amount }}/month
</p>
@ -642,10 +642,10 @@
</div>
<div v-if="memberData.subscriptionStartDate">
<p class="text-sm text-gray-600 dark:text-ghost-400">
<p class="text-sm text-gray-600 dark:text-guild-400">
Member Since
</p>
<p class="text-gray-900 dark:text-ghost-100">
<p class="text-gray-900 dark:text-guild-100">
{{ formatDate(memberData.subscriptionStartDate) }}
</p>
</div>
@ -656,10 +656,10 @@
memberData.contributionTier !== '0'
"
>
<p class="text-sm text-gray-600 dark:text-ghost-400">
<p class="text-sm text-gray-600 dark:text-guild-400">
Next Billing Date
</p>
<p class="text-gray-900 dark:text-ghost-100">
<p class="text-gray-900 dark:text-guild-100">
{{ formatDate(memberData.nextBillingDate) }}
</p>
</div>
@ -669,15 +669,15 @@
<!-- Change Contribution Level -->
<div>
<h2
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-ghost-100 ethereal-text"
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-guild-100 warm-text"
>
Change Contribution Level
</h2>
<div
class="backdrop-blur-sm bg-white/80 dark:bg-ghost-800/50 border border-gray-200 dark:border-ghost-700 rounded-lg p-6"
class="backdrop-blur-sm bg-white/80 dark:bg-guild-800/50 border border-gray-200 dark:border-guild-700 rounded-lg p-6"
>
<p class="text-gray-700 dark:text-ghost-300 mb-6">
<p class="text-gray-700 dark:text-guild-300 mb-6">
Choose a new contribution level that works for you.
Changes will take effect on your next billing cycle.
</p>
@ -691,14 +691,14 @@
'w-full text-left p-4 rounded-lg border-2 transition-all',
selectedContributionTier === tier.value
? 'border-blue-400 bg-blue-500/20'
: 'border-gray-300 dark:border-ghost-600 bg-gray-50 dark:bg-ghost-900/30 hover:border-blue-300 dark:hover:border-ghost-500',
: 'border-gray-300 dark:border-guild-600 bg-gray-50 dark:bg-guild-900/30 hover:border-blue-300 dark:hover:border-guild-500',
]"
@click="selectedContributionTier = tier.value"
>
<div class="flex items-center justify-between">
<div>
<p
class="font-medium text-gray-900 dark:text-ghost-100"
class="font-medium text-gray-900 dark:text-guild-100"
>
{{ tier.label }}
</p>
@ -745,20 +745,20 @@
<!-- Cancel Membership -->
<div>
<h2
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-ghost-100 ethereal-text"
class="text-2xl font-semibold mb-6 text-gray-900 dark:text-guild-100 warm-text"
>
Cancel Membership
</h2>
<div
class="backdrop-blur-sm bg-white/80 dark:bg-ghost-800/50 border border-gray-200 dark:border-ghost-700 rounded-lg p-6"
class="backdrop-blur-sm bg-white/80 dark:bg-guild-800/50 border border-gray-200 dark:border-guild-700 rounded-lg p-6"
>
<p class="text-gray-700 dark:text-ghost-300 mb-4">
<p class="text-gray-700 dark:text-guild-300 mb-4">
We're sorry to see you go. If you cancel, you'll lose
access to member benefits at the end of your current
billing period.
</p>
<p class="text-sm text-gray-600 dark:text-ghost-400 mb-6">
<p class="text-sm text-gray-600 dark:text-guild-400 mb-6">
Need a break? Consider switching to the free tier instead.
</p>