From 66e5b3f85eb10d96f632d71a63c9374a8b518d91 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Mon, 15 Jun 2020 12:54:22 +0200
Subject: [PATCH] terminal title bar UI adjustments according to last design

---
 src/app/panels/styles/terminal-styles.js | 34 +++---------------------
 src/app/panels/terminal.js               | 13 ++++-----
 2 files changed, 11 insertions(+), 36 deletions(-)

diff --git a/src/app/panels/styles/terminal-styles.js b/src/app/panels/styles/terminal-styles.js
index 1aed65852b..25d2d598ac 100644
--- a/src/app/panels/styles/terminal-styles.js
+++ b/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;
diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js
index bf48f6677f..bcdf5f9f1b 100644
--- a/src/app/panels/terminal.js
+++ b/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"
             >