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: improve light theme visibility for inner panels on subscription page

Browse Source 
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)
This commit is contained in:
Fringg
2026-03-01 19:29:27 +03:00
parent 4cdff9730b
commit 430b703bbe
1 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/pages/Subscription.tsx
View File

@@ -1128,7 +1128,7 @@ export default function Subscription() {
{!showDeviceTopup ? ( {!showDeviceTopup ? (
<button <button
onClick={() => setShowDeviceTopup(true)} 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 className="flex items-center justify-between">
<div> <div>
@@ -1153,7 +1153,9 @@ export default function Subscription() {
</div> </div>
</button> </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"> <div className="mb-4 flex items-center justify-between">
<h3 className="font-medium text-dark-100">{t('subscription.buyDevices')}</h3> <h3 className="font-medium text-dark-100">{t('subscription.buyDevices')}</h3>
<button <button
@@ -1320,7 +1322,7 @@ export default function Subscription() {
{!showDeviceReduction ? ( {!showDeviceReduction ? (
<button <button
onClick={() => setShowDeviceReduction(true)} 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 className="flex items-center justify-between">
<div> <div>
@@ -1343,7 +1345,9 @@ export default function Subscription() {
</div> </div>
</button> </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"> <div className="mb-4 flex items-center justify-between">
<h3 className="font-medium text-dark-100"> <h3 className="font-medium text-dark-100">
{t('subscription.additionalOptions.reduceDevicesTitle')} {t('subscription.additionalOptions.reduceDevicesTitle')}
@@ -1489,7 +1493,7 @@ export default function Subscription() {
{!showTrafficTopup ? ( {!showTrafficTopup ? (
<button <button
onClick={() => setShowTrafficTopup(true)} 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 className="flex items-center justify-between">
<div> <div>
@@ -1515,7 +1519,9 @@ export default function Subscription() {
</div> </div>
</button> </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"> <div className="mb-4 flex items-center justify-between">
<h3 className="font-medium text-dark-100"> <h3 className="font-medium text-dark-100">
{t('subscription.additionalOptions.buyTrafficTitle')} {t('subscription.additionalOptions.buyTrafficTitle')}
@@ -1531,7 +1537,9 @@ export default function Subscription() {
</button> </button>
</div> </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')} ⚠️ {t('subscription.additionalOptions.trafficWarning')}
</div> </div>
@@ -1549,7 +1557,9 @@ export default function Subscription() {
className={`rounded-xl border p-4 text-center transition-all ${ className={`rounded-xl border p-4 text-center transition-all ${
selectedTrafficPackage === pkg.gb selectedTrafficPackage === pkg.gb
? 'border-accent-500 bg-accent-500/10' ? '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"> <div className="text-lg font-semibold text-dark-100">
@@ -1651,7 +1661,7 @@ export default function Subscription() {
{!showServerManagement ? ( {!showServerManagement ? (
<button <button
onClick={() => setShowServerManagement(true)} 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 className="flex items-center justify-between">
<div> <div>
@@ -1674,7 +1684,9 @@ export default function Subscription() {
</div> </div>
</button> </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"> <div className="mb-4 flex items-center justify-between">
<h3 className="font-medium text-dark-100"> <h3 className="font-medium text-dark-100">
{t('subscription.additionalOptions.manageServersTitle')} {t('subscription.additionalOptions.manageServersTitle')}
@@ -1696,7 +1708,9 @@ export default function Subscription() {
</div> </div>
) : countriesData && countriesData.countries.length > 0 ? ( ) : countriesData && countriesData.countries.length > 0 ? (
<div className="space-y-4"> <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')} {t('subscription.serverManagement.statusLegend')}
</div> </div>
@@ -1738,7 +1752,9 @@ export default function Subscription() {
: 'border-accent-500 bg-accent-500/10' : 'border-accent-500 bg-accent-500/10'
: willBeRemoved : willBeRemoved
? 'border-error-500/50 bg-error-500/5' ? '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' : ''}`} } ${!country.is_available && !isCurrentlyConnected ? 'cursor-not-allowed opacity-50' : ''}`}
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
@@ -1831,7 +1847,9 @@ export default function Subscription() {
: 0; : 0;
return hasChanges ? ( 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 && ( {added.length > 0 && (
<div className="text-sm"> <div className="text-sm">
<span className="text-success-400"> <span className="text-success-400">