changed the info icons and fixed some layout issues

libs/remix-ui/clipboard/src/lib/copy-to-clipboard/copy-to-clipboard.tsx

@@ -40,6 +40,7 @@ export const CopyToClipboard = (props: ICopyToClipboard) => {
   }
 
   return (
+    // eslint-disable-next-line jsx-a11y/anchor-is-valid
     <a href='#' onClick={handleClick} onMouseLeave={reset}>
       <OverlayTrigger placement={direction} overlay={
         <Tooltip id="overlay-tooltip">

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

@@ -5,6 +5,7 @@ import * as helper from '../../../../../apps/remix-ide/src/lib/helper'
 import { canUseWorker, baseURLBin, baseURLWasm, urlFromVersion, pathToURL, promisedMiniXhr } from '@remix-project/remix-solidity'
 import { compilerReducer, compilerInitialState } from './reducers/compiler'
 import { resetEditorMode, listenToEvents } from './actions/compiler'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 
 import './css/style.css'
 
@@ -572,11 +573,18 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             </div>
           </div>
           {
-            isHardHatProject && <div className="mt-2 remixui_compilerConfig custom-control custom-checkbox">
+            isHardHatProject &&
+            <div className="mt-3 remixui_compilerConfig custom-control custom-checkbox">
               <input className="remixui_autocompile custom-control-input" onChange={updatehhCompilation} id="enableHardhat" type="checkbox" title="Enable Hardhat Compilation" checked={hhCompilation} />
               <label className="form-check-label custom-control-label" htmlFor="enableHardhat">Enable Hardhat Compilation</label>
-              <a href="https://remix-ide.readthedocs.io/en/latest/hardhat.html#enable-hardhat-compilation" target="_blank">
-                <i className="ml-2 fas fa-info" title="Know how to use Hardhat Compilation"></i>
+              <a className="mt-1 text-nowrap" href='https://remix-ide.readthedocs.io/en/latest/hardhat.html#enable-hardhat-compilation' target={'_blank'}>
+                <OverlayTrigger placement={'right'} overlay={
+                  <Tooltip className="text-nowrap" id="overlay-tooltip">
+                    <span className="p-1 pr-3" style={{ backgroundColor: 'black', minWidth: '230px' }}>Learn how to use Hardhat Compilation</span>
+                  </Tooltip>
+                }>
+                  <i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle'} aria-hidden="true"></i>
+                </OverlayTrigger>
               </a>
             </div>
           }

libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx

@@ -7,6 +7,7 @@ import { RemixUiCheckbox } from '@remix-ui/checkbox' // eslint-disable-line
 import ErrorRenderer from './ErrorRenderer' // eslint-disable-line
 import { compilation } from './actions/staticAnalysisActions'
 import { initialState, analysisReducer } from './reducers/staticAnalysisReducer'
+import { OverlayTrigger, Tooltip } from 'react-bootstrap'
 const StaticAnalysisRunner = require('@remix-project/remix-analyzer').CodeAnalysis
 const utils = remixLib.util
 
@@ -56,7 +57,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
   }
   const [autoRun, setAutoRun] = useState(true)
   const [slitherEnabled, setSlitherEnabled] = useState(false)
-  const [showSlither, setShowSlither] = useState('hidden')
+  const [showSlither, setShowSlither] = useState(false)
   const [categoryIndex, setCategoryIndex] = useState(groupedModuleIndex(groupedModules))
 
   const warningContainer = React.useRef(null)
@@ -88,9 +89,9 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
       // Reset state
       dispatch({ type: '', payload: {} })
       // Show 'Enable Slither Analysis' checkbox
-      if (currentWorkspace && currentWorkspace.isLocalhost === true) setShowSlither('visible')
+      if (currentWorkspace && currentWorkspace.isLocalhost === true) setShowSlither(true)
       else {
-        setShowSlither('hidden')
+        setShowSlither(false)
         setSlitherEnabled(false)
       }
     })
@@ -103,7 +104,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
         props.event.trigger('staticAnaysisWarning', [])
         // Reset state
         dispatch({ type: '', payload: {} })
-        setShowSlither('hidden')
+        setShowSlither(false)
         setSlitherEnabled(false)
       }
     })
@@ -414,19 +415,28 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
           />
           <Button buttonText="Run" onClick={() => run(state.data, state.source, state.file)} disabled={(state.data === null || categoryIndex.length === 0) && !slitherEnabled }/>
         </div>
-        <div className="d-flex" id="enableSlitherAnalysis" style={{ visibility: showSlither } as CSSProperties }>
-          <RemixUiCheckbox
-            id="enableSlither"
-            inputType="checkbox"
-            onClick={handleSlitherEnabled}
-            checked={slitherEnabled}
-            label="Enable Slither Analysis"
-            onChange={() => {}}
-          />
-          <a href="https://remix-ide.readthedocs.io/en/latest/slither.html#enable-slither-analysis" target="_blank">
-            <i className="ml-3 fas fa-info" title="Know how to use Slither Analysis"></i>
-          </a>
-        </div>
+        { showSlither &&
+          <div className="d-flex mt-2" id="enableSlitherAnalysis">
+            <RemixUiCheckbox
+              id="enableSlither"
+              inputType="checkbox"
+              onClick={handleSlitherEnabled}
+              checked={slitherEnabled}
+              label="Enable Slither Analysis"
+              onChange={() => {}}
+            />
+
+            <a className="mt-1 text-nowrap" href='https://remix-ide.readthedocs.io/en/latest/slither.html#enable-slither-analysis' target={'_blank'}>
+              <OverlayTrigger placement={'right'} overlay={
+                <Tooltip className="text-nowrap" id="overlay-tooltip">
+                  <span className="p-1 pr-3" style={{ backgroundColor: 'black', minWidth: '230px' }}>Learn how to use Slither Analysis</span>
+                </Tooltip>
+              }>
+                <i style={{ fontSize: 'medium' }} className={'fal fa-info-circle ml-3'} aria-hidden="true"></i>
+              </OverlayTrigger>
+            </a>
+          </div>
+        }
       </div>
       <div id="staticanalysismodules" className="list-group list-group-flush">
         {Object.keys(groupedModules).map((categoryId, i) => {