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

4
app/components/AppFooter.vue
View file

@ -7,7 +7,7 @@
>
<!-- Left: Copyright and minimal info -->
<div>
<p class="text-ghost-500 text-xs mb-2">
<p class="text-guild-500 text-xs mb-2">
© {{ currentYear }} Ghost Guild
</p>
</div>
@ -16,7 +16,7 @@
<div class="flex flex-wrap gap-6 text-xs">
<a
href="mailto:hello@ghostguild.org"
class="text-ghost-500 hover:text-ghost-300 transition-colors"
class="text-guild-500 hover:text-guild-300 transition-colors"
>
Contact
</a>

28
app/components/AppNavigation.vue
View file

@ -3,13 +3,13 @@
:class="[
isMobile
? 'w-full flex flex-col bg-transparent'
: 'w-64 lg:w-80 backdrop-blur-sm h-screen sticky top-0 flex flex-col bg-ghost-900 border-r border-ghost-700',
: 'w-64 lg:w-80 backdrop-blur-sm h-screen sticky top-0 flex flex-col bg-guild-900 border-r border-guild-700',
]"
>
<!-- Logo/Brand at top (desktop only) -->
<div v-if="!isMobile" class="p-8 border-b border-ghost-700 bg-primary-500">
<div v-if="!isMobile" class="p-8 border-b border-guild-700 bg-primary-500">
<NuxtLink to="/" class="flex flex-col items-center gap-3 group">
<span class="text-xl font-bold text-white ethereal-text tracking-wider"
<span class="text-xl font-bold text-white warm-text tracking-wider"
>Ghost Guild Logo</span
>
</NuxtLink>
@ -31,8 +31,8 @@
<!-- Hover indicator -->
<span
class="text-ghost-200 hover:text-ghost-100 transition-all duration-300 text-lg tracking-wide block py-2 hover:ethereal-text"
active-class="text-ghost-100 ethereal-text translate-x-2"
class="text-guild-200 hover:text-guild-100 transition-all duration-300 text-lg tracking-wide block py-2 hover:warm-text"
active-class="text-guild-100 warm-text translate-x-2"
>
{{ item.label }}
</span>
@ -41,12 +41,12 @@
</ul>
<!-- Contact Email -->
<div class="mt-8 pt-6 border-t border-ghost-800/50">
<p class="text-ghost-500 text-xs">
<div class="mt-8 pt-6 border-t border-guild-800/50">
<p class="text-guild-500 text-xs">
Contact us:
<a
href="mailto:hello@ghostguild.org"
class="text-ghost-400 hover:text-ghost-300 transition-colors"
class="text-guild-400 hover:text-guild-300 transition-colors"
>hello@ghostguild.org</a
>
</p>
@ -61,30 +61,30 @@
<div
:class="
isMobile
? 'mt-8 pt-6 border-t border-ghost-800/50'
: 'mt-12 pt-8 border-t border-ghost-800/50'
? 'mt-8 pt-6 border-t border-guild-800/50'
: 'mt-12 pt-8 border-t border-guild-800/50'
"
>
<div v-if="isAuthenticated" class="space-y-4">
<NuxtLink
to="/member/dashboard"
class="block text-ghost-300 hover:text-ghost-100 hover:ethereal-text transition-all duration-300 py-2"
class="block text-guild-300 hover:text-guild-100 hover:warm-text transition-all duration-300 py-2"
@click="handleNavigate"
>
<span class="block text-sm text-whisper-400 mb-1">{{
<span class="block text-sm text-candlelight-400 mb-1">{{
memberData?.name || "Member"
}}</span>
Dashboard
</NuxtLink>
<button
@click="handleLogout"
class="text-ghost-500 hover:text-ghost-300 transition-all duration-300 text-sm"
class="text-guild-500 hover:text-guild-300 transition-all duration-300 text-sm"
>
Logout
</button>
</div>
<div v-else class="space-y-4">
<p class="text-ghost-400 text-sm mb-4">
<p class="text-guild-400 text-sm mb-4">
Enter your email to receive a login link
</p>

10
app/components/EventSeriesBadge.vue
View file

@ -1,18 +1,18 @@
<template>
<div
class="series-badge p-4 bg-ghost-800/50 dark:bg-ghost-700/30 rounded-xl border border-ghost-600 dark:border-ghost-600"
class="series-badge p-4 bg-guild-800/50 dark:bg-guild-700/30 rounded-xl border border-guild-600 dark:border-guild-600"
>
<div class="flex items-start justify-between gap-6">
<div class="flex-1 min-w-0">
<div class="flex flex-wrap items-center gap-2 mb-2">
<span
class="series-badge__label text-sm font-semibold text-ghost-300 dark:text-ghost-300"
class="series-badge__label text-sm font-semibold text-guild-300 dark:text-guild-300"
>
Part of a Series
</span>
<span
v-if="totalEvents"
class="series-badge__count inline-flex items-center px-2 py-0.5 rounded-md bg-ghost-700/50 dark:bg-ghost-600/50 text-sm font-medium text-ghost-200 dark:text-ghost-200"
class="series-badge__count inline-flex items-center px-2 py-0.5 rounded-md bg-guild-700/50 dark:bg-guild-600/50 text-sm font-medium text-guild-200 dark:text-guild-200"
>
<template v-if="position">
Event {{ position }} of {{ totalEvents }}
@ -21,13 +21,13 @@
</span>
</div>
<h3
class="series-badge__title text-lg font-semibold text-ghost-100 dark:text-ghost-100 mb-2"
class="series-badge__title text-lg font-semibold text-guild-100 dark:text-guild-100 mb-2"
>
{{ title }}
</h3>
<p
v-if="description"
class="series-badge__description text-sm text-ghost-300 dark:text-ghost-300"
class="series-badge__description text-sm text-guild-300 dark:text-guild-300"
>
{{ description }}
</p>

22
app/components/EventSeriesTicketCard.vue
View file

@ -1,6 +1,6 @@
<template>
<div
class="series-ticket-card border border-ghost-600 dark:border-ghost-600 rounded-xl overflow-hidden"
class="series-ticket-card border border-guild-600 dark:border-guild-600 rounded-xl overflow-hidden"
>
<!-- Header -->
<div
@ -39,27 +39,27 @@
</div>
<!-- Body -->
<div class="p-6 bg-ghost-800/50 dark:bg-ghost-700/30">
<div class="p-6 bg-guild-800/50 dark:bg-guild-700/30">
<!-- What's Included -->
<div class="mb-6">
<h4 class="text-sm font-semibold text-ghost-200 dark:text-ghost-200 mb-3 uppercase tracking-wide">
<h4 class="text-sm font-semibold text-guild-200 dark:text-guild-200 mb-3 uppercase tracking-wide">
What's Included
</h4>
<div class="space-y-2">
<div class="flex items-center gap-2 text-ghost-300 dark:text-ghost-300">
<div class="flex items-center gap-2 text-guild-300 dark:text-guild-300">
<Icon name="heroicons:check-circle" class="w-5 h-5 text-green-400" />
<span>Access to all {{ totalEvents }} events in the series</span>
</div>
<div
v-if="ticket.isFree && !isMember"
class="flex items-center gap-2 text-ghost-300 dark:text-ghost-300"
class="flex items-center gap-2 text-guild-300 dark:text-guild-300"
>
<Icon name="heroicons:check-circle" class="w-5 h-5 text-green-400" />
<span>Automatic registration for all sessions</span>
</div>
<div
v-if="memberSavings > 0"
class="flex items-center gap-2 text-ghost-300 dark:text-ghost-300"
class="flex items-center gap-2 text-guild-300 dark:text-guild-300"
>
<Icon name="heroicons:check-circle" class="w-5 h-5 text-green-400" />
<span>Save {{ formatPrice(memberSavings, ticket.currency) }} as a member</span>
@ -69,14 +69,14 @@
<!-- Events List Preview -->
<div v-if="events && events.length > 0" class="mb-6">
<h4 class="text-sm font-semibold text-ghost-200 dark:text-ghost-200 mb-3 uppercase tracking-wide">
<h4 class="text-sm font-semibold text-guild-200 dark:text-guild-200 mb-3 uppercase tracking-wide">
Series Schedule
</h4>
<div class="space-y-2">
<div
v-for="(event, index) in events.slice(0, 3)"
:key="event.id"
class="flex items-start gap-3 p-3 bg-ghost-700/50 dark:bg-ghost-600/30 rounded-lg"
class="flex items-start gap-3 p-3 bg-guild-700/50 dark:bg-guild-600/30 rounded-lg"
>
<div
class="w-8 h-8 rounded-full bg-purple-600/20 border border-purple-500/30 flex items-center justify-center flex-shrink-0"
@ -84,17 +84,17 @@
<span class="text-sm font-bold text-purple-300">{{ index + 1 }}</span>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-ghost-100 dark:text-ghost-100 text-sm">
<div class="font-medium text-guild-100 dark:text-guild-100 text-sm">
{{ event.title }}
</div>
<div class="text-xs text-ghost-400 dark:text-ghost-400 mt-1">
<div class="text-xs text-guild-400 dark:text-guild-400 mt-1">
{{ formatEventDate(event.startDate) }}
</div>
</div>
</div>
<div
v-if="events.length > 3"
class="text-center text-sm text-ghost-400 dark:text-ghost-400 pt-2"
class="text-center text-sm text-guild-400 dark:text-guild-400 pt-2"
>
+ {{ events.length - 3 }} more event{{ events.length - 3 !== 1 ? 's' : '' }}
</div>

18
app/components/EventTicketCard.vue
View file

@ -4,7 +4,7 @@
:class="[
isSelected
? 'border-primary bg-primary/5'
: 'border-ghost-600 bg-ghost-800/50',
: 'border-guild-600 bg-guild-800/50',
isAvailable && !alreadyRegistered
? 'hover:border-primary/50 cursor-pointer'
: 'opacity-60 cursor-not-allowed',
@ -14,10 +14,10 @@
<!-- Ticket Header -->
<div class="flex items-start justify-between mb-4">
<div>
<h3 class="text-lg font-semibold text-ghost-100">
<h3 class="text-lg font-semibold text-guild-100">
{{ ticketInfo.name }}
</h3>
<p v-if="ticketInfo.description" class="text-sm text-ghost-300 mt-1">
<p v-if="ticketInfo.description" class="text-sm text-guild-300 mt-1">
{{ ticketInfo.description }}
</p>
</div>
@ -37,7 +37,7 @@
<div class="flex items-baseline gap-2">
<span
class="text-3xl font-bold"
:class="ticketInfo.isFree ? 'text-green-400' : 'text-ghost-100'"
:class="ticketInfo.isFree ? 'text-green-400' : 'text-guild-100'"
>
{{ ticketInfo.formattedPrice }}
</span>
@ -56,7 +56,7 @@
v-if="ticketInfo.isEarlyBird && ticketInfo.formattedRegularPrice"
class="mt-1"
>
<span class="text-sm text-ghost-400 line-through">
<span class="text-sm text-guild-400 line-through">
Regular: {{ ticketInfo.formattedRegularPrice }}
</span>
</div>
@ -80,7 +80,7 @@
<Icon name="heroicons:check-circle" class="w-4 h-4 inline mr-1" />
You save {{ formatPrice(ticketInfo.memberSavings) }} as a member!
</p>
<p class="text-xs text-ghost-400 mt-1">
<p class="text-xs text-guild-400 mt-1">
Public price: {{ ticketInfo.publicTicket.formattedPrice }}
</p>
</div>
@ -102,10 +102,10 @@
<Icon name="heroicons:x-circle-solid" class="w-4 h-4" />
Sold Out
</span>
<span v-else-if="ticketInfo.remaining !== null" class="text-ghost-300">
<span v-else-if="ticketInfo.remaining !== null" class="text-guild-300">
{{ ticketInfo.remaining }} remaining
</span>
<span v-else class="text-ghost-300"> Unlimited availability </span>
<span v-else class="text-guild-300"> Unlimited availability </span>
</div>
<!-- Selection Indicator -->
@ -117,7 +117,7 @@
<!-- Waitlist Option -->
<div
v-if="!isAvailable && ticketInfo.waitlistAvailable && !alreadyRegistered"
class="mt-4 pt-4 border-t border-ghost-600"
class="mt-4 pt-4 border-t border-guild-600"
>
<UButton
color="gray"

24
app/components/EventTicketPurchase.vue
View file

@ -5,7 +5,7 @@
<div
class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto mb-4"
></div>
<p class="text-ghost-300">Loading ticket information...</p>
<p class="text-guild-300">Loading ticket information...</p>
</div>
<!-- Error State -->
@ -35,7 +35,7 @@
<strong>{{ ticketInfo.series?.title }}</strong> and requires a series
pass to attend.
</p>
<p class="text-sm text-ghost-300 mb-6">
<p class="text-sm text-guild-300 mb-6">
Purchase a series pass to get access to all events in this series.
</p>
<UButton
@ -70,7 +70,7 @@
details.
</template>
</p>
<p class="text-sm text-ghost-300">
<p class="text-sm text-guild-300">
See you on {{ formatEventDate(eventStartDate) }}!
</p>
</div>
@ -89,7 +89,7 @@
<!-- Registration Form -->
<div v-if="ticketInfo.available && !ticketInfo.alreadyRegistered">
<h3 class="text-xl font-bold text-ghost-100 mb-4">
<h3 class="text-xl font-bold text-guild-100 mb-4">
{{ ticketInfo.isFree ? "Register" : "Purchase Ticket" }}
</h3>
@ -98,7 +98,7 @@
<div>
<label
for="name"
class="block text-sm font-medium text-ghost-200 mb-2"
class="block text-sm font-medium text-guild-200 mb-2"
>
Full Name
</label>
@ -116,7 +116,7 @@
<div>
<label
for="email"
class="block text-sm font-medium text-ghost-200 mb-2"
class="block text-sm font-medium text-guild-200 mb-2"
>
Email Address
</label>
@ -128,7 +128,7 @@
placeholder="Enter your email"
:disabled="processing || isLoggedIn"
/>
<p v-if="isLoggedIn" class="text-xs text-ghost-400 mt-1">
<p v-if="isLoggedIn" class="text-xs text-guild-400 mt-1">
Using your member email
</p>
</div>
@ -185,10 +185,10 @@
>
<Icon
name="heroicons:ticket"
class="w-16 h-16 text-ghost-400 mx-auto mb-4"
class="w-16 h-16 text-guild-400 mx-auto mb-4"
/>
<h3 class="text-xl font-bold text-ghost-100 mb-2">Event Sold Out</h3>
<p class="text-ghost-300 mb-6">
<h3 class="text-xl font-bold text-guild-100 mb-2">Event Sold Out</h3>
<p class="text-guild-300 mb-6">
This event is currently at capacity. Join the waitlist to be notified
if spots become available.
</p>
@ -203,8 +203,8 @@
name="heroicons:x-circle"
class="w-16 h-16 text-red-400 mx-auto mb-4"
/>
<h3 class="text-xl font-bold text-ghost-100 mb-2">Event Sold Out</h3>
<p class="text-ghost-300">
<h3 class="text-xl font-bold text-guild-100 mb-2">Event Sold Out</h3>
<p class="text-guild-300">
Unfortunately, this event is at capacity and no longer accepting
registrations.
</p>

32
app/components/LoginModal.vue
View file

@ -5,12 +5,12 @@
:description="description"
:dismissible="dismissible"
:ui="{
content: 'bg-ghost-900 border border-ghost-700',
header: 'bg-ghost-900 border-b border-ghost-700',
body: 'bg-ghost-900',
footer: 'bg-ghost-900 border-t border-ghost-700',
title: 'text-ghost-100',
description: 'text-ghost-400',
content: 'bg-guild-900 border border-guild-700',
header: 'bg-guild-900 border-b border-guild-700',
body: 'bg-guild-900',
footer: 'bg-guild-900 border-t border-guild-700',
title: 'text-guild-100',
description: 'text-guild-400',
}"
>
<template #body>
@ -20,9 +20,9 @@
<div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
<Icon name="heroicons:check-circle" class="w-10 h-10 text-green-400" />
</div>
<h3 class="text-lg font-semibold text-ghost-100 mb-2">Check your email</h3>
<p class="text-ghost-300">
We've sent a magic link to <strong class="text-ghost-100">{{ loginForm.email }}</strong>.
<h3 class="text-lg font-semibold text-guild-100 mb-2">Check your email</h3>
<p class="text-guild-300">
We've sent a magic link to <strong class="text-guild-100">{{ loginForm.email }}</strong>.
Click the link to sign in.
</p>
</div>
@ -37,16 +37,16 @@
class="w-full"
placeholder="your.email@example.com"
:ui="{
root: 'bg-ghost-800 border-ghost-600 text-ghost-100 placeholder-ghost-500',
root: 'bg-guild-800 border-guild-600 text-guild-100 placeholder-guild-500',
}"
/>
</UFormField>
<!-- Info Box -->
<div class="bg-ghost-800 border border-ghost-600 p-4 rounded-lg mb-6">
<div class="bg-guild-800 border border-guild-600 p-4 rounded-lg mb-6">
<div class="flex items-start gap-3">
<Icon name="heroicons:envelope" class="w-5 h-5 text-whisper-400 flex-shrink-0 mt-0.5" />
<p class="text-sm text-ghost-300">
<Icon name="heroicons:envelope" class="w-5 h-5 text-candlelight-400 flex-shrink-0 mt-0.5" />
<p class="text-sm text-guild-300">
We'll send you a secure magic link. No password needed!
</p>
</div>
@ -73,12 +73,12 @@
</UForm>
<!-- Join Link -->
<div v-if="!loginSuccess" class="text-center pt-2 border-t border-ghost-700">
<p class="text-ghost-400 text-sm pt-4">
<div v-if="!loginSuccess" class="text-center pt-2 border-t border-guild-700">
<p class="text-guild-400 text-sm pt-4">
Don't have an account?
<NuxtLink
to="/join"
class="text-whisper-400 hover:text-whisper-300 font-medium"
class="text-candlelight-400 hover:text-candlelight-300 font-medium"
@click="close"
>
Join Ghost Guild

4
app/components/MemberStatusBanner.vue
View file

@ -49,7 +49,7 @@
<button
v-if="dismissible"
@click="isDismissed = true"
class="text-ghost-400 hover:text-ghost-200 transition-colors"
class="text-guild-400 hover:text-guild-200 transition-colors"
:aria-label="`Dismiss ${statusConfig.label} banner`"
>
<Icon name="heroicons:x-mark" class="w-5 h-5" />
@ -119,7 +119,7 @@ const getActionButtonClass = (color) => {
const colorClasses = {
orange: "bg-orange-600 text-white hover:bg-orange-700",
blue: "bg-blue-600 text-white hover:bg-blue-700",
gray: "bg-ghost-700 text-ghost-100 hover:bg-ghost-600",
gray: "bg-guild-700 text-guild-100 hover:bg-guild-600",
};
return `${baseClass} ${colorClasses[color] || colorClasses.blue}`;
};

22
app/components/PageHeader.vue
View file

@ -26,8 +26,8 @@
v-if="showInteractiveArea"
:class="[
'rounded-2xl p-6 md:p-8 mb-12 backdrop-blur-sm',
props.theme === 'ethereal'
? 'bg-ghost-800/60 border border-ghost-700 ethereal-glow halftone-texture'
props.theme === 'guild'
? 'bg-guild-800/60 border border-guild-700 candlelight-glow halftone-texture'
: 'bg-[--ui-bg-elevated] shadow-xl border border-blue-200',
]"
>
@ -35,8 +35,8 @@
<button
:class="[
'p-2 md:p-3 rounded-full transition-all duration-300 flex-shrink-0',
props.theme === 'ethereal'
? 'bg-whisper-600/80 text-ghost-100 hover:bg-whisper-500 ethereal-glow'
props.theme === 'guild'
? 'bg-candlelight-600/80 text-guild-100 hover:bg-candlelight-500 candlelight-glow'
: 'bg-blue-500 text-white hover:bg-blue-600',
]"
@click="$emit('prev')"
@ -61,8 +61,8 @@
<p
:class="[
'text-base md:text-lg',
props.theme === 'ethereal'
? 'text-ghost-200'
props.theme === 'guild'
? 'text-guild-200'
: 'text-[--ui-text-muted]',
]"
>
@ -77,8 +77,8 @@
<button
:class="[
'p-2 md:p-3 rounded-full transition-all duration-300 flex-shrink-0',
props.theme === 'ethereal'
? 'bg-whisper-600/80 text-ghost-100 hover:bg-whisper-500 ethereal-glow'
props.theme === 'guild'
? 'bg-candlelight-600/80 text-guild-100 hover:bg-candlelight-500 candlelight-glow'
: 'bg-blue-500 text-white hover:bg-blue-600',
]"
@click="$emit('next')"
@ -137,7 +137,7 @@ const props = defineProps({
type: String,
default: "blue",
validator: (value) =>
["blue", "purple", "emerald", "gray", "ethereal"].includes(value),
["blue", "purple", "emerald", "gray", "guild"].includes(value),
},
size: {
type: String,
@ -182,8 +182,8 @@ const backgroundClass = computed(() => {
purple: "bg-gradient-to-br from-purple-50 to-violet-100",
emerald: "bg-gradient-to-br from-emerald-50 to-teal-100",
gray: "bg-neutral-100",
ethereal:
"bg-gradient-to-br from-ghost-900 via-ghost-800 to-whisper-900 halftone-texture",
guild:
"bg-gradient-to-br from-guild-900 via-guild-800 to-candlelight-900 halftone-texture",
};
return themes[props.theme] || themes.blue;
});

6
app/components/PrivacyToggle.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="flex items-center gap-3 text-sm">
<span class="text-gray-700 dark:text-ghost-400 text-xs font-medium"
<span class="text-gray-700 dark:text-guild-400 text-xs font-medium"
>{{ label }}:</span
>
<div class="flex items-center gap-2">
@ -8,7 +8,7 @@
class="text-xs transition-colors"
:class="
isPrivate
? 'text-gray-500 dark:text-ghost-500'
? 'text-gray-500 dark:text-guild-500'
: 'text-blue-600 dark:text-blue-400 font-semibold'
"
>
@ -25,7 +25,7 @@
:class="
isPrivate
? 'text-blue-600 dark:text-blue-400 font-semibold'
: 'text-gray-500 dark:text-ghost-500'
: 'text-gray-500 dark:text-guild-500'
"
>
Private

2
app/components/SeriesPassPurchase.vue
View file

@ -38,7 +38,7 @@
<!-- Registration Form -->
<div
v-if="passInfo.available && !passInfo.alreadyRegistered"
class="bg-ghost-800/50 dark:bg-ghost-700/30 rounded-xl border border-ghost-600 dark:border-ghost-600 p-6"
class="bg-guild-800/50 dark:bg-guild-700/30 rounded-xl border border-guild-600 dark:border-guild-600 p-6"
>
<h3 class="text-xl font-bold text-[--ui-text] mb-6">
{{

32
app/components/UpdateCard.vue
View file

@ -12,7 +12,7 @@
/>
<div
v-else
class="w-12 h-12 rounded-full bg-ghost-700 flex items-center justify-center text-ghost-300 font-bold"
class="w-12 h-12 rounded-full bg-guild-700 flex items-center justify-center text-guild-300 font-bold"
>
{{ update.author?.name?.charAt(0)?.toUpperCase() || "?" }}
</div>
@ -23,30 +23,30 @@
<!-- Header -->
<div class="flex items-start justify-between gap-4 mb-2">
<div>
<h3 class="font-semibold text-ghost-100">
<h3 class="font-semibold text-guild-100">
<NuxtLink
v-if="update.author?._id"
:to="`/updates/user/${update.author._id}`"
class="hover:text-ghost-300 transition-colors"
class="hover:text-guild-300 transition-colors"
>
{{ update.author.name }}
</NuxtLink>
<span v-else>Unknown Member</span>
</h3>
<div class="flex items-center gap-2 text-sm text-ghost-400">
<div class="flex items-center gap-2 text-sm text-guild-400">
<time :datetime="update.createdAt">
{{ formatDate(update.createdAt) }}
</time>
<span v-if="isEdited" class="text-ghost-500">(edited)</span>
<span v-if="isEdited" class="text-guild-500">(edited)</span>
<span
v-if="update.privacy === 'private'"
class="px-2 py-0.5 bg-ghost-700 text-ghost-300 rounded text-xs"
class="px-2 py-0.5 bg-guild-700 text-guild-300 rounded text-xs"
>
Private
</span>
<span
v-if="update.privacy === 'public'"
class="px-2 py-0.5 bg-ghost-700 text-ghost-300 rounded text-xs"
class="px-2 py-0.5 bg-guild-700 text-guild-300 rounded text-xs"
>
Public
</span>
@ -73,12 +73,12 @@
</div>
<!-- Content -->
<div class="text-ghost-200 whitespace-pre-wrap break-words mb-3">
<div class="text-guild-200 whitespace-pre-wrap break-words mb-3">
<template v-if="showPreview && update.content.length > 300">
{{ update.content.substring(0, 300) }}...
<NuxtLink
:to="`/updates/${update._id}`"
class="text-ghost-400 hover:text-ghost-300 ml-1"
class="text-guild-400 hover:text-guild-300 ml-1"
>
Read more
</NuxtLink>
@ -100,14 +100,14 @@
</div>
<!-- Footer actions -->
<div class="flex items-center gap-4 text-sm text-ghost-400">
<div class="flex items-center gap-4 text-sm text-guild-400">
<NuxtLink
:to="`/updates/${update._id}`"
class="hover:text-ghost-300 transition-colors"
class="hover:text-guild-300 transition-colors"
>
View full update
</NuxtLink>
<span v-if="update.commentsEnabled" class="text-ghost-500">
<span v-if="update.commentsEnabled" class="text-guild-500">
Comments (coming soon)
</span>
</div>
@ -175,15 +175,15 @@ const formatDate = (date) => {
<style scoped>
.update-card {
background-color: rgb(41 37 36);
border-color: rgb(87 83 78);
background-color: var(--color-guild-800);
border-color: var(--color-guild-600);
}
.update-card:hover {
border-color: rgb(120 113 108);
border-color: var(--color-guild-500);
}
:deep(.card) {
background-color: rgb(41 37 36);
background-color: var(--color-guild-800);
}
</style>

44
app/components/UpdateForm.vue
View file

@ -11,19 +11,19 @@
</UFormField>
<!-- Privacy Settings -->
<div class="border border-ghost-700 rounded-lg p-4 bg-ghost-800/30">
<h3 class="text-sm font-medium text-ghost-200 mb-4">Privacy Settings</h3>
<div class="border border-guild-700 rounded-lg p-4 bg-guild-800/30">
<h3 class="text-sm font-medium text-guild-200 mb-4">Privacy Settings</h3>
<div class="space-y-3">
<label class="flex items-center gap-3 cursor-pointer">
<input
v-model="formData.privacy"
type="radio"
value="public"
class="w-4 h-4 text-ghost-400"
class="w-4 h-4 text-guild-400"
/>
<div>
<div class="text-ghost-200 font-medium">Public</div>
<div class="text-sm text-ghost-400">
<div class="text-guild-200 font-medium">Public</div>
<div class="text-sm text-guild-400">
Visible to everyone, including non-members
</div>
</div>
@ -34,11 +34,11 @@
v-model="formData.privacy"
type="radio"
value="members"
class="w-4 h-4 text-ghost-400"
class="w-4 h-4 text-guild-400"
/>
<div>
<div class="text-ghost-200 font-medium">Members Only</div>
<div class="text-sm text-ghost-400">
<div class="text-guild-200 font-medium">Members Only</div>
<div class="text-sm text-guild-400">
Only visible to Ghost Guild members
</div>
</div>
@ -49,11 +49,11 @@
v-model="formData.privacy"
type="radio"
value="private"
class="w-4 h-4 text-ghost-400"
class="w-4 h-4 text-guild-400"
/>
<div>
<div class="text-ghost-200 font-medium">Private</div>
<div class="text-sm text-ghost-400">Only visible to you</div>
<div class="text-guild-200 font-medium">Private</div>
<div class="text-sm text-guild-400">Only visible to you</div>
</div>
</label>
</div>
@ -66,8 +66,8 @@
<div class="flex items-center gap-3">
<USwitch v-model="formData.commentsEnabled" />
<div>
<div class="text-ghost-200 font-medium">Enable Comments</div>
<div class="text-sm text-ghost-400">
<div class="text-guild-200 font-medium">Enable Comments</div>
<div class="text-sm text-guild-400">
Allow members to comment on this update
</div>
</div>
@ -75,7 +75,7 @@
<!-- Actions -->
<div
class="flex justify-between items-center pt-4 border-t border-ghost-700"
class="flex justify-between items-center pt-4 border-t border-guild-700"
>
<UButton variant="ghost" color="neutral" @click="$emit('cancel')">
Cancel
@ -157,28 +157,28 @@ watch(
<style scoped>
/* Field labels */
:deep(label) {
color: rgb(231 229 228) !important;
color: var(--color-guild-200) !important;
font-weight: 500;
}
/* Textarea styling */
:deep(textarea) {
background-color: rgb(41 37 36) !important;
color: rgb(231 229 228) !important;
border-color: rgb(87 83 78) !important;
background-color: var(--color-guild-800) !important;
color: var(--color-guild-200) !important;
border-color: var(--color-guild-600) !important;
}
:deep(textarea::placeholder) {
color: rgb(120 113 108) !important;
color: var(--color-guild-500) !important;
}
:deep(textarea:focus) {
border-color: rgb(168 162 158) !important;
background-color: rgb(44 40 39) !important;
border-color: var(--color-guild-400) !important;
background-color: var(--color-guild-700) !important;
}
/* Radio buttons */
input[type="radio"] {
accent-color: rgb(168 162 158);
accent-color: var(--color-candlelight-600);
}
</style>