terminal ui fixes.

apps/remix-ide/src/app/tabs/locales/en/terminal.json

@@ -1,8 +1,8 @@
 {
-  "terminal.listen": "listen on all transactions",
+  "terminal.listen": "Listen on all transactions",
   "terminal.listenVM": "Listen on all transactions is disabled for VM environment",
   "terminal.listenTitle": "If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you",
-  "terminal.search": "Search with transaction hash or address",
+  "terminal.search": "Filter with transaction hash or address",
   "terminal.used": "used",
   "terminal.debug": "Debug",
   "terminal.welcomeText1": "Welcome to",

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

@@ -23,7 +23,7 @@ export const RemixUITerminalBar = (props: RemixUiTerminalProps) => {
   return (<>
     <div className="remix_ui_terminal_bar d-flex">
       <div
-        className="remix_ui_terminal_menu d-flex w-100 align-items-center position-relative border-top border-dark bg-light"
+        className="remix_ui_terminal_menu justify-content-between d-flex w-100 align-items-center position-relative border-top border-dark bg-light"
         ref={terminalMenu}
         data-id="terminalToggleMenu"
       >

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

@@ -27,25 +27,23 @@ export const RemixUITerminalMenu = (props: RemixUiTerminalProps) => {
   }
 
   return (<div className='d-flex flex-row align-items-center'>
-    <CustomTooltip placement="top" tooltipId="terminalClear" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="terminal.pendingTransactions" />}>
+    <CustomTooltip placement="top" tooltipId="terminalpendingTransactions" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="terminal.pendingTransactions" />}>
       <div className="mx-2">0</div>
     </CustomTooltip>
     <CustomTooltip
       placement="top"
-      tooltipId="terminalClear"
+      tooltipId="terminalListenOnN"
       tooltipClasses="text-nowrap"
-      tooltipText={intl.formatMessage({ id: terminalState.isVM ? 'terminal.listenVM' : 'terminal.listenTitle' })}
+      tooltipText={terminalState.isVM ? intl.formatMessage({ id: 'terminal.listenVM' }) : intl.formatMessage({ id: 'terminal.listenTitle' })}
     >
       <div className="h-80 mx-3 align-items-center remix_ui_terminal_listenOnNetwork custom-control custom-checkbox">
-        <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"
-            disabled={terminalState.isVM}
-          />
-        </CustomTooltip>
+        <input
+          className="custom-control-input"
+          id="listenNetworkCheck"
+          onChange={listenOnNetwork}
+          type="checkbox"
+          disabled={terminalState.isVM}
+        />
         <label
           className="form-check-label custom-control-label text-nowrap"
           style={{ paddingTop: '0.125rem' }}
@@ -56,7 +54,7 @@ export const RemixUITerminalMenu = (props: RemixUiTerminalProps) => {
         </label>
       </div>
     </CustomTooltip>
-    <div className="remix_ui_terminal_search d-flex align-items-center h-100">
+    <div className="remix_ui_terminal_search mr-1 d-flex align-items-center h-100">
       <i className="remix_ui_terminal_searchIcon d-flex align-items-center justify-content-center fas fa-search bg-light" aria-hidden="true"></i>
       <input
         onChange={(event) => setSearchInput(event.target.value.trim())}
@@ -68,7 +66,7 @@ export const RemixUITerminalMenu = (props: RemixUiTerminalProps) => {
       />
     </div>
     <div className="mx-2 remix_ui_terminal_console" id="clearConsole" data-id="terminalClearConsole" onClick={handleClearConsole}>
-      <CustomTooltip placement="top" tooltipId="terminalClear" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="terminal.clearConsole" />}>
+      <CustomTooltip placement="top" tooltipId="terminalClearTerminal" tooltipClasses="text-nowrap" tooltipText={<FormattedMessage id="terminal.clearConsole" />}>
         <i className="fas fa-ban" aria-hidden="true"></i>
       </CustomTooltip>
     </div>

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

@@ -71,10 +71,7 @@ element.style {
   font-family       : monospace;
 }
 .remix_ui_terminal_search {
-  width             : 330px;
-  padding-left      : 20px;
-  padding-top       : 1px;
-  padding-bottom    : 1px;
+  width             : 19rem;
 }
 .remix_ui_terminal_filter {
   height                      : 80%;