style(tooltip): changes made using sistentThemeProvider

Signed-off-by: Pratik Chandra Pal <[email protected]>
layer5io · Dec 4, 2024 · b819b3a · b819b3a
1 parent 438bb87
commit b819b3a
Showing 1 changed file with 48 additions and 46 deletions.
diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx
@@ -1,8 +1,6 @@
-import { Tooltip, type TooltipProps } from '@mui/material';
-import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
+import { Tooltip, Typography, styled, type TooltipProps } from '@mui/material';
 import React from 'react';
-import { WHITE } from '../../theme';
+import { SistentThemeProvider, WHITE } from '../../theme';
 import { RenderMarkdownTooltip } from '../Markdown';
 
 type CustomTooltipProps = {
@@ -15,8 +13,10 @@ type CustomTooltipProps = {
   bgColor?: string;
 } & Omit<TooltipProps, 'title' | 'onClick'>;
 
-const StyledFontWrapper = styled(Typography)(() => ({
-  fontFamily: ['Qanelas Soft Regular'].join(',')
+const StyledFontWrapper = styled(Typography)(({ theme }) => ({
+  ...theme.typography.textH2Medium,
+  fontSize: '1rem',
+  lineHeight: '1.5rem'
 }));
 
 function CustomTooltip({
@@ -31,48 +31,50 @@ function CustomTooltip({
   ...props
 }: CustomTooltipProps): JSX.Element {
   return (
-    <Tooltip
-      componentsProps={{
-        tooltip: {
-          sx: {
-            background: bgColor,
-            color: WHITE,
-            fontSize: fontSize || (variant === 'standard' ? '1rem' : '0.75rem'),
-            fontWeight: { fontWeight },
-            borderRadius: '0.5rem',
-            padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem',
-            boxShadow:
-              'rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px'
-          }
-        },
-        popper: {
-          sx: {
-            zIndex: 9999999999,
-            opacity: '1'
-          }
-        },
-        arrow: {
-          sx: {
-            color: bgColor
+    <SistentThemeProvider>
+      <Tooltip
+        componentsProps={{
+          tooltip: {
+            sx: {
+              background: bgColor,
+              color: WHITE,
+              fontSize: fontSize || (variant === 'standard' ? '1rem' : '0.75rem'),
+              fontWeight: { fontWeight },
+              borderRadius: '0.5rem',
+              padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem',
+              boxShadow:
+                'rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px'
+            }
+          },
+          popper: {
+            sx: {
+              zIndex: 9999999999,
+              opacity: '1'
+            }
+          },
+          arrow: {
+            sx: {
+              color: bgColor
+            }
           }
+        }}
+        title={
+          typeof title === 'string' ? (
+            <StyledFontWrapper>
+              <RenderMarkdownTooltip content={title} />
+            </StyledFontWrapper>
+          ) : (
+            title
+          )
         }
-      }}
-      title={
-        typeof title === 'string' ? (
-          <StyledFontWrapper>
-            <RenderMarkdownTooltip content={title} />
-          </StyledFontWrapper>
-        ) : (
-          title
-        )
-      }
-      placement={placement}
-      arrow
-      onClick={onClick}
-      {...props}
-    >
-      {children}
-    </Tooltip>
+        placement={placement}
+        arrow
+        onClick={onClick}
+        {...props}
+      >
+        {children}
+      </Tooltip>
+    </SistentThemeProvider>
   );
 }