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

fix(ui): disambiguate annual tier labels

Browse source 
"$50/yr" was ambiguous — could mean the $5 tier in annual mode or the
$50 tier in monthly mode. On /join the dropdown now shows both prices
("$5/mo → $50/yr") in annual mode. On the account page TierPicker
gains a subtitle slot; annual mode shows "$N/mo tier" beneath the
annual price so members recognize which tier they're on.
This commit is contained in:
Jennie Robinson Faber 2026-04-18 22:06:38 +01:00
parent 8ceaebb268
commit fd9ce5bc2c
3 changed files with 28 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/components/TierPicker.vue
View file

@ -8,6 +8,7 @@
@click="$emit('update:modelValue', tier.amount)"
>
<span class="tier-amount">{{ tier.display }}</span>
<span v-if="tier.subtitle" class="tier-subtitle">{{ tier.subtitle }}</span>
</div>
</div>
</template>
@ -78,6 +79,15 @@ defineEmits(["update:modelValue"]);
color: var(--candle);
}
.tier-subtitle {
display: block;
margin-top: 4px;
font-size: 11px;
color: var(--text-dim);
font-family: "Commit Mono", monospace;
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
.tier-picker {
flex-wrap: wrap;