Merge pull request #14283 from grafana/explore-styling-fixes

Misc styling fixes to explore

public/sass/_variables.dark.scss

@@ -44,9 +44,10 @@ $brand-success: $green;
 $brand-warning: $brand-primary;
 $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;
 
 // Status colors
@@ -203,7 +204,7 @@ $search-filter-box-bg: $gray-blue;
 // Typeahead
 $typeahead-shadow: 0 5px 10px 0 $black;
 $typeahead-selected-bg: $dark-4;
-$typeahead-selected-color: $blue;
+$typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------

public/sass/_variables.light.scss

@@ -49,6 +49,7 @@ $query-red: $red;
 $query-green: $green;
 $query-purple: $purple;
 $query-orange: $orange;
+$query-keyword: $blue;
 
 // Status colors
 // -------------------------
@@ -219,8 +220,8 @@ $search-filter-box-bg: $gray-7;
 
 // Typeahead
 $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
 // -------------------------

public/sass/components/_infobox.scss

@@ -32,6 +32,10 @@
   a {
     @extend .external-link;
   }
+
+  &--max-lg {
+    max-width: map-get($grid-breakpoints, 'lg');
+  }
 }
 
 .grafana-info-box__close {

public/sass/components/_slate_editor.scss

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

public/sass/pages/_explore.scss

@@ -2,7 +2,7 @@
   width: 100%;
 
   &-container {
-    padding: 2rem;
+    padding: $dashboard-padding;
   }
 
   &-wrapper {
@@ -36,10 +36,6 @@
     transition: all 0.1s linear;
   }
 
-  .explore-panel__header:hover {
-    transform: translateY(-1px);
-  }
-
   .explore-panel__header-label {
     font-weight: 500;
     margin-right: $panel-margin;
@@ -308,7 +304,7 @@
 
       color: $typeahead-selected-color;
       border-bottom: 1px solid $typeahead-selected-color;
-      background-color: lighten($typeahead-selected-color, 60%);
+      background-color: rgba($typeahead-selected-color, 0.1);
     }
 
     .logs-row-level {