Made green box shadow the default even if no theme is provided

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

Author: SplinterSword

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 (
     <Tooltip
       enterDelay={150}
-      enterNextDelay={400} //->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
       )}

src/theme/components/tooltip.modifier.ts

@@ -4,22 +4,30 @@ 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';
-      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;
-    }
-  }
+    },
+  },
 };