Misc styling fixes to explore: start page, slate code editor colors, text…

Misc styling fixes to explore: start page, slate code editor colors, text highlight in auto completeter suggestion

public/app/plugins/datasource/prometheus/components/PromStart.tsx

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
-import classNames from 'classnames';
 
 
 import PromCheatSheet from './PromCheatSheet';
 import PromCheatSheet from './PromCheatSheet';
 
 
-const TAB_MENU_ITEMS = [
-  {
-    text: 'Start',
-    id: 'start',
-    icon: 'fa fa-rocket',
-  },
-];
-
-export default class PromStart extends PureComponent<any, { active: string }> {
-  state = {
-    active: 'start',
-  };
-
-  onClickTab = active => {
-    this.setState({ active });
-  };
-
+export default class PromStart extends PureComponent<any> {
   render() {
   render() {
-    const { active } = this.state;
-    const customCss = '';
-
     return (
     return (
-      <div style={{ margin: '45px 0', border: '1px solid #ddd', borderRadius: 5 }}>
-        <div className="page-header-canvas">
-          <div className="page-container">
-            <div className="page-header">
-              <nav>
-                <ul className={`gf-tabs ${customCss}`}>
-                  {TAB_MENU_ITEMS.map((tab, idx) => {
-                    const tabClasses = classNames({
-                      'gf-tabs-link': true,
-                      active: tab.id === active,
-                    });
-
-                    return (
-                      <li className="gf-tabs-item" key={tab.id}>
-                        <a className={tabClasses} onClick={() => this.onClickTab(tab.id)}>
-                          <i className={tab.icon} />
-                          {tab.text}
-                        </a>
-                      </li>
-                    );
-                  })}
-                </ul>
-              </nav>
-            </div>
-          </div>
-        </div>
-        <div className="page-container page-body">
-          {active === 'start' && <PromCheatSheet onClickExample={this.props.onClickExample} />}
-        </div>
+      <div className="grafana-info-box">
+        <PromCheatSheet onClickExample={this.props.onClickExample} />} etdiv>
       </div>
       </div>
     );
     );
   }
   }

public/sass/_variables.dark.scss

@@ -44,9 +44,10 @@ $brand-success: $green;
 $brand-warning: $brand-primary;
 $brand-warning: $brand-primary;
 $brand-danger: $red;
 $brand-danger: $red;
 
 
-$query-red: $red;
-$query-green: $green;
-$query-purple: $purple;
+$query-red: #e24d42;
+$query-green: #74e680;
+$query-purple: #fe85fc;
+$query-keyword: #66d9ef;
 $query-orange: $orange;
 $query-orange: $orange;
 
 
 // Status colors
 // Status colors
@@ -203,7 +204,7 @@ $search-filter-box-bg: $gray-blue;
 // Typeahead
 // Typeahead
 $typeahead-shadow: 0 5px 10px 0 $black;
 $typeahead-shadow: 0 5px 10px 0 $black;
 $typeahead-selected-bg: $dark-4;
 $typeahead-selected-bg: $dark-4;
-$typeahead-selected-color: $blue;
+$typeahead-selected-color: $yellow;
 
 
 // Dropdowns
 // Dropdowns
 // -------------------------
 // -------------------------

public/sass/_variables.light.scss

@@ -49,6 +49,7 @@ $query-red: $red;
 $query-green: $green;
 $query-green: $green;
 $query-purple: $purple;
 $query-purple: $purple;
 $query-orange: $orange;
 $query-orange: $orange;
+$query-keyword: $blue;
 
 
 // Status colors
 // Status colors
 // -------------------------
 // -------------------------
@@ -217,10 +218,10 @@ $tab-border-color: $gray-5;
 $search-shadow: 0 5px 30px 0 $gray-4;
 $search-shadow: 0 5px 30px 0 $gray-4;
 $search-filter-box-bg: $gray-7;
 $search-filter-box-bg: $gray-7;
 
 
-// Typeahead
+// ypeahead
 $typeahead-shadow: 0 5px 10px 0 $gray-5;
 $typeahead-shadow: 0 5px 10px 0 $gray-5;
-$typeahead-selected-bg: lighten($blue, 57%);
-$typeahead-selected-color: $blue;
+$typeahead-selected-bg: $gray-6;
+$typeahead-selected-color: $yellow;
 
 
 // Dropdowns
 // Dropdowns
 // -------------------------
 // -------------------------

public/sass/components/_slate_editor.scss

@@ -12,7 +12,7 @@
   width: 100%;
   width: 100%;
   cursor: text;
   cursor: text;
   line-height: $line-height-base;
   line-height: $line-height-base;
-  color: $text-color-weak;
+  color: $text-color;
   background-color: $panel-bg;
   background-color: $panel-bg;
   background-image: none;
   background-image: none;
   border: $panel-border;
   border: $panel-border;
@@ -95,45 +95,45 @@
     color: $text-color-weak;
     color: $text-color-weak;
   }
   }
 
 
-  .token.punctuation {
-    color: $text-color-weak;
+  .token.variable,
+  .token.entity {
+    color: $text-color;
   }
   }
 
 
   .token.property,
   .token.property,
   .token.tag,
   .token.tag,
-  .token.boolean,
-  .token.number,
-  .token.function-name,
   .token.constant,
   .token.constant,
   .token.symbol,
   .token.symbol,
   .token.deleted {
   .token.deleted {
     color: $query-red;
     color: $query-red;
   }
   }
 
 
+  .token.attr-value,
   .token.selector,
   .token.selector,
-  .token.attr-name,
   .token.string,
   .token.string,
   .token.char,
   .token.char,
-  .token.function,
   .token.builtin,
   .token.builtin,
   .token.inserted {
   .token.inserted {
     color: $query-green;
     color: $query-green;
   }
   }
 
 
+  .token.boolean,
+  .token.number,
   .token.operator,
   .token.operator,
-  .token.entity,
-  .token.url,
-  .token.variable {
+  .token.url {
     color: $query-purple;
     color: $query-purple;
   }
   }
 
 
+  .token.function,
+  .token.attr-name,
+  .token.function-name,
   .token.atrule,
   .token.atrule,
-  .token.attr-value,
   .token.keyword,
   .token.keyword,
   .token.class-name {
   .token.class-name {
-    color: $blue;
+    color: $query-keyword;
   }
   }
 
 
+  .token.punctuation,
   .token.regex,
   .token.regex,
   .token.important {
   .token.important {
     color: $query-orange;
     color: $query-orange;

public/sass/pages/_explore.scss

@@ -2,7 +2,7 @@
   width: 100%;
   width: 100%;
 
 
   &-container {
   &-container {
-    padding: 2rem;
+    padding: $dashboard-padding;
   }
   }
 
 
   &-wrapper {
   &-wrapper {