etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-30 02:23:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: replace hardcoded green with theme-aware accent color

Browse Source 
Normal traffic zone now uses configurable accent palette instead of
hardcoded success/green. Added useTrafficZone hook that resolves
mainHex dynamically from theme colors. Replaced emerald/teal classes
with success palette in SuccessNotificationModal. Fixed hardcoded
green hex values in Subscription and SubscriptionPurchase pages.
This commit is contained in:
Fringg
2026-03-04 02:50:28 +03:00
parent f652936d78
commit a3ddddfa8c
8 changed files with 76 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,9 @@
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { Link } from 'react-router';
import type { Subscription } from '../../types';
import { useCurrency } from '../../hooks/useCurrency';
import { useTheme } from '../../hooks/useTheme';
import { getTrafficZone } from '../../utils/trafficZone';
import { useTrafficZone } from '../../hooks/useTrafficZone';
import { getGlassColors } from '../../utils/glassTheme';
interface StatsGridProps {
@@ -46,10 +45,7 @@ export default function StatsGrid({
const { isDark } = useTheme();
const g = getGlassColors(isDark);
const zone = useMemo(
() => getTrafficZone(subscription?.traffic_used_percent ?? 0),
[subscription?.traffic_used_percent],
);
const zone = useTrafficZone(subscription?.traffic_used_percent ?? 0);
const cards = [
{

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

@@ -1,4 +1,3 @@
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router';
import { Link } from 'react-router';
@@ -7,7 +6,7 @@ import TrafficProgressBar from './TrafficProgressBar';
import Sparkline from './Sparkline';
import { useAnimatedNumber } from '../../hooks/useAnimatedNumber';
import { useTheme } from '../../hooks/useTheme';
import { getTrafficZone } from '../../utils/trafficZone';
import { useTrafficZone } from '../../hooks/useTrafficZone';
import { formatTraffic } from '../../utils/formatTraffic';
import { getGlassColors } from '../../utils/glassTheme';
import { HoverBorderGradient } from '../ui/hover-border-gradient';
@@ -57,7 +56,7 @@ export default function SubscriptionCardActive({
const usedPercent = trafficData?.traffic_used_percent ?? subscription.traffic_used_percent;
const usedGb = trafficData?.traffic_used_gb ?? subscription.traffic_used_gb;
const isUnlimited = trafficData?.is_unlimited ?? subscription.traffic_limit_gb === 0;
const zone = useMemo(() => getTrafficZone(usedPercent), [usedPercent]);
const zone = useTrafficZone(usedPercent);
const animatedPercent = useAnimatedNumber(usedPercent);
const formattedDate = new Date(subscription.end_date).toLocaleDateString();

17
src/components/dashboard/TrafficProgressBar.tsx
View File

@@ -1,6 +1,6 @@
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { getTrafficZone } from '../../utils/trafficZone';
import { useTrafficZone } from '../../hooks/useTrafficZone';
import { formatTraffic } from '../../utils/formatTraffic';
import { useTheme } from '../../hooks/useTheme';
import { getGlassColors } from '../../utils/glassTheme';
@@ -25,17 +25,20 @@ export default function TrafficProgressBar({
const { t } = useTranslation();
const { isDark } = useTheme();
const g = getGlassColors(isDark);
const zone = useMemo(() => getTrafficZone(percent), [percent]);
const zone = useTrafficZone(percent);
// Gradient always starts from the accent color (normal zone)
const startHex = zone.colors.accent || '#3b82f6';
const clampedPercent = Math.min(percent, 100);
const barHeight = compact ? 8 : 14;
// Multi-segment gradient matching prototype
const fillGradient = useMemo(() => {
if (percent < 50) return `linear-gradient(90deg, #00C987, ${zone.mainHex})`;
if (percent < 75) return `linear-gradient(90deg, #00C987, #FFB800, ${zone.mainHex})`;
if (percent < 90) return `linear-gradient(90deg, #00C987, #FFB800, #FF6B35, ${zone.mainHex})`;
return 'linear-gradient(90deg, #00C987, #FFB800, #FF6B35, #FF3B5C)';
}, [percent, zone.mainHex]);
if (percent < 50) return `linear-gradient(90deg, ${startHex}, ${zone.mainHex})`;
if (percent < 75) return `linear-gradient(90deg, ${startHex}, #FFB800, ${zone.mainHex})`;
if (percent < 90)
return `linear-gradient(90deg, ${startHex}, #FFB800, #FF6B35, ${zone.mainHex})`;
return `linear-gradient(90deg, ${startHex}, #FFB800, #FF6B35, #FF3B5C)`;
}, [percent, zone.mainHex, startHex]);
if (isUnlimited) {
return (