update for light mode

Signed-off-by: saurabhraghuvanshii <saurabhsraghuvanshi@gmail.com>

Author: saurabhraghuvanshii

src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx

@@ -144,7 +144,6 @@ const CollaboratorAvatarGroup = ({
           return (
             <CustomTooltip
               key={clientID}
-              useThemeColors={true} // Enable theme-based colors
               title={
                 <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
                   <Typography

src/custom/CustomTooltip/customTooltip.tsx

@@ -1,8 +1,6 @@
-import _ from 'lodash';
 import React from 'react';
-import { useTheme } from '@mui/material/styles';
 import { Tooltip, TooltipProps } from '../../base';
-import { WHITE } from '../../theme';
+import { useTheme } from '../../theme';
 import { RenderMarkdownTooltip } from '../Markdown';
 
 type CustomTooltipProps = {
@@ -12,9 +10,6 @@ type CustomTooltipProps = {
   fontSize?: string;
   fontWeight?: number;
   variant?: 'standard' | 'small';
-  bgColor?: string;
-  textColor?: string;
-  useThemeColors?: boolean;
   componentsProps?: TooltipProps['componentsProps'];
 } & Omit<TooltipProps, 'title' | 'onClick'>;
 
@@ -26,55 +21,41 @@ function CustomTooltip({
   fontSize,
   fontWeight = 400,
   variant = 'standard',
-  bgColor = '#141414',
-  textColor = WHITE,
-  useThemeColors = false,
   componentsProps = {},
   ...props
 }: CustomTooltipProps): JSX.Element {
   const theme = useTheme();
-  
-  const tooltipBgColor = useThemeColors 
-    ? theme.palette.background.paper
-    : bgColor;
-    
-  const tooltipTextColor = useThemeColors
-    ? theme.palette.text.primary
-    : textColor;
+
   return (
     <Tooltip
       enterTouchDelay={0}
       leaveTouchDelay={2000}
-      componentsProps={_.merge(
-        {
-          tooltip: {
-            sx: {
-              background: tooltipBgColor,
-              color: tooltipTextColor,
-              maxWidth: '600px',
-              fontSize: fontSize || (variant === 'standard' ? '1rem' : '0.75rem'),
-              fontWeight: { fontWeight },
-              borderRadius: '0.5rem',
-              padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem',
-              boxShadow: useThemeColors
-                ? theme.shadows[4]
-                : 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px'
-            }
-          },
-          popper: {
-            sx: {
-              zIndex: 9999999999,
-              opacity: '1'
-            }
-          },
-          arrow: {
-            sx: {
-              color: tooltipBgColor
-            }
+      componentsProps={{
+        tooltip: {
+          sx: {
+            background: theme.palette.background.paper,
+            color: theme.palette.text.primary,
+            maxWidth: '600px',
+            fontSize: fontSize || (variant === 'standard' ? '1rem' : '0.75rem'),
+            fontWeight: { fontWeight },
+            borderRadius: '0.5rem',
+            padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem',
+            boxShadow: theme.shadows[4]
+          }
+        },
+        popper: {
+          sx: {
+            zIndex: 9999999999,
+            opacity: '1'
+          }
+        },
+        arrow: {
+          sx: {
+            color: theme.palette.background.paper
           }
         },
-        componentsProps
-      )}
+        ...componentsProps
+      }}
       title={typeof title === 'string' ? <RenderMarkdownTooltip content={title} /> : title}
       placement={placement}
       arrow

src/custom/Markdown/style.tsx

@@ -1,5 +1,4 @@
 import { styled } from '@mui/material';
-import { text } from '../../theme/colors/colors';
 
 export const StyledMarkdown = styled('a')(({ theme }) => ({
   color: theme.palette.background.brand?.default,
@@ -28,7 +27,7 @@ export const StyledMarkdownP = styled('p')(({ theme }) => ({
 }));
 
 export const StyledMarkdownTooltipP = styled('p')(({ theme }) => ({
-  color: theme.palette.text.constant?.white || text.inverse,
+  color: theme.palette.text.primary,
   marginBlock: '0px',
   fontFamily: 'inherit'
 }));