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

fix(series): replace phantom Tailwind on SeriesPassPurchase

Browse source 
Error state and main registration card swap bg-ember-*/border-ember-* and
bg-guild-*/border-guild-* utilities for design tokens in a scoped style
block. Error state uses the codebase's --ember + 8% color-mix pattern;
registration card uses --surface + dashed --border per the zine spec.
This commit is contained in:
Jennie Robinson Faber 2026-04-29 20:22:35 +01:00
parent 350d6c219c
commit 1da76b11cb
1 changed files with 19 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

26
app/components/SeriesPassPurchase.vue
View file

@ -9,14 +9,11 @@
</div>
<!-- Error State -->
<div
v-else-if="error"
class="p-6 bg-ember-900/20 rounded-xl border border-ember-800"
>
<h3 class="text-lg font-semibold text-ember-300 mb-2">
<div v-else-if="error" class="error-state p-6">
<h3 class="error-state__heading text-lg font-semibold mb-2">
Unable to Load Series Pass
</h3>
<p class="text-ember-400">{{ error }}</p>
<p class="error-state__body">{{ error }}</p>
</div>
<!-- Content -->
@ -48,7 +45,7 @@
<!-- Registration Form -->
<div
v-if="passInfo.available && !passInfo.alreadyRegistered"
class="bg-guild-800/50 dark:bg-guild-700/30 rounded-xl border border-guild-600 dark:border-guild-600 p-6"
class="registration-form p-6"
>
<h3 class="text-xl font-bold text-[--ui-text] mb-6">
{{
@ -357,3 +354,18 @@ const formatPrice = (price, currency = "CAD") => {
}).format(price);
};
</script>
<style scoped>
.error-state {
background: color-mix(in srgb, var(--ember) 8%, transparent);
border: 1px dashed var(--ember);
}
.error-state__heading,
.error-state__body {
color: var(--ember);
}
.registration-form {
background: var(--surface);
border: 1px dashed var(--border);
}
</style>