Merge pull request #1880 from ethereum/origin/develop_L

search input field style on terminal

src/app/panels/styles/terminal-styles.js

@@ -90,17 +90,17 @@ var css = csjs`
   .search {
     display           : flex;
     align-items       : center;
-    width             : 200px;
+    width             : 330px;
     padding-left      : 20px;
     height            : 100%;
   }
   .filter                       {
-    width                       : 200px;
     padding-right               : 0px;
     margin-right                : 0px;
-    border-top-left-radius      : 0px;
-    border-bottom-left-radius   : 0px;
     height                      : 100%;
+    white-space                 : nowrap;
+    overflow                    : hidden;
+    text-overflow               : ellipsis;
   }
   .searchIcon                   {
     height                      : 100%;

src/app/panels/terminal.js

@@ -125,7 +125,14 @@ class Terminal extends BaseApi {
       <div onmousedown=${mousedown} class=${css.dragbarHorizontal}></div>`
 
     self._view.pendingTxCount = yo`<div class=${css.pendingTx} title='Pending Transactions'>0</div>`
-    self._view.inputSearch = yo`<input spellcheck="false" type="text" class="${css.filter} form-control" id="input" onkeydown=${filter}  placeholder="Search transactions"></input>`
+    self._view.inputSearch = yo`<input
+      spellcheck="false"
+      type="text"
+      class="${css.filter} form-control"
+      id="searchInput"
+      onkeydown=${filter}
+      placeholder="Search with transaction hash or address">
+    </input>`
     self._view.bar = yo`
       <div class="${css.bar}">
         ${self._view.dragbar}
@@ -138,9 +145,19 @@ class Terminal extends BaseApi {
           ${self._view.pendingTxCount}
           <div class=${css.verticalLine}></div>
           <div class="form-check">
-            <input id="listenNetworkCheck" onchange=${listenOnNetwork} type="checkbox" class="form-check-input "
-            title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you">
-            <label class="form-check-label" title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you" for="listenNetworkCheck">listen on network</label>
+            <input
+              id="listenNetworkCheck"
+              onchange=${listenOnNetwork}
+              type="checkbox" class="form-check-input "
+              title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
+            >
+            <label
+              class="form-check-label"
+              title="If checked Remix will listen on all transactions mined in the current environment and not only transactions created by you"
+              for="listenNetworkCheck"
+            >
+              listen on network
+            </label>
           </div>
           <div class=${css.search}>
             <i class="fas fa-search ${css.searchIcon} bg-light" aria-hidden="true"></i>

src/app/tabs/styles/debugger-tab-styles.js

@@ -6,6 +6,7 @@ const css = csjs`
   }
   .debugger {
     margin-bottom: 1%;
+    width: max-content;
   }
 `
 

src/app/ui/landing-page/landing-page.js

@@ -163,11 +163,19 @@ export class LandingPage extends BaseApi {
       globalRegistry.get('verticalicon').api.select('fileExplorers')
     }
 
+    globalRegistry.get('themeModule').api.events.on('themeChanged', (type) => {
+      const invert = type === 'dark' ? 1 : 0
+      const img = document.getElementById('remixLogo')
+      if (img) {
+        img.style.filter = `invert(${invert})`
+      }
+    })
+
     let container = yo`<div class="${css.homeContainer} bg-light">
       <div class="${css.jumbotronContainer}">
         <div class="alert alert-info clearfix ${css.thisJumboton}">
           <div class="${css.logoContainer}">
-            <img src="${logo}" alt="remix logo">
+            <img id="remixLogo" src="${logo}" alt="remix logo">
           </div>
           <div class="${css.headlineContainer}">
             <h2 class="">The new layout has arrived</h2>