Merge pull request #1181 from SplinterSword/boxShadowToolTip

Modified the Box Shadow of Tooltip Component for Darkmode

Author: Rajesh-Nagarajan-11

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, useTheme } from '@mui/material';
 import { Tooltip, TooltipProps } from '../../base';
 import { WHITE } from '../../theme';
 import { RenderMarkdownTooltip } from '../Markdown';
@@ -27,10 +29,12 @@ function CustomTooltip({
   componentsProps = {},
   ...props
 }: CustomTooltipProps): JSX.Element {
+  const theme = useTheme();
+
   return (
     <Tooltip
       enterDelay={150}
-      enterNextDelay={400} //->delay when moving between siblings
+      enterNextDelay={400}
       leaveDelay={700}
       componentsProps={_.merge(
         {
@@ -40,23 +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: 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px'
-            }
+              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 = '#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
       )}

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,33 @@
+import { alpha } from '@mui/material';
+import type { Components, Theme } from '@mui/material/styles';
+
+export const MuiTooltip: Components<Theme>['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';
+
+      // 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,
+      } as const;
+    },
+  },
+};