titles for terminal and e2e fix

apps/remix-ide-e2e/src/commands/addFile.ts

@@ -54,10 +54,7 @@ function addFile(browser: NightwatchBrowser, name: string, content: NightwatchCo
             suppressNotFoundErrors: true,
             timeout: 60000
           })
-          .waitForElementPresent({
-            selector: `//*[@data-id="tab-active" and contains(@title, "${name}")]`,
-            locateStrategy: 'xpath',
-          })
+          .waitForElementContainsText('*[data-id="activeTabTitle"]', name)
           .setEditorValue(content.content)
           .getEditorValue((result) => {
             if(result != content.content) {

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

@@ -970,7 +970,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
             <button
               id="compileAndRunBtn"
               data-id="compilerContainerCompileAndRunBtn"
-              className="btn btn-secondary btn-block d-block w-100 text-break remixui_solidityCompileAndRunButton d-inline-block remixui_disabled mb-1 mt-3"
+              className="btn btn-secondary btn-block d-block w-100 text-break remixui_solidityCompileAndRunButton d-inline-block remixui_disabled mb-1 mt-1"
               onClick={compileAndRun}
               disabled={(configFilePath === '' && state.useFileConfiguration) || disableCompileButton}
             >
@@ -1009,7 +1009,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
               <a href="https://remix-ide.readthedocs.io/en/latest/running_js_scripts.html#compile-a-contract-and-run-a-script-on-the-fly" target="_blank" ><i className="pl-2 ml-2 mt-3 mb-1 fas fa-info text-dark"></i></a>
             </CustomTooltip>
             <CopyToClipboard tip="Click to copy the custom NatSpec tag" getContent={() => '@custom:dev-run-script file_path'} direction='top'>
-              <button className="btn remixui_copyButton  ml-2 mt-3 mb-1 text-dark">
+              <button className="btn remixui_copyButton  ml-2 my-1 text-dark">
                 <i className="remixui_copyIcon far fa-copy" aria-hidden="true"></i>
               </button>
             </CopyToClipboard>

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

@@ -101,7 +101,7 @@ export const TabsUI = (props: TabsUIProps) => {
           data-id={index === currentIndexRef.current ? 'tab-active' : ''}
         >
           {tab.icon ? (<img className="my-1 mr-1 iconImage" style={{ filter: invert }} src={tab.icon} />) : (<i className={classNameImg}></i>)}
-          <span className={`title-tabs ${getFileDecorationClasses(tab)}`}>{tab.title}</span>
+          <span data-id="activeTabTitle" className={`title-tabs ${getFileDecorationClasses(tab)}`}>{tab.title}</span>
           {getFileDecorationIcons(tab)}
           <span className="close-tabs" onClick={(event) => { props.onClose(index); event.stopPropagation() }}>
             <i className="text-dark fas fa-times"></i>

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

@@ -8,6 +8,7 @@ import {allCommands, allPrograms} from './commands' // eslint-disable-line
 import TerminalWelcomeMessage from './terminalWelcome' // eslint-disable-line
 import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
 import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
+import { CustomTooltip } from '@remix-ui/helper'
 
 import './remix-ui-terminal.css'
 import vm from 'vm'
@@ -454,26 +455,51 @@ export const RemixUiTerminal = (props: RemixUiTerminalProps) => {
         <div className="remix_ui_terminal_menu d-flex w-100 align-items-center position-relative border-top border-dark bg-light" ref={terminalMenu} data-id="terminalToggleMenu">
           <i className={`mx-2 remix_ui_terminal_toggleTerminal fas ${isOpen ? 'fa-angle-double-down' : 'fa-angle-double-up'}`} data-id="terminalToggleIcon" onClick={handleToggleTerminal}></i>
           <div className="mx-2 remix_ui_terminal_console" id="clearConsole" data-id="terminalClearConsole" onClick={handleClearConsole} >
-            <i className="fas fa-ban" aria-hidden="true" title="Clear console"
-            ></i>
+            <CustomTooltip
+              placement="top"
+              tooltipId="terminalClear"
+              tooltipClasses="text-nowrap"
+              tooltipText="Clear console"
+            >
+              <i className="fas fa-ban" aria-hidden="true"></i>
+            </CustomTooltip>
           </div>
-          <div className="mx-2" title='Pending Transactions'>0</div>
+          <CustomTooltip
+            placement="top"
+            tooltipId="terminalClear"
+            tooltipClasses="text-nowrap"
+            tooltipText="Pending Transactions"
+          >
+            <div className="mx-2">0</div>
+          </CustomTooltip>
           <div className="pt-1 h-80 mx-3 align-items-center remix_ui_terminal_listenOnNetwork custom-control custom-checkbox">
-            <input
-              className="custom-control-input"
-              id="listenNetworkCheck"
-              onChange={listenOnNetwork}
-              type="checkbox"
-              title={intl.formatMessage({ id: 'terminal.listenTitle' })}
-            />
-            <label
-              className="pt-1 form-check-label custom-control-label text-nowrap"
-              title={intl.formatMessage({ id: 'terminal.listenTitle' })}
-              htmlFor="listenNetworkCheck"
-              data-id="listenNetworkCheckInput"
+            <CustomTooltip
+              placement="top"
+              tooltipId="terminalClear"
+              tooltipClasses="text-nowrap"
+              tooltipText={intl.formatMessage({ id: 'terminal.listenTitle' })}
+            >
+              <input
+                className="custom-control-input"
+                id="listenNetworkCheck"
+                onChange={listenOnNetwork}
+                type="checkbox"
+              />
+            </CustomTooltip>
+            <CustomTooltip
+              placement="top"
+              tooltipId="terminalClear"
+              tooltipClasses="text-nowrap"
+              tooltipText={intl.formatMessage({ id: 'terminal.listenTitle' })}
             >
-              <FormattedMessage id='terminal.listen' />
-            </label>
+              <label
+                className="pt-1 form-check-label custom-control-label text-nowrap"
+                htmlFor="listenNetworkCheck"
+                data-id="listenNetworkCheckInput"
+              >
+                <FormattedMessage id='terminal.listen' />
+              </label>
+            </CustomTooltip>
           </div>
           <div className="remix_ui_terminal_search d-flex align-items-center h-100">
             <i