feat: added light mode support

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

Author: saurabhraghuvanshii

src/custom/CollaboratorAvatarGroup/CollaboratorAvatarGroup.tsx

@@ -1,6 +1,6 @@
 import { ExpandMore } from '@mui/icons-material';
 import { MouseEvent, useState } from 'react';
-import { Avatar, AvatarGroup, Button, Popover, Typography, Divider } from '../../base';
+import { Avatar, AvatarGroup, Button, Divider, Popover, Typography } from '../../base';
 import { iconSmall } from '../../constants/iconsSizes';
 import { styled, useTheme } from '../../theme';
 import { DARK_TEAL_BLUE } from '../../theme/colors/colors';
@@ -144,9 +144,20 @@ const CollaboratorAvatarGroup = ({
           return (
             <CustomTooltip
               key={clientID}
+              useThemeColors={true} // Enable theme-based colors
               title={
                 <div style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column' }}>
-                  <Typography style={{ display: 'flex', justifyContent: 'center', flexDirection: 'column', margin: 'auto', fontSize: '1rem' }}>{user.name}</Typography>
+                  <Typography
+                    style={{
+                      display: 'flex',
+                      justifyContent: 'center',
+                      flexDirection: 'column',
+                      margin: 'auto',
+                      fontSize: '1rem'
+                    }}
+                  >
+                    {user.name}
+                  </Typography>
                   <Divider />
                   <Button
                     size="small"
@@ -156,7 +167,7 @@ const CollaboratorAvatarGroup = ({
                       fontSize: '1rem',
                       padding: '2px 8px',
                       minWidth: 'auto',
-                      marginTop: '4px'
+                      marginTop: '8px'
                     }}
                   >
                     Open Recents

src/custom/CustomTooltip/customTooltip.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material/styles';
 import _ from 'lodash';
 import React from 'react';
 import { Tooltip, TooltipProps } from '../../base';
@@ -12,6 +13,8 @@ type CustomTooltipProps = {
   fontWeight?: number;
   variant?: 'standard' | 'small';
   bgColor?: string;
+  textColor?: string;
+  useThemeColors?: boolean; // Add prop to enable theme-based colors
   componentsProps?: TooltipProps['componentsProps'];
 } & Omit<TooltipProps, 'title' | 'onClick'>;
 
@@ -24,9 +27,25 @@ function CustomTooltip({
   fontWeight = 400,
   variant = 'standard',
   bgColor = '#141414',
+  textColor = WHITE,
+  useThemeColors = false, // Default to false for backward compatibility
   componentsProps = {},
   ...props
 }: CustomTooltipProps): JSX.Element {
+  const theme = useTheme();
+
+  // Determine colors based on theme when useThemeColors is true
+  const tooltipBgColor = useThemeColors
+    ? theme.palette.mode === 'dark'
+      ? '#141414'
+      : '#ffffff'
+    : bgColor;
+
+  const tooltipTextColor = useThemeColors
+    ? theme.palette.mode === 'dark'
+      ? WHITE
+      : '#000000'
+    : textColor;
   return (
     <Tooltip
       enterTouchDelay={0}
@@ -35,14 +54,17 @@ function CustomTooltip({
         {
           tooltip: {
             sx: {
-              background: bgColor,
-              color: WHITE,
+              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: 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px'
+              boxShadow:
+                useThemeColors && theme.palette.mode === 'light'
+                  ? 'rgba(0, 0, 0, 0.1) 0px 4px 10px, rgba(0, 0, 0, 0.05) 0px 2px 4px'
+                  : 'rgba(0, 0, 0, 0.6) 0px 4px 10px, rgba(0, 0, 0, 0.5) 0px 2px 4px'
             }
           },
           popper: {
@@ -53,7 +75,7 @@ function CustomTooltip({
           },
           arrow: {
             sx: {
-              color: bgColor
+              color: tooltipBgColor
             }
           }
         },