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

12
src/components/SuccessNotificationModal.tsx
View File

@@ -159,13 +159,13 @@ export default function SuccessNotificationModal() {
let title = data.title;
const message = data.message;
let icon = <CheckCircleIcon />;
let gradientClass = 'from-success-500 to-emerald-600';
let gradientClass = 'from-success-500 to-success-600';
if (!title) {
if (isBalanceTopup) {
title = t('successNotification.balanceTopup.title', 'Balance topped up!');
icon = <WalletIcon />;
gradientClass = 'from-success-500 to-emerald-600';
gradientClass = 'from-success-500 to-success-600';
} else if (data.type === 'subscription_activated') {
title = t('successNotification.subscriptionActivated.title', 'Subscription activated!');
icon = <RocketIcon />;
@@ -185,7 +185,7 @@ export default function SuccessNotificationModal() {
} else if (data.type === 'traffic_purchased') {
title = t('successNotification.trafficPurchased.title', 'Traffic added!');
icon = <TrafficIcon />;
gradientClass = 'from-emerald-500 to-teal-600';
gradientClass = 'from-success-500 to-success-600';
}
}
@@ -273,7 +273,7 @@ export default function SuccessNotificationModal() {
<span className="text-dark-400">
{t('successNotification.trafficAdded', 'Traffic added')}
</span>
<span className="text-lg font-bold text-emerald-400">+{data.trafficGbAdded} GB</span>
<span className="text-lg font-bold text-success-400">+{data.trafficGbAdded} GB</span>
</div>
)}
@@ -329,7 +329,7 @@ export default function SuccessNotificationModal() {
{isBalanceTopup && (
<button
onClick={handleGoToBalance}
className="flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-success-500 to-emerald-600 py-3.5 font-bold text-white shadow-lg shadow-success-500/25 transition-all hover:from-success-400 hover:to-emerald-500 active:from-success-600 active:to-emerald-700"
className="flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-success-500 to-success-600 py-3.5 font-bold text-white shadow-lg shadow-success-500/25 transition-all hover:from-success-400 hover:to-success-500 active:from-success-600 active:to-success-700"
>
<WalletIcon />
<span>{t('successNotification.goToBalance', 'Go to Balance')}</span>
@@ -349,7 +349,7 @@ export default function SuccessNotificationModal() {
{isTrafficPurchased && (
<button
onClick={handleGoToSubscription}
className="flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-emerald-500 to-teal-600 py-3.5 font-bold text-white shadow-lg shadow-emerald-500/25 transition-all hover:from-emerald-400 hover:to-teal-500 active:from-emerald-600 active:to-teal-700"
className="flex w-full items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-success-500 to-success-600 py-3.5 font-bold text-white shadow-lg shadow-success-500/25 transition-all hover:from-success-400 hover:to-success-500 active:from-success-600 active:to-success-700"
>
<TrafficIcon />
<span>{t('successNotification.goToSubscription', 'Go to Subscription')}</span>

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 (

27
src/hooks/useTrafficZone.ts Normal file
View File

@@ -0,0 +1,27 @@
import { useMemo } from 'react';
import { getTrafficZone, TrafficColorKey } from '../utils/trafficZone';
import { useThemeColors } from './useThemeColors';
import type { ThemeColors } from '../types/theme';
const FALLBACKS: Record<TrafficColorKey, string> = {
accent: '#3b82f6',
warning: '#FFB800',
error: '#FF3B5C',
};
const COLOR_MAP: Record<TrafficColorKey, keyof ThemeColors> = {
accent: 'accent',
warning: 'warning',
error: 'error',
};
export function useTrafficZone(percent: number) {
const { colors } = useThemeColors();
const zone = useMemo(() => getTrafficZone(percent), [percent]);
const mainHex = useMemo(() => {
const key = zone.colorKey;
return colors[COLOR_MAP[key]] || FALLBACKS[key];
}, [zone.colorKey, colors]);
return { ...zone, mainHex, colors };
}

23
src/pages/Subscription.tsx
View File

@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router';
import { subscriptionApi } from '../api/subscription';
import TrafficProgressBar from '../components/dashboard/TrafficProgressBar';
import { HoverBorderGradient } from '../components/ui/hover-border-gradient';
import { getTrafficZone } from '../utils/trafficZone';
import { useTrafficZone } from '../hooks/useTrafficZone';
import { formatTraffic } from '../utils/formatTraffic';
import { getGlassColors } from '../utils/glassTheme';
import { useTheme } from '../hooks/useTheme';
@@ -203,6 +203,10 @@ export default function Subscription() {
// Extract subscription from response (null if no subscription)
const subscription = subscriptionResponse?.subscription ?? null;
// Traffic zone (theme-aware) — called unconditionally at top level
const usedPercent = trafficData?.traffic_used_percent ?? subscription?.traffic_used_percent ?? 0;
const zone = useTrafficZone(usedPercent);
// Purchase options (needed for balance_kopeks in device/traffic/server management)
const { data: purchaseOptions } = useQuery({
queryKey: ['purchase-options'],
@@ -432,12 +436,9 @@ export default function Subscription() {
{/* Current Subscription */}
{subscription ? (
(() => {
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 ?? false) || subscription.traffic_limit_gb === 0;
const zone = getTrafficZone(usedPercent);
const connectedDevices = devicesData?.total ?? 0;
return (
@@ -1089,7 +1090,8 @@ export default function Subscription() {
className="absolute inset-0 rounded-full transition-[width] duration-500"
style={{
width: `${progress}%`,
background: 'linear-gradient(90deg, #00E5A0, #00C987)',
background:
'linear-gradient(90deg, rgb(var(--color-accent-500)), rgb(var(--color-accent-400)))',
}}
/>
</div>
@@ -1244,14 +1246,14 @@ export default function Subscription() {
{/* Discount badge */}
{devicePriceData.discount_percent && devicePriceData.discount_percent > 0 && (
<div className="mb-2">
<span className="inline-block rounded-full bg-green-500/20 px-2.5 py-0.5 text-sm font-medium text-green-400">
<span className="inline-block rounded-full bg-success-500/20 px-2.5 py-0.5 text-sm font-medium text-success-400">
-{devicePriceData.discount_percent}%
</span>
</div>
)}
{/* Total price - show as free if 100% discount or 0 */}
{devicePriceData.total_price_kopeks === 0 ? (
<div className="text-2xl font-bold text-green-400">
<div className="text-2xl font-bold text-success-400">
{t('subscription.switchTariff.free')}
</div>
) : (
@@ -1570,7 +1572,7 @@ export default function Subscription() {
{/* Discount badge */}
{pkg.discount_percent && pkg.discount_percent > 0 && (
<div className="mb-1">
<span className="inline-block rounded-full bg-green-500/20 px-2 py-0.5 text-xs font-medium text-green-400">
<span className="inline-block rounded-full bg-success-500/20 px-2 py-0.5 text-xs font-medium text-success-400">
-{pkg.discount_percent}%
</span>
</div>
@@ -1971,7 +1973,10 @@ export default function Subscription() {
<div className="flex items-center justify-center py-8">
<div
className="h-8 w-8 animate-spin rounded-full border-2 border-t-transparent"
style={{ borderColor: '#00E5A0', borderTopColor: 'transparent' }}
style={{
borderColor: 'rgb(var(--color-accent-500))',
borderTopColor: 'transparent',
}}
/>
</div>
) : devicesData && devicesData.devices.length > 0 ? (

4
src/pages/SubscriptionPurchase.tsx
View File

@@ -577,7 +577,7 @@ export default function SubscriptionPurchase() {
{t('subscription.switchTariff.upgradeCost')}
</span>
{switchPreview.discount_percent && switchPreview.discount_percent > 0 && (
<span className="ml-2 inline-block rounded-full bg-green-500/20 px-2 py-0.5 text-xs font-medium text-green-400">
<span className="ml-2 inline-block rounded-full bg-success-500/20 px-2 py-0.5 text-xs font-medium text-success-400">
-{switchPreview.discount_percent}%
</span>
)}
@@ -592,7 +592,7 @@ export default function SubscriptionPurchase() {
</span>
)}
<span
className={`text-lg font-bold ${switchPreview.upgrade_cost_kopeks === 0 ? 'text-green-400' : 'text-accent-400'}`}
className={`text-lg font-bold ${switchPreview.upgrade_cost_kopeks === 0 ? 'text-success-400' : 'text-accent-400'}`}
>
{switchPreview.upgrade_cost_kopeks > 0
? switchPreview.upgrade_cost_label

24
src/utils/trafficZone.ts
View File

@@ -1,5 +1,7 @@
export type TrafficZone = 'normal' | 'warning' | 'danger' | 'critical';
export type TrafficColorKey = 'accent' | 'warning' | 'error';
interface TrafficZoneResult {
zone: TrafficZone;
textClass: string;
@@ -8,19 +10,19 @@ interface TrafficZoneResult {
labelKey: string;
gradientFrom: string;
gradientTo: string;
/** Hex color for inline styles */
mainHex: string;
/** Key into ThemeColors for resolving mainHex at runtime */
colorKey: TrafficColorKey;
}
const ZONES: Record<TrafficZone, Omit<TrafficZoneResult, 'zone'>> = {
normal: {
textClass: 'text-success-400',
dotClass: 'bg-success-400',
glowColor: 'rgba(var(--color-success-500), 0.5)',
textClass: 'text-accent-400',
dotClass: 'bg-accent-400',
glowColor: 'rgba(var(--color-accent-500), 0.5)',
labelKey: 'dashboard.zone.normal',
gradientFrom: 'rgb(var(--color-success-500))',
gradientTo: 'rgb(var(--color-success-400))',
mainHex: '#00E5A0',
gradientFrom: 'rgb(var(--color-accent-500))',
gradientTo: 'rgb(var(--color-accent-400))',
colorKey: 'accent',
},
warning: {
textClass: 'text-warning-400',
@@ -29,7 +31,7 @@ const ZONES: Record<TrafficZone, Omit<TrafficZoneResult, 'zone'>> = {
labelKey: 'dashboard.zone.warning',
gradientFrom: 'rgb(var(--color-warning-500))',
gradientTo: 'rgb(var(--color-warning-400))',
mainHex: '#FFB800',
colorKey: 'warning',
},
danger: {
textClass: 'text-warning-300',
@@ -38,7 +40,7 @@ const ZONES: Record<TrafficZone, Omit<TrafficZoneResult, 'zone'>> = {
labelKey: 'dashboard.zone.danger',
gradientFrom: 'rgb(var(--color-warning-600))',
gradientTo: 'rgb(var(--color-warning-400))',
mainHex: '#FF6B35',
colorKey: 'warning',
},
critical: {
textClass: 'text-error-400',
@@ -47,7 +49,7 @@ const ZONES: Record<TrafficZone, Omit<TrafficZoneResult, 'zone'>> = {
labelKey: 'dashboard.zone.critical',
gradientFrom: 'rgb(var(--color-error-500))',
gradientTo: 'rgb(var(--color-error-400))',
mainHex: '#FF3B5C',
colorKey: 'error',
},
};