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

UI/UX tweaks and improvements.

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-04-05 12:28:41 +01:00
parent 4daec9b624
commit 418d3cc402
32 changed files with 2725 additions and 1201 deletions
Download patch file Download diff file Expand all files Collapse all files

22
app/components/TierPicker.vue
View file

@ -19,16 +19,16 @@ defineProps({
tiers: {
type: Array,
default: () => [
{ amount: 0, display: '$0', label: 'Free' },
{ amount: 5, display: '$5', label: '/month' },
{ amount: 15, display: '$15', label: '/month' },
{ amount: 30, display: '$30', label: '/month' },
{ amount: 50, display: '$50', label: '/month' },
{ amount: 0, display: "$0", label: "Free" },
{ amount: 5, display: "$5", label: "/month" },
{ amount: 15, display: "$15", label: "/month" },
{ amount: 30, display: "$30", label: "/month" },
{ amount: 50, display: "$50", label: "/month" },
],
},
})
});
defineEmits(['update:modelValue'])
defineEmits(["update:modelValue"]);
</script>
<style scoped>
@ -46,27 +46,31 @@ defineEmits(['update:modelValue'])
background: var(--bg);
cursor: pointer;
transition: all 0.15s;
position: relative;
}
/* Overlap adjacent borders so dashed lines collapse into one */
.tier-option + .tier-option {
border-left: none;
margin-left: -1px;
}
.tier-option:hover {
background: var(--surface-hover);
}
/* Active item paints its solid border on top of any neighbor */
.tier-option.current {
border-color: var(--candle);
border-style: solid;
background: var(--surface);
z-index: 1;
}
.tier-amount {
font-size: 16px;
font-weight: 600;
color: var(--text);
font-family: 'Brygada 1918', serif;
font-family: "Brygada 1918", serif;
display: block;
}