Theme: Fixes to time picker calendar & variable dropdowns & more (#33407)

* More theme fixes * more updates * Fixed alerts in explore
2025-02-25 18:55:37 -06:00 · 2021-04-27 15:13:08 +02:00 · 2021-04-27 15:13:08 +02:00 · 5d855dbf33
commit 5d855dbf33
parent 86c8eed386
18 changed files with 82 additions and 95 deletions
--- a/packages/grafana-data/src/themes/createColors.ts
+++ b/packages/grafana-data/src/themes/createColors.ts
@ -87,7 +87,7 @@ class DarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
  whiteBase = '201, 209, 217';

  border = {
-    weak: `rgba(${this.whiteBase}, 0.10)`,
+    weak: `rgba(${this.whiteBase}, 0.08)`,
    medium: `rgba(${this.whiteBase}, 0.15)`,
    strong: `rgba(${this.whiteBase}, 0.25)`,
  };
--- a/packages/grafana-data/src/themes/createComponents.ts
+++ b/packages/grafana-data/src/themes/createComponents.ts
@ -43,8 +43,8 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th
    padding: 1,
    headerHeight: 4,
    background: colors.background.primary,
-    borderColor: colors.background.primary,
-    boxShadow: shadows.z1,
+    borderColor: colors.border.weak,
+    boxShadow: 'none',
  };

  const input = {
--- a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx
+++ b/packages/grafana-ui/src/components/Button/ToolbarButton.tsx
@ -118,7 +118,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
      border-radius: ${theme.shape.borderRadius()};
      line-height: ${theme.components.height.md * theme.spacing.gridSize - 2}px;
      font-weight: ${theme.typography.fontWeightMedium};
-      border: 1px solid ${theme.colors.border.medium};
+      border: 1px solid ${theme.colors.border.weak};
      white-space: nowrap;
      transition: ${theme.transitions.create(['background', 'box-shadow', 'border-color', 'color'], {
        duration: theme.transitions.duration.short,
@ -135,7 +135,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
      }

      &:hover {
-        box-shadow: ${theme.shadows.z2};
+        box-shadow: ${theme.shadows.z1};
      }

      &[disabled],
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
@ -1,38 +1,36 @@
 import React, { FormEvent, memo, useCallback } from 'react';
 import { css } from '@emotion/css';
 import Calendar from 'react-calendar/dist/entry.nostyle';
-import { dateTime, DateTime, dateTimeParse, GrafanaTheme, TimeZone } from '@grafana/data';
-import { stylesFactory, useTheme } from '../../../themes';
+import { dateTime, DateTime, dateTimeParse, GrafanaThemeV2, TimeZone } from '@grafana/data';
+import { stylesFactory, useTheme2 } from '../../../themes';
 import { TimePickerTitle } from './TimePickerTitle';
 import { Button } from '../../Button';
 import { Icon } from '../../Icon/Icon';
 import { Portal } from '../../Portal/Portal';
 import { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper';

-const getStyles = stylesFactory((theme: GrafanaTheme, isReversed = false) => {
-  const containerBorder = theme.isDark ? theme.palette.dark9 : theme.palette.gray5;
-
+const getStyles = stylesFactory((theme: GrafanaThemeV2, isReversed = false) => {
  return {
    container: css`
      top: -1px;
      position: absolute;
      ${isReversed ? 'left' : 'right'}: 544px;
-      box-shadow: ${isReversed ? '10px' : '0px'} 0px 20px ${theme.colors.dropdownShadow};
-      background-color: ${theme.colors.bodyBg};
+      box-shadow: ${theme.shadows.z3};
+      background-color: ${theme.colors.background.primary};
      z-index: -1;
-      border: 1px solid ${containerBorder};
+      border: 1px solid ${theme.colors.border.weak};
      border-radius: 2px 0 0 2px;

      &:after {
        display: block;
-        background-color: ${theme.colors.bodyBg};
+        background-color: ${theme.colors.background.primary};
        width: 19px;
        height: 100%;
        content: ${!isReversed ? ' ' : ''};
        position: absolute;
        top: 0;
        right: -19px;
-        border-left: 1px solid ${theme.colors.border1};
+        border-left: 1px solid ${theme.colors.border.weak};
      }
    `,
    modal: css`
@ -59,10 +57,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isReversed = false) => {
  };
 });

-const getFooterStyles = stylesFactory((theme: GrafanaTheme) => {
+const getFooterStyles = stylesFactory((theme: GrafanaThemeV2) => {
  return {
    container: css`
-      background-color: ${theme.colors.bodyBg};
+      background-color: ${theme.colors.background.primary};
      display: flex;
      justify-content: center;
      padding: 10px;
@ -76,11 +74,11 @@ const getFooterStyles = stylesFactory((theme: GrafanaTheme) => {
  };
 });

-const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
+const getBodyStyles = stylesFactory((theme: GrafanaThemeV2) => {
  return {
    title: css`
      color: ${theme.colors.text};
-      background-color: ${theme.colors.bodyBg};
+      background-color: ${theme.colors.background.primary};
      font-size: ${theme.typography.size.md};
      border: 1px solid transparent;

@ -90,7 +88,7 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
    `,
    body: css`
      z-index: ${theme.zIndex.modal};
-      background-color: ${theme.colors.bodyBg};
+      background-color: ${theme.colors.background.primary};
      width: 268px;

      .react-calendar__navigation__label,
@ -100,13 +98,13 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
        background-color: inherit;
        color: ${theme.colors.text};
        border: 0;
-        font-weight: ${theme.typography.weight.semibold};
+        font-weight: ${theme.typography.fontWeightMedium};
      }

      .react-calendar__month-view__weekdays {
        background-color: inherit;
        text-align: center;
-        color: ${theme.palette.blue77};
+        color: ${theme.colors.primary.text};

        abbr {
          border: 0;
@ -136,9 +134,9 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {

      .react-calendar__tile--active,
      .react-calendar__tile--active:hover {
-        color: ${theme.palette.white};
-        font-weight: ${theme.typography.weight.semibold};
-        background: ${theme.palette.blue95};
+        color: ${theme.colors.primary.contrastText};
+        font-weight: ${theme.typography.fontWeightMedium};
+        background: ${theme.colors.primary.main};
        box-shadow: none;
        border: 0px;
      }
@ -147,12 +145,12 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
      .react-calendar__tile--rangeStart {
        padding: 0;
        border: 0px;
-        color: ${theme.palette.white};
-        font-weight: ${theme.typography.weight.semibold};
-        background: ${theme.palette.blue95};
+        color: ${theme.colors.primary.contrastText};
+        font-weight: ${theme.typography.fontWeightMedium};
+        background: ${theme.colors.primary.main};

        abbr {
-          background-color: ${theme.palette.blue77};
+          background-color: ${theme.colors.primary.main};
          border-radius: 100px;
          display: block;
          padding-top: 2px;
@ -173,10 +171,10 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => {
  };
 });

-const getHeaderStyles = stylesFactory((theme: GrafanaTheme) => {
+const getHeaderStyles = stylesFactory((theme: GrafanaThemeV2) => {
  return {
    container: css`
-      background-color: ${theme.colors.bodyBg};
+      background-color: ${theme.colors.background.primary};
      display: flex;
      justify-content: space-between;
      padding: 7px;
@ -199,7 +197,7 @@ interface Props {
 const stopPropagation = (event: React.MouseEvent<HTMLDivElement>) => event.stopPropagation();

 export const TimePickerCalendar = memo<Props>((props) => {
-  const theme = useTheme();
+  const theme = useTheme2();
  const styles = getStyles(theme, props.isReversed);
  const { isOpen, isFullscreen } = props;

@ -234,7 +232,7 @@ export const TimePickerCalendar = memo<Props>((props) => {
 TimePickerCalendar.displayName = 'TimePickerCalendar';

 const Header = memo<Props>(({ onClose }) => {
-  const theme = useTheme();
+  const theme = useTheme2();
  const styles = getHeaderStyles(theme);

  return (
@ -249,7 +247,7 @@ Header.displayName = 'Header';

 const Body = memo<Props>(({ onChange, from, to, timeZone }) => {
  const value = inputToValue(from, to);
-  const theme = useTheme();
+  const theme = useTheme2();
  const onCalendarChange = useOnCalendarChange(onChange, timeZone);
  const styles = getBodyStyles(theme);

@ -272,7 +270,7 @@ const Body = memo<Props>(({ onChange, from, to, timeZone }) => {
 Body.displayName = 'Body';

 const Footer = memo<Props>(({ onClose, onApply }) => {
-  const theme = useTheme();
+  const theme = useTheme2();
  const styles = getFooterStyles(theme);

  return (
--- a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
@ -53,6 +53,10 @@ export function getElementStyles(theme: GrafanaThemeV2) {

    button {
      letter-spacing: ${theme.typography.body.letterSpacing};
+
+      &:focus {
+        outline: none;
+      }
    }

    // Ex: 14px base font * 85% = about 12px
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@ -227,10 +227,11 @@ $typeahead-selected-color: $yellow;

 // Dropdowns
 // -------------------------
-$dropdownBackground: ${theme.colors.background.secondary};
+$dropdownBackground: ${theme.colors.background.primary};
 $dropdownBorder: ${theme.colors.border.weak};
 $dropdownDividerTop: ${theme.colors.border.weak};
 $dropdownDividerBottom: ${theme.colors.border.weak};
+$dropdownShadow: ${theme.shadows.z3};

 $dropdownLinkColor: $link-color;
 $dropdownLinkColorHover: $white;
--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@ -222,10 +222,11 @@ $typeahead-selected-color: $yellow;

 // Dropdowns
 // -------------------------
-$dropdownBackground: ${theme.colors.background.secondary};
+$dropdownBackground: ${theme.colors.background.primary};
 $dropdownBorder: ${theme.colors.border.weak};
 $dropdownDividerTop: ${theme.colors.border.weak};
 $dropdownDividerBottom: ${theme.colors.border.weak};
+$dropdownShadow: ${theme.shadows.z3};

 $dropdownLinkColor: $dark-2;
 $dropdownLinkColorHover: $link-color;
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@ -126,7 +126,7 @@ $headings-line-height: ${theme.v1.typography.lineHeight.sm} !default;

 $border-width: ${theme.v1.border.width.sm} !default;

-$border-radius: ${theme.v1.border.radius.md} !default;
+$border-radius: ${theme.v1.border.radius.sm} !default;
 $border-radius-lg: ${theme.v1.border.radius.lg} !default;
 $border-radius-sm: ${theme.v1.border.radius.sm} !default;

--- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
@ -36,7 +36,7 @@ export const PanelEditorTabs: FC<PanelEditorTabsProps> = React.memo(({ panel, da

  return (
    <div className={styles.wrapper}>
-      <TabsBar className={styles.tabBar} hideBorder>
+      <TabsBar className={styles.tabBar}>
        {tabs.map((tab) => {
          return (
            <Tab
--- a/public/app/features/explore/ErrorContainer.tsx
+++ b/public/app/features/explore/ErrorContainer.tsx
@ -1,7 +1,8 @@
 import React, { FunctionComponent } from 'react';
 import { DataQueryError } from '@grafana/data';
-import { Icon } from '@grafana/ui';
+import { Alert, useTheme2 } from '@grafana/ui';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
+import { css } from '@emotion/css';

 export interface ErrorContainerProps {
  queryError?: DataQueryError;
@ -9,22 +10,20 @@ export interface ErrorContainerProps {

 export const ErrorContainer: FunctionComponent<ErrorContainerProps> = (props) => {
  const { queryError } = props;
+  const theme = useTheme2();
  const showError = queryError ? true : false;
  const duration = showError ? 100 : 10;
-  const message = queryError?.message || queryError?.data?.message || 'Unknown error';
+  const title = queryError ? 'Query error' : 'Unknown error';
+  const message = queryError?.message || queryError?.data?.message || null;
+  const alertWithTopMargin = css`
+    margin-top: ${theme.spacing(2)};
+  `;

  return (
    <FadeIn in={showError} duration={duration}>
-      <div className="alert-container">
-        <div className="alert-error alert">
-          <div className="alert-icon">
-            <Icon name="exclamation-triangle" />
-          </div>
-          <div className="alert-body">
-            <div className="alert-title">{message}</div>
-          </div>
-        </div>
-      </div>
+      <Alert severity="error" title={title} className={alertWithTopMargin}>
+        {message}
+      </Alert>
    </FadeIn>
  );
 };
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@ -335,8 +335,8 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
                onClickRichHistoryButton={this.toggleShowRichHistory}
                onClickQueryInspectorButton={this.toggleShowQueryInspector}
              />
+              <ResponseErrorContainer exploreId={exploreId} />
            </div>
-            <ResponseErrorContainer exploreId={exploreId} />
            <AutoSizer onResize={this.onResize} disableHeight>
              {({ width }) => {
                if (width === 0) {
--- a/public/app/features/explore/snapshots/ErrorContainer.test.tsx.snap
+++ b/public/app/features/explore/snapshots/ErrorContainer.test.tsx.snap
@ -5,29 +5,12 @@ exports[`ErrorContainer should render component 1`] = `
  duration={100}
  in={true}
 >
-  <div
-    className="alert-container"
+  <Alert
+    className="css-x7g5ai"
+    severity="error"
+    title="Query error"
  >
-    <div
-      className="alert-error alert"
-    >
-      <div
-        className="alert-icon"
-      >
-        <Icon
-          name="exclamation-triangle"
-        />
-      </div>
-      <div
-        className="alert-body"
-      >
-        <div
-          className="alert-title"
-        >
-          Error message
-        </div>
-      </div>
-    </div>
-  </div>
+    Error message
+  </Alert>
 </FadeIn>
 `;
--- a/public/app/features/explore/snapshots/Explore.test.tsx.snap
+++ b/public/app/features/explore/snapshots/Explore.test.tsx.snap
@ -27,10 +27,10 @@ exports[`Explore should render component 1`] = `
        queryInspectorButtonActive={false}
        richHistoryButtonActive={false}
      />
+      <ResponseErrorContainer
+        exploreId="left"
+      />
    </div>
-    <ResponseErrorContainer
-      exploreId="left"
-    />
    <AutoSizer
      disableHeight={true}
      disableWidth={false}
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@ -61,9 +61,9 @@ $layer0: #111217;
 $layer1: #181b1f;
 $layer2: #22252b;

-$divider: rgba(201, 209, 217, 0.10);
+$divider: rgba(201, 209, 217, 0.08);

-$border0: rgba(201, 209, 217, 0.10);
+$border0: rgba(201, 209, 217, 0.08);
 $border1: rgba(201, 209, 217, 0.15);

 // Accent colors
@ -130,9 +130,9 @@ $hr-border-color: $dark-9;
 // Panel
 // -------------------------
 $panel-bg: #181b1f;
-$panel-border: 1px solid #181b1f;
+$panel-border: 1px solid rgba(201, 209, 217, 0.08);
 $panel-header-hover-bg: rgba(201, 209, 217, 0.08);
-$panel-box-shadow: 0px 1px 2px rgba(24, 26, 27, 0.75);
+$panel-box-shadow: none;
 $panel-corner: $panel-bg;

 // page header
@ -230,10 +230,11 @@ $typeahead-selected-color: $yellow;

 // Dropdowns
 // -------------------------
-$dropdownBackground: #22252b;
-$dropdownBorder: rgba(201, 209, 217, 0.10);
-$dropdownDividerTop: rgba(201, 209, 217, 0.10);
-$dropdownDividerBottom: rgba(201, 209, 217, 0.10);
+$dropdownBackground: #181b1f;
+$dropdownBorder: rgba(201, 209, 217, 0.08);
+$dropdownDividerTop: rgba(201, 209, 217, 0.08);
+$dropdownDividerBottom: rgba(201, 209, 217, 0.08);
+$dropdownShadow: 0px 10px 20px rgb(20,20,20);

 $dropdownLinkColor: $link-color;
 $dropdownLinkColorHover: $white;
@ -294,7 +295,7 @@ $tooltipShadow: 0px 4px 8px rgba(24, 26, 27, 0.75);

 $popover-bg: #181b1f;
 $popover-color: rgb(201, 209, 217);
-$popover-border-color: rgba(201, 209, 217, 0.10);
+$popover-border-color: rgba(201, 209, 217, 0.08);
 $popover-header-bg: #22252b;
 $popover-shadow: 0px 10px 20px rgb(20,20,20);

--- a/public/sass/_variables.generated.scss
+++ b/public/sass/_variables.generated.scss
@ -129,7 +129,7 @@ $headings-line-height: 1.5 !default;

 $border-width: 1px !default;

-$border-radius: 4px !default;
+$border-radius: 2px !default;
 $border-radius-lg: 6px !default;
 $border-radius-sm: 2px !default;

--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@ -124,9 +124,9 @@ $hr-border-color: $gray-4 !default;
 // Panel
 // -------------------------
 $panel-bg: #fff;
-$panel-border: 1px solid #fff;
+$panel-border: 1px solid rgba(36, 41, 46, 0.12);
 $panel-header-hover-bg: rgba(36, 41, 46, 0.04);
-$panel-box-shadow: 0px 1px 2px rgba(24, 26, 27, 0.2);
+$panel-box-shadow: none;
 $panel-corner: $panel-bg;

 // Page header
@ -224,10 +224,11 @@ $typeahead-selected-color: $yellow;

 // Dropdowns
 // -------------------------
-$dropdownBackground: #F4F5F5;
+$dropdownBackground: #fff;
 $dropdownBorder: rgba(36, 41, 46, 0.12);
 $dropdownDividerTop: rgba(36, 41, 46, 0.12);
 $dropdownDividerBottom: rgba(36, 41, 46, 0.12);
+$dropdownShadow: 0px 13px 20px 1px rgba(24, 26, 27, 0.18);

 $dropdownLinkColor: $dark-2;
 $dropdownLinkColorHover: $link-color;
--- a/public/sass/components/_alerts.scss
+++ b/public/sass/components/_alerts.scss
@ -8,7 +8,6 @@
 .alert {
  padding: 15px 20px;
  margin-bottom: $space-xs;
-  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
  border-left: 3px solid $alert-error-bg;
  background: $layer2;
  position: relative;
--- a/public/sass/components/_submenu.scss
+++ b/public/sass/components/_submenu.scss
@ -25,7 +25,7 @@
    padding-left: 8px;
  }

-  .gf-form-inline .gf-form {
+  .gf-form {
    margin-bottom: 0;
  }
 }
@ -54,14 +54,14 @@

 .variable-value-dropdown {
  position: absolute;
-  top: 47px;
+  top: $input-height;
  min-width: 150px;
  max-height: 400px;
  min-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: $dropdownBackground;
-  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.4);
+  box-shadow: $dropdownShadow;
  z-index: $zindex-typeahead;
  font-size: $font-size-base;
  border-radius: 3px 3px 0 0;