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,54 +67,60 @@ interface UmlDownloadProps {
 export default function UmlDownload(props: UmlDownloadProps) {
   return (
     <Fragment>
-      <Dropdown id="solUmlMenuDropdown">
+      <CustomTooltip
-        <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>
+        tooltipText="Download the UML"
-        <Dropdown.Menu as={UmlCustomMenu} className="custom-dropdown-items">
+        tooltipId="genUMLundo"
-          <Dropdown.Item
+        placement="top"
-            onClick={() => {
+      >
-              _paq.push(['trackEvent', 'solidityumlgen', 'umlpngdownload', 'downloadAsPng'])
+        <Dropdown id="solUmlMenuDropdown">
-              props.download('png')
+          <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">
-            data-id="umlPngDownload"
+            <Dropdown.Item
-          >
+              onClick={() => {
-            <CustomTooltip
+                _paq.push(['trackEvent', 'solidityumlgen', 'umlpngdownload', 'downloadAsPng'])
-              placement="left-start"
+                props.download('png')
-              tooltipId="solUmlgenDownloadAsPngTooltip"
+              }}
-              tooltipClasses="text-nowrap"
+              data-id="umlPngDownload"
-              tooltipText={<FormattedMessage id="solUmlGen.pngDownloadTooltip" />}
             >
-              <div data-id="umlPngDownload">
+              <CustomTooltip
-                <span id="umlPngDownloadBtn" data-id="umlPngDownload" className="far fa-image pl-2"></span>
+                placement="left-start"
-                <span className="pl-1">
+                tooltipId="solUmlgenDownloadAsPngTooltip"
-                  <FormattedMessage id="solUmlGen.pngDownload" />
+                tooltipClasses="text-nowrap"
-                </span>
+                tooltipText={<FormattedMessage id="solUmlGen.pngDownloadTooltip" />}
-              </div>
+              >
-            </CustomTooltip>
+                <div data-id="umlPngDownload">
-          </Dropdown.Item>
+                  <span id="umlPngDownloadBtn" data-id="umlPngDownload" className="far fa-image pl-2"></span>
-          <Dropdown.Divider />
+                  <span className="pl-1">
-          <Dropdown.Item
+                    <FormattedMessage id="solUmlGen.pngDownload" />
-            onClick={() => {
+                  </span>
-              _paq.push(['trackEvent', 'solUmlGen', 'umlpdfdownload', 'downloadAsPdf'])
+                </div>
-              props.download('pdf')
+              </CustomTooltip>
-            }}
+            </Dropdown.Item>
-            data-id="umlPdfDownload"
+            <Dropdown.Divider />
-          >
+            <Dropdown.Item
-            <CustomTooltip
+              onClick={() => {
-              placement="left-start"
+                _paq.push(['trackEvent', 'solUmlGen', 'umlpdfdownload', 'downloadAsPdf'])
-              tooltipId="solUmlgenDownloadAsPdfTooltip"
+                props.download('pdf')
-              tooltipClasses="text-nowrap"
+              }}
-              tooltipText={<FormattedMessage id="solUmlGen.pdfDownloadTooltip" />}
+              data-id="umlPdfDownload"
             >
-              <div data-id="umlPdfDownload">
+              <CustomTooltip
-                <span id="umlPdfDownloadBtn" data-id="umlPdfDownload" className="far fa-file-pdf pl-2"></span>
+                placement="left-start"
-                <span className="pl-2">
+                tooltipId="solUmlgenDownloadAsPdfTooltip"
-                  <FormattedMessage id="solUmlGen.pdfDownload" />
+                tooltipClasses="text-nowrap"
-                </span>
+                tooltipText={<FormattedMessage id="solUmlGen.pdfDownloadTooltip" />}
-              </div>
+              >
-            </CustomTooltip>
+                <div data-id="umlPdfDownload">
-          </Dropdown.Item>
+                  <span id="umlPdfDownloadBtn" data-id="umlPdfDownload" className="far fa-file-pdf pl-2"></span>
-        </Dropdown.Menu>
+                  <span className="pl-2">
-      </Dropdown>
+                    <FormattedMessage id="solUmlGen.pdfDownload" />
+                  </span>
+                </div>
+              </CustomTooltip>
+            </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
-              <i className="far fa-plus uml-btn-icon"></i>
+              tooltipText="Zoom in"
-            </button>
+              tooltipId="genUMLzoomin"
-            <button data-id="umlZoomoutbtn" className="badge badge-info remixui_no-shadow p-2 rounded-circle mr-2" onClick={() => zoomOut()}>
+              placement="top"
-              <i className="far fa-minus uml-btn-icon"></i>
+            >
-            </button>
+              <button data-id="umlZoominbtn" className="badge badge-secondary remixui_no-shadow p-2 rounded-circle mr-2" onClick={() => zoomIn()}>
-            <button data-id="umlResetbtn" className="badge badge-info remixui_no-shadow p-2 rounded-circle mr-2" onClick={() => resetTransform()}>
+                <i className="far fa-plus uml-btn-icon"></i>
-              <i className="far fa-undo uml-btn-icon"></i>
+              </button>
-            </button>
+            </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>
+            </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>
       </>