Skip to content

Improve visual indicator for coming-soon tiers #845

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dembrane-sam-bot wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Improve visual indicator for coming-soon tiers #845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a7b40cb
style: differentiate coming-soon tiers and add contact form line
dembrane-sam-bot Jul 13, 2026
40a9510
style: keep coming-soon badge at full contrast on muted tier cards
spashii Jul 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
73 changes: 47 additions & 26 deletions echo/frontend/src/components/workspace/TierPricingCards.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,8 @@ function TierCard({
const wrapClasses = [
isWide ? classes.wideWrap : classes.wrap,
selected ? classes.selected : "",
highlighted ? classes.highlighted : "",
highlighted && !comingSoon ? classes.highlighted : "",
comingSoon ? classes.comingSoonCard : "",
]
.filter(Boolean)
.join(" ");
Expand All @@ -165,12 +166,19 @@ function TierCard({
popularLabel={highlightLabel}
/>
);
// Coming-soon cards mute content per element instead of fading the card,
// so the "Coming soon" badge keeps full contrast.
const mutedText = comingSoon ? "gray.6" : undefined;
const specRows = card.specs.map((spec) => (
<Group key={spec} gap={7} wrap="nowrap" className={classes.specRow}>
<IconCheck
size={isWide ? 13 : 14}
stroke={1.5}
color="var(--mantine-color-primary-6)"
color={
comingSoon
? "var(--mantine-color-gray-5)"
: "var(--mantine-color-primary-6)"
}
/>
<Text size={isWide ? "xs" : "sm"} c="dimmed">
{spec}
Expand All @@ -189,11 +197,10 @@ function TierCard({
aria-checked={selected}
aria-disabled={comingSoon}
tabIndex={comingSoon ? -1 : 0}
style={comingSoon ? { opacity: 0.6 } : undefined}
>
<Stack gap={0} className={classes.wideInner}>
<Group gap={8} wrap="nowrap">
<Text size="lg" className={classes.tierName}>
<Text size="lg" className={classes.tierName} c={mutedText}>
{card.tier}
</Text>
{badge}
Expand All @@ -216,7 +223,7 @@ function TierCard({
<Text
size="xl"
className={classes.priceAmount}
c="var(--app-text)"
c={mutedText ?? "var(--app-text)"}
>
{card.priceAmount}
</Text>
Expand Down Expand Up @@ -247,7 +254,6 @@ function TierCard({
aria-checked={selected}
aria-disabled={comingSoon}
tabIndex={comingSoon ? -1 : 0}
style={comingSoon ? { opacity: 0.6 } : undefined}
>
<Stack gap={0} className={classes.mobileInner}>
<Group
Expand All @@ -257,7 +263,7 @@ function TierCard({
gap={12}
>
<Group gap={8} wrap="nowrap">
<Text size="md" fw={500} className={classes.tierName}>
<Text size="md" fw={500} className={classes.tierName} c={mutedText}>
{card.tier}
</Text>
{badge}
Expand All @@ -267,7 +273,7 @@ function TierCard({
<Text
size="lg"
className={classes.priceAmount}
c="var(--app-text)"
c={mutedText ?? "var(--app-text)"}
>
{card.priceAmount}
</Text>
Expand Down Expand Up @@ -352,23 +358,38 @@ export const TierPricingCards = ({
const badgePopularTier = PURCHASABLE_TIERS.length >= 2 ? highlightTier : null;

return (
<div
className={useWideLayout ? classes.groupWide : classes.group}
role="radiogroup"
>
{cards.map((card) => (
<TierCard
key={card.tier}
card={card}
layout={useWideLayout ? "wide" : "mobile"}
selected={value === card.tier}
highlighted={card.tier === highlightTier}
highlightTier={badgePopularTier}
highlightLabel={resolvedHighlightLabel}
comingSoon={isComingSoon(card.tier)}
onSelect={() => onChange(card.tier)}
/>
))}
</div>
<Stack gap={16}>
<div
className={useWideLayout ? classes.groupWide : classes.group}
role="radiogroup"
>
{cards.map((card) => (
<TierCard
key={card.tier}
card={card}
layout={useWideLayout ? "wide" : "mobile"}
selected={value === card.tier}
highlighted={card.tier === highlightTier}
highlightTier={badgePopularTier}
highlightLabel={resolvedHighlightLabel}
comingSoon={isComingSoon(card.tier)}
onSelect={() => onChange(card.tier)}
/>
))}
</div>
<Text size="xs" c="dimmed" ta="center">
<Trans>
Interested in innovator or guardian? Let us know via{" "}
<a
href="http://forms.dembrane.com/contact"
target="_blank"
rel="noopener noreferrer"
style={{ color: "inherit", textDecoration: "underline" }}
>
forms.dembrane.com/contact
</a>
</Trans>
</Text>
</Stack>
);
};
2 changes: 1 addition & 1 deletion echo/frontend/src/components/workspace/TierStatusBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const TierStatusBadge = ({

if (kind === "coming-soon") {
return (
<Badge variant="light" color="gray" size="xs">
<Badge variant="filled" color="graphite" size="xs">
<Trans>Coming soon</Trans>
</Badge>
);
Expand Down
15 changes: 14 additions & 1 deletion echo/frontend/src/components/workspace/tier-pricing-cards.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,15 @@
transform 0.15s ease;
}

.wrap:not(.selected):hover {
/* Content is muted via per-element colors (not opacity) so the coming-soon
badge can stay at full contrast — child opacity can't exceed the parent's. */
.comingSoonCard {
border-style: dashed;
background: var(--mantine-color-gray-0);
cursor: default;
}

.wrap:not(.selected):not(.comingSoonCard):hover {
border-color: var(--mantine-color-primary-4);
background: rgba(65, 105, 225, 0.02);
}
Expand All @@ -19,6 +27,11 @@
box-shadow: 0 0 0 1px var(--mantine-color-primary-6);
}

.comingSoonCard.selected {
border-color: var(--mantine-color-gray-4);
box-shadow: 0 0 0 1px var(--mantine-color-gray-4);
}

.highlighted {
border-color: rgba(65, 105, 225, 0.22);
box-shadow:
Expand Down
Loading