diff --git a/e2e/suite1/screenshots/expected/smoke-test-scenario.png b/e2e/suite1/screenshots/expected/smoke-test-scenario.png index 6878f4d90eb..8794b13704a 100644 Binary files a/e2e/suite1/screenshots/expected/smoke-test-scenario.png and b/e2e/suite1/screenshots/expected/smoke-test-scenario.png differ diff --git a/packages/grafana-data/src/types/theme.ts b/packages/grafana-data/src/types/theme.ts index 24a4535a2f6..192cf1e1562 100644 --- a/packages/grafana-data/src/types/theme.ts +++ b/packages/grafana-data/src/types/theme.ts @@ -144,6 +144,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons { gray95: string; gray85: string; gray70: string; + gray60: string; gray33: string; gray25: string; gray15: string; @@ -208,6 +209,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons { // panel panelBg: string; + panelBorder: string; // TODO: move to background section bodyBg: string; diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx index cc836672d5d..74ed197986a 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx @@ -34,7 +34,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, scollableContent: boolean) return { drawer: css` .drawer-content { - background-color: ${theme.colors.bodyBg}; + background-color: ${theme.colors.pageBg}; display: flex; flex-direction: column; overflow: hidden; diff --git a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap index c259532b501..819926e4e25 100644 --- a/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap +++ b/packages/grafana-ui/src/components/TimePicker/__snapshots__/TimePicker.test.tsx.snap @@ -82,7 +82,7 @@ exports[`TimePicker renders buttons correctly 1`] = ` "blueLight": "#5794f2", "blueShade": "#1f60c4", "body": "#d8d9da", - "bodyBg": "#161719", + "bodyBg": "#0b0c0e", "brandDanger": "#e02f44", "brandPrimary": "#eb7b18", "brandSuccess": "#299c46", @@ -102,7 +102,7 @@ exports[`TimePicker renders buttons correctly 1`] = ` "formCheckboxBgChecked": "#5794f2", "formCheckboxBgCheckedHover": "#3274d9", "formCheckboxCheckmark": "#343b40", - "formDescription": "#7B8087", + "formDescription": "#7b8087", "formFocusOutline": "#1f60c4", "formInputBg": "#0b0c0e", "formInputBgDisabled": "#141619", @@ -136,7 +136,7 @@ exports[`TimePicker renders buttons correctly 1`] = ` "gray4": "#d8d9da", "gray5": "#ececec", "gray6": "#f4f5f8", - "gray60": "#7B8087", + "gray60": "#7b8087", "gray7": "#fbfbfb", "gray70": "#9fa7b3", "gray85": "#c7d0d9", @@ -146,7 +146,7 @@ exports[`TimePicker renders buttons correctly 1`] = ` "greenBase": "#299c46", "greenShade": "#23843b", "headingColor": "#d8d9da", - "inputBlack": "#09090b", + "inputBlack": "#0b0c0e", "link": "#d8d9da", "linkDisabled": "#8e8e8e", "linkExternal": "#33b5e5", @@ -154,9 +154,10 @@ exports[`TimePicker renders buttons correctly 1`] = ` "online": "#299c46", "orange": "#eb7b18", "orangeDark": "#ff780a", - "pageBg": "#161719", + "pageBg": "#141619", "pageHeaderBorder": "#202226", - "panelBg": "#212124", + "panelBg": "#141619", + "panelBorder": "#202226", "purple": "#9933cc", "queryGreen": "#74e680", "queryKeyword": "#66d9ef", @@ -391,7 +392,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "blueLight": "#5794f2", "blueShade": "#1f60c4", "body": "#d8d9da", - "bodyBg": "#161719", + "bodyBg": "#0b0c0e", "brandDanger": "#e02f44", "brandPrimary": "#eb7b18", "brandSuccess": "#299c46", @@ -411,7 +412,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "formCheckboxBgChecked": "#5794f2", "formCheckboxBgCheckedHover": "#3274d9", "formCheckboxCheckmark": "#343b40", - "formDescription": "#7B8087", + "formDescription": "#7b8087", "formFocusOutline": "#1f60c4", "formInputBg": "#0b0c0e", "formInputBgDisabled": "#141619", @@ -445,7 +446,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "gray4": "#d8d9da", "gray5": "#ececec", "gray6": "#f4f5f8", - "gray60": "#7B8087", + "gray60": "#7b8087", "gray7": "#fbfbfb", "gray70": "#9fa7b3", "gray85": "#c7d0d9", @@ -455,7 +456,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "greenBase": "#299c46", "greenShade": "#23843b", "headingColor": "#d8d9da", - "inputBlack": "#09090b", + "inputBlack": "#0b0c0e", "link": "#d8d9da", "linkDisabled": "#8e8e8e", "linkExternal": "#33b5e5", @@ -463,9 +464,10 @@ exports[`TimePicker renders content correctly after beeing open 1`] = ` "online": "#299c46", "orange": "#eb7b18", "orangeDark": "#ff780a", - "pageBg": "#161719", + "pageBg": "#141619", "pageHeaderBorder": "#202226", - "panelBg": "#212124", + "panelBg": "#141619", + "panelBorder": "#202226", "purple": "#9933cc", "queryGreen": "#74e680", "queryKeyword": "#66d9ef", diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index 9e33479dcea..27239abc6c3 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -22,6 +22,17 @@ $green-base: ${theme.colors.greenBase}; $green-shade: ${theme.colors.greenShade}; $orange-dark: ${theme.colors.orangeDark}; +$gray98: ${theme.colors.gray98}; +$gray95: ${theme.colors.gray95}; +$gray85: ${theme.colors.gray85}; +$gray70: ${theme.colors.gray70}; +$gray60: ${theme.colors.gray60}; +$gray33: ${theme.colors.gray33}; +$gray25: ${theme.colors.gray25}; +$gray15: ${theme.colors.gray15}; +$gray10: ${theme.colors.gray10}; +$gray05: ${theme.colors.gray05}; + // Grays // ------------------------- $black: ${theme.colors.black}; @@ -91,8 +102,6 @@ $textShadow: none; // gradients $brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%); $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%); -$page-gradient: linear-gradient(180deg, $dark-5 10px, $dark-2 100px); -$edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black); // Links // ------------------------- @@ -112,12 +121,12 @@ $hr-border-color: $dark-9; // Panel // ------------------------- $panel-bg: ${theme.colors.panelBg}; -$panel-border: solid 1px $dark-1; -$panel-header-hover-bg: $dark-9; +$panel-border: 1px solid ${theme.colors.panelBorder}; +$panel-header-hover-bg: ${theme.colors.gray15}; $panel-corner: $panel-bg; // page header -$page-header-bg: linear-gradient(90deg, $dark-7, $black); +$page-header-bg: ${theme.colors.gray15}; $page-header-shadow: inset 0px -4px 14px $dark-3; $page-header-border-color: $dark-9; @@ -132,8 +141,8 @@ $code-tag-bg: $dark-1; $code-tag-border: $dark-9; // cards -$card-background: linear-gradient(135deg, $dark-8, $dark-6); -$card-background-hover: linear-gradient(135deg, $dark-9, $dark-6); +$card-background: linear-gradient(135deg, $dark-4, $dark-3); +$card-background-hover: linear-gradient(135deg, $dark-5, $dark-6); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); // Lists @@ -209,7 +218,6 @@ $placeholderText: darken($text-color, 25%); // Search $search-shadow: 0 0 30px 0 $black; -$search-filter-box-bg: $gray-blue; // Typeahead $typeahead-shadow: 0 5px 10px 0 $black; @@ -218,10 +226,10 @@ $typeahead-selected-color: $yellow; // Dropdowns // ------------------------- -$dropdownBackground: $dark-6; -$dropdownBorder: rgba(0, 0, 0, 0.2); +$dropdownBackground: $panel-bg; +$dropdownBorder: ${theme.colors.panelBorder}; $dropdownDividerTop: transparent; -$dropdownDividerBottom: #444; +$dropdownDividerBottom: ${theme.colors.gray25}; $dropdownLinkColor: $text-color; $dropdownLinkColorHover: $white; @@ -236,26 +244,23 @@ $horizontalComponentOffset: 180px; // Navbar // ------------------------- $navbarHeight: 55px; - -$navbarBackground: $panel-bg; $navbarBorder: 1px solid $dark-6; -$navbarButtonBackground: $navbarBackground; -$navbarButtonBackgroundHighlight: $body-bg; - +$navbarButtonBackground: $panel-bg; $navbar-button-border: #2f2f32; // Sidemenu // ------------------------- -$side-menu-bg: $black; -$side-menu-bg-mobile: $side-menu-bg; +$side-menu-bg: $panel-bg; +$side-menu-bg-mobile: $panel-bg; +$side-menu-border: none; $side-menu-item-hover-bg: $dark-3; $side-menu-shadow: 0 0 20px black; $side-menu-link-color: $link-color; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: $body-bg; +$menu-dropdown-bg: $panel-bg; $menu-dropdown-hover-bg: $dark-3; $menu-dropdown-shadow: 5px 5px 20px -5px $black; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index 137c5c4ee71..657a2d84aeb 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -22,6 +22,17 @@ $green-base: ${theme.colors.greenBase}; $green-shade: ${theme.colors.greenShade}; $orange-dark: ${theme.colors.orangeDark}; +$gray98: ${theme.colors.gray98}; +$gray95: ${theme.colors.gray95}; +$gray85: ${theme.colors.gray85}; +$gray70: ${theme.colors.gray70}; +$gray60: ${theme.colors.gray60}; +$gray33: ${theme.colors.gray33}; +$gray25: ${theme.colors.gray25}; +$gray15: ${theme.colors.gray15}; +$gray10: ${theme.colors.gray10}; +$gray05: ${theme.colors.gray05}; + // Grays // ------------------------- $black: ${theme.colors.black}; @@ -83,8 +94,6 @@ $text-shadow-faint: none; // gradients $brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%); $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%); -$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px); -$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); // Links // ------------------------- @@ -104,12 +113,12 @@ $hr-border-color: $gray-4 !default; // Panel // ------------------------- $panel-bg: ${theme.colors.panelBg}; -$panel-border: solid 1px $gray-5; +$panel-border: 1px solid ${theme.colors.panelBorder}; $panel-header-hover-bg: $gray-6; $panel-corner: $gray-4; // Page header -$page-header-bg: linear-gradient(90deg, $white, $gray-7); +$page-header-bg: linear-gradient(90deg, $white, ${theme.colors.gray95}); $page-header-shadow: inset 0px -3px 10px $gray-6; $page-header-border-color: $gray-4; @@ -202,7 +211,6 @@ $placeholderText: $gray-2; // search $search-shadow: 0 1px 5px 0 $gray-5; -$search-filter-box-bg: $gray-7; // Typeahead $typeahead-shadow: 0 5px 10px 0 $gray-5; @@ -229,26 +237,23 @@ $horizontalComponentOffset: 180px; // Navbar // ------------------------- $navbarHeight: 52px; - -$navbarBackground: $white; $navbarBorder: 1px solid $gray-5; -$navbarButtonBackground: lighten($navbarBackground, 3%); -$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); - +$navbarButtonBackground: $panel-bg; $navbar-button-border: $gray-4; // Sidemenu // ------------------------- -$side-menu-bg: $dark-1; +$side-menu-bg: ${theme.colors.gray15}; +$side-menu-border: 1px solid ${theme.colors.gray25}; $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6; -$side-menu-item-hover-bg: $gray-1; +$side-menu-item-hover-bg: ${theme.colors.gray25}; $side-menu-shadow: 5px 0px 10px -5px $gray-1; $side-menu-link-color: $gray-6; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: $gray-7; +$menu-dropdown-bg: $panel-bg; $menu-dropdown-hover-bg: $gray-6; $menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; diff --git a/packages/grafana-ui/src/themes/dark.ts b/packages/grafana-ui/src/themes/dark.ts index dac3899a408..b19a63ef03f 100644 --- a/packages/grafana-ui/src/themes/dark.ts +++ b/packages/grafana-ui/src/themes/dark.ts @@ -48,7 +48,7 @@ const darkTheme: GrafanaTheme = { name: 'Grafana Dark', colors: { ...basicColors, - inputBlack: '#09090b', + inputBlack: basicColors.gray05, brandPrimary: basicColors.orange, brandSuccess: basicColors.greenBase, brandWarning: basicColors.orange, @@ -61,8 +61,8 @@ const darkTheme: GrafanaTheme = { online: basicColors.greenBase, warn: '#f79520', critical: basicColors.redBase, - bodyBg: basicColors.dark2, - pageBg: basicColors.dark2, + bodyBg: basicColors.gray05, + pageBg: basicColors.gray10, body: basicColors.gray4, text: basicColors.gray4, textStrong: basicColors.white, @@ -75,7 +75,8 @@ const darkTheme: GrafanaTheme = { linkExternal: basicColors.blue, headingColor: basicColors.gray4, pageHeaderBorder: basicColors.gray15, - panelBg: basicColors.dark4, + panelBg: basicColors.gray10, + panelBorder: basicColors.gray15, // Next-gen forms functional colors formLabel: basicColors.gray70, diff --git a/packages/grafana-ui/src/themes/default.ts b/packages/grafana-ui/src/themes/default.ts index c702996e403..6c35ab5b396 100644 --- a/packages/grafana-ui/src/themes/default.ts +++ b/packages/grafana-ui/src/themes/default.ts @@ -6,7 +6,7 @@ export const commonColorsPalette = { gray95: '#e9edf2', gray85: '#c7d0d9', gray70: '#9fa7b3', - gray60: '#7B8087', + gray60: '#7b8087', gray33: '#464c54', gray25: '#343b40', gray15: '#202226', diff --git a/packages/grafana-ui/src/themes/light.ts b/packages/grafana-ui/src/themes/light.ts index 697556d13a7..b83d06b0e52 100644 --- a/packages/grafana-ui/src/themes/light.ts +++ b/packages/grafana-ui/src/themes/light.ts @@ -63,7 +63,7 @@ const lightTheme: GrafanaTheme = { warn: '#f79520', critical: basicColors.redShade, bodyBg: basicColors.gray7, - pageBg: basicColors.gray7, + pageBg: basicColors.white, // Text colors body: basicColors.gray1, @@ -83,6 +83,7 @@ const lightTheme: GrafanaTheme = { // panel panelBg: basicColors.white, + panelBorder: basicColors.gray95, // Next-gen forms functional colors formLabel: basicColors.gray33, diff --git a/public/app/core/components/search/SearchField.tsx b/public/app/core/components/search/SearchField.tsx index 1b768704ff3..10ddaac30b3 100644 --- a/public/app/core/components/search/SearchField.tsx +++ b/public/app/core/components/search/SearchField.tsx @@ -3,7 +3,7 @@ import React, { useContext } from 'react'; import tinycolor from 'tinycolor2'; import { SearchQuery } from './search'; import { css, cx } from 'emotion'; -import { ThemeContext, selectThemeVariant } from '@grafana/ui'; +import { ThemeContext } from '@grafana/ui'; import { GrafanaTheme } from '@grafana/data'; type Omit = Pick>; @@ -19,14 +19,9 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({ width: 100%; height: 55px; /* this variable is not part of GrafanaTheme yet*/ display: flex; - background-color: ${selectThemeVariant( - { - light: theme.colors.white, - dark: theme.colors.dark4, - }, - theme.type - )}; + background-color: ${theme.colors.formInputBg}; position: relative; + box-shadow: 0 0 10px ${theme.isLight ? theme.colors.gray85 : theme.colors.black}; `, input: css` max-width: 653px; @@ -34,22 +29,8 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({ height: 51px; box-sizing: border-box; outline: none; - background: ${selectThemeVariant( - { - light: theme.colors.dark1, - dark: theme.colors.black, - }, - theme.type - )}; - background-color: ${selectThemeVariant( - { - light: tinycolor(theme.colors.white) - .lighten(4) - .toString(), - dark: theme.colors.dark4, - }, - theme.type - )}; + background-color: ${theme.colors.formInputBg}; + background: ${theme.colors.formInputBg}; flex-grow: 10; `, spacer: css` @@ -57,6 +38,7 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({ `, icon: cx( css` + color: ${theme.colors.textWeak}; font-size: ${theme.typography.size.lg}; padding: ${theme.spacing.md} ${theme.spacing.md} ${theme.spacing.sm} ${theme.spacing.md}; `, diff --git a/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap b/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap index 83ca7f5664b..15abf6f0af2 100644 --- a/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap +++ b/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap @@ -100,7 +100,7 @@ exports[`ServerStats Should render table with stats 1`] = ` className="css-13jkosq" >
  • { }; onClose = () => { - if (this.props.editview) { - this.props.updateLocation({ - query: { editview: null }, - partial: true, - }); - } else { - this.props.updateLocation({ - query: { panelId: null, edit: null, fullscreen: null, tab: null }, - partial: true, - }); - } + this.props.updateLocation({ + query: { panelId: null, edit: null, fullscreen: null, tab: null }, + partial: true, + }); }; onToggleTVMode = () => { @@ -101,7 +93,7 @@ export class DashNav extends PureComponent { }; renderDashboardTitleSearchButton() { - const { dashboard } = this.props; + const { dashboard, isFullscreen } = this.props; const folderTitle = dashboard.meta.folderTitle; const haveFolder = dashboard.meta.folderId > 0; @@ -110,7 +102,7 @@ export class DashNav extends PureComponent { <>
    - {!this.isInFullscreenOrSettings && } + {!isFullscreen && } {haveFolder && ( <> @@ -124,20 +116,11 @@ export class DashNav extends PureComponent {
    - {this.isSettings &&  / Settings}
    ); } - get isInFullscreenOrSettings() { - return this.props.editview || this.props.isFullscreen; - } - - get isSettings() { - return this.props.editview; - } - renderBackButton() { return (
    @@ -147,13 +130,13 @@ export class DashNav extends PureComponent { } render() { - const { dashboard, onAddPanel, location } = this.props; + const { dashboard, onAddPanel, location, isFullscreen } = this.props; const { canStar, canSave, canShare, showSettings, isStarred } = dashboard.meta; const { snapshot } = dashboard; const snapshotUrl = snapshot && snapshot.originalUrl; return (
    - {this.isInFullscreenOrSettings && this.renderBackButton()} + {isFullscreen && this.renderBackButton()} {this.renderDashboardTitleSearchButton()} {this.playlistSrv.isPlaying && ( diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx index b724b89d942..97259e157f1 100644 --- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx +++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx @@ -6,9 +6,13 @@ import { AngularComponent, getAngularLoader } from '@grafana/runtime'; // Types import { DashboardModel } from '../../state/DashboardModel'; +import { BackButton } from 'app/core/components/BackButton/BackButton'; +import { e2e } from '@grafana/e2e'; +import { updateLocation } from 'app/core/actions'; export interface Props { dashboard: DashboardModel | null; + updateLocation: typeof updateLocation; } export class DashboardSettings extends PureComponent { @@ -18,7 +22,7 @@ export class DashboardSettings extends PureComponent { componentDidMount() { const loader = getAngularLoader(); - const template = ''; + const template = ''; const scopeProps = { dashboard: this.props.dashboard }; this.angularCmp = loader.load(this.element, scopeProps, template); @@ -30,7 +34,31 @@ export class DashboardSettings extends PureComponent { } } + onClose = () => { + this.props.updateLocation({ + query: { editview: null }, + partial: true, + }); + }; + render() { - return
    (this.element = element)} />; + const { dashboard } = this.props; + const folderTitle = dashboard.meta.folderTitle; + const haveFolder = dashboard.meta.folderId > 0; + + return ( +
    +
    +
    + +
    +
    + {haveFolder &&
    {folderTitle} /
    } + {dashboard.title} / Settings +
    +
    +
    (this.element = element)} /> +
    + ); } } diff --git a/public/app/features/dashboard/components/Inspector/InspectHeader.tsx b/public/app/features/dashboard/components/Inspector/InspectHeader.tsx index dc8dc8a5977..61a27a15664 100644 --- a/public/app/features/dashboard/components/Inspector/InspectHeader.tsx +++ b/public/app/features/dashboard/components/Inspector/InspectHeader.tsx @@ -1,6 +1,6 @@ import React, { FC } from 'react'; import { css } from 'emotion'; -import { Icon, selectThemeVariant, stylesFactory, Tab, TabsBar, useTheme } from '@grafana/ui'; +import { Icon, stylesFactory, Tab, TabsBar, useTheme } from '@grafana/ui'; import { GrafanaTheme, SelectableValue, PanelData, getValueFormat, formattedValueToString } from '@grafana/data'; import { InspectTab } from './PanelInspector'; import { PanelModel } from '../../state'; @@ -60,7 +60,7 @@ export const InspectHeader: FC = ({ }; const getStyles = stylesFactory((theme: GrafanaTheme) => { - const headerBackground = selectThemeVariant({ dark: theme.colors.gray15, light: theme.colors.white }, theme.type); + const headerBackground = theme.isLight ? theme.colors.gray95 : theme.colors.gray15; return { header: css` background-color: ${headerBackground}; diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx index e6a14de5edd..d666d42ec73 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx @@ -1,6 +1,6 @@ import React, { PureComponent } from 'react'; import { FieldConfigSource, GrafanaTheme, PanelData, PanelPlugin, SelectableValue } from '@grafana/data'; -import { Forms, selectThemeVariant, stylesFactory } from '@grafana/ui'; +import { Forms, stylesFactory } from '@grafana/ui'; import { css, cx } from 'emotion'; import config from 'app/core/config'; import AutoSizer from 'react-virtualized-auto-sizer'; @@ -316,7 +316,6 @@ export const PanelEditor = connect(mapStateToProps, mapDispatchToProps)(PanelEdi */ const getStyles = stylesFactory((theme: GrafanaTheme) => { const handleColor = theme.colors.blueLight; - const background = selectThemeVariant({ light: theme.colors.white, dark: theme.colors.inputBlack }, theme.type); const resizer = css` font-style: italic; @@ -344,7 +343,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { left: 0; right: 0; bottom: 0; - background: ${background}; + background: ${theme.colors.bodyBg}; display: flex; flex-direction: column; `, @@ -382,7 +381,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { height: 100%; width: 100%; `, - toolbar: css` display: flex; padding: ${theme.spacing.sm}; diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx index 9324ec5d06e..c95776c2f25 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx @@ -79,7 +79,7 @@ const getPanelEditorTabsStyles = stylesFactory(() => { flex-direction: column; flex-grow: 1; min-height: 0; - background: ${theme.colors.pageBg}; + background: ${theme.colors.panelBg}; .toolbar { background: transparent; diff --git a/public/app/features/dashboard/containers/DashboardPage.test.tsx b/public/app/features/dashboard/containers/DashboardPage.test.tsx index 713fde3457f..5d55ea3518f 100644 --- a/public/app/features/dashboard/containers/DashboardPage.test.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.test.tsx @@ -198,10 +198,6 @@ describe('DashboardPage', () => { it('should render settings view', () => { expect(ctx.wrapper).toMatchSnapshot(); }); - - it('should set animation state', () => { - expect(ctx.wrapper?.state().isSettingsOpening).toBe(true); - }); }); dashboardPageScenario('When adding panel', ctx => { diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index 2aab5c215b2..008704f4a91 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.tsx @@ -61,7 +61,6 @@ export interface Props { } export interface State { - isSettingsOpening: boolean; isEditing: boolean; isFullscreen: boolean; fullscreenPanel: PanelModel | null; @@ -73,7 +72,6 @@ export interface State { export class DashboardPage extends PureComponent { state: State = { - isSettingsOpening: false, isEditing: false, isFullscreen: false, showLoadingState: false, @@ -103,7 +101,7 @@ export class DashboardPage extends PureComponent { } componentDidUpdate(prevProps: Props) { - const { dashboard, editview, urlEdit, urlFullscreen, urlPanelId, urlUid } = this.props; + const { dashboard, urlEdit, urlFullscreen, urlPanelId, urlUid } = this.props; if (!dashboard) { return; @@ -120,14 +118,6 @@ export class DashboardPage extends PureComponent { return; } - // handle animation states when opening dashboard settings - if (!prevProps.editview && editview) { - this.setState({ isSettingsOpening: true }); - setTimeout(() => { - this.setState({ isSettingsOpening: false }); - }, 10); - } - // Sync url state with model if (urlFullscreen !== dashboard.meta.fullscreen || urlEdit !== dashboard.meta.isEditing) { if (urlPanelId && !isNaN(parseInt(urlPanelId, 10))) { @@ -265,8 +255,10 @@ export class DashboardPage extends PureComponent { urlEditPanel, inspectTab, isNewEditorOpen, + updateLocation, } = this.props; - const { isSettingsOpening, isEditing, isFullscreen, scrollTop, updateScrollTop } = this.state; + + const { isEditing, isFullscreen, scrollTop, updateScrollTop } = this.state; if (!dashboard) { if (isInitSlow) { @@ -275,11 +267,6 @@ export class DashboardPage extends PureComponent { return null; } - const classes = classNames({ - 'dashboard-page--settings-opening': isSettingsOpening, - 'dashboard-page--settings-open': !isSettingsOpening && editview, - }); - const gridWrapperClasses = classNames({ 'dashboard-container': true, 'dashboard-container--has-submenu': dashboard.meta.submenuEnabled, @@ -294,12 +281,11 @@ export class DashboardPage extends PureComponent { const approximateScrollTop = Math.round(scrollTop / 25) * 25; return ( -
    +
    @@ -311,8 +297,6 @@ export class DashboardPage extends PureComponent { updateAfterMountMs={500} className="custom-scrollbar--page" > - {editview && } - {initError && this.renderInitFailedState()}
    @@ -335,6 +319,11 @@ export class DashboardPage extends PureComponent { )} + {editview && ( + + + + )}
    ); } diff --git a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap index d05b05a89e5..f775fe85660 100644 --- a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap +++ b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DashboardPage Dashboard init completed Should render dashboard grid 1`] = ` -
    +
    +
    -
    @@ -770,5 +667,106 @@ exports[`DashboardPage When dashboard has editview url state should render setti
    + + +
    `; diff --git a/public/app/features/explore/RichHistory/RichHistory.tsx b/public/app/features/explore/RichHistory/RichHistory.tsx index f4a545edca1..f39376b3955 100644 --- a/public/app/features/explore/RichHistory/RichHistory.tsx +++ b/public/app/features/explore/RichHistory/RichHistory.tsx @@ -51,24 +51,23 @@ interface RichHistoryState { const getStyles = stylesFactory((theme: GrafanaTheme) => { const borderColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark6; - const tabBarBg = theme.isLight ? theme.colors.white : theme.colors.black; - const tabContentBg = theme.isLight ? theme.colors.gray7 : theme.colors.dark2; + const tabContentBg = theme.colors.pageBg; return { container: css` height: 100%; - background-color: ${tabContentBg}; `, tabContent: css` - background-color: ${tabContentBg}; padding: ${theme.spacing.md}; + background-color: ${tabContentBg}; `, close: css` position: absolute; - right: ${theme.spacing.sm}; + right: 16px; + top: 5px; cursor: pointer; + font-size: ${theme.typography.size.lg}; `, tabs: css` - background-color: ${tabBarBg}; padding-top: ${theme.spacing.sm}; border-color: ${borderColor}; ul { diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.tsx index 342630d7882..663c2612921 100644 --- a/public/app/features/explore/RichHistory/RichHistoryCard.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryCard.tsx @@ -36,7 +36,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => { : isRemoved ? theme.colors.gray15 : theme.colors.gray05; - const cardBoxShadow = theme.isLight ? `0px 2px 2px ${borderColor}` : `0px 2px 4px black`; return { queryCard: css` @@ -44,7 +43,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => { flex-direction: column; border: 1px solid ${borderColor}; margin: ${theme.spacing.sm} 0; - box-shadow: ${cardBoxShadow}; background-color: ${cardColor}; border-radius: ${theme.border.radius.sm}; .starred { diff --git a/public/app/features/explore/RichHistory/RichHistoryContainer.tsx b/public/app/features/explore/RichHistory/RichHistoryContainer.tsx index 4c6fc3dacd4..693e7d3328b 100644 --- a/public/app/features/explore/RichHistory/RichHistoryContainer.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryContainer.tsx @@ -22,12 +22,12 @@ import { RichHistory, Tabs } from './RichHistory'; import { deleteRichHistory } from '../state/actions'; const getStyles = stylesFactory((theme: GrafanaTheme) => { - const containerBackground = theme.isLight ? theme.colors.gray7 : theme.colors.dark2; + const containerBackground = theme.isLight ? theme.colors.gray95 : theme.colors.gray15; const containerBorderColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark6; - const handleBackground = theme.isLight ? theme.colors.gray5 : theme.colors.gray15; - const handleDots = theme.isLight ? theme.colors.gray70 : theme.colors.gray33; - const handleBackgroundHover = theme.isLight ? theme.colors.gray70 : theme.colors.gray33; - const handleDotsHover = theme.isLight ? theme.colors.gray5 : theme.colors.dark7; + const handleBackground = theme.isLight ? theme.colors.white : theme.colors.gray15; + const handleDots = theme.isLight ? theme.colors.gray85 : theme.colors.gray33; + const handleBackgroundHover = theme.isLight ? theme.colors.gray85 : theme.colors.gray33; + const handleDotsHover = theme.isLight ? theme.colors.gray70 : theme.colors.dark7; return { container: css` diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts index 2a9dfc13eae..2184c540104 100644 --- a/public/app/routes/routes.ts +++ b/public/app/routes/routes.ts @@ -197,6 +197,7 @@ export function setupAngularRoutes($routeProvider: route.IRouteProvider, $locati .when('/explore', { template: '', reloadOnSearch: false, + pageClass: 'page-explore', resolve: { roles: () => (config.viewersCanEdit ? [] : ['Editor', 'Admin']), component: () => SafeDynamicImport(import(/* webpackChunkName: "explore" */ 'app/features/explore/Wrapper')), diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index 0dd4105d78f..0e4cfc18fe2 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -25,6 +25,17 @@ $green-base: #299c46; $green-shade: #23843b; $orange-dark: #ff780a; +$gray98: #f7f8fa; +$gray95: #e9edf2; +$gray85: #c7d0d9; +$gray70: #9fa7b3; +$gray60: #7b8087; +$gray33: #464c54; +$gray25: #343b40; +$gray15: #202226; +$gray10: #141619; +$gray05: #0b0c0e; + // Grays // ------------------------- $black: #000000; @@ -78,8 +89,8 @@ $critical: #e02f44; // Scaffolding // ------------------------- -$body-bg: #161719; -$page-bg: #161719; +$body-bg: #0b0c0e; +$page-bg: #141619; $body-color: #d8d9da; $text-color: #d8d9da; @@ -94,8 +105,6 @@ $textShadow: none; // gradients $brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%); $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%); -$page-gradient: linear-gradient(180deg, $dark-5 10px, $dark-2 100px); -$edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black); // Links // ------------------------- @@ -114,13 +123,13 @@ $hr-border-color: $dark-9; // Panel // ------------------------- -$panel-bg: #212124; -$panel-border: solid 1px $dark-1; -$panel-header-hover-bg: $dark-9; +$panel-bg: #141619; +$panel-border: 1px solid #202226; +$panel-header-hover-bg: #202226; $panel-corner: $panel-bg; // page header -$page-header-bg: linear-gradient(90deg, $dark-7, $black); +$page-header-bg: #202226; $page-header-shadow: inset 0px -4px 14px $dark-3; $page-header-border-color: $dark-9; @@ -135,8 +144,8 @@ $code-tag-bg: $dark-1; $code-tag-border: $dark-9; // cards -$card-background: linear-gradient(135deg, $dark-8, $dark-6); -$card-background-hover: linear-gradient(135deg, $dark-9, $dark-6); +$card-background: linear-gradient(135deg, $dark-4, $dark-3); +$card-background-hover: linear-gradient(135deg, $dark-5, $dark-6); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3); // Lists @@ -212,7 +221,6 @@ $placeholderText: darken($text-color, 25%); // Search $search-shadow: 0 0 30px 0 $black; -$search-filter-box-bg: $gray-blue; // Typeahead $typeahead-shadow: 0 5px 10px 0 $black; @@ -221,10 +229,10 @@ $typeahead-selected-color: $yellow; // Dropdowns // ------------------------- -$dropdownBackground: $dark-6; -$dropdownBorder: rgba(0, 0, 0, 0.2); +$dropdownBackground: $panel-bg; +$dropdownBorder: #202226; $dropdownDividerTop: transparent; -$dropdownDividerBottom: #444; +$dropdownDividerBottom: #343b40; $dropdownLinkColor: $text-color; $dropdownLinkColorHover: $white; @@ -239,26 +247,23 @@ $horizontalComponentOffset: 180px; // Navbar // ------------------------- $navbarHeight: 55px; - -$navbarBackground: $panel-bg; $navbarBorder: 1px solid $dark-6; -$navbarButtonBackground: $navbarBackground; -$navbarButtonBackgroundHighlight: $body-bg; - +$navbarButtonBackground: $panel-bg; $navbar-button-border: #2f2f32; // Sidemenu // ------------------------- -$side-menu-bg: $black; -$side-menu-bg-mobile: $side-menu-bg; +$side-menu-bg: $panel-bg; +$side-menu-bg-mobile: $panel-bg; +$side-menu-border: none; $side-menu-item-hover-bg: $dark-3; $side-menu-shadow: 0 0 20px black; $side-menu-link-color: $link-color; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: $body-bg; +$menu-dropdown-bg: $panel-bg; $menu-dropdown-hover-bg: $dark-3; $menu-dropdown-shadow: 5px 5px 20px -5px $black; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index c2f7d37301a..983ec849e78 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -25,6 +25,17 @@ $green-base: #3eb15b; $green-shade: #369b4f; $orange-dark: #ed5700; +$gray98: #f7f8fa; +$gray95: #e9edf2; +$gray85: #c7d0d9; +$gray70: #9fa7b3; +$gray60: #7b8087; +$gray33: #464c54; +$gray25: #343b40; +$gray15: #202226; +$gray10: #141619; +$gray05: #0b0c0e; + // Grays // ------------------------- $black: #000000; @@ -72,7 +83,7 @@ $critical: #c4162a; // Scaffolding // ------------------------- $body-bg: #f7f8fa; -$page-bg: #f7f8fa; +$page-bg: #ffffff; $body-color: #52545c; $text-color: #52545c; @@ -86,8 +97,6 @@ $text-shadow-faint: none; // gradients $brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%); $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%); -$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px); -$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); // Links // ------------------------- @@ -107,12 +116,12 @@ $hr-border-color: $gray-4 !default; // Panel // ------------------------- $panel-bg: #ffffff; -$panel-border: solid 1px $gray-5; +$panel-border: 1px solid #e9edf2; $panel-header-hover-bg: $gray-6; $panel-corner: $gray-4; // Page header -$page-header-bg: linear-gradient(90deg, $white, $gray-7); +$page-header-bg: linear-gradient(90deg, $white, #e9edf2); $page-header-shadow: inset 0px -3px 10px $gray-6; $page-header-border-color: $gray-4; @@ -205,7 +214,6 @@ $placeholderText: $gray-2; // search $search-shadow: 0 1px 5px 0 $gray-5; -$search-filter-box-bg: $gray-7; // Typeahead $typeahead-shadow: 0 5px 10px 0 $gray-5; @@ -232,26 +240,23 @@ $horizontalComponentOffset: 180px; // Navbar // ------------------------- $navbarHeight: 52px; - -$navbarBackground: $white; $navbarBorder: 1px solid $gray-5; -$navbarButtonBackground: lighten($navbarBackground, 3%); -$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); - +$navbarButtonBackground: $panel-bg; $navbar-button-border: $gray-4; // Sidemenu // ------------------------- -$side-menu-bg: $dark-1; +$side-menu-bg: #202226; +$side-menu-border: 1px solid #343b40; $side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6; -$side-menu-item-hover-bg: $gray-1; +$side-menu-item-hover-bg: #343b40; $side-menu-shadow: 5px 0px 10px -5px $gray-1; $side-menu-link-color: $gray-6; // Menu dropdowns // ------------------------- -$menu-dropdown-bg: $gray-7; +$menu-dropdown-bg: $panel-bg; $menu-dropdown-hover-bg: $gray-6; $menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; diff --git a/public/sass/components/_dashboard_settings.scss b/public/sass/components/_dashboard_settings.scss index c53e912ba06..b9882c87a52 100644 --- a/public/sass/components/_dashboard_settings.scss +++ b/public/sass/components/_dashboard_settings.scss @@ -1,24 +1,26 @@ .dashboard-settings { - opacity: 0; + position: fixed; height: 100%; + width: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: $zindex-modal; + background: $body-bg; +} + +.dashboard-settings__body1 { + height: calc(100% - #{$navbarHeight}); + width: 100%; +} + +.dashboard-settings__body2 { + height: 100%; + width: 100%; display: flex; flex-direction: row; -} - -.dashboard-page--settings-opening { - .dashboard-container { - display: none; - } -} - -.dashboard-page--settings-open { - .dashboard-settings { - opacity: 1; - transition: opacity 300ms ease-in-out; - } - .dashboard-container { - display: none; - } + background: $panel-bg; } .dashboard-settings__content { @@ -31,7 +33,7 @@ .dashboard-settings__aside { padding: 32px 0 0 32px; - background: $panel-bg; + background: lightOrDark($gray95, $gray15); display: flex; flex-direction: column; } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index a2485f430b2..c4e469aafa9 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -14,6 +14,10 @@ padding-left: $dashboard-padding; margin-left: 0; } + + &--shadow { + box-shadow: $side-menu-shadow; + } } @mixin navbar-alt-look() { @@ -22,28 +26,6 @@ border-bottom: $navbarBorder; } -.dashboard-page--settings-open { - .navbar { - @include navbar-alt-look(); - } - - .navbar-buttons--tv, - .navbar-button--add-panel, - .navbar-button--star, - .navbar-button--save, - .navbar-button--share, - .navbar-button--settings, - .navbar-page-btn .fa-caret-down, - .refresh-picker, - .time-picker { - display: none; - } - - .navbar-buttons--close { - display: flex; - } -} - .panel-in-fullscreen, .panel-in-fullscreen.view-mode--tv { .navbar { @@ -86,6 +68,7 @@ .navbar-page-btn__folder { color: $text-color-weak; display: none; + padding-right: 8px; @include media-breakpoint-up(lg) { display: inline-block; @@ -129,7 +112,7 @@ i.navbar-page-btn__search { } .navbar-button { - @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow); + background-color: $panel-bg; display: flex; align-items: center; @@ -192,6 +175,12 @@ i.navbar-page-btn__search { @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); } + &:hover { + .fa { + color: $text-color; + } + } + @include media-breakpoint-down(lg) { .btn-title { margin-left: $space-xs; @@ -206,12 +195,3 @@ i.navbar-page-btn__search { align-items: center; padding-right: 13px; } - -.navbar-settings-title { - display: block; - margin: 0; - color: $headings-color; - font-size: $font-size-lg; - min-height: $navbarHeight; - line-height: $navbarHeight; -} diff --git a/public/sass/components/_panel_gettingstarted.scss b/public/sass/components/_panel_gettingstarted.scss index 665c41a8374..2d02bc0108b 100644 --- a/public/sass/components/_panel_gettingstarted.scss +++ b/public/sass/components/_panel_gettingstarted.scss @@ -1,7 +1,7 @@ // Colors $progress-color-dark: $panel-bg !default; $progress-color: $panel-bg !default; -$progress-line-uncompleted: lightOrDarkTheme($gray-3, $gray-1); +$progress-line-uncompleted: lightOrDark($gray-3, $gray-1); // Sizing $marker-size: 60px !default; diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 9759c6878d6..49ff97e873f 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -3,10 +3,10 @@ right: 0; left: 0; bottom: 0; - top: $navbarHeight; + top: 0; z-index: $zindex-modal-backdrop; background-color: $black; - @include opacity(75); + @include opacity(60); } .search-container { @@ -16,6 +16,7 @@ bottom: 0; z-index: ($zindex-modal-backdrop + 10); position: fixed; + background: $body-bg; } // Search @@ -26,7 +27,7 @@ } .search-dropdown__col_1 { - background: $page-bg; + padding: $dashboard-padding; max-width: 700px; display: flex; flex-direction: column; @@ -47,8 +48,9 @@ } .search-filter-box { - background: $search-filter-box-bg; - border-radius: 2px; + background: $panel-bg; + border: $panel-border; + border-radius: 3px; padding: $spacer * 1.5; min-width: 340px; margin-bottom: $spacer * 1.5; @@ -77,6 +79,10 @@ .search-results-scroller { display: flex; position: relative; + min-height: 100%; + background: $panel-bg; + border: $panel-border; + border-radius: 3px; } .search-results-container { @@ -106,10 +112,9 @@ .search-section { background: $panel-bg; - border: $panel-border; + border-bottom: 1px solid lightOrDark($gray95, $gray25); padding: 0px 4px 4px 4px; margin-bottom: 3px; - border-radius: 5px; } .search-section__header { diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 334378036c3..a8c9493b03d 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -1,12 +1,14 @@ $mobile-menu-breakpoint: md; .sidemenu { + background: $side-menu-bg; position: fixed; display: flex; flex-flow: column; flex-direction: column; width: $side-menu-width; z-index: $zindex-sidemenu; + a:focus { text-decoration: none; } @@ -20,7 +22,7 @@ $mobile-menu-breakpoint: md; } @include media-breakpoint-up($mobile-menu-breakpoint) { - background: $side-menu-bg; + border-right: $side-menu-border; height: auto; box-shadow: $side-menu-shadow; position: relative; @@ -205,7 +207,7 @@ li.sidemenu-org-switcher { height: $navbarHeight - 1px; &:hover { - background: $navbarButtonBackgroundHighlight; + background: lightOrDark($gray33, $gray25); } img { diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index af19956c6c7..65a723cb9ef 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -11,12 +11,13 @@ .main-view { position: relative; flex-grow: 1; - background: $page-gradient; + background: $page-bg; } -.panel-in-fullscreen { +.page-explore, +.page-dashboard { .main-view { - background: $edit-gradient; + background: $body-bg; } } diff --git a/public/sass/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss index 00d78cae0ba..7e6930e97a7 100644 --- a/public/sass/mixins/_mixins.scss +++ b/public/sass/mixins/_mixins.scss @@ -369,7 +369,7 @@ } } -@function lightOrDarkTheme($lightColor, $darkColor) { +@function lightOrDark($lightColor, $darkColor) { @if (lightness($text-color) < 50) { @return $lightColor; } @else {