Merge pull request #13445 from grafana/explore-dark-theme-fixes

fixes to dark theme for Explore mode

public/app/features/explore/Explore.tsx

@@ -528,10 +528,11 @@ export class Explore extends React.Component<any, ExploreState> {
           {!datasourceMissing ? (
           {!datasourceMissing ? (
             <div className="navbar-buttons">
             <div className="navbar-buttons">
               <Select
               <Select
-                className="datasource-picker"
                 clearable={false}
                 clearable={false}
+                className="gf-form-input gf-form-input--form-dropdown datasource-picker"
                 onChange={this.onChangeDatasource}
                 onChange={this.onChangeDatasource}
                 options={datasources}
                 options={datasources}
+                isOpen={true}
                 placeholder="Loading datasources..."
                 placeholder="Loading datasources..."
                 value={selectedDatasource}
                 value={selectedDatasource}
               />
               />
@@ -586,17 +587,17 @@ export class Explore extends React.Component<any, ExploreState> {
             />
             />
             <div className="result-options">
             <div className="result-options">
               {supportsGraph ? (
               {supportsGraph ? (
-                <button className={`btn navbar-button ${graphButtonActive}`} onClick={this.onClickGraphButton}>
+                <button className={`btn toggle-btn ${graphButtonActive}`} onClick={this.onClickGraphButton}>
                   Graph
                   Graph
                 </button>
                 </button>
               ) : null}
               ) : null}
               {supportsTable ? (
               {supportsTable ? (
-                <button className={`btn navbar-button ${tableButtonActive}`} onClick={this.onClickTableButton}>
+                <button className={`btn toggle-btn ${tableButtonActive}`} onClick={this.onClickTableButton}>
                   Table
                   Table
                 </button>
                 </button>
               ) : null}
               ) : null}
               {supportsLogs ? (
               {supportsLogs ? (
-                <button className={`btn navbar-button ${logsButtonActive}`} onClick={this.onClickLogsButton}>
+                <button className={`btn toggle-btn ${logsButtonActive}`} onClick={this.onClickLogsButton}>
                   Logs
                   Logs
                 </button>
                 </button>
               ) : null}
               ) : null}

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-font-size: $font-size-base;
 $select-item-bg: $dropdownBackground;
 $select-item-bg: $dropdownBackground;
 $select-item-fg: $input-color;
 $select-item-fg: $input-color;
-$select-option-bg: $dropdownBackground;
+$select-option-bg: $menu-dropdown-bg;
 $select-option-color: $input-color;
 $select-option-color: $input-color;
 $select-noresults-color: $text-color;
 $select-noresults-color: $text-color;
 $select-input-bg: $input-bg;
 $select-input-bg: $input-bg;
@@ -82,20 +82,14 @@ $select-option-selected-bg: $dropdownLinkBackgroundActive;
     width: auto;
     width: auto;
   }
   }
 
 
+  .Select-option {
+    border-left: 2px solid transparent;
+  }
+
   .Select-option.is-focused {
   .Select-option.is-focused {
     background-color: $dropdownLinkBackgroundHover;
     background-color: $dropdownLinkBackgroundHover;
     color: $dropdownLinkColorHover;
     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();
   }
   }
 }
 }
 
 

public/sass/pages/_explore.scss

@@ -69,7 +69,7 @@
   }
   }
 
 
   .datasource-picker {
   .datasource-picker {
-    min-width: 10rem;
+    min-width: 200px;
   }
   }
 
 
   .timepicker {
   .timepicker {