From b83dced3af86444b298b2885aa034f2c96ae23d8 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Tue, 26 May 2026 21:56:13 +0300
Subject: [PATCH] distill(SubscriptionCardActive): strip 3 decorative-only
 chromes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../dashboard/SubscriptionCardActive.tsx      | 38 +++----------------
 1 file changed, 5 insertions(+), 33 deletions(-)

diff --git a/src/components/dashboard/SubscriptionCardActive.tsx b/src/components/dashboard/SubscriptionCardActive.tsx
index cf2adeb..0f2ebbb 100644
--- a/src/components/dashboard/SubscriptionCardActive.tsx
+++ b/src/components/dashboard/SubscriptionCardActive.tsx
@@ -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"