refactor(ui): tokenize config control surfaces
This commit is contained in:
parent
8f05cc952f
commit
cd2f38df7b
@ -142,7 +142,7 @@ export const ConfigTab = () => {
|
|||||||
|
|
||||||
if (!isAdmin) {
|
if (!isAdmin) {
|
||||||
return (
|
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">
|
<div className="max-w-xl">
|
||||||
<p className="text-[11px] font-black uppercase tracking-[0.3em] text-red-400">Restricted</p>
|
<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>
|
<h2 className="text-2xl font-black text-white mt-3">Access Denied</h2>
|
||||||
@ -157,7 +157,7 @@ export const ConfigTab = () => {
|
|||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col items-center justify-center h-64 text-gray-500 animate-pulse">
|
<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>
|
<p className="text-xs font-black uppercase tracking-[0.3em]">Calibrating Infrastructure...</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -180,9 +180,9 @@ export const ConfigTab = () => {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 2. ACTION CONTROL CENTER */}
|
{/* 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="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} />
|
<Zap size={30} fill="currentColor" fillOpacity={0.1} />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -206,7 +206,7 @@ export const ConfigTab = () => {
|
|||||||
onClick={handleSaveAll}
|
onClick={handleSaveAll}
|
||||||
disabled={!hasChanges || saving}
|
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
|
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'
|
: 'bg-white/5 text-gray-600 cursor-not-allowed'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
@ -215,7 +215,7 @@ export const ConfigTab = () => {
|
|||||||
</div>
|
</div>
|
||||||
</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 className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-sm font-black text-white uppercase tracking-widest">Backtest Access Control</h3>
|
<h3 className="text-sm font-black text-white uppercase tracking-widest">Backtest Access Control</h3>
|
||||||
@ -226,7 +226,7 @@ export const ConfigTab = () => {
|
|||||||
<button
|
<button
|
||||||
onClick={handleSaveBacktestFlags}
|
onClick={handleSaveBacktestFlags}
|
||||||
disabled={savingBacktestFlags}
|
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'}
|
{savingBacktestFlags ? 'Saving...' : 'Save Backtest Flags'}
|
||||||
</button>
|
</button>
|
||||||
@ -322,7 +322,7 @@ export const ConfigTab = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 4. IMMUTABLE FOOTER INFO */}
|
{/* 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">
|
<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" />
|
<ShieldAlert size={160} className="text-blue-400" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user