feat(btn): tooltip styles

Signed-off-by: captain-Akshay <[email protected]>

src/custom/CustomTooltip/customTooltip.tsx

@@ -1,25 +1,48 @@
-import { type TooltipProps } from '@mui/material';
+import { Tooltip, type TooltipProps } from '@mui/material';
 import React from 'react';
-import { Tooltip } from '../../base/Tooltip';
+import { CHARCOAL, WHITE } from '../../theme';
 
 type CustomTooltipProps = {
-  title: string;
+  title: string | React.ReactNode;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   children: React.ReactNode;
 } & Omit<TooltipProps, 'title' | 'onClick'>;
 
-function StyledTooltip({
+function CustomTooltip({
   title,
   onClick,
   placement,
   children,
   ...props
 }: CustomTooltipProps): JSX.Element {
   return (
-    <Tooltip title={title} placement={placement} onClick={onClick} arrow {...props}>
+    <Tooltip
+      componentsProps={{
+        tooltip: {
+          sx: {
+            background: CHARCOAL,
+            color: WHITE,
+            fontSize: '0.75rem',
+            borderRadius: '0.9375rem',
+            padding: '0.9rem',
+            zIndex: '999999'
+          }
+        },
+        popper: {
+          sx: {
+            opacity: '1'
+          }
+        }
+      }}
+      title={title}
+      placement={placement}
+      onClick={onClick}
+      arrow
+      {...props}
+    >
       {children}
     </Tooltip>
   );
 }
 
-export default StyledTooltip;
+export default CustomTooltip;

src/custom/Feedback/FeedbackButton.tsx

@@ -1,6 +1,5 @@
 import Typography from '@mui/material/Typography';
 import React, { CSSProperties, useRef, useState } from 'react';
-import { Tooltip } from '../../base/Tooltip';
 import {
   CalenderIcon,
   CloseIcon,
@@ -10,6 +9,7 @@ import {
   SuccessIcon
 } from '../../icons';
 import { CULTURED } from '../../theme';
+import { CustomTooltip } from '../CustomTooltip';
 import { ModalCard } from '../ModalCard';
 import {
   ActionWrapper,
@@ -25,14 +25,13 @@ import {
   FeedbackTextArea,
   HelperWrapper,
   InnerComponentWrapper,
-  MeetWrapper,
   StyledCheckbox,
   StyledLink,
   StyledTextArea
 } from './style';
 
 const tooltipContent = (
-  <MeetWrapper>
+  <p>
     Some account and system information may be sent to Layer5. We will use it to fix problems and
     improve our services, subject to our{' '}
     <StyledLink target="_blank" href="https://layer5.io/company/legal/privacy">
@@ -43,7 +42,7 @@ const tooltipContent = (
       Terms of Service
     </StyledLink>
     . We may email you for more information or updates.
-  </MeetWrapper>
+  </p>
 );
 
 interface FeedbackDataItem {
@@ -184,11 +183,11 @@ const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
             leftHeaderIcon={<FeedbackIcon />}
             title="Feedback"
             helpArea={
-              <Tooltip placement="top" title={tooltipContent} arrow>
+              <CustomTooltip placement="top" title={tooltipContent} arrow>
                 <HelperWrapper>
                   <QuestionIcon width={'30'} height={'30'} />
                 </HelperWrapper>
-              </Tooltip>
+              </CustomTooltip>
             }
             helpText={'Help'}
             content={

src/custom/Feedback/style.tsx

@@ -180,10 +180,6 @@ export const StyledTextArea = styled('textarea')(({ theme }) => ({
   }
 }));
 
-export const MeetWrapper = styled('p')(({ theme }) => ({
-  color: theme.palette.mode === 'dark' ? SNOW_WHITE : DARK_JUNGLE_GREEN
-}));
-
 export const StyledLink = styled('a')({
   textDecoration: 'underline',
   color: 'inherit',