From 4f323049bbcbe8baa6e4eee2a60b018dcb071969 Mon Sep 17 00:00:00 2001
From: LianaHus <liana@ethdev.com>
Date: Wed, 27 Mar 2019 14:28:18 +0100
Subject: [PATCH] fixes #1785

---
 src/app/panels/styles/terminal-styles.js |  1 +
 src/app/panels/terminal.js               |  6 +++---
 src/app/ui/dropdown.js                   |  4 ++--
 src/app/ui/landing-page/landing-page.js  |  2 +-
 src/app/ui/styles/dropdown-styles.js     | 12 +++++++-----
 5 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/app/panels/styles/terminal-styles.js b/src/app/panels/styles/terminal-styles.js
index 183f7933c7..b79cd968eb 100644
--- a/src/app/panels/styles/terminal-styles.js
+++ b/src/app/panels/styles/terminal-styles.js
@@ -21,6 +21,7 @@ var css = csjs`
     display           : flex;
     align-items       : center;
     width             : 100%;
+    border-bottom-style : ridge;
   }
   .clear           {
     margin-right      : 20px;
diff --git a/src/app/panels/terminal.js b/src/app/panels/terminal.js
index 2c2e62d566..9615d5b10b 100644
--- a/src/app/panels/terminal.js
+++ b/src/app/panels/terminal.js
@@ -136,10 +136,10 @@ class Terminal {
           </div>
           ${self._view.pendingTxCount}
           <div class=${css.verticalLine}></div>
-          <div class=${css.listen}>
-            <input id="listenNetworkCheck" onchange=${listenOnNetwork} type="checkbox" class="form-check-input"
+          <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="${css.listenLabel} 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>
+            <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>
           ${self._view.dropdown}
           <div class=${css.search}>
diff --git a/src/app/ui/dropdown.js b/src/app/ui/dropdown.js
index 6a684962ba..db215481b8 100644
--- a/src/app/ui/dropdown.js
+++ b/src/app/ui/dropdown.js
@@ -45,9 +45,9 @@ class Dropdown {
       </div>
     `
     self._view.el = yo`
-      <div class=${css.dropdown} onclick=${show}>
+      <div class="${css.dropdown}" onclick=${show}>
         ${self._view.selected}
-        <div class=${css.options} style="display: none;">
+        <div class="${css.options} bg-light" style="display: none;">
           ${self.data._options.map(label => {
             var input = yo`<input data-idx=${self.data._elements.length} onchange=${emit} type="checkbox" />`
             if (self.data.selected.indexOf(label) !== -1) {
diff --git a/src/app/ui/landing-page/landing-page.js b/src/app/ui/landing-page/landing-page.js
index 0c7cbfdb35..7e07facf82 100644
--- a/src/app/ui/landing-page/landing-page.js
+++ b/src/app/ui/landing-page/landing-page.js
@@ -9,7 +9,7 @@ var css = csjs`
     flex-wrap       : wrap;
     align-content   : space-around;
     padding         : 20px;
-    max-width       : 300px;
+    max-width       : 340px;
     background-color: var(--light);
     font-family     : "Lucida Console", Monaco, monospace;
   }
diff --git a/src/app/ui/styles/dropdown-styles.js b/src/app/ui/styles/dropdown-styles.js
index 2ccbe1f59c..e7d483a8ed 100644
--- a/src/app/ui/styles/dropdown-styles.js
+++ b/src/app/ui/styles/dropdown-styles.js
@@ -7,6 +7,7 @@ var css = csjs`
     display           : flex;
     flex-direction    : column;
     margin-right      : 10px;
+    margin-left       : 10px;
     width             : auto;
   }
   .selectbox          {
@@ -32,15 +33,16 @@ var css = csjs`
     display           : flex;
     flex-direction    : column;
     align-items       : end;
-    top               : 24px;
-    left              : 0;
-    width             : 250px;
-    border            : 1px solid var(--primary);
+    top               : 30px;
+    right             : 0;
+    width             : 230px;
+    border            : 1px solid var(--dark);
     border-radius     : 3px;
     border-top        : 0;
   }
   .option {
-    margin: 0;
+    margin-left       : 5px;
+    margin-top        : 5px;
   }
 `