From 500ce8d475d37baa59f41007343cb38dfa3366d7 Mon Sep 17 00:00:00 2001 From: anderdc Date: Mon, 1 Jun 2026 15:07:22 -0500 Subject: [PATCH 1/3] fix(dashboard,miners): add VOLUME chart title + fix leaderboard hover in light mode - Register echarts GraphicComponent and add a VOLUME label above the volume sub-chart, mirroring the EMA title on the price chart. - Miner leaderboard rows now highlight on hover in light mode; the old surface.elevated hover matched the table container surface (both #f4f6f8), so use a mode-aware overlay instead. --- src/components/dashboard/MarketRateChart.tsx | 21 ++++++++++++++++++++ src/components/miners/MinerLeaderboard.tsx | 7 ++++++- 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/src/components/dashboard/MarketRateChart.tsx b/src/components/dashboard/MarketRateChart.tsx index 2ad846a..df5e31e 100644 --- a/src/components/dashboard/MarketRateChart.tsx +++ b/src/components/dashboard/MarketRateChart.tsx @@ -5,6 +5,7 @@ import { GridComponent, TooltipComponent, MarkLineComponent, + GraphicComponent, } from 'echarts/components'; import { CanvasRenderer } from 'echarts/renderers'; import { Box, Typography, useMediaQuery, useTheme } from '@mui/material'; @@ -27,6 +28,7 @@ echarts.use([ GridComponent, TooltipComponent, MarkLineComponent, + GraphicComponent, CanvasRenderer, ]); @@ -144,6 +146,25 @@ const MarketRateChart: React.FC<{ direction: Direction; fill?: boolean }> = ({ chart.setOption( { animation: false, + // "VOLUME" label over the volume sub-chart, mirroring the "EMA" title + // above the price chart. Anchored to the top-left of the volume grid; + // dropped on mobile where the volume grid isn't rendered. + ...(showVolume && { + graphic: [ + { + type: 'text', + left: 48, + top: '72%', + style: { + text: 'VOLUME', + fill: axisColor, + fontFamily: FONTS.mono, + fontSize: 9, + fontWeight: 'normal', + }, + }, + ], + }), // Price grid on top, volume grid below (desktop). On mobile the volume // grid is dropped and price fills the full height. grid: showVolume diff --git a/src/components/miners/MinerLeaderboard.tsx b/src/components/miners/MinerLeaderboard.tsx index f4d2aab..dffbb4e 100644 --- a/src/components/miners/MinerLeaderboard.tsx +++ b/src/components/miners/MinerLeaderboard.tsx @@ -345,7 +345,12 @@ const MinerLeaderboard: React.FC<{ hover sx={{ cursor: 'pointer', - '&:hover td': { backgroundColor: 'surface.elevated' }, + '&:hover td': { + backgroundColor: + theme.palette.mode === 'light' + ? 'rgba(9, 11, 13, 0.06)' + : 'rgba(255, 255, 255, 0.08)', + }, '&:focus-visible': { outline: `2px solid ${theme.palette.primary.main}`, outlineOffset: -2, From cd741f498a1b15144da8a1782d934a87c56e035e Mon Sep 17 00:00:00 2001 From: anderdc Date: Mon, 1 Jun 2026 15:09:36 -0500 Subject: [PATCH 2/3] revert: drop VOLUME chart title --- src/components/dashboard/MarketRateChart.tsx | 21 -------------------- 1 file changed, 21 deletions(-) diff --git a/src/components/dashboard/MarketRateChart.tsx b/src/components/dashboard/MarketRateChart.tsx index df5e31e..2ad846a 100644 --- a/src/components/dashboard/MarketRateChart.tsx +++ b/src/components/dashboard/MarketRateChart.tsx @@ -5,7 +5,6 @@ import { GridComponent, TooltipComponent, MarkLineComponent, - GraphicComponent, } from 'echarts/components'; import { CanvasRenderer } from 'echarts/renderers'; import { Box, Typography, useMediaQuery, useTheme } from '@mui/material'; @@ -28,7 +27,6 @@ echarts.use([ GridComponent, TooltipComponent, MarkLineComponent, - GraphicComponent, CanvasRenderer, ]); @@ -146,25 +144,6 @@ const MarketRateChart: React.FC<{ direction: Direction; fill?: boolean }> = ({ chart.setOption( { animation: false, - // "VOLUME" label over the volume sub-chart, mirroring the "EMA" title - // above the price chart. Anchored to the top-left of the volume grid; - // dropped on mobile where the volume grid isn't rendered. - ...(showVolume && { - graphic: [ - { - type: 'text', - left: 48, - top: '72%', - style: { - text: 'VOLUME', - fill: axisColor, - fontFamily: FONTS.mono, - fontSize: 9, - fontWeight: 'normal', - }, - }, - ], - }), // Price grid on top, volume grid below (desktop). On mobile the volume // grid is dropped and price fills the full height. grid: showVolume From 6ff20fb96d14e0bcf0085c911c5386dfac0a873b Mon Sep 17 00:00:00 2001 From: anderdc Date: Mon, 1 Jun 2026 15:12:50 -0500 Subject: [PATCH 3/3] refactor(theme): define action.hover token; drop hardcoded leaderboard hover Bump light-mode action.hover from MUI's faint 4% default to 6% (derived from the brand woodsmoke via alpha) so hover reads over white card surfaces. Leaderboard now uses the action.hover token like every other table instead of surface.elevated / a hardcoded rgba. --- src/components/miners/MinerLeaderboard.tsx | 7 +------ src/theme.ts | 10 +++++++++- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/miners/MinerLeaderboard.tsx b/src/components/miners/MinerLeaderboard.tsx index dffbb4e..28e84bf 100644 --- a/src/components/miners/MinerLeaderboard.tsx +++ b/src/components/miners/MinerLeaderboard.tsx @@ -345,12 +345,7 @@ const MinerLeaderboard: React.FC<{ hover sx={{ cursor: 'pointer', - '&:hover td': { - backgroundColor: - theme.palette.mode === 'light' - ? 'rgba(9, 11, 13, 0.06)' - : 'rgba(255, 255, 255, 0.08)', - }, + '&:hover td': { backgroundColor: 'action.hover' }, '&:focus-visible': { outline: `2px solid ${theme.palette.primary.main}`, outlineOffset: -2, diff --git a/src/theme.ts b/src/theme.ts index ae99111..bee658c 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -1,4 +1,4 @@ -import { createTheme, Theme } from '@mui/material/styles'; +import { alpha, createTheme, Theme } from '@mui/material/styles'; // Font constants (shared across all themes) export const FONTS = { @@ -144,6 +144,14 @@ export function createAppTheme(mode: ThemeMode): Theme { secondary: p.textSecondary, }, divider: p.border, + // MUI's default light-mode hover (4% black) is too faint over our white + // card surfaces, so bump it to 6%. Dark mode keeps the 8% white default. + action: { + hover: + mode === 'light' + ? alpha(BRAND.woodsmoke, 0.06) + : alpha(BRAND.white, 0.08), + }, border: { subtle: p.border, light: p.borderLight,