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

fix(uploads): replace phantom Tailwind palette with design tokens

Browse source 
Sibling sweep to dc2becf: NaturalDateInput.vue and ImageUpload.vue used
candlelight-/ember-/guild-* utility classes that aren't defined in the
project's Tailwind palette and rendered as no-ops. Swapped to inline
styles using --candle, --ember, --text-dim/faint/bright, --border,
--input-bg, --surface. Drag-state and parsed-date notices follow the
color-mix(... 15%) + 1px solid pattern from dc2becf.
This commit is contained in:
Jennie Robinson Faber 2026-04-29 19:46:59 +01:00
parent dc2becf63e
commit a69c9d9b49
2 changed files with 55 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

68
app/components/ImageUpload.vue
View file

@ -5,14 +5,16 @@
<img
:src="transformedImageUrl"
:alt="modelValue.alt || 'Event image'"
class="w-full h-48 object-cover rounded-lg border border-guild-700"
class="w-full h-48 object-cover"
style="border: 1px solid var(--border)"
@error="console.log('Image failed to load:', transformedImageUrl)"
@load="console.log('Image loaded successfully:', transformedImageUrl)"
/>
>
<button
@click="removeImage"
type="button"
class="absolute top-2 right-2 p-1 bg-ember-500 text-white rounded-full hover:bg-ember-600 transition-colors"
class="absolute top-2 right-2 p-1 text-white rounded-full transition-colors"
style="background: var(--ember)"
@click="removeImage"
>
<Icon name="heroicons:x-mark" class="w-4 h-4" />
</button>
@ -21,67 +23,89 @@
<!-- Upload Area -->
<div
v-if="!modelValue?.url"
class="border-2 border-dashed border-guild-700 rounded-lg p-6 text-center hover:border-guild-600 transition-colors"
class="border-2 border-dashed p-6 text-center transition-colors"
:style="
isDragging
? 'border-color: var(--candle); background: color-mix(in srgb, var(--candle) 15%, transparent)'
: 'border-color: var(--border)'
"
@dragover.prevent="isDragging = true"
@dragleave.prevent="isDragging = false"
@drop.prevent="handleDrop"
:class="{ 'border-candlelight-400 bg-candlelight-900/20': isDragging }"
>
<input
ref="fileInput"
type="file"
accept="image/*"
@change="handleFileSelect"
class="hidden"
/>
@change="handleFileSelect"
>
<div class="space-y-3">
<Icon name="heroicons:photo" class="w-12 h-12 text-guild-400 mx-auto" />
<Icon
name="heroicons:photo"
class="w-12 h-12 mx-auto"
style="color: var(--text-dim)"
/>
<div>
<p class="text-guild-400">
<p style="color: var(--text-dim)">
<button
type="button"
class="font-medium"
style="color: var(--candle)"
@click="$refs.fileInput.click()"
class="text-candlelight-400 hover:text-candlelight-300 font-medium"
>
Click to upload
</button>
or drag and drop
</p>
<p class="text-sm text-guild-500">PNG, JPG, GIF up to 10MB</p>
<p class="text-sm" style="color: var(--text-faint)">
PNG, JPG, GIF up to 10MB
</p>
</div>
</div>
</div>
<!-- Alt Text Input -->
<div v-if="modelValue?.url">
<label class="block text-sm font-medium text-guild-100 mb-1">
<label
class="block text-sm font-medium mb-1"
style="color: var(--text-bright)"
>
Alt Text (for accessibility)
</label>
<input
:value="modelValue.alt || ''"
@input="updateAltText($event.target.value)"
placeholder="Describe this image..."
class="w-full bg-guild-800 border border-guild-700 rounded-lg px-3 py-2 text-guild-100 placeholder-guild-500 focus:ring-2 focus:ring-candlelight-500 focus:border-transparent"
/>
class="w-full px-3 py-2"
style="
background: var(--input-bg);
border: 1px solid var(--border);
color: var(--text);
"
@input="updateAltText($event.target.value)"
>
</div>
<!-- Upload Progress -->
<div v-if="isUploading" class="space-y-2">
<div class="flex items-center justify-between text-sm">
<span class="text-guild-400">Uploading...</span>
<span class="text-guild-400">{{ uploadProgress }}%</span>
<span style="color: var(--text-dim)">Uploading...</span>
<span style="color: var(--text-dim)">{{ uploadProgress }}%</span>
</div>
<div class="w-full bg-guild-800 rounded-full h-2">
<div
class="w-full rounded-full h-2"
style="background: var(--surface)"
>
<div
class="bg-candlelight-600 h-2 rounded-full transition-all duration-300"
:style="`width: ${uploadProgress}%`"
class="h-2 rounded-full transition-all duration-300"
:style="`width: ${uploadProgress}%; background: var(--candle)`"
/>
</div>
</div>
<!-- Error Message -->
<div v-if="errorMessage" class="text-sm text-ember-400">
<div v-if="errorMessage" class="text-sm" style="color: var(--ember)">
{{ errorMessage }}
</div>
</div>

14
app/components/NaturalDateInput.vue
View file

@ -18,12 +18,14 @@
<Icon
v-if="isValidParse && naturalInput.trim()"
name="heroicons:check-circle"
class="w-5 h-5 text-candlelight-500"
class="w-5 h-5"
style="color: var(--candle)"
/>
<Icon
v-else-if="hasError && naturalInput.trim()"
name="heroicons:exclamation-circle"
class="w-5 h-5 text-ember-500"
class="w-5 h-5"
style="color: var(--ember)"
/>
</template>
</UInput>
@ -31,7 +33,8 @@
<div
v-if="parsedDate && isValidParse"
class="text-sm text-candlelight-400 bg-candlelight-900/20 px-3 py-2 rounded-lg border border-candlelight-800"
class="text-sm px-3 py-2"
style="color: var(--candle); background: color-mix(in srgb, var(--candle) 15%, transparent); border: 1px solid var(--candle)"
>
<div class="flex items-center gap-2">
<Icon name="heroicons:calendar" class="w-4 h-4" />
@ -41,7 +44,8 @@
<div
v-if="hasError && naturalInput.trim()"
class="text-sm text-ember-400 bg-ember-900/20 px-3 py-2 rounded-lg border border-ember-800"
class="text-sm px-3 py-2"
style="color: var(--ember); background: color-mix(in srgb, var(--ember) 15%, transparent); border: 1px solid var(--ember)"
>
<div class="flex items-center gap-2">
<Icon name="heroicons:exclamation-triangle" class="w-4 h-4" />
@ -51,7 +55,7 @@
<!-- Fallback datetime-local input -->
<details class="text-sm">
<summary class="cursor-pointer text-guild-400 hover:text-guild-100">
<summary class="cursor-pointer" style="color: var(--text-dim)">
Use traditional date picker
</summary>
<div class="mt-2">