style(dashboard): unify Macro composite into one card + dark-mode fix
for Performance accent
User flagged the macro index box on the overview page as feeling
disjointed. Reshaped it from three stacked elements (band → track →
scale) into a single bordered card so it reads as ONE component.
- JSX: wrap the three pieces in <div className="overview-macro-card">
- CSS: new .overview-macro-card with tone-coloured rim (bull/bear/neutral)
- Solid neutral-gray filled needle (was a hollow ring — looked like a
placeholder); tone-coloured background + white inner ring + double
shadow so it stands out on any gradient position
- Removed the .overview-score-fill overlay — the gradient already
encodes the spectrum; layering an opaque fill obscured it near 0
- Thinner track (14px vs 22px), tighter scale labels, smaller pill
- Added "TODAY · 8 INDICATORS" stamp next to the title — gives users
a quick anchor of what they're looking at + freshness
Plus: dark-mode override for .overview-stat-card.accent (the Performance
card). It was using a cream gradient that floated as a glaring
out-of-theme block on dark mode. Mirrored the existing .kpi.accent dark
treatment so it stays visually grouped with the rest of the dashboard.
Also includes the in-flight overview rewrite from the other AI tool
(legacy /btc redirect to /macro, middleware.ts replacing proxy.ts for
Next.js routing, refactored several dashboard panels). TypeScript clean,
production build passes.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
+69
-48
@@ -5,6 +5,7 @@ import Link from 'next/link'
|
||||
import { usePathname } from 'next/navigation'
|
||||
import { useAccount, useConnect, useDisconnect } from 'wagmi'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import { getFirstReadyConnector, walletConnectErrorLabel } from '@/lib/walletConnect'
|
||||
// i18n shelved — LanguageSwitch hidden but kept on disk for future revival.
|
||||
// import LanguageSwitch from './LanguageSwitch'
|
||||
|
||||
@@ -49,11 +50,12 @@ export default function Navbar() {
|
||||
const t = useTranslations('nav')
|
||||
const pathname = usePathname()
|
||||
const { address, isConnected } = useAccount()
|
||||
const { connect, connectors } = useConnect()
|
||||
const { connectAsync, connectors } = useConnect()
|
||||
const { disconnect } = useDisconnect()
|
||||
const [mounted, setMounted] = useState(false)
|
||||
const [walletMenuOpen, setWalletMenuOpen] = useState(false)
|
||||
const [copied, setCopied] = useState(false)
|
||||
const [connectError, setConnectError] = useState('')
|
||||
|
||||
async function copyAddress(addr: string) {
|
||||
let ok = false
|
||||
@@ -78,10 +80,27 @@ export default function Navbar() {
|
||||
}
|
||||
useEffect(() => { setMounted(true) }, [])
|
||||
useEffect(() => { setWalletMenuOpen(false) }, [pathname, address])
|
||||
useEffect(() => {
|
||||
if (isConnected) setConnectError('')
|
||||
}, [isConnected])
|
||||
|
||||
const locale = pathname.split('/')[1] || 'en'
|
||||
const path = '/' + pathname.split('/').slice(2).join('/')
|
||||
|
||||
async function handleConnectWallet() {
|
||||
setConnectError('')
|
||||
try {
|
||||
const connector = await getFirstReadyConnector(connectors)
|
||||
if (!connector) {
|
||||
setConnectError('No wallet connector is available right now.')
|
||||
return
|
||||
}
|
||||
await connectAsync({ connector })
|
||||
} catch (err: unknown) {
|
||||
setConnectError(walletConnectErrorLabel(err))
|
||||
}
|
||||
}
|
||||
|
||||
// Two independent trading systems get their own top-level tabs — no
|
||||
// intermediate "Signals" hub. Trump = event scalp; BTC = reversal.
|
||||
const tabs = [
|
||||
@@ -128,58 +147,60 @@ export default function Navbar() {
|
||||
<div className="nav-right">
|
||||
{/* <LanguageSwitch /> — shelved until i18n coverage is complete */}
|
||||
<ThemeToggle />
|
||||
{!mounted ? (
|
||||
<button className="connect-btn lg" suppressHydrationWarning>{t('actions.connectWallet')}</button>
|
||||
) : isConnected && shortAddr ? (
|
||||
<div className="wallet-menu-wrap" style={{ position: 'relative' }}>
|
||||
<button
|
||||
className="wallet-chip"
|
||||
onClick={() => setWalletMenuOpen(open => !open)}
|
||||
onBlur={(e) => {
|
||||
if (!e.currentTarget.parentElement?.contains(e.relatedTarget as Node | null)) {
|
||||
setWalletMenuOpen(false)
|
||||
}
|
||||
}}
|
||||
aria-expanded={walletMenuOpen}
|
||||
aria-haspopup="menu"
|
||||
>
|
||||
<span className="ava" />
|
||||
<span className="mono">{shortAddr}</span>
|
||||
</button>
|
||||
<div className={`wallet-menu ${walletMenuOpen ? 'open' : ''}`} role="menu">
|
||||
<div className="wallet-anchor">
|
||||
{!mounted ? (
|
||||
<button className="connect-btn lg" suppressHydrationWarning>{t('actions.connectWallet')}</button>
|
||||
) : isConnected && shortAddr ? (
|
||||
<div className="wallet-menu-wrap" style={{ position: 'relative' }}>
|
||||
<button
|
||||
role="menuitem"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault()
|
||||
if (address) copyAddress(address)
|
||||
className="wallet-chip"
|
||||
onClick={() => setWalletMenuOpen(open => !open)}
|
||||
onBlur={(e) => {
|
||||
if (!e.currentTarget.parentElement?.contains(e.relatedTarget as Node | null)) {
|
||||
setWalletMenuOpen(false)
|
||||
}
|
||||
}}
|
||||
aria-expanded={walletMenuOpen}
|
||||
aria-haspopup="menu"
|
||||
>
|
||||
{copied ? t('actions.copied') : t('actions.copyAddress')}
|
||||
</button>
|
||||
<button
|
||||
role="menuitem"
|
||||
className="danger"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault()
|
||||
disconnect()
|
||||
setWalletMenuOpen(false)
|
||||
}}
|
||||
>
|
||||
{t('actions.disconnect')}
|
||||
<span className="ava" />
|
||||
<span className="mono">{shortAddr}</span>
|
||||
</button>
|
||||
<div className={`wallet-menu ${walletMenuOpen ? 'open' : ''}`} role="menu">
|
||||
<button
|
||||
role="menuitem"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault()
|
||||
if (address) copyAddress(address)
|
||||
}}
|
||||
>
|
||||
{copied ? t('actions.copied') : t('actions.copyAddress')}
|
||||
</button>
|
||||
<button
|
||||
role="menuitem"
|
||||
className="danger"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault()
|
||||
disconnect()
|
||||
setWalletMenuOpen(false)
|
||||
}}
|
||||
>
|
||||
{t('actions.disconnect')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
className="connect-btn lg"
|
||||
onClick={() => {
|
||||
const connector = connectors[0]
|
||||
if (connector) connect({ connector })
|
||||
}}
|
||||
>
|
||||
{t('actions.connectWallet')}
|
||||
</button>
|
||||
)}
|
||||
) : (
|
||||
<button
|
||||
className="connect-btn lg"
|
||||
onClick={() => { void handleConnectWallet() }}
|
||||
>
|
||||
{t('actions.connectWallet')}
|
||||
</button>
|
||||
)}
|
||||
{!isConnected && connectError ? (
|
||||
<p className="wallet-connect-error" role="alert">{connectError}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user