etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve light theme visibility for dashboard and subscription cards

Browse Source 
- 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
This commit is contained in:
Fringg
2026-02-28 06:37:40 +03:00
parent 4a68347ae8
commit 4cdff9730b
6 changed files with 65 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/dashboard/StatsGrid.tsx
View File

@@ -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) => (

6
src/components/dashboard/SubscriptionCardActive.tsx
View File

@@ -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 */}

16
src/components/dashboard/SubscriptionCardExpired.tsx
View File

@@ -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"

55
src/components/dashboard/TrialOfferCard.tsx
View File

@@ -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>

8
src/pages/Subscription.tsx
View File

@@ -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',
}}
>

6
src/utils/glassTheme.ts
View File

@@ -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)',
};
}