From cbdf45c85290a27443a15b51220d9120b443b25a Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sun, 26 Apr 2020 09:23:18 +0100
Subject: [PATCH] Fixed <select/> styling in firefox and improved in chrome.

---
 src/components/Toolbar.jsx |  6 +++++-
 src/styles/_input.scss     |  7 +++++++
 src/styles/_scrollbar.scss |  2 +-
 src/styles/_toolbar.scss   | 12 ++++--------
 src/styles/_vars.scss      |  3 +++
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index b31c4962..cde81c17 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -210,7 +210,11 @@ export default class Toolbar extends React.Component {
           <ToolbarSelect wdKey="nav:inspect">
             <MdFindInPage />
             <IconText>View </IconText>
-            <select onChange={(e) => this.handleSelection(e.target.value)} value={currentView.id}>
+            <select
+              className="maputnik-select"
+              onChange={(e) => this.handleSelection(e.target.value)}
+              value={currentView.id}
+            >
               {views.map((item) => {
                 return (
                   <option key={item.id} value={item.id} disabled={item.disabled}>
diff --git a/src/styles/_input.scss b/src/styles/_input.scss
index b9a48ec7..9f19d588 100644
--- a/src/styles/_input.scss
+++ b/src/styles/_input.scss
@@ -97,6 +97,13 @@
 .maputnik-select {
   @extend .maputnik-input;
 
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background: $color-gray url("#{$icon-down-arrow}") right center no-repeat;
+  color: $color-white;
+  background-position: calc(100% - 2px) center;
+  padding-right: 20px;
+
   height: 24px;
 }
 
diff --git a/src/styles/_scrollbar.scss b/src/styles/_scrollbar.scss
index 238ab811..f5c41106 100644
--- a/src/styles/_scrollbar.scss
+++ b/src/styles/_scrollbar.scss
@@ -1,4 +1,4 @@
-* {
+*:not(select) {
   &::-webkit-scrollbar {
     background-color: #26282e;
     width: 8px;
diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss
index 7b21d7a6..c6ec778b 100644
--- a/src/styles/_toolbar.scss
+++ b/src/styles/_toolbar.scss
@@ -102,15 +102,11 @@
   @extend .maputnik-toolbar-link;
 
   select {
-    // HACK: <https://github.com/maputnik/editor/pull/392#issuecomment-427595172>
-    color: $color-black !important;
-    margin-left: 4px;
+    margin-left: 6px;
     border-width: 0;
-
-    option {
-      // HACK: <https://github.com/maputnik/editor/pull/392#issuecomment-427595172>
-      color: $color-black !important;
-    }
+    display: inline;
+    width: auto;
+    border: solid 1px $color-midgray;
   }
 }
 
diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
index 4a9cc098..c0ab1bde 100644
--- a/src/styles/_vars.scss
+++ b/src/styles/_vars.scss
@@ -25,3 +25,6 @@ $layout-list-width: 200px;
 $layout-editor-width: 370px;
 $layout-map-width: calc(100% - #{$layout-list-width + $layout-editor-width});
 
+// 'menu-down' from 'https://materialdesignicons.com/'
+// See <https://github.com/Templarian/MaterialDesign/blob/master/LICENSE>
+$icon-down-arrow: "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'><path fill='white' d='M7,10L12,15L17,10H7Z' /></svg>"