Styles & Theme: Inline form styles polish & tweaks (#23521)

* Styles: Refactoring and tweaks to inline form styles * Minor change * Minor fix * Updated snapshot * tweaks * minor tweak * Updated modal style * Updated snapshot * Updated more snapshots

Styles & Theme: Inline form styles polish & tweaks (#23521)
* Styles: Refactoring and tweaks to inline form styles * Minor change * Minor fix * Updated snapshot * tweaks * minor tweak * Updated modal style * Updated snapshot * Updated more snapshots
8b7decf5 · Torkel Ödegaard · GitHub · d4516439 · 8b7decf5 · 8b7decf5
Commit 8b7decf5 authored Apr 13, 2020 by Torkel Ödegaard Committed by GitHub Apr 13, 2020
39 changed files
--- a/packages/grafana-data/src/types/theme.ts
+++ b/packages/grafana-data/src/types/theme.ts
@@ -153,8 +153,6 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
    // New reds palette used by next-gen form elements
    red88: string;
-    grayBlue: string;
    // Accent colors
    blue: string;
    blueBase: string;
@@ -168,13 +166,11 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
    red: string;
    yellow: string;
    purple: string;
-    variable: string;
    orange: string;
    orangeDark: string;
    queryRed: string;
    queryGreen: string;
    queryPurple: string;
-    queryKeyword: string;
    queryOrange: string;
    brandPrimary: string;
    brandSuccess: string;
@@ -217,6 +213,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
    textFaint: string;
    textEmphasis: string;
    headingColor: string;
+    textBlue: string;
    // Next-gen forms functional colors
    formLabel: string;

--- a/packages/grafana-ui/src/components/Button/Button.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.tsx
@@ -87,7 +87,6 @@ export const getButtonStyles = stylesFactory(({ theme, size, variant, icon }: St
        font-size: ${fontSize};
        padding: ${padding};
        height: ${height};
-        line-height: ${height};
        vertical-align: middle;
        cursor: pointer;
        border: 1px solid ${borderColor};

--- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
+++ b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
 import React from 'react';
 import { Icon } from '../Icon/Icon';
-import { css } from 'emotion';
+import { css, cx } from 'emotion';
 // @ts-ignore
 import RCCascader from 'rc-cascader';
@@ -14,10 +14,10 @@ export interface ButtonCascaderProps {
  disabled?: boolean;
  value?: string[];
  fieldNames?: { label: string; value: string; children: string };
  loadData?: (selectedOptions: CascaderOption[]) => void;
  onChange?: (value: string[], selectedOptions: CascaderOption[]) => void;
  onPopupVisibleChange?: (visible: boolean) => void;
+  className?: string;
 }
 const getStyles = stylesFactory(() => {
@@ -26,21 +26,26 @@ const getStyles = stylesFactory(() => {
      label: popup;
      z-index: 100;
    `,
+    icon: css`
+      margin-left: 4px;
+    `,
  };
 });
 export const ButtonCascader: React.FC<ButtonCascaderProps> = props => {
-  const { onChange, loadData, ...rest } = props;
+  const { onChange, className, loadData, ...rest } = props;
+  const styles = getStyles();
  return (
    <RCCascader
      onChange={onChangeCascader(onChange)}
      loadData={onLoadDataCascader(loadData)}
-      popupClassName={getStyles().popup}
+      popupClassName={styles.popup}
      {...rest}
      expandIcon={null}
    >
-      <button className="gf-form-label gf-form-label--btn" disabled={props.disabled}>
+      <button className={cx('gf-form-label', className)} disabled={props.disabled}>
-        {props.children} <Icon name="angle-down" style={{ marginBottom: 0, marginLeft: '4px' }} />
+        {props.children} <Icon name="angle-down" className={styles.icon} />
      </button>
    </RCCascader>
  );

--- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
+++ b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
 import React from 'react';
 import { Themeable } from '../../types/theme';
 import { GrafanaTheme } from '@grafana/data';
-import { selectThemeVariant } from '../../themes/selectThemeVariant';
 import { css, cx } from 'emotion';
 import { stylesFactory } from '../../themes';
@@ -16,7 +15,7 @@ const getCallToActionCardStyles = stylesFactory((theme: GrafanaTheme) => ({
  wrapper: css`
    label: call-to-action-card;
    padding: ${theme.spacing.lg};
-    background: ${selectThemeVariant({ light: theme.palette.gray6, dark: theme.palette.grayBlue }, theme.type)};
+    background: ${theme.colors.bg2};
    border-radius: ${theme.border.radius.md};
    display: flex;
    flex-direction: column;

--- a/packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap
+++ b/packages/grafana-ui/src/components/CallToActionCard/__snapshots__/CallToActionCard.test.tsx.snap
@@ -2,7 +2,7 @@
 exports[`CallToActionCard rendering when message and footer provided 1`] = `
 <div
-  class="css-1ud9puf-call-to-action-card"
+  class="css-ujo8b3-call-to-action-card"
 >
  <div
    class="css-m2iibx"
@@ -24,7 +24,7 @@ exports[`CallToActionCard rendering when message and footer provided 1`] = `
 exports[`CallToActionCard rendering when message and no footer provided 1`] = `
 <div
-  class="css-1ud9puf-call-to-action-card"
+  class="css-ujo8b3-call-to-action-card"
 >
  <div
    class="css-m2iibx"
@@ -41,7 +41,7 @@ exports[`CallToActionCard rendering when message and no footer provided 1`] = `
 exports[`CallToActionCard rendering when no message and footer provided 1`] = `
 <div
-  class="css-1ud9puf-call-to-action-card"
+  class="css-ujo8b3-call-to-action-card"
 >
  <a
    href="http://dummy.link"

--- a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
@@ -38,7 +38,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
      color: ${theme.palette.queryGreen};
    }
    .token.variable {
-      color: ${theme.palette.queryKeyword};
+      color: ${theme.colors.textBlue};
    }
  `,
 }));

--- a/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss
+++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss
@@ -4,7 +4,7 @@ $select-input-bg-disabled: $input-bg-disabled;
 @mixin select-control() {
  width: 100%;
  margin-right: $space-xs;
-  @include border-radius($input-border-radius-sm);
+  @include border-radius($input-border-radius);
  background-color: $input-bg;
 }

--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
@@ -34,7 +34,6 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
  const border = `1px solid ${borderColor}`;
  const borderActive = `1px solid ${borderColorActive}`;
  const borderHover = `1px solid ${borderColorHover}`;
-  const fakeBold = `0 0 0.65px ${textColorHover}, 0 0 0.65px ${textColorHover}`;
  return {
    radio: css`
@@ -47,7 +46,6 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
      &:checked + label {
        border: ${borderActive};
        color: ${textColorActive};
-        text-shadow: ${fakeBold};
        background: ${bgActive};
        z-index: 3;
      }
@@ -62,10 +60,6 @@ const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme, size: RadioButt
        background: ${bgDisabled};
        color: ${textColor};
      }
-      &:enabled + label:hover {
-        text-shadow: ${fakeBold};
-      }
    `,
    radioLabel: css`
      display: inline-block;

--- a/packages/grafana-ui/src/components/IconButton/IconButton.tsx
+++ b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
@@ -46,11 +46,11 @@ export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
 function getHoverColor(theme: GrafanaTheme, surface: SurfaceType): string {
  switch (surface) {
    case 'body':
-      return theme.isLight ? theme.palette.gray95 : theme.palette.gray15;
+      return theme.isLight ? theme.palette.gray95 : theme.palette.gray10;
    case 'panel':
-      return theme.isLight ? theme.palette.gray6 : theme.palette.gray25;
+      return theme.isLight ? theme.palette.gray6 : theme.palette.gray15;
    case 'header':
-      return theme.isLight ? theme.palette.gray85 : theme.palette.gray25;
+      return theme.isLight ? theme.colors.bg3 : theme.palette.gray25;
  }
 }

--- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts
+++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
@@ -10,7 +10,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
      position: fixed;
      z-index: ${theme.zIndex.modal};
      background: ${theme.colors.bodyBg};
-      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+      box-shadow: 0 0 20px ${theme.colors.dropdownShadow};
      background-clip: padding-box;
      outline: none;
      width: 750px;
@@ -33,7 +33,6 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
    `,
    modalHeader: css`
      background: ${theme.colors.bg1};
-      box-shadow: 0 0 20px ${theme.colors.dropdownShadow};
      border-bottom: 1px solid ${theme.colors.pageHeaderBorder};
      display: flex;
      height: 42px;

--- a/packages/grafana-ui/src/components/Select/SelectBase.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectBase.tsx
@@ -277,7 +277,7 @@ export function SelectBase<T>({
            width: inputSizesPixels(size),
          }),
        }}
-        className={widthClass}
+        className={cx('select-container', widthClass)}
        {...commonSelectProps}
        {...creatableProps}
        {...asyncSelectProps}

--- a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap
+++ b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap
@@ -2,10 +2,10 @@
 exports[`TimePickerContent renders correctly in full screen 1`] = `
 <div
-  className="css-1l5oyux"
+  className="css-1eellmz"
 >
  <div
-    className="css-13dsoi7"
+    className="css-dlnzj7"
  >
    <FullScreenForm
      historyOptions={Array []}
@@ -93,10 +93,10 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
 exports[`TimePickerContent renders correctly in narrow screen 1`] = `
 <div
-  className="css-1l5oyux"
+  className="css-1eellmz"
 >
  <div
-    className="css-13dsoi7"
+    className="css-dlnzj7"
  >
    <FullScreenForm
      historyOptions={Array []}
@@ -184,10 +184,10 @@ exports[`TimePickerContent renders correctly in narrow screen 1`] = `
 exports[`TimePickerContent renders recent absolute ranges correctly 1`] = `
 <div
-  className="css-1l5oyux"
+  className="css-1eellmz"
 >
  <div
-    className="css-13dsoi7"
+    className="css-dlnzj7"
  >
    <FullScreenForm
      history={

--- a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/colors.ts
+++ b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/colors.ts
@@ -3,14 +3,8 @@ import { selectThemeVariant } from '../../../themes/selectThemeVariant';
 export const getThemeColors = (theme: GrafanaTheme) => {
  return {
-    border: selectThemeVariant(
+    border: theme.colors.border1,
-      {
+    background: theme.colors.bodyBg,
-        light: theme.palette.gray4,
-        dark: theme.palette.gray25,
-      },
-      theme.type
-    ),
-    background: theme.colors.dropdownBg,
    shadow: theme.colors.dropdownShadow,
    formBackground: selectThemeVariant(
      {

--- a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
+++ b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
@@ -115,6 +115,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
                  "panelBg": "#141619",
                  "panelBorder": "#202226",
                  "text": "#c7d0d9",
+                  "textBlue": "#339ae5",
                  "textEmphasis": "#ececec",
                  "textFaint": "#222426",
                  "textStrong": "#ffffff",
@@ -132,7 +133,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
                  "black": "#000000",
                  "blue": "#33b5e5",
                  "blue77": "#1f60c4",
-                  "blue85": "#3274d9",
+                  "blue85": "#339ae5",
                  "blue95": "#5794f2",
                  "blueBase": "#3274d9",
                  "blueFaint": "#041126",
@@ -170,7 +171,6 @@ exports[`TimePicker renders buttons correctly 1`] = `
                  "gray85": "#c7d0d9",
                  "gray95": "#e9edf2",
                  "gray98": "#f7f8fa",
-                  "grayBlue": "#212327",
                  "greenBase": "#299c46",
                  "greenShade": "#23843b",
                  "online": "#299c46",
@@ -178,7 +178,6 @@ exports[`TimePicker renders buttons correctly 1`] = `
                  "orangeDark": "#ff780a",
                  "purple": "#9933cc",
                  "queryGreen": "#74e680",
-                  "queryKeyword": "#66d9ef",
                  "queryOrange": "#eb7b18",
                  "queryPurple": "#fe85fc",
                  "queryRed": "#e02f44",
@@ -430,6 +429,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                  "panelBg": "#141619",
                  "panelBorder": "#202226",
                  "text": "#c7d0d9",
+                  "textBlue": "#339ae5",
                  "textEmphasis": "#ececec",
                  "textFaint": "#222426",
                  "textStrong": "#ffffff",
@@ -447,7 +447,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                  "black": "#000000",
                  "blue": "#33b5e5",
                  "blue77": "#1f60c4",
-                  "blue85": "#3274d9",
+                  "blue85": "#339ae5",
                  "blue95": "#5794f2",
                  "blueBase": "#3274d9",
                  "blueFaint": "#041126",
@@ -485,7 +485,6 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                  "gray85": "#c7d0d9",
                  "gray95": "#e9edf2",
                  "gray98": "#f7f8fa",
-                  "grayBlue": "#212327",
                  "greenBase": "#299c46",
                  "greenShade": "#23843b",
                  "online": "#299c46",
@@ -493,7 +492,6 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                  "orangeDark": "#ff780a",
                  "purple": "#9933cc",
                  "queryGreen": "#74e680",
-                  "queryKeyword": "#66d9ef",
                  "queryOrange": "#eb7b18",
                  "queryPurple": "#fe85fc",
                  "queryRed": "#e02f44",

--- a/packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
+++ b/packages/grafana-ui/src/components/TransformersUI/OrganizeFieldsTransformerEditor.tsx
@@ -159,8 +159,7 @@ const getFieldNameStyles = stylesFactory((theme: GrafanaTheme) => ({
    width: 35%;
    padding: 0 8px;
    border-radius: 3px;
-    background-color: ${theme.isDark ? theme.palette.grayBlue : theme.palette.gray6};
+    background-color: ${theme.colors.bg2};
-    border: 1px solid ${theme.isDark ? theme.palette.dark6 : theme.palette.gray5};
  `,
  right: css`
    width: 65%;

--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -53,7 +53,6 @@ $gray-4: ${theme.palette.gray4};
 $gray-5: ${theme.palette.gray5};
 $gray-6: ${theme.palette.gray6};
-$gray-blue: ${theme.palette.grayBlue};
 $input-black: ${theme.colors.formInputBg};
 $white: ${theme.palette.white};
@@ -65,7 +64,7 @@ $red: $red-base;
 $yellow: ${theme.palette.yellow};
 $orange: ${theme.palette.orange};
 $purple: ${theme.palette.purple};
-$variable: ${theme.palette.variable};
+$variable: ${theme.colors.textBlue};
 $brand-primary: ${theme.palette.brandPrimary};
 $brand-success: ${theme.palette.brandSuccess};
@@ -76,10 +75,9 @@ $query-red: ${theme.palette.queryRed};
 $query-green: ${theme.palette.queryGreen};
 $query-purple: ${theme.palette.queryPurple};
 $query-orange: ${theme.palette.orange};
-$query-keyword: ${theme.palette.queryKeyword};
 // Status colors
-// -------------------------
+// -------------------------¨
 $online: ${theme.palette.online};
 $warn: ${theme.palette.warn};
 $critical: ${theme.palette.critical};
@@ -95,6 +93,7 @@ $text-color-strong: ${theme.colors.textStrong};
 $text-color-weak: ${theme.colors.textWeak};
 $text-color-faint: ${theme.colors.textFaint};
 $text-color-emphasis: ${theme.colors.textEmphasis};
+$text-blue: ${theme.colors.textBlue};
 $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
 $textShadow: none;
@@ -122,7 +121,7 @@ $hr-border-color: $dark-9;
 // -------------------------
 $panel-bg: ${theme.colors.panelBg};
 $panel-border: 1px solid ${theme.colors.panelBorder};
-$panel-header-hover-bg: ${theme.colors.bg3};
+$panel-header-hover-bg: ${theme.colors.bg2};
 $panel-corner: $panel-bg;
 // page header
@@ -150,7 +149,7 @@ $list-item-bg: $card-background;
 $list-item-hover-bg: $card-background-hover;
 $list-item-shadow: $card-shadow;
-$empty-list-cta-bg: $gray-blue;
+$empty-list-cta-bg: ${theme.colors.bg2};
 // Scrollbars
 $scrollbarBackground: #404357;
@@ -203,13 +202,12 @@ $input-bg: $input-black;
 $input-bg-disabled: $dark-6;
 $input-color: ${theme.colors.formInputText};
-$input-border-color: ${theme.palette.gray15};
+$input-border-color: ${theme.colors.formInputBorder};
-$input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
+$input-box-shadow: none;
 $input-border-focus: ${theme.palette.blue95};
 $input-box-shadow-focus: $blue-light !default;
 $input-color-placeholder: ${theme.colors.formInputPlaceholderText};
-$input-label-bg: ${theme.palette.gray15};
+$input-label-bg: ${theme.colors.bg2};
-$input-label-border-color: ${theme.palette.gray15};
 $input-color-select-arrow: $white;
 // Search
@@ -249,14 +247,15 @@ $navbar-button-border: #2f2f32;
 $side-menu-bg: $panel-bg;
 $side-menu-bg-mobile: $panel-bg;
 $side-menu-border: none;
-$side-menu-item-hover-bg: $dark-3;
+$side-menu-item-hover-bg: ${theme.colors.bg2};
 $side-menu-shadow: 0 0 20px black;
-$side-menu-link-color: ${theme.palette.gray70};
+$side-menu-icon-color: ${theme.palette.gray70};
+$side-menu-header-color: ${theme.colors.text};
 // Menu dropdowns
 // -------------------------
-$menu-dropdown-bg: $panel-bg;
+$menu-dropdown-bg: ${theme.colors.bg1};
-$menu-dropdown-hover-bg: $dark-3;
+$menu-dropdown-hover-bg: ${theme.colors.bg2};
 $menu-dropdown-shadow: 5px 5px 20px -5px $black;
 // Tabs
@@ -354,7 +353,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
 $switch-bg: $input-bg;
 $switch-slider-color: $dark-3;
 $switch-slider-off-bg: $gray-1;
-$switch-slider-on-bg: linear-gradient(90deg, #eb7b18, #d44a3a);
+$switch-slider-on-bg: ${theme.palette.blueLight};
 $switch-slider-shadow: 0 0 3px black;
 //Checkbox
@@ -378,7 +377,7 @@ $panel-editor-tabs-line-color: #e3e3e3;
 $panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
 $panel-options-group-border: none;
-$panel-options-group-header-bg: $gray-blue;
+$panel-options-group-header-bg: ${theme.colors.bg2};
 $panel-grid-placeholder-bg: $blue-faint;
 $panel-grid-placeholder-shadow: 0 0 4px $blue-shade;

--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -58,7 +58,7 @@ $red: $red-base;
 $yellow: ${theme.palette.yellow};
 $orange: ${theme.palette.orange};
 $purple: ${theme.palette.purple};
-$variable: ${theme.palette.variable};
+$variable: ${theme.colors.textBlue};
 $brand-primary: ${theme.palette.brandPrimary};
 $brand-success: ${theme.palette.brandSuccess};
@@ -69,7 +69,6 @@ $query-red: ${theme.palette.queryRed};
 $query-green: ${theme.palette.queryGreen};
 $query-purple: ${theme.palette.queryPurple};
 $query-orange: ${theme.palette.orange};
-$query-keyword: ${theme.palette.queryKeyword};
 // Status colors
 // -------------------------
@@ -88,6 +87,7 @@ $text-color-strong: ${theme.colors.textStrong};
 $text-color-weak: ${theme.colors.textWeak};
 $text-color-faint: ${theme.colors.textFaint};
 $text-color-emphasis: ${theme.colors.textEmphasis};
+$text-blue: ${theme.colors.textBlue};
 $text-shadow-faint: none;
@@ -114,7 +114,7 @@ $hr-border-color: $gray-4 !default;
 // -------------------------
 $panel-bg: ${theme.colors.panelBg};
 $panel-border: 1px solid ${theme.colors.panelBorder};
-$panel-header-hover-bg: $gray-6;
+$panel-header-hover-bg: ${theme.colors.bg2};
 $panel-corner: $gray-4;
 // Page header
@@ -195,13 +195,12 @@ $input-bg: $white;
 $input-bg-disabled: $gray-5;
 $input-color: ${theme.colors.formInputText};
-$input-border-color: ${theme.palette.gray95};
+$input-border-color: ${theme.colors.formInputBorder};
 $input-box-shadow: none;
 $input-border-focus: ${theme.palette.blue95};
 $input-box-shadow-focus: ${theme.palette.blue95};
 $input-color-placeholder: ${theme.colors.formInputPlaceholderText};
-$input-label-bg: ${theme.palette.gray95};
+$input-label-bg: ${theme.colors.bg2};
-$input-label-border-color: ${theme.palette.gray95};
 $input-color-select-arrow: ${theme.palette.gray60};
 // search
@@ -245,6 +244,8 @@ $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
 $side-menu-item-hover-bg: ${theme.palette.gray25};
 $side-menu-shadow: 5px 0px 10px -5px $gray-1;
 $side-menu-link-color: $gray-4;
+$side-menu-icon-color: ${theme.palette.gray70};
+$side-menu-header-color: ${theme.palette.gray95};
 // Menu dropdowns
 // -------------------------
@@ -345,7 +346,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
 $switch-bg: $white;
 $switch-slider-color: $gray-7;
 $switch-slider-off-bg: $gray-5;
-$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400);
+$switch-slider-on-bg: ${theme.palette.blueShade};
 $switch-slider-shadow: 0 0 3px $dark-2;
 //Checkbox

--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -142,13 +142,7 @@ $link-hover-decoration: ${theme.typography.link.hoverDecoration} !default;
 // Forms
 $input-line-height: 18px !default;
+$input-border-radius: $border-radius;
-$input-border-radius: 0 $border-radius $border-radius 0 !default;
-$input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
-$label-border-radius: $border-radius 0 0 $border-radius !default;
-$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
 $input-padding: 0 ${theme.spacing.sm};
 $input-height: 32px !default;

--- a/packages/grafana-ui/src/themes/dark.ts
+++ b/packages/grafana-ui/src/themes/dark.ts
@@ -22,7 +22,6 @@ const basicColors = {
  gray5: '#ececec',
  gray6: '#f4f5f8', // not used in dark theme
  gray7: '#fbfbfb', // not used in dark theme
-  grayBlue: '#212327',
  blueBase: '#3274d9',
  blueShade: '#1f60c4',
  blueLight: '#5794f2',
@@ -98,7 +97,6 @@ const darkTheme: GrafanaTheme = {
    queryRed: basicColors.redBase,
    queryGreen: '#74e680',
    queryPurple: '#fe85fc',
-    queryKeyword: '#66d9ef',
    queryOrange: basicColors.orange,
    online: basicColors.greenBase,
    warn: '#f79520',
@@ -126,6 +124,7 @@ const darkTheme: GrafanaTheme = {
    textWeak: basicColors.gray2,
    textEmphasis: basicColors.gray5,
    textFaint: basicColors.dark5,
+    textBlue: basicColors.blue85,
    link: basicColors.gray4,
    linkDisabled: basicColors.gray2,

--- a/packages/grafana-ui/src/themes/default.ts
+++ b/packages/grafana-ui/src/themes/default.ts
@@ -15,7 +15,7 @@ export const commonColorsPalette = {
  // New blues palette used by next-gen form elements
  blue95: '#5794f2',
-  blue85: '#3274d9',
+  blue85: '#339ae5',
  blue77: '#1f60c4',
  // New reds palette used by next-gen form elements

--- a/packages/grafana-ui/src/themes/light.ts
+++ b/packages/grafana-ui/src/themes/light.ts
@@ -22,7 +22,6 @@ const basicColors = {
  gray5: '#dde4ed',
  gray6: '#e9edf2', // same as gray95
  gray7: '#f7f8fa', // same as gray98
-  grayBlue: '#212327', // not used in light theme
  blueBase: '#3274d9',
  blueShade: '#1f60c4',
  blueLight: '#5794f2',
@@ -35,7 +34,6 @@ const basicColors = {
  red: '#d44939',
  yellow: '#ff851b',
  purple: '#9954bb',
-  variable: '#007580',
  orange: '#ff7941',
  orangeDark: '#ed5700',
 };
@@ -90,7 +88,6 @@ const lightTheme: GrafanaTheme = {
  name: 'Grafana Light',
  palette: {
    ...basicColors,
-    variable: basicColors.blue,
    brandPrimary: basicColors.orange,
    brandSuccess: basicColors.greenBase,
    brandWarning: basicColors.orange,
@@ -98,7 +95,6 @@ const lightTheme: GrafanaTheme = {
    queryRed: basicColors.redBase,
    queryGreen: basicColors.greenBase,
    queryPurple: basicColors.purple,
-    queryKeyword: basicColors.blueBase,
    queryOrange: basicColors.orange,
    online: basicColors.greenShade,
    warn: '#f79520',
@@ -124,6 +120,7 @@ const lightTheme: GrafanaTheme = {
    textWeak: basicColors.gray2,
    textEmphasis: basicColors.dark5,
    textFaint: basicColors.dark4,
+    textBlue: basicColors.blue85,
    // Link colors
    link: basicColors.gray1,

--- a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
 import React, { useState } from 'react';
-import { renderOrCallToRender, HorizontalGroup, Icon, stylesFactory, useTheme } from '@grafana/ui';
+import { renderOrCallToRender, Icon, stylesFactory, useTheme } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { css } from 'emotion';
 import { useUpdateEffect } from 'react-use';
@@ -54,19 +54,17 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
  return (
    <div className={styles.wrapper}>
      <div className={styles.header}>
-        <HorizontalGroup justify="space-between">
+        <div
-          <div
+          className={styles.titleWrapper}
-            className={styles.titleWrapper}
+          onClick={() => {
-            onClick={() => {
+            setIsContentVisible(!isContentVisible);
-              setIsContentVisible(!isContentVisible);
+          }}
-            }}
+          aria-label="Query operation row title"
-            aria-label="Query operation row title"
+        >
-          >
+          <Icon name={isContentVisible ? 'angle-down' : 'angle-right'} className={styles.collapseIcon} />
-            <Icon name={isContentVisible ? 'angle-down' : 'angle-right'} className={styles.collapseIcon} />
+          {title && <span className={styles.title}>{titleElement}</span>}
-            {title && <span className={styles.title}>{titleElement}</span>}
+        </div>
-          </div>
+        {actions && actionsElement}
-          {actions && <div>{actionsElement}</div>}
-        </HorizontalGroup>
      </div>
      {isContentVisible && <div className={styles.content}>{children}</div>}
    </div>
@@ -74,8 +72,6 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
 };
 const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
-  const borderColor = theme.colors.border2;
  return {
    wrapper: css`
      margin-bottom: ${theme.spacing.formSpacingBase * 2}px;
@@ -83,8 +79,11 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
    header: css`
      padding: ${theme.spacing.sm};
      border-radius: ${theme.border.radius.sm};
-      border: 1px solid ${borderColor};
+      background: ${theme.colors.bg2};
-      background: ${theme.colors.bodyBg};
+      height: ${theme.spacing.formInputHeight};
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
    `,
    collapseIcon: css`
      color: ${theme.colors.textWeak};
@@ -97,17 +96,12 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
    title: css`
      font-weight: ${theme.typography.weight.semibold};
-      color: ${theme.palette.blue95};
+      color: ${theme.colors.textBlue};
      margin-left: ${theme.spacing.sm};
    `,
    content: css`
-      border: 1px solid ${borderColor};
+      margin-top: ${theme.spacing.xs};
-      margin-top: -1px;
-      background: ${theme.colors.bodyBg};
      margin-left: ${theme.spacing.xl};
-      border-top: 1px solid ${theme.colors.bodyBg};
-      border-radis: 0 ${theme.border.radius.sm};
-      padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.lg};
    `,
  };
 });

--- a/public/app/core/components/Select/FolderPicker.tsx
+++ b/public/app/core/components/Select/FolderPicker.tsx
@@ -159,7 +159,6 @@ export class FolderPicker extends PureComponent<Props, State> {
            loadOptions={this.debouncedSearch}
            onChange={this.onFolderChange}
            onCreateOption={this.createNewFolder}
-            size="sm"
            menuPosition="fixed"
          />
        )}
@@ -176,7 +175,6 @@ export class FolderPicker extends PureComponent<Props, State> {
                loadOptions={this.debouncedSearch}
                onChange={this.onFolderChange}
                onCreateOption={this.createNewFolder}
-                size="sm"
              />
            </div>
          </div>

--- a/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
+++ b/public/app/core/components/Select/__snapshots__/FolderPicker.test.tsx.snap
@@ -21,7 +21,6 @@ exports[`FolderPicker should render 1`] = `
        loadingMessage="Loading folders..."
        onChange={[Function]}
        onCreateOption={[Function]}
-        size="sm"
        value={Object {}}
      />
    </div>

--- a/public/app/features/dashboard/panel_editor/QueryEditorRowTitle.tsx
+++ b/public/app/features/dashboard/panel_editor/QueryEditorRowTitle.tsx
@@ -42,7 +42,7 @@ const getQueryEditorRowTitleStyles = stylesFactory((theme: GrafanaTheme) => {
  return {
    refId: css`
      font-weight: ${theme.typography.weight.semibold};
-      color: ${theme.palette.blue95};
+      color: ${theme.colors.textBlue};
      cursor: pointer;
      display: flex;
      align-items: center;

--- a/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PromQueryEditor.tsx
@@ -2,10 +2,10 @@ import _ from 'lodash';
 import React, { PureComponent } from 'react';
 // Types
-import { FormLabel, LegacyForms } from '@grafana/ui';
+import { FormLabel, LegacyForms, Select } from '@grafana/ui';
 import { SelectableValue, QueryEditorProps } from '@grafana/data';
-const { Select, Switch } = LegacyForms;
+const { Switch } = LegacyForms;
 import { PrometheusDatasource } from '../datasource';
 import { PromQuery, PromOptions } from '../types';
@@ -162,7 +162,7 @@ export class PromQueryEditor extends PureComponent<Props, State> {
          </div>
          <div className="gf-form">
-            <div className="gf-form-label">Format</div>
+            <div className="gf-form-label width-7">Format</div>
            <Select isSearchable={false} options={FORMAT_OPTIONS} onChange={this.onFormatChange} value={formatOption} />
            <Switch label="Instant" checked={instant} onChange={this.onInstantChange} />

--- a/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/prometheus/components/__snapshots__/PromQueryEditor.test.tsx.snap
@@ -77,27 +77,8 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
        Resolution
      </div>
      <Select
-        allowCustomValue={false}
-        autoFocus={false}
-        backspaceRemovesValue={true}
-        className=""
-        components={
-          Object {
-            "Group": [Function],
-            "IndicatorsContainer": [Function],
-            "MenuList": [Function],
-            "Option": [Function],
-            "SingleValue": [Function],
-          }
-        }
-        isClearable={false}
-        isDisabled={false}
-        isLoading={false}
-        isMulti={false}
        isSearchable={false}
-        maxMenuHeight={300}
        onChange={[Function]}
-        openMenuOnFocus={false}
        options={
          Array [
            Object {
@@ -126,7 +107,6 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
            },
          ]
        }
-        tabSelectsValue={true}
        value={
          Object {
            "label": "1/1",
@@ -139,32 +119,13 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
      className="gf-form"
    >
      <div
-        className="gf-form-label"
+        className="gf-form-label width-7"
      >
        Format
      </div>
      <Select
-        allowCustomValue={false}
-        autoFocus={false}
-        backspaceRemovesValue={true}
-        className=""
-        components={
-          Object {
-            "Group": [Function],
-            "IndicatorsContainer": [Function],
-            "MenuList": [Function],
-            "Option": [Function],
-            "SingleValue": [Function],
-          }
-        }
-        isClearable={false}
-        isDisabled={false}
-        isLoading={false}
-        isMulti={false}
        isSearchable={false}
-        maxMenuHeight={300}
        onChange={[Function]}
-        openMenuOnFocus={false}
        options={
          Array [
            Object {
@@ -181,7 +142,6 @@ exports[`Render PromQueryEditor with basic options should render 1`] = `
            },
          ]
        }
-        tabSelectsValue={true}
        value={
          Object {
            "label": "Time series",

--- a/public/app/plugins/datasource/testdata/partials/query.editor.html
+++ b/public/app/plugins/datasource/testdata/partials/query.editor.html
@@ -52,7 +52,7 @@
    <div class="gf-form">
 			<label class="gf-form-label query-keyword width-7">Series count</label>
 			<input type="number"
-				class="gf-form-input width-7"
+				class="gf-form-input width-15"
 				placeholder="1"
 				ng-model="ctrl.target.seriesCount"
 				min="1"
@@ -91,7 +91,7 @@
    <div class="gf-form">
 			<label class="gf-form-label query-keyword width-7">Min</label>
 			<input type="number"
-				class="gf-form-input width-6"
+				class="gf-form-input width-15"
 				placeholder="none"
 				ng-model="ctrl.target.min"
 				step="0.1"
@@ -100,7 +100,7 @@
    <div class="gf-form">
 			<label class="gf-form-label query-keyword width-7">Max</label>
 			<input type="number"
-				class="gf-form-input width-6"
+				class="gf-form-input width-15"
 				placeholder="none"
 				ng-model="ctrl.target.max"
 				step="0.1"

--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -56,7 +56,6 @@ $gray-4: #d8d9da;
 $gray-5: #ececec;
 $gray-6: #f4f5f8;
-$gray-blue: #212327;
 $input-black: #0b0c0e;
 $white: #ffffff;
@@ -68,7 +67,7 @@ $red: $red-base;
 $yellow: #ecbb13;
 $orange: #eb7b18;
 $purple: #9933cc;
-$variable: #32d1df;
+$variable: #339ae5;
 $brand-primary: #eb7b18;
 $brand-success: #299c46;
@@ -79,10 +78,9 @@ $query-red: #e02f44;
 $query-green: #74e680;
 $query-purple: #fe85fc;
 $query-orange: #eb7b18;
-$query-keyword: #66d9ef;
 // Status colors
-// -------------------------
+// -------------------------¨
 $online: #299c46;
 $warn: #f79520;
 $critical: #e02f44;
@@ -98,6 +96,7 @@ $text-color-strong: #ffffff;
 $text-color-weak: #8e8e8e;
 $text-color-faint: #222426;
 $text-color-emphasis: #ececec;
+$text-blue: #339ae5;
 $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
 $textShadow: none;
@@ -125,7 +124,7 @@ $hr-border-color: $dark-9;
 // -------------------------
 $panel-bg: #141619;
 $panel-border: 1px solid #202226;
-$panel-header-hover-bg: #343b40;
+$panel-header-hover-bg: #202226;
 $panel-corner: $panel-bg;
 // page header
@@ -153,7 +152,7 @@ $list-item-bg: $card-background;
 $list-item-hover-bg: $card-background-hover;
 $list-item-shadow: $card-shadow;
-$empty-list-cta-bg: $gray-blue;
+$empty-list-cta-bg: #202226;
 // Scrollbars
 $scrollbarBackground: #404357;
@@ -206,13 +205,12 @@ $input-bg: $input-black;
 $input-bg-disabled: $dark-6;
 $input-color: #c7d0d9;
-$input-border-color: #202226;
+$input-border-color: #343b40;
-$input-box-shadow: inset 1px 0px 4px 0px rgba(150, 150, 150, 0.1);
+$input-box-shadow: none;
 $input-border-focus: #5794f2;
 $input-box-shadow-focus: $blue-light !default;
 $input-color-placeholder: #555555;
 $input-label-bg: #202226;
-$input-label-border-color: #202226;
 $input-color-select-arrow: $white;
 // Search
@@ -252,14 +250,15 @@ $navbar-button-border: #2f2f32;
 $side-menu-bg: $panel-bg;
 $side-menu-bg-mobile: $panel-bg;
 $side-menu-border: none;
-$side-menu-item-hover-bg: $dark-3;
+$side-menu-item-hover-bg: #202226;
 $side-menu-shadow: 0 0 20px black;
-$side-menu-link-color: #9fa7b3;
+$side-menu-icon-color: #9fa7b3;
+$side-menu-header-color: #c7d0d9;
 // Menu dropdowns
 // -------------------------
-$menu-dropdown-bg: $panel-bg;
+$menu-dropdown-bg: #141619;
-$menu-dropdown-hover-bg: $dark-3;
+$menu-dropdown-hover-bg: #202226;
 $menu-dropdown-shadow: 5px 5px 20px -5px $black;
 // Tabs
@@ -357,7 +356,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
 $switch-bg: $input-bg;
 $switch-slider-color: $dark-3;
 $switch-slider-off-bg: $gray-1;
-$switch-slider-on-bg: linear-gradient(90deg, #eb7b18, #d44a3a);
+$switch-slider-on-bg: #5794f2;
 $switch-slider-shadow: 0 0 3px black;
 //Checkbox
@@ -381,7 +380,7 @@ $panel-editor-tabs-line-color: #e3e3e3;
 $panel-editor-viz-item-bg-hover: darken($blue-base, 46%);
 $panel-options-group-border: none;
-$panel-options-group-header-bg: $gray-blue;
+$panel-options-group-header-bg: #202226;
 $panel-grid-placeholder-bg: $blue-faint;
 $panel-grid-placeholder-shadow: 0 0 4px $blue-shade;

--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@@ -145,13 +145,7 @@ $link-hover-decoration: none !default;
 // Forms
 $input-line-height: 18px !default;
+$input-border-radius: $border-radius;
-$input-border-radius: 0 $border-radius $border-radius 0 !default;
-$input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default;
-$label-border-radius: $border-radius 0 0 $border-radius !default;
-$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default;
 $input-padding: 0 8px;
 $input-height: 32px !default;

--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -61,7 +61,7 @@ $red: $red-base;
 $yellow: #ff851b;
 $orange: #ff7941;
 $purple: #9954bb;
-$variable: #0083b3;
+$variable: #339ae5;
 $brand-primary: #ff7941;
 $brand-success: #3eb15b;
@@ -72,7 +72,6 @@ $query-red: #e02f44;
 $query-green: #3eb15b;
 $query-purple: #9954bb;
 $query-orange: #ff7941;
-$query-keyword: #3274d9;
 // Status colors
 // -------------------------
@@ -91,6 +90,7 @@ $text-color-strong: #41444b;
 $text-color-weak: #767980;
 $text-color-faint: #35373f;
 $text-color-emphasis: #41444b;
+$text-blue: #339ae5;
 $text-shadow-faint: none;
@@ -117,7 +117,7 @@ $hr-border-color: $gray-4 !default;
 // -------------------------
 $panel-bg: #ffffff;
 $panel-border: 1px solid #e9edf2;
-$panel-header-hover-bg: $gray-6;
+$panel-header-hover-bg: #f7f8fa;
 $panel-corner: $gray-4;
 // Page header
@@ -198,13 +198,12 @@ $input-bg: $white;
 $input-bg-disabled: $gray-5;
 $input-color: #343b40;
-$input-border-color: #e9edf2;
+$input-border-color: #c7d0d9;
 $input-box-shadow: none;
 $input-border-focus: #5794f2;
 $input-box-shadow-focus: #5794f2;
 $input-color-placeholder: #9fa7b3;
-$input-label-bg: #e9edf2;
+$input-label-bg: #f7f8fa;
-$input-label-border-color: #e9edf2;
 $input-color-select-arrow: #7b8087;
 // search
@@ -248,6 +247,8 @@ $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
 $side-menu-item-hover-bg: #343b40;
 $side-menu-shadow: 5px 0px 10px -5px $gray-1;
 $side-menu-link-color: $gray-4;
+$side-menu-icon-color: #9fa7b3;
+$side-menu-header-color: #e9edf2;
 // Menu dropdowns
 // -------------------------
@@ -348,7 +349,7 @@ $variable-option-bg: $dropdownLinkBackgroundHover;
 $switch-bg: $white;
 $switch-slider-color: $gray-7;
 $switch-slider-off-bg: $gray-5;
-$switch-slider-on-bg: linear-gradient(90deg, #ff9830, #e55400);
+$switch-slider-on-bg: #1f60c4;
 $switch-slider-shadow: 0 0 3px $dark-2;
 //Checkbox

--- a/public/sass/components/_code_editor.scss
+++ b/public/sass/components/_code_editor.scss
@@ -9,7 +9,7 @@
    font-size: $font-size-md;
    min-height: 50px; // Include space for horizontal scrollbar
-    @include border-radius($input-border-radius-sm);
+    @include border-radius($input-border-radius);
    border: $border-width solid $input-border-color;
  }

--- a/public/sass/components/_dropdown.scss
+++ b/public/sass/components/_dropdown.scss
@@ -55,7 +55,6 @@
  margin: 2px 0 0; // override default ul
  list-style: none;
  background-color: $dropdownBackground;
-  border: 1px solid #ccc; // Fallback for IE7-8
  border: 1px solid $dropdownBorder;
  text-align: left;
@@ -111,7 +110,6 @@
    background: $menu-dropdown-bg;
    box-shadow: $menu-dropdown-shadow;
    margin-top: 0px;
-    border: none;
    > li > a {
      display: flex;

--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
 $input-border: 1px solid $input-border-color;
 .gf-form {
-  margin-bottom: $space-xxs;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  position: relative;
+  margin-bottom: $space-xs;
  &--offset-1 {
    margin-left: $spacer;
@@ -83,13 +83,13 @@ $input-border: 1px solid $input-border-color;
  flex-wrap: wrap;
  align-content: flex-start;
-  .gf-form + .gf-form {
-    margin-left: $space-xs;
-  }
  &--nowrap {
    flex-wrap: nowrap;
  }
+  .select-container {
+    margin-right: $space-xs;
+  }
 }
 .gf-form-button-row {
@@ -107,13 +107,11 @@ $input-border: 1px solid $input-border-color;
  flex-shrink: 0;
  font-weight: $font-weight-semi-bold;
  font-size: $font-size-sm;
  background-color: $input-label-bg;
  height: $input-height;
+  margin-right: $space-xs;
-  border: $border-width solid $input-label-border-color;
+  border-radius: $input-border-radius;
-  border-right: none;
+  justify-content: space-between;
-  border-radius: $label-border-radius;
  &--grow {
    flex-grow: 1;
@@ -134,11 +132,10 @@ $input-border: 1px solid $input-border-color;
    color: $variable;
    background: $panel-bg;
    border: $panel-border;
-    border-right: none;
  }
  &--btn {
-    border-right: $border-width solid $input-label-border-color;
+    border: none;
    border-radius: $border-radius;
    &:hover {
@@ -167,7 +164,7 @@ $input-border: 1px solid $input-border-color;
  margin-right: $space-xs;
  border: $border-width solid transparent;
  border-left: none;
-  @include border-radius($label-border-radius-sm);
+  @include border-radius($input-border-radius);
 }
 .gf-form-textarea {
@@ -187,7 +184,7 @@ $input-border: 1px solid $input-border-color;
  background-clip: padding-box;
  border: $input-border;
  border-radius: $input-border-radius;
-  @include box-shadow($input-box-shadow);
+  margin-right: $space-xs;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
@@ -274,6 +271,7 @@ $input-border: 1px solid $input-border-color;
 .gf-form-select-wrapper {
  position: relative;
  background-color: $input-bg;
+  margin-right: $space-xs;
  .gf-form-select-icon {
    position: absolute;

--- a/public/sass/components/_navbar.scss
+++ b/public/sass/components/_navbar.scss
@@ -124,7 +124,6 @@ i.navbar-page-btn__search {
  align-items: center;
  font-weight: $btn-font-weight;
  padding: 0 $space-sm;
-  line-height: 32px;
  height: 32px;
  color: $text-muted;
  border: 1px solid $navbar-button-border;

--- a/public/sass/components/_query_editor.scss
+++ b/public/sass/components/_query_editor.scss
 .query-keyword {
  font-weight: $font-weight-semi-bold;
-  color: $blue;
+  color: $text-blue;
 }
 .query-segment-operator {

--- a/public/sass/components/_sidemenu.scss
+++ b/public/sass/components/_sidemenu.scss
@@ -65,6 +65,7 @@ $mobile-menu-breakpoint: md;
      @include left-brand-border-gradient();
      .dropdown-menu {
+        border: none;
        margin: 0;
        display: block;
        opacity: 0;
@@ -84,7 +85,7 @@ $mobile-menu-breakpoint: md;
 }
 .sidemenu-link {
-  color: $side-menu-link-color !important;
+  color: $side-menu-icon-color !important;
  line-height: 42px;
  padding: 0px 10px 0px 10px;
  display: block;
@@ -128,11 +129,11 @@ $mobile-menu-breakpoint: md;
  white-space: nowrap;
  background-color: $side-menu-item-hover-bg;
  font-size: 17px;
-  color: $side-menu-link-color;
+  color: $side-menu-header-color;
 }
 .side-menu-header-link {
-  color: $side-menu-link-color !important;
+  color: $side-menu-header-color !important;
  border: none !important;
  padding: 0 !important;
 }

--- a/public/sass/components/_slate_editor.scss
+++ b/public/sass/components/_slate_editor.scss
@@ -130,7 +130,7 @@
  .token.atrule,
  .token.keyword,
  .token.class-name {
-    color: $query-keyword;
+    color: $text-blue;
  }
  .token.punctuation,

--- a/public/sass/components/_switch.scss
+++ b/public/sass/components/_switch.scss
@@ -21,6 +21,7 @@ gf-form-switch[disabled] {
 .gf-form-switch-container {
  display: flex;
  cursor: pointer;
+  margin-right: $space-xs;
 }
 .gf-form-switch {
@@ -30,7 +31,6 @@ gf-form-switch[disabled] {
  height: $input-height;
  background: $switch-bg;
  border: 1px solid $input-border-color;
-  border-left: none;
  border-radius: $input-border-radius;
  align-items: center;
  justify-content: center;