From 5c24fa68a5da8da124fd224dfdf2084ad6b528a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 27 Sep 2018 11:57:28 +0200
Subject: [PATCH] explore: fixes to dark theme, fixes #13349

---
 public/app/features/explore/Explore.tsx      |  9 +++++----
 public/sass/components/_form_select_box.scss | 18 ++++++------------
 public/sass/pages/_explore.scss              |  2 +-
 3 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index 187d68133cd..50d894de43f 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -528,10 +528,11 @@ export class Explore extends React.Component<any, ExploreState> {
           {!datasourceMissing ? (
             <div className="navbar-buttons">
               <Select
-                className="datasource-picker"
                 clearable={false}
+                className="gf-form-input gf-form-input--form-dropdown datasource-picker"
                 onChange={this.onChangeDatasource}
                 options={datasources}
+                isOpen={true}
                 placeholder="Loading datasources..."
                 value={selectedDatasource}
               />
@@ -586,17 +587,17 @@ export class Explore extends React.Component<any, ExploreState> {
             />
             <div className="result-options">
               {supportsGraph ? (
-                <button className={`btn navbar-button ${graphButtonActive}`} onClick={this.onClickGraphButton}>
+                <button className={`btn toggle-btn ${graphButtonActive}`} onClick={this.onClickGraphButton}>
                   Graph
                 </button>
               ) : null}
               {supportsTable ? (
-                <button className={`btn navbar-button ${tableButtonActive}`} onClick={this.onClickTableButton}>
+                <button className={`btn toggle-btn ${tableButtonActive}`} onClick={this.onClickTableButton}>
                   Table
                 </button>
               ) : null}
               {supportsLogs ? (
-                <button className={`btn navbar-button ${logsButtonActive}`} onClick={this.onClickLogsButton}>
+                <button className={`btn toggle-btn ${logsButtonActive}`} onClick={this.onClickLogsButton}>
                   Logs
                 </button>
               ) : null}
diff --git a/public/sass/components/_form_select_box.scss b/public/sass/components/_form_select_box.scss
index 0401f06eba8..4db294317f7 100644
--- a/public/sass/components/_form_select_box.scss
+++ b/public/sass/components/_form_select_box.scss
@@ -3,7 +3,7 @@ $select-menu-max-height: 300px;
 $select-item-font-size: $font-size-base;
 $select-item-bg: $dropdownBackground;
 $select-item-fg: $input-color;
-$select-option-bg: $dropdownBackground;
+$select-option-bg: $menu-dropdown-bg;
 $select-option-color: $input-color;
 $select-noresults-color: $text-color;
 $select-input-bg: $input-bg;
@@ -82,20 +82,14 @@ $select-option-selected-bg: $dropdownLinkBackgroundActive;
     width: auto;
   }
 
+  .Select-option {
+    border-left: 2px solid transparent;
+  }
+
   .Select-option.is-focused {
     background-color: $dropdownLinkBackgroundHover;
     color: $dropdownLinkColorHover;
-
-    &::before {
-      position: absolute;
-      left: 0;
-      top: 0;
-      height: 100%;
-      width: 2px;
-      display: block;
-      content: '';
-      background-image: linear-gradient(to bottom, #ffd500 0%, #ff4400 99%, #ff4400 100%);
-    }
+    @include left-brand-border-gradient();
   }
 }
 
diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss
index 903193d8b10..d427ee203b8 100644
--- a/public/sass/pages/_explore.scss
+++ b/public/sass/pages/_explore.scss
@@ -69,7 +69,7 @@
   }
 
   .datasource-picker {
-    min-width: 10rem;
+    min-width: 200px;
   }
 
   .timepicker {