mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user