diff --git a/web/src/components/agent/ChatInput.tsx b/web/src/components/agent/ChatInput.tsx index 6004796c..dfc83993 100644 --- a/web/src/components/agent/ChatInput.tsx +++ b/web/src/components/agent/ChatInput.tsx @@ -88,7 +88,7 @@ export const ChatInput = forwardRef( style={{ padding: '12px 16px 20px', borderTop: '1px solid rgba(255,255,255,0.04)', - background: 'linear-gradient(to top, #09090b 80%, transparent)', + background: 'linear-gradient(to top, #0B0E11 80%, transparent)', }} >
( margin: '6px auto 0', textAlign: 'center', fontSize: 10, - color: '#1e1e32', + color: '#4a4a62', }} > NOFXi may make mistakes. Always verify trading decisions. diff --git a/web/src/components/agent/ChatMessages.tsx b/web/src/components/agent/ChatMessages.tsx index 7e9ac4a7..d10d2645 100644 --- a/web/src/components/agent/ChatMessages.tsx +++ b/web/src/components/agent/ChatMessages.tsx @@ -89,9 +89,9 @@ export const ChatMessages = forwardRef( fontSize: 13.5, lineHeight: 1.7, wordBreak: 'break-word', - background: 'rgba(255,255,255,0.03)', + background: 'rgba(255,255,255,0.05)', color: '#dcdce8', - border: '1px solid rgba(255,255,255,0.05)', + border: '1px solid rgba(255,255,255,0.08)', }} > @@ -123,7 +123,7 @@ export const ChatMessages = forwardRef(
( type={type} className={cn( 'flex h-10 w-full rounded px-3 py-2 text-sm', - 'bg-[var(--brand-black)] border border-[var(--panel-border)]', - 'text-[var(--brand-light-gray)] focus:outline-none', + 'bg-[var(--panel-bg)] border border-[var(--panel-border)]', + 'text-[var(--text-primary)] focus:outline-none focus:border-[var(--binance-yellow)] focus:ring-1 focus:ring-[rgba(240,185,11,0.15)]', className )} {...props} diff --git a/web/src/index.css b/web/src/index.css index debaf402..f892334e 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -13,7 +13,7 @@ html { :root { /* NoFX Neo-Gold Design System */ --nofx-gold: #F0B90B; - --nofx-bg: #05070A; + --nofx-bg: #0B0E11; --nofx-accent: #00F0FF; --nofx-glass: rgba(5, 7, 10, 0.7); --nofx-border: rgba(240, 185, 11, 0.2); @@ -23,7 +23,7 @@ html { --glow-accent: 0 0 20px rgba(0, 240, 255, 0.3); --glow-text: 0 0 10px rgba(240, 185, 11, 0.5); - --background: #05070A; + --background: #0B0E11; --header-bg: rgba(2, 3, 4, 0.85); /* Deep Abyssal */ @@ -56,7 +56,7 @@ html { --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 30px rgba(240, 185, 11, 0.15); - font-family: 'IBM Plex Mono', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; font-weight: 400; color-scheme: dark; @@ -136,13 +136,13 @@ body { min-width: 320px; min-height: 100vh; background-color: var(--background); - background-image: radial-gradient(circle at 50% 0%, #151921 0%, #05070a 60%); + background-image: radial-gradient(circle at 50% 0%, #151921 0%, #0B0E11 60%); background-attachment: fixed; } -/* Premium Selection Styles */ +/* Premium Selection Styles — gold to match brand */ ::selection { - background: rgba(255, 88, 0, 0.3); + background: rgba(240, 185, 11, 0.3); color: #FFFFFF; } @@ -350,12 +350,20 @@ body { color: var(--text-primary) !important; } -/* Monospace numbers */ +/* Monospace numbers — use for prices, balances, timestamps, code */ .mono { font-family: 'IBM Plex Mono', 'Courier New', monospace; font-variant-numeric: tabular-nums; } +.text-profit, +.text-loss, +.number-up, +.number-down { + font-family: 'IBM Plex Mono', 'Courier New', monospace; + font-variant-numeric: tabular-nums; +} + /* Button styles - Binance */ button { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); @@ -364,14 +372,6 @@ button { button:hover:not(:disabled) { filter: brightness(1.1); - filter: brightness(1.1); - transform: translateY(-1px); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); -} - -button:active:not(:disabled) { - transform: scale(0.98) translateY(0); - box-shadow: none; } /* Soft Glow for Primary Buttons (Yellow) */ @@ -439,6 +439,14 @@ button:disabled { border: 1px solid rgba(255, 255, 255, 0.05); } +.nofx-glass { + background: rgba(30, 35, 41, 0.5); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 12px; +} + /* Premium Input Styles */ /* Premium Input Styles */ input, diff --git a/web/src/pages/AgentChatPage.tsx b/web/src/pages/AgentChatPage.tsx index f6460eed..f0a35de2 100644 --- a/web/src/pages/AgentChatPage.tsx +++ b/web/src/pages/AgentChatPage.tsx @@ -630,7 +630,7 @@ export function AgentChatPage() { style={{ display: 'flex', height: 'calc(100dvh - 64px)', - background: '#09090b', + background: '#0B0E11', overflow: 'hidden', }} > @@ -655,7 +655,7 @@ export function AgentChatPage() { overflowX: 'auto', flexShrink: 0, backdropFilter: 'blur(12px)', - background: 'rgba(9,9,11,0.8)', + background: 'rgba(11,14,17,0.8)', }} className="hide-scrollbar" > diff --git a/web/tailwind.config.js b/web/tailwind.config.js index e33ef1ac..ad3ef30d 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -14,8 +14,8 @@ export default { highlight: '#FFD700', }, 'nofx-bg': { - DEFAULT: '#05070A', // Deep Void - deeper: '#020304', // Abyssal + DEFAULT: '#0B0E11', // Deep Void + deeper: '#050709', // Abyssal lighter: '#0E1217', // Surface }, 'nofx-accent': '#00F0FF', // Cyan Cyber