From d26465189c8e10defbe696de35a0f98cee1dd904 Mon Sep 17 00:00:00 2001
From: lianahus <liana@ethereum.org>
Date: Mon, 6 Mar 2023 16:09:50 +0100
Subject: [PATCH] changed the bg of tooltips

---
 .../lib/components/file-decoration-icon.tsx   | 58 +++++++++----------
 .../file-decoration-tooltip.tsx               | 33 +++++------
 .../src/lib/components/custom-tooltip.tsx     | 17 ++++--
 .../panel/src/lib/plugins/panel-header.tsx    | 16 +++--
 .../src/lib/compiler-container.tsx            |  3 +-
 5 files changed, 66 insertions(+), 61 deletions(-)

diff --git a/libs/remix-ui/file-decorators/src/lib/components/file-decoration-icon.tsx b/libs/remix-ui/file-decorators/src/lib/components/file-decoration-icon.tsx
index f05cea9f65..3563e17dc1 100644
--- a/libs/remix-ui/file-decorators/src/lib/components/file-decoration-icon.tsx
+++ b/libs/remix-ui/file-decorators/src/lib/components/file-decoration-icon.tsx
@@ -8,44 +8,42 @@ import FileDecorationTooltip from './filedecorationicons/file-decoration-tooltip
 import FileDecorationWarningIcon from './filedecorationicons/file-decoration-warning-icon'
 
 export type fileDecorationProps = {
-    file: FileType,
-    fileDecorations: fileDecoration[]
+  file: FileType,
+  fileDecorations: fileDecoration[]
 }
 
 export const FileDecorationIcons = (props: fileDecorationProps) => {
-    const [states, setStates] = useState<fileDecoration[]>([])
-    useEffect(() => {
-        //console.log(props.file)
-        //console.log(props.fileState)
-        setStates(props.fileDecorations.filter((fileDecoration) => fileDecoration.path === props.file.path || `${fileDecoration.workspace.name}/${fileDecoration.path}` === props.file.path))
-    }, [props.fileDecorations])
+  const [states, setStates] = useState<fileDecoration[]>([])
+  useEffect(() => {
+    //console.log(props.file)
+    //console.log(props.fileState)
+    setStates(props.fileDecorations.filter((fileDecoration) => fileDecoration.path === props.file.path || `${fileDecoration.workspace.name}/${fileDecoration.path}` === props.file.path))
+  }, [props.fileDecorations])
 
+  const getTags = function () {
+    if (states && states.length) {
+      const elements: JSX.Element[] = []
 
-    const getTags = function () {
-        if (states && states.length) {
-            const elements: JSX.Element[] = []
-            
-            for (const [index, state] of states.entries()) {
-                switch (state.fileStateType) {
-                    case fileDecorationType.Error:
-                        elements.push(<FileDecorationTooltip key={index} index={index} fileDecoration={state} icon={<FileDecorationErrorIcon fileDecoration={state} key={index}/>}/>)
-                        break
-                    case fileDecorationType.Warning:
-                        elements.push(<FileDecorationTooltip key={index} index={index} fileDecoration={state} icon={<FileDecorationWarningIcon fileDecoration={state} key={index}/>}/>)
-                        break
-                    case fileDecorationType.Custom:
-                        elements.push(<FileDecorationTooltip key={index} index={index} fileDecoration={state} icon={<FileDecorationCustomIcon fileDecoration={state} key={index}/>}/>)
-                        break
-                }
-            }
-            
-            return elements
+      for (const [index, state] of states.entries()) {
+        switch (state.fileStateType) {
+          case fileDecorationType.Error:
+            elements.push(<FileDecorationTooltip key={index} index={index} fileDecoration={state} icon={<FileDecorationErrorIcon fileDecoration={state} key={index}/>}/>)
+            break
+          case fileDecorationType.Warning:
+            elements.push(<FileDecorationTooltip key={index} index={index} fileDecoration={state} icon={<FileDecorationWarningIcon fileDecoration={state} key={index}/>}/>)
+            break
+          case fileDecorationType.Custom:
+            elements.push(<FileDecorationTooltip key={index} index={index} fileDecoration={state} icon={<FileDecorationCustomIcon fileDecoration={state} key={index}/>}/>)
+            break
         }
+      }
+      return elements
     }
+  }
 
-    return <>
-        {getTags()}
-    </>
+  return <>
+    {getTags()}
+  </>
 }
 
 export default FileDecorationIcons
\ No newline at end of file
diff --git a/libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-tooltip.tsx b/libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-tooltip.tsx
index 1d87846192..cd9a9f4114 100644
--- a/libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-tooltip.tsx
+++ b/libs/remix-ui/file-decorators/src/lib/components/filedecorationicons/file-decoration-tooltip.tsx
@@ -3,30 +3,29 @@ import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import { fileDecoration } from "../../types";
 
 const FileDecorationTooltip = (props: {
-    fileDecoration: fileDecoration,
-    icon: JSX.Element
-    index: number
+  fileDecoration: fileDecoration,
+  icon: JSX.Element
+  index: number
 },
 ) => {
     const getComments = function (fileDecoration: fileDecoration) {
-        if (fileDecoration.comment) {
-            const comments = Array.isArray(fileDecoration.comment) ? fileDecoration.comment : [fileDecoration.comment]
-            return comments.map((comment, index) => {
-                return <div key={index}>{comment}<br></br></div>
-            })
-        }
+      if (fileDecoration.comment) {
+        const comments = Array.isArray(fileDecoration.comment) ? fileDecoration.comment : [fileDecoration.comment]
+        return comments.map((comment, index) => {
+          return <div key={index}>{comment}<br></br></div>
+        })
+      }
     }
 
     return <OverlayTrigger
-        key={`overlaytrigger-${props.fileDecoration.path}-${props.index}`}
-        placement='auto'
-        overlay={
-            <Tooltip id={`error-tooltip-${props.fileDecoration.path}`}>
-                <>{getComments(props.fileDecoration)}</>
-            </Tooltip>
-        }
+      key={`overlaytrigger-${props.fileDecoration.path}-${props.index}`}
+      placement='auto'
+      overlay={
+        <Tooltip id={`error-tooltip-${props.fileDecoration.path}`}>
+          <>{getComments(props.fileDecoration)}</>
+        </Tooltip>
+      }
     ><div>{props.icon}</div></OverlayTrigger>
-
 }
 
 
diff --git a/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx b/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
index 6c55ed06c8..0f1f704653 100644
--- a/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
+++ b/libs/remix-ui/helper/src/lib/components/custom-tooltip.tsx
@@ -1,19 +1,28 @@
 import React from 'react';
 import { Fragment } from 'react';
-import { OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { OverlayTrigger, Tooltip, Popover } from 'react-bootstrap';
 import { CustomTooltipType } from '../../types/customtooltip'
 
 
 export function CustomTooltip({ children, placement, tooltipId, tooltipClasses, tooltipText, tooltipTextClasses, delay }: CustomTooltipType) {
 
+  if (typeof tooltipText !== 'string') {
+    const newTooltipText = React.cloneElement(tooltipText, {
+      className: " bg-secondary text-danger text-wrap "
+    })
+    tooltipText = newTooltipText
+  }
+
   return (
     <Fragment>
       <OverlayTrigger
         placement={placement}
         overlay={
-          <Tooltip id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} className={tooltipClasses}>
-            {typeof tooltipText === 'string' ? (<span className={tooltipTextClasses}>{tooltipText}</span>) : (tooltipText)}
-          </Tooltip>
+          <Popover id={`popover-positioned-${placement}`}>
+            <Popover.Content id={!tooltipId ? `${tooltipText}Tooltip` : tooltipId} style={{minWidth: "fit-content"}} className={"text-wrap bg-secondary w-100 text-success " + tooltipClasses}>
+              {typeof tooltipText === 'string' ? (<span className={"text-wrap bg-secondary text-warning p-1 " + {tooltipTextClasses}}>{tooltipText}</span>) : (tooltipText)}
+            </Popover.Content>
+          </Popover>
         }
         delay={delay}
       >
diff --git a/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
index 229ca41581..6bf5a07e83 100644
--- a/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
+++ b/libs/remix-ui/panel/src/lib/plugins/panel-header.tsx
@@ -39,16 +39,14 @@ const RemixUIPanelHeader = (props: RemixPanelProps) => {
         <div className="d-flex flex-row">
           <div className="d-flex flex-row">
             {plugin?.profile?.maintainedBy?.toLowerCase() === "remix" && (
-              <OverlayTrigger
-                placement="right"
-                overlay={
-                  <Tooltip id="maintainedByTooltip" className="text-nowrap">
-                    <span>{"Maintained by Remix"}</span>
-                  </Tooltip>
-                }
-              >
+              <CustomTooltip
+                placement="right-end"
+                tooltipId="maintainedByTooltip"
+                tooltipClasses="text-nowrap"
+                tooltipText="Maintained by Remix"
+                >
                 <i aria-hidden="true" className="text-success mt-1 px-1 fas fa-check"></i>
-              </OverlayTrigger>
+              </CustomTooltip>
             )}
           </div>
           <div className="swapitHeaderInfoSection d-flex justify-content-between" data-id='swapitHeaderInfoSectionId' onClick={toggleClass}>
diff --git a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
index 7100b1dbf8..5ac1527627 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx
@@ -991,7 +991,8 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               placement="right"
               tooltipId="overlay-tooltip-compile-run-doc"
               tooltipText={<div className="text-left p-2">
-                  <div>Choose the script to execute right after compilation by adding the `dev-run-script` natspec tag, as in:</div>
+                  <div>Choose the script to execute right after compilation
+                    by adding the `dev-run-script` natspec tag, as in:</div>
                   <pre>
                     <code>
                     /**<br />