From 4343d0ac1f198c21d43db91a5624a9f30209dce5 Mon Sep 17 00:00:00 2001 From: SplinterSword Date: Fri, 31 Oct 2025 19:16:54 +0530 Subject: [PATCH 1/2] Modified the Box Shadow of Tooltip Component for Darkmode Signed-off-by: SplinterSword --- src/custom/CustomTooltip/customTooltip.tsx | 12 +++++++++-- src/theme/components.ts | 2 ++ src/theme/components/tooltip.modifier.ts | 25 ++++++++++++++++++++++ 3 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 src/theme/components/tooltip.modifier.ts diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx index 6ce85e34b..2315b726f 100644 --- a/src/custom/CustomTooltip/customTooltip.tsx +++ b/src/custom/CustomTooltip/customTooltip.tsx @@ -1,5 +1,7 @@ import _ from 'lodash'; import React from 'react'; +import type { Theme } from '@mui/material/styles'; +import { alpha } from '@mui/material'; import { Tooltip, TooltipProps } from '../../base'; import { WHITE } from '../../theme'; import { RenderMarkdownTooltip } from '../Markdown'; @@ -40,10 +42,16 @@ function CustomTooltip({ color: WHITE, maxWidth: '600px', fontSize: fontSize || (variant === 'standard' ? '1rem' : '0.75rem'), - fontWeight: { fontWeight }, + fontWeight: fontWeight, borderRadius: '0.5rem', padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem', - boxShadow: 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px' + boxShadow: (theme: Theme) => { + if (theme.palette.mode === 'light') { + return 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px'; + } + const green = theme.palette.primary.main; + return `0 10px 30px ${alpha(green, 0.28)}, 0 2px 8px ${alpha(green, 0.2)}, 0 0 1px ${alpha(green, 0.32)}`; + } } }, popper: { diff --git a/src/theme/components.ts b/src/theme/components.ts index cfb23dcd1..3e5d56143 100644 --- a/src/theme/components.ts +++ b/src/theme/components.ts @@ -20,6 +20,7 @@ import { MuiSwitch } from './components/switch.modifier'; import { MuiTab } from './components/tab.modifier'; import { MuiTableCombineTheme } from './components/table.modifier'; import { MuiTabs } from './components/tabs.modifier'; +import { MuiTooltip } from './components/tooltip.modifier'; export const components: Components = { MuiAppBar, @@ -42,5 +43,6 @@ export const components: Components = { MuiButtonGroup, MuiButton, MuiListItem, + MuiTooltip, ...MuiTableCombineTheme }; diff --git a/src/theme/components/tooltip.modifier.ts b/src/theme/components/tooltip.modifier.ts new file mode 100644 index 000000000..0c906bfbe --- /dev/null +++ b/src/theme/components/tooltip.modifier.ts @@ -0,0 +1,25 @@ +import { alpha } from '@mui/material'; +import type { Components, Theme } from '@mui/material/styles'; + +export const MuiTooltip: Components['MuiTooltip'] = { + styleOverrides: { + tooltip: ({ theme }) => { + const isLight = theme.palette.mode === 'light'; + const shadow = isLight + ? `0 10px 30px ${alpha('#000', 0.12)}, 0 2px 8px ${alpha('#000', 0.08)}` + : (() => { + const green = theme.palette.primary.main; + return `0 10px 30px ${alpha(green, 0.28)}, 0 2px 8px ${alpha(green, 0.2)}, 0 0 1px ${alpha(green, 0.32)}`; + })(); + + return { + boxShadow: shadow, + } as const; + }, + arrow: ({ theme }) => { + return { + color: theme.palette.divider + } as const; + } + } +}; From 19fb093cecf9920565282a5a396e3c6c8dc900b2 Mon Sep 17 00:00:00 2001 From: SplinterSword Date: Tue, 11 Nov 2025 23:20:54 +0530 Subject: [PATCH 2/2] Made green box shadow the default even if no theme is provided Signed-off-by: SplinterSword --- src/custom/CustomTooltip/customTooltip.tsx | 37 ++++++++++++++-------- src/theme/components/tooltip.modifier.ts | 26 +++++++++------ 2 files changed, 40 insertions(+), 23 deletions(-) diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx index 2315b726f..55993a48f 100644 --- a/src/custom/CustomTooltip/customTooltip.tsx +++ b/src/custom/CustomTooltip/customTooltip.tsx @@ -1,7 +1,7 @@ import _ from 'lodash'; import React from 'react'; import type { Theme } from '@mui/material/styles'; -import { alpha } from '@mui/material'; +import { alpha, useTheme } from '@mui/material'; import { Tooltip, TooltipProps } from '../../base'; import { WHITE } from '../../theme'; import { RenderMarkdownTooltip } from '../Markdown'; @@ -29,10 +29,12 @@ function CustomTooltip({ componentsProps = {}, ...props }: CustomTooltipProps): JSX.Element { + const theme = useTheme(); + return ( delay when moving between siblings + enterNextDelay={400} leaveDelay={700} componentsProps={_.merge( { @@ -42,29 +44,36 @@ function CustomTooltip({ color: WHITE, maxWidth: '600px', fontSize: fontSize || (variant === 'standard' ? '1rem' : '0.75rem'), - fontWeight: fontWeight, + fontWeight, borderRadius: '0.5rem', padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem', - boxShadow: (theme: Theme) => { - if (theme.palette.mode === 'light') { + boxShadow: (themeArg?: Theme) => { + const t = themeArg || theme; + const isDefaultTheme = t.palette.primary.main === '#1976d2'; + console.log(isDefaultTheme) + + if (t?.palette?.mode === 'light' && !isDefaultTheme) { return 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px'; } - const green = theme.palette.primary.main; - return `0 10px 30px ${alpha(green, 0.28)}, 0 2px 8px ${alpha(green, 0.2)}, 0 0 1px ${alpha(green, 0.32)}`; - } - } + + const green = '#00B39F'; + return `0 10px 30px ${alpha(green, 0.28)}, + 0 2px 8px ${alpha(green, 0.2)}, + 0 0 1px ${alpha(green, 0.32)}`; + }, + }, }, popper: { sx: { zIndex: 9999999999, - opacity: '1' - } + opacity: '1', + }, }, arrow: { sx: { - color: bgColor - } - } + color: bgColor, + }, + }, }, componentsProps )} diff --git a/src/theme/components/tooltip.modifier.ts b/src/theme/components/tooltip.modifier.ts index 0c906bfbe..f7ca97cb8 100644 --- a/src/theme/components/tooltip.modifier.ts +++ b/src/theme/components/tooltip.modifier.ts @@ -4,22 +4,30 @@ import type { Components, Theme } from '@mui/material/styles'; export const MuiTooltip: Components['MuiTooltip'] = { styleOverrides: { tooltip: ({ theme }) => { + // Detect whether this is the default MUI theme (no ThemeProvider) + const isDefaultTheme = theme.palette.primary.main === '#1976d2'; // MUI default blue const isLight = theme.palette.mode === 'light'; - const shadow = isLight - ? `0 10px 30px ${alpha('#000', 0.12)}, 0 2px 8px ${alpha('#000', 0.08)}` - : (() => { - const green = theme.palette.primary.main; - return `0 10px 30px ${alpha(green, 0.28)}, 0 2px 8px ${alpha(green, 0.2)}, 0 0 1px ${alpha(green, 0.32)}`; - })(); + + // Conditional shadow logic + const shadow = + isLight && !isDefaultTheme + ? `0 10px 30px ${alpha('#000', 0.12)}, 0 2px 8px ${alpha('#000', 0.08)}` + : (() => { + const green = '#00B39F'; + return `0 10px 30px ${alpha(green, 0.28)}, + 0 2px 8px ${alpha(green, 0.2)}, + 0 0 1px ${alpha(green, 0.32)}`; + })(); return { boxShadow: shadow, } as const; }, + arrow: ({ theme }) => { return { - color: theme.palette.divider + color: theme.palette.divider, } as const; - } - } + }, + }, };