distill(SubscriptionCardActive): strip 3 decorative-only chromes

Critique flagged the card as carrying '12 chrome elements for 2 facts'.
Removing 8 of 12 without browser QA risks gutting functional info.
Apply the conservative 3-element strip: only kill chromes with zero
information value.

  • Background radial glow (200x200 circle, top-right, decorative tint
    based on traffic zone) — pure ornament, no signal.
  • Trial shimmer border (animate-trial-glow on inset wrapper) — trial
    state is already signalled by the badge in the header; the second
    signal was visual noise.
  • Trial badge own animate-trial-glow + 2-stop gradient bg — flatten
    to single bg-accent-400/10 + border-accent-400/25 + solid text.
    The badge still says TRIAL with brand color; it no longer pulses.
  • Zone dot 8px-radius color-tinted boxShadow + 'transition: all' —
    drop the glow, transition only background. Reduces filter+composite
    work, dot still signals zone via color.

Kept (functional):
  • Big percentage + traffic-used metadata (primary info, not chrome)
  • Progress bar (primary signal)
  • Connect Device CTA with HoverBorderGradient (primary action;
    rotating border is its own UX debate, deferred)
  • Sparkline + connected devices count (functional metadata)

Full 12→4 collapse the critique recommended needs browser QA and a
design-direction call (move days/tariff/refresh to the detail page
header). Bigger restructure as separate PR.
This commit is contained in:
c0mrade
2026-05-26 21:56:13 +03:00
parent f75b243f03
commit b83dced3af

View File

@@ -86,28 +86,9 @@ export default function SubscriptionCardActive({
: `0 2px 16px rgba(${zone.mainVarRaw}, 0.07), 0 0 0 1px rgba(${zone.mainVarRaw}, 0.03)`,
}}
>
{/* Trial shimmer border */}
{subscription.is_trial && (
<div
className="pointer-events-none absolute inset-[-1px] animate-trial-glow rounded-3xl"
aria-hidden="true"
/>
)}
{/* Background glow */}
<div
className="pointer-events-none absolute"
style={{
top: -60,
right: -60,
width: 200,
height: 200,
borderRadius: '50%',
background: `radial-gradient(circle, rgba(${zone.mainVarRaw}, ${isDark ? 0.08 : 0.03}) 0%, transparent 70%)`,
transition: 'background 0.8s ease',
}}
aria-hidden="true"
/>
{/* Decorative trial-shimmer border + ambient background glow removed.
Trial state is conveyed by the badge in the header; ambient glow
carried no information and ate visual attention. */}
{/* ─── Header ─── */}
<div className="mb-7 flex items-start justify-between">
@@ -118,8 +99,7 @@ export default function SubscriptionCardActive({
className="h-2 w-2 rounded-full"
style={{
background: zone.mainVar,
boxShadow: `0 0 8px rgba(${zone.mainVarRaw}, 0.5)`,
transition: 'all 0.6s ease',
transition: 'background 0.6s ease',
}}
aria-hidden="true"
/>
@@ -130,15 +110,7 @@ export default function SubscriptionCardActive({
{isUnlimited ? t('dashboard.unlimited') : t(zone.labelKey)}
</span>
{subscription.is_trial && (
<span
className="inline-flex animate-trial-glow items-center gap-1 rounded-md px-2 py-0.5 font-mono text-[9px] font-bold uppercase tracking-widest"
style={{
background:
'linear-gradient(135deg, rgba(var(--color-accent-400), 0.15), rgba(var(--color-accent-400), 0.06))',
border: '1px solid rgba(var(--color-accent-400), 0.2)',
color: 'rgb(var(--color-accent-400))',
}}
>
<span className="inline-flex items-center gap-1 rounded-md border border-accent-400/25 bg-accent-400/10 px-2 py-0.5 font-mono text-[9px] font-bold uppercase tracking-widest text-accent-400">
<svg
width="10"
height="10"