From 5ca8183efbc4df483a426241922d5f109e64e16c Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Mon, 4 May 2026 17:40:31 -0700
Subject: [PATCH] fix(D2): restore contrast for legacy settings tabs

---
 web/src/views/SettingsView.dom.test.tsx | 63 +++++++++++++++++++++++++
 web/src/views/SettingsView.tsx          | 18 +++++--
 2 files changed, 78 insertions(+), 3 deletions(-)
 create mode 100644 web/src/views/SettingsView.dom.test.tsx

diff --git a/web/src/views/SettingsView.dom.test.tsx b/web/src/views/SettingsView.dom.test.tsx
new file mode 100644
index 0000000..923c33a
--- /dev/null
+++ b/web/src/views/SettingsView.dom.test.tsx
@@ -0,0 +1,63 @@
+// @vitest-environment jsdom
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { AppContext, type AppContextValue } from '../context/AppContext';
+import { SettingsView } from './SettingsView';
+
+vi.mock('../tabs/SettingsTab', () => ({
+  SettingsTab: () => <div>Account settings content</div>,
+}));
+
+vi.mock('../tabs/ConfigTab', () => ({
+  ConfigTab: () => <div>Bot config content</div>,
+}));
+
+vi.mock('../tabs/AdminTab', () => ({
+  AdminTab: () => <div>Admin panel content</div>,
+}));
+
+const appContext: AppContextValue = {
+  botState: {
+    settings: { isAlgoEnabled: true },
+    symbols: {},
+    health: { tradingLoopHealthy: true, reconciliationLoopHealthy: true, capitalInvariantViolations: 0 },
+    alerts: [],
+    positions: [],
+    orders: [],
+    history: [],
+    uptime: 0,
+  } as any,
+  socket: null,
+  connected: true,
+  activeSymbol: '',
+  setActiveSymbol: vi.fn(),
+  isAdmin: true,
+  user: { id: 'admin-1' },
+  profile: { role: 'admin' },
+  showBacktestTab: false,
+  showMarketplaceTab: false,
+  handleSignOut: vi.fn(),
+};
+
+describe('SettingsView legacy surface contrast', () => {
+  it('contains legacy settings sections inside a dark contrast surface', async () => {
+    const user = userEvent.setup();
+    const { container } = render(
+      <AppContext.Provider value={appContext}>
+        <SettingsView />
+      </AppContext.Provider>,
+    );
+
+    const surface = container.querySelector('.settings-legacy-surface') as HTMLDivElement;
+    expect(surface).toBeInTheDocument();
+    expect(surface).toHaveStyle({ color: '#F9FAFB' });
+    expect(screen.getByText('Account settings content')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Bot Config' }));
+    expect(screen.getByText('Bot config content')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Admin Panel' }));
+    expect(screen.getByText('Admin panel content')).toBeInTheDocument();
+  });
+});
diff --git a/web/src/views/SettingsView.tsx b/web/src/views/SettingsView.tsx
index 9bf1022..ef6e500 100644
--- a/web/src/views/SettingsView.tsx
+++ b/web/src/views/SettingsView.tsx
@@ -45,9 +45,21 @@ export function SettingsView() {
         ))}
       </div>
 
-      {section === 'Account'     && <SettingsTab botState={botState} />}
-      {section === 'Bot Config'  && <ConfigTab />}
-      {section === 'Admin Panel' && isAdmin && <AdminTab botState={botState} socket={socket} />}
+      <div
+        className="settings-legacy-surface"
+        style={{
+          background: 'linear-gradient(145deg, #101116 0%, #171922 100%)',
+          border: '1px solid rgba(255, 255, 255, 0.08)',
+          borderRadius: 24,
+          padding: 24,
+          boxShadow: '0 24px 70px rgba(15, 23, 42, 0.22)',
+          color: '#F9FAFB',
+        }}
+      >
+        {section === 'Account'     && <SettingsTab botState={botState} />}
+        {section === 'Bot Config'  && <ConfigTab />}
+        {section === 'Admin Panel' && isAdmin && <AdminTab botState={botState} socket={socket} />}
+      </div>
     </div>
   );
 }