use same PLUS icon everywhere and ui fixes in umlgen

libs/remix-ui/run-tab/src/lib/components/account.tsx

@@ -202,7 +202,7 @@ export function AccountUI(props: AccountProps) {
         <FormattedMessage id="udapp.account" />
         <CustomTooltip placement={'top'} tooltipClasses="text-wrap" tooltipId="remixPlusWrapperTooltip" tooltipText={plusOpt.title}>
           <span id="remixRunPlusWraper">
-            <i id="remixRunPlus" className={`ml-2 fas fa-plus-circle udapp_icon ${plusOpt.classList}`} aria-hidden="true" onClick={newAccount}></i>
+            <i id="remixRunPlus" className={`ml-2 fas fa-plus udapp_icon ${plusOpt.classList}`} aria-hidden="true" onClick={newAccount}></i>
           </span>
         </CustomTooltip>
         <CustomTooltip placement={'top'} tooltipClasses="text-nowrap" tooltipId="remixSignMsgTooltip" tooltipText={<FormattedMessage id="udapp.signMsgUsingAccount" />}>

libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx

@@ -778,7 +778,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               tooltipClasses="text-nowrap"
               tooltipText={<FormattedMessage id="solidity.addACustomCompilerWithURL" />}
             >
-              <span className="far fa-plus border-0 p-0 ml-3" onClick={() => promptCompiler()}></span>
+              <span className="fas fa-plus border-0 p-0 ml-3" onClick={() => promptCompiler()}></span>
             </CustomTooltip>
             <CustomTooltip
               placement="bottom"

libs/remix-ui/solidity-uml-gen/src/lib/components/UmlDownload.tsx

@@ -67,6 +67,11 @@ interface UmlDownloadProps {
 export default function UmlDownload(props: UmlDownloadProps) {
   return (
     <Fragment>
+      <CustomTooltip
+        tooltipText="Download the UML"
+        tooltipId="genUMLundo"
+        placement="top"
+      >
         <Dropdown id="solUmlMenuDropdown">
           <Dropdown.Toggle icon="far fa-arrow-to-bottom uml-btn-icon" as={Markup} className="badge badge-info remixui_no-shadow p-2 rounded-circle mr-2"></Dropdown.Toggle>
           <Dropdown.Menu as={UmlCustomMenu} className="custom-dropdown-items">
@@ -115,6 +120,7 @@ export default function UmlDownload(props: UmlDownloadProps) {
             </Dropdown.Item>
           </Dropdown.Menu>
         </Dropdown>
+      </CustomTooltip>
     </Fragment>
   )
 }

libs/remix-ui/solidity-uml-gen/src/lib/solidity-uml-gen.tsx

@@ -3,6 +3,7 @@ import { FormattedMessage } from 'react-intl'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
 import { GlassMagnifier, MagnifierContainer } from '@ricarso/react-image-magnifiers'
 import { ThemeSummary } from '../types'
+import {CustomTooltip} from '@remix-ui/helper'
 import UmlDownload from './components/UmlDownload'
 import './css/solidity-uml-gen.css'
 import { UmlDownloadContext, UmlFileType } from './utilities/UmlDownloadStrategy'
@@ -58,15 +59,33 @@ export function RemixUiSolidityUmlGen({ updatedSvg, loading, fileName, themeDark
         <div className="position-absolute bg-transparent mt-2" id="buttons" style={{ zIndex: 3, top: '10', right: '2em' }}>
           <div className="py-2 px-2 d-flex justify-content-center align-items-center">
             <UmlDownload download={download} />
-            <button data-id="umlZoominbtn" className="badge badge-info remixui_no-shadow p-2 rounded-circle mr-2" onClick={() => zoomIn()}>
+            <CustomTooltip
+              tooltipText="Zoom in"
+              tooltipId="genUMLzoomin"
+              placement="top"
+            >
+              <button data-id="umlZoominbtn" className="badge badge-secondary remixui_no-shadow p-2 rounded-circle mr-2" onClick={() => zoomIn()}>
                 <i className="far fa-plus uml-btn-icon"></i>
               </button>
-            <button data-id="umlZoomoutbtn" className="badge badge-info remixui_no-shadow p-2 rounded-circle mr-2" onClick={() => zoomOut()}>
+            </CustomTooltip>
+            <CustomTooltip
+              tooltipText="Zoom out"
+              tooltipId="genUMLzoomout"
+              placement="top"
+            >
+              <button data-id="umlZoomoutbtn" className="badge badge-secondary remixui_no-shadow p-2 rounded-circle mr-2" onClick={() => zoomOut()}>
                 <i className="far fa-minus uml-btn-icon"></i>
               </button>
-            <button data-id="umlResetbtn" className="badge badge-info remixui_no-shadow p-2 rounded-circle mr-2" onClick={() => resetTransform()}>
+            </CustomTooltip>
+            <CustomTooltip
+              tooltipText="Undo"
+              tooltipId="genUMLundo"
+              placement="top"
+            >
+              <button data-id="umlResetbtn" className="badge badge-secondary remixui_no-shadow p-2 rounded-circle mr-2" onClick={() => resetTransform()}>
                 <i className="far fa-undo uml-btn-icon"></i>
               </button>
+            </CustomTooltip>
           </div>
         </div>
       </>