terminal title bar UI adjustments according to last design

apps/remix-ide/src/app/panels/styles/terminal-styles.js

@@ -20,20 +20,7 @@ var css = csjs`
     max-height           : 35px;
     min-height           : 35px;
   }
-  .clear           {
-    margin-right      : 20px;
-    width             : 10px;
-    cursor            : pointer;
-    display           : flex;
-  }
-  .clear:hover              {
-    color             : var(--secondary);
-  }
   .toggleTerminal              {
-    margin-right      : 20px;
-    margin-left       : 2px;
-    font-size         : 14px;
-    font-weight       : bold;
     cursor            : pointer;
   }
   .toggleTerminal:hover              {
@@ -95,9 +82,7 @@ var css = csjs`
     padding-bottom    : 1px;
   }
   .filter                       {
-    padding-right               : 0px;
-    margin-right                : 0px;
-    height                      : 100%;
+    height                      : 80%;
     white-space                 : nowrap;
     overflow                    : hidden;
     text-overflow               : ellipsis;
@@ -126,20 +111,6 @@ var css = csjs`
     border-left       : 1px solid var(--secondary)
     height            : 65%;
   }
-  .listenOnNetworkLabel {
-    white-space       : nowrap;
-  }
-  .pendingTx {
-    border-radius     : 50%;
-    margin-right      : 30px;
-    min-width         : 13px;
-    height            : 13px;
-    display           : flex;
-    justify-content   : center;
-    align-items       : center;
-    font-size         : 14px;
-    user-select       : none;
-  }
   .dragbarHorizontal  {
     position          : absolute;
     top               : 0;
@@ -149,6 +120,9 @@ var css = csjs`
     cursor            : ns-resize;
     z-index           : 999;
   }
+  .listenOnNetwork {
+    min-height: auto;
+  }
   .ghostbar           {
     position          : absolute;
     height            : 6px;

apps/remix-ide/src/app/panels/terminal.js

@@ -147,11 +147,11 @@ class Terminal extends Plugin {
 
     self._view.icon = yo`
       <i onmouseenter=${hover} onmouseleave=${hover} onmousedown=${minimize}
-      class="btn btn-secondary btn-sm align-items-center ${css.toggleTerminal} fas fa-angle-double-down" data-id="terminalToggleIcon"></i>`
+      class="mx-2 ${css.toggleTerminal} fas fa-angle-double-down" data-id="terminalToggleIcon"></i>`
     self._view.dragbar = yo`
       <div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
 
-    self._view.pendingTxCount = yo`<div class=${css.pendingTx} title='Pending Transactions'>0</div>`
+    self._view.pendingTxCount = yo`<div class="mx-2" title='Pending Transactions'>0</div>`
     self._view.inputSearch = yo`<input
       spellcheck="false"
       type="text"
@@ -166,21 +166,22 @@ class Terminal extends Plugin {
         ${self._view.dragbar}
         <div class="${css.menu} border-top border-dark bg-light" data-id="terminalToggleMenu">
           ${self._view.icon}
-          <div class=${css.clear} id="clearConsole" data-id="terminalClearConsole" onclick=${clear}>
+          <div class="mx-2" id="clearConsole" data-id="terminalClearConsole" onclick=${clear}>
             <i class="fas fa-ban" aria-hidden="true" title="Clear console"
             onmouseenter=${hover} onmouseleave=${hover}></i>
           </div>
           ${self._view.pendingTxCount}
           <div class=${css.verticalLine}></div>
-          <div class="form-check">
+          <div class="mx-2 d-flex pb-1 align-items-center ${css.listenOnNetwork} custom-control custom-checkbox">
             <input
+              class="pb-0 form-check-input custom-control-input"
               id="listenNetworkCheck"
               onchange=${listenOnNetwork}
-              type="checkbox" class="form-check-input "
+              type="checkbox"
               title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
             >
             <label
-              class="${css.listenOnNetworkLabel} form-check-label"
+              class="pt-1 form-check-label custom-control-label text-nowrap""
               title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
               for="listenNetworkCheck"
             >