From f635751a8cee9273dfa0c672b96d947eddd4f8cd Mon Sep 17 00:00:00 2001
From: Akos Kitta <kittaakos@typefox.io>
Date: Wed, 4 Dec 2019 21:50:44 +0100
Subject: [PATCH] fix the react-select styling

Signed-off-by: Akos Kitta <kittaakos@typefox.io>
---
 .../src/browser/monitor/monitor-widget.tsx     |  1 +
 .../src/browser/style/monitor.css              | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx b/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx
index 130a5b21..87d7149b 100644
--- a/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx
+++ b/arduino-ide-extension/src/browser/monitor/monitor-widget.tsx
@@ -208,6 +208,7 @@ export class MonitorWidget extends ReactWidget {
             classNamePrefix='sms'
             className='serial-monitor-select'
             id={id}
+            isSearchable={false}
         />
     }
 }
diff --git a/arduino-ide-extension/src/browser/style/monitor.css b/arduino-ide-extension/src/browser/style/monitor.css
index 392da48c..f55456c3 100644
--- a/arduino-ide-extension/src/browser/style/monitor.css
+++ b/arduino-ide-extension/src/browser/style/monitor.css
@@ -85,37 +85,39 @@
     background: var(--theia-layout-color2);
 }
 
+.sms__control:hover {
+    border-color: var(--theia-accent-color3) !important;
+}
+
 .serial-monitor-select .sms__control--is-focused {
     border-color: var(--theia-accent-color3) !important;
     box-shadow: none !important;
 }
 
-.sms__control--is-focused:hover {
-    border-color: var(--theia-accent-color3) !important;
-}
-
 .serial-monitor-select .sms__option--is-selected {
-    background-color: var(--theia-ui-button-color-secondary-hover);
+    background-color: var(--theia-accent-color3);
     color: var(--theia-content-font-color0);
     border-color: var(--theia-accent-color3);
 }
 
 .serial-monitor-select .sms__option--is-focused {
-    background-color: var(--theia-ui-button-color-secondary-hover);
+    background-color: var(--theia-accent-color4);
     border-color: var(--theia-accent-color3);
 }
 
 .serial-monitor-select .sms__menu {
     background-color: var(--theia-layout-color1);
     border: 1px solid var(--theia-border-color2);
+    border-color: var(--theia-accent-color3);
+    top: auto !important; /* to align the top of the menu with the bottom of the control */
     border-top: none;
     box-shadow: none;
 }
 
 .serial-monitor-select .sms__control.sms__control--menu-is-open {
     border: 1px solid;
-    border-color: var(--theia-border-color2) !important;
-    border-bottom: none;
+    border-color: var(--theia-accent-color3) !important;
+    border-bottom-color: var(--theia-layout-color2) !important; /* if the bottom border color has the same color as the background of the control, we make the border "invisible" */
 }
 
 .serial-monitor-select .sms__value-container .sms__single-value {