improve code for all components

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

Author: saurabhraghuvanshii

src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx

@@ -144,6 +144,20 @@ const CollaboratorAvatarGroup = ({
           return (
             <CustomTooltip
               key={clientID}
+              componentsProps={{
+                tooltip: {
+                  sx: {
+                    background: theme.palette.background.paper,
+                    color: theme.palette.text.primary,
+                    boxShadow: theme.shadows[4]
+                  }
+                },
+                arrow: {
+                  sx: {
+                    color: theme.palette.background.paper
+                  }
+                }
+              }}
               title={
                 <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
                   <Typography

src/custom/CustomTooltip/customTooltip.tsx

@@ -1,6 +1,7 @@
+import _ from 'lodash';
 import React from 'react';
 import { Tooltip, TooltipProps } from '../../base';
-import { useTheme } from '../../theme';
+import { WHITE } from '../../theme';
 import { RenderMarkdownTooltip } from '../Markdown';
 
 type CustomTooltipProps = {
@@ -10,6 +11,7 @@ type CustomTooltipProps = {
   fontSize?: string;
   fontWeight?: number;
   variant?: 'standard' | 'small';
+  bgColor?: string;
   componentsProps?: TooltipProps['componentsProps'];
 } & Omit<TooltipProps, 'title' | 'onClick'>;
 
@@ -21,41 +23,42 @@ function CustomTooltip({
   fontSize,
   fontWeight = 400,
   variant = 'standard',
+  bgColor = '#141414',
   componentsProps = {},
   ...props
 }: CustomTooltipProps): JSX.Element {
-  const theme = useTheme();
-
   return (
     <Tooltip
       enterTouchDelay={0}
       leaveTouchDelay={2000}
-      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={_.merge(
+        {
+          tooltip: {
+            sx: {
+              background: bgColor,
+              color: WHITE,
+              maxWidth: '600px',
+              fontSize: fontSize || (variant === 'standard' ? '1rem' : '0.75rem'),
+              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'
+            }
+          },
+          popper: {
+            sx: {
+              zIndex: 9999999999,
+              opacity: '1'
+            }
+          },
+          arrow: {
+            sx: {
+              color: bgColor
+            }
           }
         },
-        ...componentsProps
-      }}
+        componentsProps
+      )}
       title={typeof title === 'string' ? <RenderMarkdownTooltip content={title} /> : title}
       placement={placement}
       arrow

src/custom/Markdown/style.tsx

@@ -27,7 +27,7 @@ export const StyledMarkdownP = styled('p')(({ theme }) => ({
 }));
 
 export const StyledMarkdownTooltipP = styled('p')(({ theme }) => ({
-  color: theme.palette.text.primary,
+  color: theme.palette.text.constant?.white || '#ffffff',
   marginBlock: '0px',
   fontFamily: 'inherit'
 }));

src/theme/theme.ts

@@ -1,8 +1,8 @@
 import { Interactiveness, PaletteMode, createTheme } from '@mui/material';
+import _ from 'lodash';
 import { components } from './components';
 import { darkModePalette, lightModePalette } from './palette';
 import { typography } from './typography';
-import _ from 'lodash';
 
 export const drawerWidth = 240;
 
@@ -11,22 +11,23 @@ export const createCustomTheme = (mode: PaletteMode, brandPalette?: Interactiven
 
   console.log('Creating theme with mode:', mode, 'and brandPalette:', brandPalette);
 
-  const customBrandedTheme = brandPalette ? {
-    primary: {
-        main: brandPalette.default ,
-        secondary: brandPalette.hover,
-    },
-    secondary: {
-      main: brandPalette.secondary,
-      secondary: brandPalette.secondary,
-    },
-    background: {
-      brand: brandPalette
-    }
-  } : {};
+  const customBrandedTheme = brandPalette
+    ? {
+        primary: {
+          main: brandPalette.default,
+          secondary: brandPalette.hover,
+        },
+        secondary: {
+          main: brandPalette.secondary,
+          secondary: brandPalette.secondary,
+        },
+        background: {
+          brand: brandPalette
+        }
+      }
+    : {};
 
   const themePalette = _.merge({}, basePalette, customBrandedTheme);
-  
 
   return createTheme({
     palette: {