From 4cdff9730b3c70d88c1b32f00561b16673a2d55a Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sat, 28 Feb 2026 06:37:40 +0300
Subject: [PATCH] fix: improve light theme visibility for dashboard and
 subscription cards

- Increase card opacity and shadow contrast in glassTheme for light mode
- Add accent-tinted borders and shadows to subscription cards (active, expired, trial)
- Fix grid patterns to use dark lines instead of white in light mode
- Fix trial CTA button: solid green with dark text instead of invisible transparent
- Fix trial icon background: light accent gradient instead of hardcoded dark
- Add + prefix to referral earnings in StatsGrid
---
 src/components/dashboard/StatsGrid.tsx        |  2 +-
 .../dashboard/SubscriptionCardActive.tsx      |  6 +-
 .../dashboard/SubscriptionCardExpired.tsx     | 16 ++++--
 src/components/dashboard/TrialOfferCard.tsx   | 55 ++++++++++++++-----
 src/pages/Subscription.tsx                    |  8 ++-
 src/utils/glassTheme.ts                       |  6 +-
 6 files changed, 65 insertions(+), 28 deletions(-)

diff --git a/src/components/dashboard/StatsGrid.tsx b/src/components/dashboard/StatsGrid.tsx
index 8c3ebbb..6ac21c7 100644
--- a/src/components/dashboard/StatsGrid.tsx
+++ b/src/components/dashboard/StatsGrid.tsx
@@ -83,7 +83,7 @@ export default function StatsGrid({
       label: t('dashboard.stats.referrals'),
       value: `${referralCount}`,
       valueColor: g.text,
-      subtitle: `${formatAmount(earningsRubles)} ${currencySymbol}`,
+      subtitle: `+${formatAmount(earningsRubles)} ${currencySymbol}`,
       subtitleColor: zone.mainHex,
       to: '/referral',
       icon: (color: string) => (
diff --git a/src/components/dashboard/SubscriptionCardActive.tsx b/src/components/dashboard/SubscriptionCardActive.tsx
index df934d7..76ba2a7 100644
--- a/src/components/dashboard/SubscriptionCardActive.tsx
+++ b/src/components/dashboard/SubscriptionCardActive.tsx
@@ -73,9 +73,11 @@ export default function SubscriptionCardActive({
         background: g.cardBg,
         border: subscription.is_trial
           ? '1px solid rgba(62,219,176,0.15)'
-          : `1px solid ${g.cardBorder}`,
+          : isDark
+            ? `1px solid ${g.cardBorder}`
+            : `1px solid ${zone.mainHex}25`,
         padding: '28px 28px 24px',
-        boxShadow: g.shadow,
+        boxShadow: isDark ? g.shadow : `0 2px 16px ${zone.mainHex}12, 0 0 0 1px ${zone.mainHex}08`,
       }}
     >
       {/* Trial shimmer border */}
diff --git a/src/components/dashboard/SubscriptionCardExpired.tsx b/src/components/dashboard/SubscriptionCardExpired.tsx
index dce57ef..38ef1a1 100644
--- a/src/components/dashboard/SubscriptionCardExpired.tsx
+++ b/src/components/dashboard/SubscriptionCardExpired.tsx
@@ -20,8 +20,10 @@ export default function SubscriptionCardExpired({ subscription }: SubscriptionCa
       className="relative overflow-hidden rounded-3xl"
       style={{
         background: g.cardBg,
-        border: '1px solid rgba(255,70,70,0.12)',
-        boxShadow: g.shadow,
+        border: isDark ? '1px solid rgba(255,70,70,0.12)' : '1px solid rgba(255,59,92,0.2)',
+        boxShadow: isDark
+          ? g.shadow
+          : '0 2px 16px rgba(255,59,92,0.1), 0 0 0 1px rgba(255,59,92,0.06)',
         padding: '28px 28px 24px',
       }}
     >
@@ -40,10 +42,14 @@ export default function SubscriptionCardExpired({ subscription }: SubscriptionCa
       />
       {/* Grid pattern */}
       <div
-        className="pointer-events-none absolute inset-0 opacity-[0.02]"
+        className="pointer-events-none absolute inset-0"
         style={{
-          backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
-                            linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
+          opacity: isDark ? 0.02 : 0.04,
+          backgroundImage: isDark
+            ? `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
+               linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`
+            : `linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
+               linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px)`,
           backgroundSize: '40px 40px',
         }}
         aria-hidden="true"
diff --git a/src/components/dashboard/TrialOfferCard.tsx b/src/components/dashboard/TrialOfferCard.tsx
index 145c787..3ffe9d5 100644
--- a/src/components/dashboard/TrialOfferCard.tsx
+++ b/src/components/dashboard/TrialOfferCard.tsx
@@ -33,8 +33,16 @@ export default function TrialOfferCard({
       className="relative overflow-hidden rounded-3xl text-center"
       style={{
         background: g.cardBg,
-        border: `1px solid ${g.cardBorder}`,
-        boxShadow: g.shadow,
+        border: isDark
+          ? `1px solid ${g.cardBorder}`
+          : isFree
+            ? '1px solid rgba(62,219,176,0.2)'
+            : '1px solid rgba(255,184,0,0.2)',
+        boxShadow: isDark
+          ? g.shadow
+          : isFree
+            ? '0 2px 16px rgba(62,219,176,0.12), 0 0 0 1px rgba(62,219,176,0.06)'
+            : '0 2px 16px rgba(255,184,0,0.12), 0 0 0 1px rgba(255,184,0,0.06)',
         padding: '32px 28px 28px',
       }}
     >
@@ -55,10 +63,14 @@ export default function TrialOfferCard({
       />
       {/* Grid pattern */}
       <div
-        className="pointer-events-none absolute inset-0 opacity-[0.025]"
+        className="pointer-events-none absolute inset-0"
         style={{
-          backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
-                            linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
+          opacity: isDark ? 0.025 : 0.04,
+          backgroundImage: isDark
+            ? `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
+               linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`
+            : `linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
+               linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px)`,
           backgroundSize: '40px 40px',
         }}
         aria-hidden="true"
@@ -68,10 +80,14 @@ export default function TrialOfferCard({
       <div
         className="relative mx-auto mb-5 flex h-14 w-14 items-center justify-center rounded-2xl"
         style={{
-          background: isFree
-            ? 'linear-gradient(135deg, #1a3a30, #142824)'
-            : 'linear-gradient(135deg, #3a3020, #282418)',
-          border: isFree ? '1px solid rgba(62,219,176,0.2)' : '1px solid rgba(255,184,0,0.2)',
+          background: isDark
+            ? isFree
+              ? 'linear-gradient(135deg, #1a3a30, #142824)'
+              : 'linear-gradient(135deg, #3a3020, #282418)'
+            : isFree
+              ? 'linear-gradient(135deg, rgba(62,219,176,0.15), rgba(62,219,176,0.08))'
+              : 'linear-gradient(135deg, rgba(255,184,0,0.15), rgba(255,184,0,0.08))',
+          border: isFree ? '1px solid rgba(62,219,176,0.25)' : '1px solid rgba(255,184,0,0.25)',
           transition: 'all 0.5s ease',
         }}
       >
@@ -229,12 +245,21 @@ export default function TrialOfferCard({
         <button
           onClick={() => !activateTrialMutation.isPending && activateTrialMutation.mutate()}
           disabled={activateTrialMutation.isPending}
-          className="w-full rounded-[14px] py-4 text-base font-bold tracking-tight text-white transition-all duration-300 disabled:opacity-50"
-          style={{
-            background:
-              'linear-gradient(135deg, rgba(62,219,176,0.12) 0%, rgba(62,219,176,0.04) 100%)',
-            border: '1px solid rgba(62,219,176,0.25)',
-          }}
+          className="w-full rounded-[14px] py-4 text-base font-bold tracking-tight transition-all duration-300 disabled:opacity-50"
+          style={
+            isDark
+              ? {
+                  background:
+                    'linear-gradient(135deg, rgba(62,219,176,0.12) 0%, rgba(62,219,176,0.04) 100%)',
+                  border: '1px solid rgba(62,219,176,0.25)',
+                  color: '#fff',
+                }
+              : {
+                  background: 'linear-gradient(135deg, #3EDBB0, #2BC49A)',
+                  color: '#0a2a1e',
+                  boxShadow: '0 4px 20px rgba(62,219,176,0.25)',
+                }
+          }
         >
           {activateTrialMutation.isPending ? t('common.loading') : t('subscription.trial.activate')}
         </button>
diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index 633d7af..81ee39a 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -447,8 +447,12 @@ export default function Subscription() {
                 background: g.cardBg,
                 border: subscription.is_trial
                   ? '1px solid rgba(62,219,176,0.15)'
-                  : `1px solid ${g.cardBorder}`,
-                boxShadow: g.shadow,
+                  : isDark
+                    ? `1px solid ${g.cardBorder}`
+                    : `1px solid ${zone.mainHex}25`,
+                boxShadow: isDark
+                  ? g.shadow
+                  : `0 2px 16px ${zone.mainHex}12, 0 0 0 1px ${zone.mainHex}08`,
                 padding: '28px 28px 24px',
               }}
             >
diff --git a/src/utils/glassTheme.ts b/src/utils/glassTheme.ts
index 2739180..cf73ce5 100644
--- a/src/utils/glassTheme.ts
+++ b/src/utils/glassTheme.ts
@@ -8,8 +8,8 @@ export function getGlassColors(isDark: boolean) {
     // Card container
     cardBg: isDark
       ? 'linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%)'
-      : 'linear-gradient(145deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.6) 100%)',
-    cardBorder: isDark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.08)',
+      : 'linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.88) 100%)',
+    cardBorder: isDark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.1)',
 
     // Inner sections (cards within cards)
     innerBg: isDark ? 'rgba(255,255,255,0.03)' : 'rgba(0,0,0,0.03)',
@@ -38,6 +38,6 @@ export function getGlassColors(isDark: boolean) {
     glowAlpha: isDark ? '15' : '08',
 
     // Shadows for light mode depth
-    shadow: isDark ? 'none' : '0 2px 12px rgba(0,0,0,0.06)',
+    shadow: isDark ? 'none' : '0 2px 16px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03)',
   };
 }