Merge pull request #6257 from ethereum/feTooltip

fix FE tooltip

Author: Aniket-Engg

apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css

@@ -5968,6 +5968,13 @@ textarea.form-control-lg {
   width: var(--bs-popover-arrow-width);
   height: var(--bs-popover-arrow-height);
 }
+.custom-popover .popover-arrow {
+  position: absolute;
+  display: block;
+  width: 10px;
+  height: 5px;
+  margin: 0 5px;
+}
 .popover .popover-arrow::before, .popover .popover-arrow::after {
   position: absolute;
   display: block;

apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css

@@ -5953,6 +5953,13 @@ textarea.form-control-lg {
   width: var(--bs-popover-arrow-width);
   height: var(--bs-popover-arrow-height);
 }
+.custom-popover .popover-arrow {
+  position: absolute;
+  display: block;
+  width: 10px;
+  height: 5px;
+  margin: 0 5px;
+}
 .popover .popover-arrow::before, .popover .popover-arrow::after {
   position: absolute;
   display: block;

libs/remix-ui/helper/src/lib/components/feedbackAlert.tsx

@@ -14,7 +14,7 @@ export function FeedbackAlert ({ message, askGPT }: FeedbackAlertProps) {
     <RenderIf condition={showAlert}>
       <>
         <span> { message } </span>
-        <div className="close" data-id="renderer" onClick={handleCloseAlert}>
+        <div className="btn-close" data-id="renderer" onClick={handleCloseAlert}>
           <i className="fas fa-times"></i>
         </div>
         <div className="d-flex pt-1 flex-row-reverse">

libs/remix-ui/modal-dialog/src/lib/remix-ui-modal-dialog.tsx

@@ -103,7 +103,7 @@ export const ModalDialog = (props: ModalDialogProps) => {
               {props.title && props.title}
             </h6>
             {!props.showCancelIcon && (
-              <span data-id={`${props.id}-modal-close`} className="close" aria-label="Close" onClick={() => handleHide()}>
+              <span data-id={`${props.id}-modal-close`} className="btn-close" aria-label="Close" onClick={() => handleHide()}>
               </span>
             )}
           </div>

libs/remix-ui/toaster/src/lib/toaster.tsx

@@ -144,7 +144,7 @@ export const Toaster = (props: ToasterProps) => {
             )}
           </span>
           <span style={{ alignSelf: 'baseline' }}>
-            <button data-id="tooltipCloseButton" className="fas fa-times btn-info mx-1 p-0" onClick={closeTheToaster}></button>
+            <button data-id="tooltipCloseButton" className="fas fa-times btn-close p-0 mt-2" onClick={closeTheToaster}></button>
           </span>
         </div>
       )}

libs/remix-ui/workspace/src/lib/components/flat-tree.tsx

@@ -320,7 +320,7 @@ export const FlatTree = (props: FlatTreeProps) => {
             <Popover id='popover-basic'
               placement='top'
               ref={ref}
-              className='popover'
+              className='custom-popover'
               style={
                 {
                   position: 'fixed',
@@ -329,7 +329,7 @@ export const FlatTree = (props: FlatTreeProps) => {
                   minWidth: 'fit-content'
                 }
               }>
-              <Popover.Body className='text-wrap p-1 px-2 bg-secondary w-100'>
+              <Popover.Body className='text-wrap p-1 px-2 bg-body w-100'>
                 {mouseOverTarget && mouseOverTarget.path}
               </Popover.Body>
             </Popover>