Merge pull request #601 from dragon-slayer875/revert-600-master

Revert "Update CustomTooltip to format markdown links"
layer5io · May 2, 2024 · 6945a32 · 6945a32
2 parents 9e10b9b + b35a5bc
commit 6945a32
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 33 deletions.
diff --git a/src/custom/CustomTooltip/customTooltip.tsx b/src/custom/CustomTooltip/customTooltip.tsx
@@ -1,37 +1,14 @@
 import { Tooltip, type TooltipProps } from '@mui/material';
 import React from 'react';
-import { CHARCOAL, KEPPEL, WHITE } from '../../theme';
+import { CHARCOAL, WHITE } from '../../theme';
 
-export type CustomTooltipProps = {
-  title: string;
+type CustomTooltipProps = {
+  title: string | React.ReactNode | JSX.Element;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   children: React.ReactNode;
   fontSize?: string;
 } & Omit<TooltipProps, 'title' | 'onClick'>;
 
-function getHyperLinkWithDescription(description: string) {
-  const markdownLinkRegex = /\[([^\]]+)]\((https?:\/\/[^\s]+)\)/g;
-  const urlRegex = /(https?:\/\/[^\s]+)/g;
-
-  let processedDescription = description?.replace(markdownLinkRegex, (match, text, url) => {
-    return `<a href="${url}" style="color: ${KEPPEL};" target="_blank" rel="noreferrer">${text}</a>`;
-  });
-
-  if (!markdownLinkRegex.test(description)) {
-    processedDescription = processedDescription?.replace(
-      urlRegex,
-      (url) =>
-        `<a href="${url}" style="color: ${KEPPEL};" target="_blank" rel="noreferrer">${url}</a>`
-    );
-  }
-
-  return processedDescription;
-}
-
-export function getHyperLinkDiv(text: string) {
-  return <div dangerouslySetInnerHTML={{ __html: getHyperLinkWithDescription(text) }} />;
-}
-
 function CustomTooltip({
   title,
   onClick,
@@ -58,7 +35,7 @@ function CustomTooltip({
           }
         }
       }}
-      title={getHyperLinkDiv(title)}
+      title={title}
       placement={placement}
       arrow
       onClick={onClick}

diff --git a/src/custom/Feedback/FeedbackButton.tsx b/src/custom/Feedback/FeedbackButton.tsx
@@ -30,8 +30,20 @@ import {
   StyledTextArea
 } from './style';
 
-const tooltipContent =
-  'Some account and system information may be sent to Layer5. We will use it to fix problems and improve our services, subject to our [Privacy Policy](https://layer5.io/company/legal/privacy) and [Terms of Service](https://layer5.io/company/legal/terms-of-service). We may email you for more information or updates.';
+const tooltipContent = (
+  <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">
+      Privacy Policy
+    </StyledLink>{' '}
+    and{' '}
+    <StyledLink target="_blank" href="https://layer5.io/company/legal/terms-of-service">
+      Terms of Service
+    </StyledLink>
+    . We may email you for more information or updates.
+  </p>
+);
 
 interface FeedbackDataItem {
   icon: JSX.Element;
@@ -187,7 +199,7 @@ const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
               leftHeaderIcon={<FeedbackIcon />}
               title="Feedback"
               helpArea={
-                <CustomTooltip placement="top" title={tooltipContent}>
+                <CustomTooltip placement="top" title={tooltipContent} arrow>
                   <HelperWrapper>
                     <QuestionIcon width={'30'} height={'30'} />
                   </HelperWrapper>

diff --git a/src/custom/ModalCard/ModalCard.tsx b/src/custom/ModalCard/ModalCard.tsx
@@ -37,9 +37,7 @@ function ModalCard({
     <ModalWrapper>
       <HeaderModal>
         {leftHeaderIcon && (
-          <div style={{ display: 'flex', alignItems: 'center', fill: 'white' }}>
-            {leftHeaderIcon}
-          </div>
+          <div style={{ display: 'flex', alignItems: 'center' }}>{leftHeaderIcon}</div>
         )}
         {title && (
           <>