refactor(ui): tokenize config control surfaces
This commit is contained in:
parent
8f05cc952f
commit
cd2f38df7b
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user