From df00e977d44f94e750d400c7a725a7a3de593d19 Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Tue, 5 May 2026 22:18:42 -0700
Subject: [PATCH] refactor(web): normalize global config theme surface

---
 docs/UX_THEME_NORMALIZATION_HANDOFF.md     |  2 +-
 web/src/components/GlobalConfigManager.tsx | 46 ++++++++++++----------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/docs/UX_THEME_NORMALIZATION_HANDOFF.md b/docs/UX_THEME_NORMALIZATION_HANDOFF.md
index eedd99d..1e97be4 100644
--- a/docs/UX_THEME_NORMALIZATION_HANDOFF.md
+++ b/docs/UX_THEME_NORMALIZATION_HANDOFF.md
@@ -98,7 +98,7 @@ Current public bundle:
 - [x] Normalize `web/src/components/TradeProfileManager.tsx`
 - [x] Normalize `web/src/components/StrategyWizard.tsx`
 - [x] Normalize `web/src/tabs/ReconciliationAuditPanel.tsx`
-- [ ] Normalize `web/src/components/GlobalConfigManager.tsx`
+- [x] Normalize `web/src/components/GlobalConfigManager.tsx`
 - [ ] Normalize `web/src/components/EntryForm.tsx`
 - [ ] Normalize remaining old admin/config surfaces
 - [ ] Remove remaining dark-only bespoke surface systems
diff --git a/web/src/components/GlobalConfigManager.tsx b/web/src/components/GlobalConfigManager.tsx
index 3e9e2b0..a539c9a 100644
--- a/web/src/components/GlobalConfigManager.tsx
+++ b/web/src/components/GlobalConfigManager.tsx
@@ -1,6 +1,9 @@
 import React from 'react';
-import { Save, AlertCircle, CheckCircle } from 'lucide-react';
+import { Save, AlertCircle, CheckCircle, Globe2 } from 'lucide-react';
 import { fetchDynamicConfigItems, upsertDynamicConfigItems } from '../lib/dynamicConfigApi';
+import { Button } from './ui/button';
+import { Card } from './ui/card';
+import { Input } from './ui/input';
 
 interface ConfigItem {
     key: string;
@@ -46,16 +49,17 @@ export const GlobalConfigManager = () => {
         setSaving(false);
     };
 
-    if (loading) return <div className="p-4 text-gray-500">Loading system configuration...</div>;
+    if (loading) return <div className="p-4 text-[var(--muted-foreground)]">Loading system configuration...</div>;
 
     return (
-        <div className="bg-black/20 border border-white/5 rounded-xl p-6">
-            <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
-                🌍 Global Bot Configuration
+        <Card className="rounded-xl p-6">
+            <h3 className="mb-4 flex items-center gap-2 text-lg font-semibold text-[var(--foreground)]">
+                <Globe2 size={18} className="text-[var(--accent)]" />
+                Global Bot Configuration
             </h3>
 
             {message && (
-                <div className={`mb-4 p-3 rounded-lg flex items-center gap-2 text-sm ${message.type === 'success' ? 'bg-green-500/10 text-green-400 border border-green-500/20' : 'bg-red-500/10 text-red-400 border border-red-500/20'
+                <div className={`mb-4 flex items-center gap-2 rounded-lg border p-3 text-sm ${message.type === 'success' ? 'border-green-500/20 bg-green-500/10 text-green-600 dark:text-green-400' : 'border-red-500/20 bg-red-500/10 text-red-600 dark:text-red-400'
                     }`}>
                     {message.type === 'success' ? <CheckCircle size={16} /> : <AlertCircle size={16} />}
                     {message.text}
@@ -64,40 +68,42 @@ export const GlobalConfigManager = () => {
 
             <div className="space-y-4">
                 {configs.map((config) => (
-                    <div key={config.key} className="flex flex-col gap-1 pb-4 border-b border-white/5 last:border-0 last:pb-0">
+                    <div key={config.key} className="flex flex-col gap-1 border-b border-[var(--border)] pb-4 last:border-0 last:pb-0">
                         <div className="flex items-center justify-between">
-                            <label className="text-xs font-bold text-orange-400 uppercase tracking-wider">{config.key}</label>
-                            <button
+                            <label className="text-xs font-bold uppercase tracking-wider text-[var(--accent)]">{config.key}</label>
+                            <Button
                                 onClick={() => handleSave(config)}
                                 disabled={saving}
-                                className="text-xs bg-orange-500/20 hover:bg-orange-500/40 text-orange-300 px-2 py-1 rounded border border-orange-500/30 transition-colors flex items-center gap-1"
+                                variant="outline"
+                                size="sm"
+                                className="h-7 rounded px-2 text-xs"
                             >
                                 <Save size={12} /> Save
-                            </button>
+                            </Button>
                         </div>
-                        <input
+                        <Input
                             type="text"
                             value={config.value}
                             onChange={(e) => handleChange(config.key, e.target.value)}
-                            className="bg-black/40 border border-white/10 rounded px-3 py-2 text-sm text-gray-200 focus:outline-none focus:border-orange-500/50"
+                            className="h-10 rounded px-3 py-2 text-sm"
                         />
-                        <p className="text-[10px] text-gray-500 italic">{config.description || 'System setting used by the trading core.'}</p>
+                        <p className="text-[10px] italic text-[var(--muted-foreground)]">{config.description || 'System setting used by the trading core.'}</p>
                     </div>
                 ))}
 
                 {configs.length === 0 && (
-                    <div className="text-center py-8 border border-dashed border-white/10 rounded-lg">
-                        <p className="text-sm text-gray-500 mb-2">No dynamic configuration entries found.</p>
-                        <p className="text-xs text-gray-600">The bot is currently using .env defaults.</p>
+                    <div className="rounded-lg border border-dashed border-[var(--border)] py-8 text-center">
+                        <p className="mb-2 text-sm text-[var(--muted-foreground)]">No dynamic configuration entries found.</p>
+                        <p className="text-xs text-[var(--muted-foreground)]">The bot is currently using .env defaults.</p>
                     </div>
                 )}
             </div>
 
-            <div className="mt-6 pt-4 border-t border-white/10">
-                <p className="text-[10px] text-gray-400 leading-relaxed">
+            <div className="mt-6 border-t border-[var(--border)] pt-4">
+                <p className="text-[10px] leading-relaxed text-[var(--muted-foreground)]">
                     <strong>Note:</strong> Changes to global variables usually require a bot restart to take full effect (e.g. changing intervals or providers). Symbols may update dynamically depending on strategy implementation.
                 </p>
             </div>
-        </div>
+        </Card>
     );
 };