Modified the Box Shadow of Tooltip Component for Darkmode

Signed-off-by: SplinterSword <[email protected]>

Author: SplinterSword

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: {

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<Theme> = {
   MuiAppBar,
@@ -42,5 +43,6 @@ export const components: Components<Theme> = {
   MuiButtonGroup,
   MuiButton,
   MuiListItem,
+  MuiTooltip,
   ...MuiTableCombineTheme
 };

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<Theme>['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;
+    }
+  }
+};