feat: added light mode support

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';
@@ -146,7 +146,17 @@ const CollaboratorAvatarGroup = ({
               key={clientID}
               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 +166,7 @@ const CollaboratorAvatarGroup = ({
                       fontSize: '1rem',
                       padding: '2px 8px',
                       minWidth: 'auto',
-                      marginTop: '4px'
+                      marginTop: '8px'
                     }}
                   >
                     Open Recents

src/custom/CustomTooltip/customTooltip.tsx

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