From a3ddddfa8ce167c22177fde3b131083c710ea619 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Wed, 4 Mar 2026 02:50:28 +0300
Subject: [PATCH 1/2] fix: replace hardcoded green with theme-aware accent
 color

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.
---
 src/components/SuccessNotificationModal.tsx   | 12 ++++-----
 src/components/dashboard/StatsGrid.tsx        |  8 ++----
 .../dashboard/SubscriptionCardActive.tsx      |  5 ++--
 .../dashboard/TrafficProgressBar.tsx          | 17 +++++++-----
 src/hooks/useTrafficZone.ts                   | 27 +++++++++++++++++++
 src/pages/Subscription.tsx                    | 23 +++++++++-------
 src/pages/SubscriptionPurchase.tsx            |  4 +--
 src/utils/trafficZone.ts                      | 24 +++++++++--------
 8 files changed, 76 insertions(+), 44 deletions(-)
 create mode 100644 src/hooks/useTrafficZone.ts

diff --git a/src/components/SuccessNotificationModal.tsx b/src/components/SuccessNotificationModal.tsx
index de87f6c..9682579 100644
--- a/src/components/SuccessNotificationModal.tsx
+++ b/src/components/SuccessNotificationModal.tsx
@@ -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>
diff --git a/src/components/dashboard/StatsGrid.tsx b/src/components/dashboard/StatsGrid.tsx
index 6ac21c7..735d581 100644
--- a/src/components/dashboard/StatsGrid.tsx
+++ b/src/components/dashboard/StatsGrid.tsx
@@ -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 = [
     {
diff --git a/src/components/dashboard/SubscriptionCardActive.tsx b/src/components/dashboard/SubscriptionCardActive.tsx
index 76ba2a7..154a4e5 100644
--- a/src/components/dashboard/SubscriptionCardActive.tsx
+++ b/src/components/dashboard/SubscriptionCardActive.tsx
@@ -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();
diff --git a/src/components/dashboard/TrafficProgressBar.tsx b/src/components/dashboard/TrafficProgressBar.tsx
index 8ae1d58..51490dd 100644
--- a/src/components/dashboard/TrafficProgressBar.tsx
+++ b/src/components/dashboard/TrafficProgressBar.tsx
@@ -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 (
diff --git a/src/hooks/useTrafficZone.ts b/src/hooks/useTrafficZone.ts
new file mode 100644
index 0000000..b5eb137
--- /dev/null
+++ b/src/hooks/useTrafficZone.ts
@@ -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 };
+}
diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index 2bbfabd..330b62e 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -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 ? (
diff --git a/src/pages/SubscriptionPurchase.tsx b/src/pages/SubscriptionPurchase.tsx
index 9e91891..e5c96ab 100644
--- a/src/pages/SubscriptionPurchase.tsx
+++ b/src/pages/SubscriptionPurchase.tsx
@@ -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
diff --git a/src/utils/trafficZone.ts b/src/utils/trafficZone.ts
index d1855d6..f2c9b2d 100644
--- a/src/utils/trafficZone.ts
+++ b/src/utils/trafficZone.ts
@@ -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',
   },
 };
 

From 8157ca5f0280dbcbf99eda210cd83130ec77c0b1 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Wed, 4 Mar 2026 04:49:40 +0300
Subject: [PATCH 2/2] fix: ordered list numbering in Info page shows correct
 sequence

Each numbered rule (1, 2, 3...) was rendered as separate <ol> elements
all starting from 1. Added start attribute to preserve original numbering
and allowed it through DOMPurify sanitization.
---
 src/pages/Info.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/pages/Info.tsx b/src/pages/Info.tsx
index b6717fd..24b73b5 100644
--- a/src/pages/Info.tsx
+++ b/src/pages/Info.tsx
@@ -100,7 +100,7 @@ const sanitizeHtml = (html: string): string => {
       'div',
       'tg-spoiler',
     ],
-    ALLOWED_ATTR: ['href', 'target', 'rel', 'class'],
+    ALLOWED_ATTR: ['href', 'target', 'rel', 'class', 'start'],
     ALLOW_DATA_ATTR: false,
   });
 };
@@ -135,12 +135,13 @@ const formatContent = (content: string): string => {
       if (/^[-•]\s/.test(trimmed) || /^\d+[.)]\s/.test(trimmed)) {
         const lines = trimmed.split('\n');
         const isOrdered = /^\d+[.)]\s/.test(lines[0]);
+        const startNum = isOrdered ? parseInt(lines[0].match(/^(\d+)/)?.[1] || '1', 10) : 1;
         const listItems = lines
           .map((line) => line.replace(/^[-•]\s*/, '').replace(/^\d+[.)]\s*/, ''))
           .filter((line) => line.trim())
           .map((line) => `<li>${line}</li>`)
           .join('');
-        return isOrdered ? `<ol>${listItems}</ol>` : `<ul>${listItems}</ul>`;
+        return isOrdered ? `<ol start="${startNum}">${listItems}</ol>` : `<ul>${listItems}</ul>`;
       }
 
       // Regular paragraph — single newlines become <br/>