refactor(ui): tokenize config control surfaces

This commit is contained in:
root 2026-05-07 06:04:27 +00:00
parent 8f05cc952f
commit cd2f38df7b

View File

@ -142,7 +142,7 @@ export const ConfigTab = () => {
if (!isAdmin) {
return (
<div className="bg-[#14151a] border border-red-500/20 p-8 rounded-3xl">
<div className="bg-[var(--card-elevated)] border border-red-500/20 p-8 rounded-3xl">
<div className="max-w-xl">
<p className="text-[11px] font-black uppercase tracking-[0.3em] text-red-400">Restricted</p>
<h2 className="text-2xl font-black text-white mt-3">Access Denied</h2>
@ -157,7 +157,7 @@ export const ConfigTab = () => {
if (loading) {
return (
<div className="flex flex-col items-center justify-center h-64 text-gray-500 animate-pulse">
<div className="w-10 h-10 border-4 border-[#00ff88]/10 border-t-[#00ff88] rounded-full animate-spin mb-4 shadow-xl" />
<div className="w-10 h-10 border-4 border-[var(--bl-success-muted)] border-t-[var(--bl-success)] rounded-full animate-spin mb-4 shadow-xl" />
<p className="text-xs font-black uppercase tracking-[0.3em]">Calibrating Infrastructure...</p>
</div>
);
@ -180,9 +180,9 @@ export const ConfigTab = () => {
)}
{/* 2. ACTION CONTROL CENTER */}
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6 bg-[#14151a] border border-white/5 p-8 rounded-3xl relative overflow-hidden group shadow-2xl">
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6 bg-[var(--card-elevated)] border border-white/5 p-8 rounded-3xl relative overflow-hidden group shadow-2xl">
<div className="relative z-10 flex items-center gap-6">
<div className="w-14 h-14 bg-white/5 border border-white/10 rounded-2xl flex items-center justify-center text-blue-400 shadow-xl">
<div className="w-14 h-14 bg-white/5 border border-white/10 rounded-2xl flex items-center justify-center text-[var(--bl-info-strong)] shadow-xl">
<Zap size={30} fill="currentColor" fillOpacity={0.1} />
</div>
<div>
@ -206,7 +206,7 @@ export const ConfigTab = () => {
onClick={handleSaveAll}
disabled={!hasChanges || saving}
className={`flex items-center gap-3 px-10 py-4 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all shadow-2xl ${hasChanges && !saving
? 'bg-white text-black hover:bg-blue-400 transition-colors'
? 'bg-white text-black hover:bg-[var(--bl-info-strong)] transition-colors'
: 'bg-white/5 text-gray-600 cursor-not-allowed'
}`}
>
@ -215,7 +215,7 @@ export const ConfigTab = () => {
</div>
</div>
<div className="bg-[#14151a] border border-white/5 p-6 rounded-3xl space-y-4">
<div className="bg-[var(--card-elevated)] border border-white/5 p-6 rounded-3xl space-y-4">
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
<div>
<h3 className="text-sm font-black text-white uppercase tracking-widest">Backtest Access Control</h3>
@ -226,7 +226,7 @@ export const ConfigTab = () => {
<button
onClick={handleSaveBacktestFlags}
disabled={savingBacktestFlags}
className={`px-5 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest ${savingBacktestFlags ? 'bg-white/5 text-zinc-600 cursor-not-allowed' : 'bg-emerald-400 text-black hover:bg-emerald-300'}`}
className={`px-5 py-2 rounded-xl text-[10px] font-black uppercase tracking-widest ${savingBacktestFlags ? 'bg-white/5 text-zinc-600 cursor-not-allowed' : 'bg-[var(--bl-success)] text-black hover:opacity-90'}`}
>
{savingBacktestFlags ? 'Saving...' : 'Save Backtest Flags'}
</button>
@ -322,7 +322,7 @@ export const ConfigTab = () => {
</div>
{/* 4. IMMUTABLE FOOTER INFO */}
<footer className="relative p-12 bg-gradient-to-br from-[#0c0d10] to-[#000] border border-white/5 rounded-[3rem] overflow-hidden group shadow-2xl">
<footer className="relative p-12 bg-[var(--bl-surface-overlay)] border border-white/5 rounded-[3rem] overflow-hidden group shadow-2xl">
<div className="absolute top-0 right-0 p-12 opacity-[0.03] group-hover:opacity-10 transition-all duration-1000">
<ShieldAlert size={160} className="text-blue-400" />
</div>