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>

22
app/pages/member/my-updates.vue
View file

@ -11,8 +11,8 @@
<UContainer class="px-4">
<!-- Stats -->
<div v-if="isAuthenticated && !pending" class="mb-8 flex items-center justify-between">
<div class="text-ghost-300">
<span class="text-2xl font-bold text-ghost-100">{{ total }}</span>
<div class="text-guild-300">
<span class="text-2xl font-bold text-guild-100">{{ total }}</span>
{{ total === 1 ? "update" : "updates" }} posted
</div>
<UButton to="/updates/new" icon="i-lucide-plus"> New Update </UButton>
@ -25,9 +25,9 @@
>
<div class="text-center">
<div
class="w-8 h-8 border-4 border-ghost-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
class="w-8 h-8 border-4 border-guild-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
></div>
<p class="text-ghost-400">Loading your updates...</p>
<p class="text-guild-400">Loading your updates...</p>
</div>
</div>
@ -37,11 +37,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 view your updates.</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 view your updates.</p>
<UButton @click="openLoginModal({ title: 'Sign in to view your updates', description: 'Enter your email to access your updates' })">
Sign In
</UButton>
@ -79,7 +79,7 @@
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
class="text-ghost-600"
class="text-guild-600"
>
<path
stroke-linecap="round"
@ -89,10 +89,10 @@
/>
</svg>
</div>
<h3 class="text-lg font-medium text-ghost-300 mb-2">
<h3 class="text-lg font-medium text-guild-300 mb-2">
No updates yet
</h3>
<p class="text-ghost-400 mb-6">
<p class="text-guild-400 mb-6">
Share your first update with the community
</p>
<UButton to="/updates/new" icon="i-lucide-plus">

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>