From 24d1301220397e2a756179d33a5a8559ba1d3063 Mon Sep 17 00:00:00 2001
From: Rudraksh Tyagi <59254790+dragon-slayer875@users.noreply.github.com>
Date: Mon, 20 May 2024 01:03:49 +0530
Subject: [PATCH 1/2] chore: add markdown paragraph component for tooltips

Signed-off-by: Rudraksh Tyagi <59254790+dragon-slayer875@users.noreply.github.com>
---
 src/custom/Markdown/style.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/custom/Markdown/style.tsx b/src/custom/Markdown/style.tsx
index e399243a..829c3cf1 100644
--- a/src/custom/Markdown/style.tsx
+++ b/src/custom/Markdown/style.tsx
@@ -13,6 +13,11 @@ export const StyledMarkdownP = styled('p')(({ theme }) => ({
   ...theme.typography.textB1Regular
 }));
 
+export const StyledMarkdownTooltipP = styled('p')(({ theme }) => ({
+  color: theme.palette.text.default,
+  marginBlock: '0px'
+}));
+
 export const StyledMarkdownH1 = styled('h1')(({ theme }) => ({
   color: theme.palette.text.default
 }));

From c20b3689edc7ddd3164604d69263ac8156856406 Mon Sep 17 00:00:00 2001
From: Rudraksh Tyagi <59254790+dragon-slayer875@users.noreply.github.com>
Date: Mon, 20 May 2024 01:04:56 +0530
Subject: [PATCH 2/2] feat: add different markdown component for tooltips

Signed-off-by: Rudraksh Tyagi <59254790+dragon-slayer875@users.noreply.github.com>
---
 src/custom/CustomTooltip/customTooltip.tsx | 12 ++++----
 src/custom/Markdown/index.tsx              | 32 ++++++++++++++++++++--
 src/custom/index.tsx                       |  2 +-
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx
index e239aad1..d3027679 100644
--- a/src/custom/CustomTooltip/customTooltip.tsx
+++ b/src/custom/CustomTooltip/customTooltip.tsx
@@ -1,7 +1,7 @@
 import { Tooltip, type TooltipProps } from '@mui/material';
 import React from 'react';
 import { CHARCOAL, WHITE } from '../../theme';
-import RenderMarkdown from '../Markdown';
+import { RenderMarkdownTooltip } from '../Markdown';
 
 type CustomTooltipProps = {
   title: string | React.ReactNode | JSX.Element;
@@ -9,6 +9,7 @@ type CustomTooltipProps = {
   children: React.ReactNode;
   fontSize?: string;
   fontWeight?: number;
+  variant?: 'standard' | 'small';
 } & Omit<TooltipProps, 'title' | 'onClick'>;
 
 function CustomTooltip({
@@ -16,8 +17,9 @@ function CustomTooltip({
   onClick,
   placement,
   children,
-  fontSize = '1rem',
+  fontSize,
   fontWeight = 400,
+  variant = 'small',
   ...props
 }: CustomTooltipProps): JSX.Element {
   return (
@@ -27,10 +29,10 @@ function CustomTooltip({
           sx: {
             background: CHARCOAL,
             color: WHITE,
-            fontSize: { fontSize },
+            fontSize: fontSize || (variant === 'standard' ? '1rem' : '0.75rem'),
             fontWeight: { fontWeight },
             borderRadius: '0.5rem',
-            padding: '0.9rem'
+            padding: variant === 'standard' ? '0.9rem' : '0.5rem 0.75rem'
           }
         },
         popper: {
@@ -39,7 +41,7 @@ function CustomTooltip({
           }
         }
       }}
-      title={<RenderMarkdown content={typeof title === 'string' ? title : ''} />}
+      title={<RenderMarkdownTooltip content={typeof title === 'string' ? title : ''} />}
       placement={placement}
       arrow
       onClick={onClick}
diff --git a/src/custom/Markdown/index.tsx b/src/custom/Markdown/index.tsx
index b1d07ba2..2785cb0c 100644
--- a/src/custom/Markdown/index.tsx
+++ b/src/custom/Markdown/index.tsx
@@ -10,19 +10,22 @@ import {
   StyledMarkdownH5,
   StyledMarkdownH6,
   StyledMarkdownLi,
+  StyledMarkdownP,
   StyledMarkdownTd,
   StyledMarkdownTh,
+  StyledMarkdownTooltipP,
   StyledMarkdownUl
 } from './style';
 export interface RenderMarkdownProps {
   content: string;
 }
 
-const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
+export const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
   return (
     <ReactMarkdown
       remarkPlugins={[remarkGfm]}
       components={{
+        p: ({ ...props }) => <StyledMarkdownP>{props.children}</StyledMarkdownP>,
         a: ({ ...props }) => <StyledMarkdown>{props.children}</StyledMarkdown>,
         h1: ({ ...props }) => <StyledMarkdownH1>{props.children}</StyledMarkdownH1>,
         h2: ({ ...props }) => <StyledMarkdownH2>{props.children}</StyledMarkdownH2>,
@@ -44,4 +47,29 @@ const RenderMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
   );
 };
 
-export default RenderMarkdown;
+export const RenderMarkdownTooltip: React.FC<RenderMarkdownProps> = ({ content }) => {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        p: ({ ...props }) => <StyledMarkdownTooltipP>{props.children}</StyledMarkdownTooltipP>,
+        a: ({ ...props }) => <StyledMarkdown>{props.children}</StyledMarkdown>,
+        h1: ({ ...props }) => <StyledMarkdownH1>{props.children}</StyledMarkdownH1>,
+        h2: ({ ...props }) => <StyledMarkdownH2>{props.children}</StyledMarkdownH2>,
+        h3: ({ ...props }) => <StyledMarkdownH3>{props.children}</StyledMarkdownH3>,
+        h4: ({ ...props }) => <StyledMarkdownH4>{props.children}</StyledMarkdownH4>,
+        h5: ({ ...props }) => <StyledMarkdownH5>{props.children}</StyledMarkdownH5>,
+        h6: ({ ...props }) => <StyledMarkdownH6>{props.children}</StyledMarkdownH6>,
+        blockquote: ({ ...props }) => (
+          <StyledMarkdownBlockquote>{props.children}</StyledMarkdownBlockquote>
+        ),
+        ul: ({ ...props }) => <StyledMarkdownUl>{props.children}</StyledMarkdownUl>,
+        li: ({ ...props }) => <StyledMarkdownLi>{props.children}</StyledMarkdownLi>,
+        th: ({ ...props }) => <StyledMarkdownTh>{props.children}</StyledMarkdownTh>,
+        td: ({ ...props }) => <StyledMarkdownTd>{props.children}</StyledMarkdownTd>
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+};
diff --git a/src/custom/index.tsx b/src/custom/index.tsx
index eab584fd..97956f51 100644
--- a/src/custom/index.tsx
+++ b/src/custom/index.tsx
@@ -28,7 +28,7 @@ import { FlipCard, FlipCardProps } from './FlipCard';
 import { useWindowDimensions } from './Helpers/Dimension';
 import { useNotificationHandler } from './Helpers/Notification';
 import { LearningCard } from './LearningCard';
-import RenderMarkdown from './Markdown';
+import { RenderMarkdown } from './Markdown';
 import { ModalCard } from './ModalCard';
 import PopperListener, { IPopperListener } from './PopperListener';
 import ResponsiveDataTable, { ResponsiveDataTableProps } from './ResponsiveDataTable';