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> </div>
<!-- Error State --> <!-- Error State -->
<div <div v-else-if="error" class="error-state p-6">
v-else-if="error" <h3 class="error-state__heading text-lg font-semibold mb-2">
class="p-6 bg-ember-900/20 rounded-xl border border-ember-800"
>
<h3 class="text-lg font-semibold text-ember-300 mb-2">
Unable to Load Series Pass Unable to Load Series Pass
</h3> </h3>
<p class="text-ember-400">{{ error }}</p> <p class="error-state__body">{{ error }}</p>
</div> </div>
<!-- Content --> <!-- Content -->
@ -48,7 +45,7 @@
<!-- Registration Form --> <!-- Registration Form -->
<div <div
v-if="passInfo.available && !passInfo.alreadyRegistered" 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"> <h3 class="text-xl font-bold text-[--ui-text] mb-6">
{{ {{
@ -357,3 +354,18 @@ const formatPrice = (price, currency = "CAD") => {
}).format(price); }).format(price);
}; };
</script> </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>