From 430b703bbea7c923a54824b3a814d59f61065831 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sun, 1 Mar 2026 19:29:27 +0300
Subject: [PATCH] fix: improve light theme visibility for inner panels on
 subscription page

Replace hardcoded dark-800/50 backgrounds and dark-700/50 borders with
isDark-conditional classes using champagne palette for light mode:
- Collapsed accordion buttons (4x)
- Expanded panels (4x)
- Traffic/server selector unselected state (2x)
- Info/warning boxes (2x)
- Section divider (1x)
---
 src/pages/Subscription.tsx | 44 +++++++++++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/pages/Subscription.tsx b/src/pages/Subscription.tsx
index 81ee39a..2bbfabd 100644
--- a/src/pages/Subscription.tsx
+++ b/src/pages/Subscription.tsx
@@ -1128,7 +1128,7 @@ export default function Subscription() {
           {!showDeviceTopup ? (
             <button
               onClick={() => setShowDeviceTopup(true)}
-              className="w-full rounded-xl border border-dark-700/50 bg-dark-800/50 p-4 text-left transition-colors hover:border-dark-600"
+              className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
             >
               <div className="flex items-center justify-between">
                 <div>
@@ -1153,7 +1153,9 @@ export default function Subscription() {
               </div>
             </button>
           ) : (
-            <div className="rounded-xl border border-dark-700/50 bg-dark-800/50 p-5">
+            <div
+              className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
+            >
               <div className="mb-4 flex items-center justify-between">
                 <h3 className="font-medium text-dark-100">{t('subscription.buyDevices')}</h3>
                 <button
@@ -1320,7 +1322,7 @@ export default function Subscription() {
             {!showDeviceReduction ? (
               <button
                 onClick={() => setShowDeviceReduction(true)}
-                className="w-full rounded-xl border border-dark-700/50 bg-dark-800/50 p-4 text-left transition-colors hover:border-dark-600"
+                className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
               >
                 <div className="flex items-center justify-between">
                   <div>
@@ -1343,7 +1345,9 @@ export default function Subscription() {
                 </div>
               </button>
             ) : (
-              <div className="rounded-xl border border-dark-700/50 bg-dark-800/50 p-5">
+              <div
+                className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
+              >
                 <div className="mb-4 flex items-center justify-between">
                   <h3 className="font-medium text-dark-100">
                     {t('subscription.additionalOptions.reduceDevicesTitle')}
@@ -1489,7 +1493,7 @@ export default function Subscription() {
               {!showTrafficTopup ? (
                 <button
                   onClick={() => setShowTrafficTopup(true)}
-                  className="w-full rounded-xl border border-dark-700/50 bg-dark-800/50 p-4 text-left transition-colors hover:border-dark-600"
+                  className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
                 >
                   <div className="flex items-center justify-between">
                     <div>
@@ -1515,7 +1519,9 @@ export default function Subscription() {
                   </div>
                 </button>
               ) : (
-                <div className="rounded-xl border border-dark-700/50 bg-dark-800/50 p-5">
+                <div
+                  className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
+                >
                   <div className="mb-4 flex items-center justify-between">
                     <h3 className="font-medium text-dark-100">
                       {t('subscription.additionalOptions.buyTrafficTitle')}
@@ -1531,7 +1537,9 @@ export default function Subscription() {
                     </button>
                   </div>
 
-                  <div className="mb-4 rounded-lg bg-dark-700/30 p-2 text-xs text-dark-500">
+                  <div
+                    className={`mb-4 rounded-lg p-2 text-xs ${isDark ? 'bg-dark-700/30 text-dark-500' : 'bg-champagne-300/40 text-champagne-600'}`}
+                  >
                     ⚠️ {t('subscription.additionalOptions.trafficWarning')}
                   </div>
 
@@ -1549,7 +1557,9 @@ export default function Subscription() {
                             className={`rounded-xl border p-4 text-center transition-all ${
                               selectedTrafficPackage === pkg.gb
                                 ? 'border-accent-500 bg-accent-500/10'
-                                : 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
+                                : isDark
+                                  ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
+                                  : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'
                             }`}
                           >
                             <div className="text-lg font-semibold text-dark-100">
@@ -1651,7 +1661,7 @@ export default function Subscription() {
               {!showServerManagement ? (
                 <button
                   onClick={() => setShowServerManagement(true)}
-                  className="w-full rounded-xl border border-dark-700/50 bg-dark-800/50 p-4 text-left transition-colors hover:border-dark-600"
+                  className={`w-full rounded-xl border p-4 text-left transition-colors ${isDark ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600' : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'}`}
                 >
                   <div className="flex items-center justify-between">
                     <div>
@@ -1674,7 +1684,9 @@ export default function Subscription() {
                   </div>
                 </button>
               ) : (
-                <div className="rounded-xl border border-dark-700/50 bg-dark-800/50 p-5">
+                <div
+                  className={`rounded-xl border p-5 ${isDark ? 'border-dark-700/50 bg-dark-800/50' : 'border-champagne-300/60 bg-champagne-200/40'}`}
+                >
                   <div className="mb-4 flex items-center justify-between">
                     <h3 className="font-medium text-dark-100">
                       {t('subscription.additionalOptions.manageServersTitle')}
@@ -1696,7 +1708,9 @@ export default function Subscription() {
                     </div>
                   ) : countriesData && countriesData.countries.length > 0 ? (
                     <div className="space-y-4">
-                      <div className="rounded-lg bg-dark-700/30 p-2 text-xs text-dark-500">
+                      <div
+                        className={`rounded-lg p-2 text-xs ${isDark ? 'bg-dark-700/30 text-dark-500' : 'bg-champagne-300/40 text-champagne-600'}`}
+                      >
                         {t('subscription.serverManagement.statusLegend')}
                       </div>
 
@@ -1738,7 +1752,9 @@ export default function Subscription() {
                                       : 'border-accent-500 bg-accent-500/10'
                                     : willBeRemoved
                                       ? 'border-error-500/50 bg-error-500/5'
-                                      : 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
+                                      : isDark
+                                        ? 'border-dark-700/50 bg-dark-800/50 hover:border-dark-600'
+                                        : 'border-champagne-300/60 bg-champagne-200/40 hover:border-champagne-400'
                                 } ${!country.is_available && !isCurrentlyConnected ? 'cursor-not-allowed opacity-50' : ''}`}
                               >
                                 <div className="flex items-center gap-3">
@@ -1831,7 +1847,9 @@ export default function Subscription() {
                           : 0;
 
                         return hasChanges ? (
-                          <div className="space-y-3 border-t border-dark-700/50 pt-3">
+                          <div
+                            className={`space-y-3 border-t pt-3 ${isDark ? 'border-dark-700/50' : 'border-champagne-300/60'}`}
+                          >
                             {added.length > 0 && (
                               <div className="text-sm">
                                 <span className="text-success-400">