From 0027097772781e876803bc4d80a7c9f88e37de8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 22 Apr 2021 10:57:10 +0200 Subject: [PATCH] Overlays: Style tweaks to modal & drawer overlays (#33251) * Overlays: Style tweaks to modal & drawer overlays * style fix --- .../src/themes/createComponents.ts | 7 +++- .../src/components/Drawer/Drawer.tsx | 34 +++++++++++++------ .../src/components/Modal/getModalStyles.ts | 5 ++- .../TabbedContainer/TabbedContainer.tsx | 24 ++++++------- public/app/features/explore/ExploreDrawer.tsx | 24 ++++++------- .../explore/RichHistory/RichHistoryCard.tsx | 21 +++--------- 6 files changed, 55 insertions(+), 60 deletions(-) diff --git a/packages/grafana-data/src/themes/createComponents.ts b/packages/grafana-data/src/themes/createComponents.ts index 892616ba97a..907b3c50fcc 100644 --- a/packages/grafana-data/src/themes/createComponents.ts +++ b/packages/grafana-data/src/themes/createComponents.ts @@ -15,7 +15,6 @@ export interface ThemeComponents { borderHover: string; text: string; }; - tooltip: { text: string; background: string; @@ -30,6 +29,9 @@ export interface ThemeComponents { dropdown: { background: string; }; + overlay: { + background: string; + }; dashboard: { background: string; padding: number; @@ -71,5 +73,8 @@ export function createComponents(colors: ThemeColors, shadows: ThemeShadows): Th background: colors.background.canvas, padding: 1, }, + overlay: { + background: colors.mode === 'dark' ? 'rgba(0, 0, 0, 0.27)' : 'rgba(208, 209, 211, 0.24)', + }, }; } diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx index f9625404bef..ec1dbcdbc7d 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx @@ -1,12 +1,12 @@ import React, { CSSProperties, FC, ReactNode, useState } from 'react'; -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaThemeV2 } from '@grafana/data'; import RcDrawer from 'rc-drawer'; import { css } from '@emotion/css'; import { selectors } from '@grafana/e2e-selectors'; import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar'; import { IconButton } from '../IconButton/IconButton'; -import { stylesFactory, useTheme } from '../../themes'; +import { stylesFactory, useTheme2 } from '../../themes'; export interface Props { children: ReactNode; @@ -30,22 +30,34 @@ export interface Props { onClose: () => void; } -const getStyles = stylesFactory((theme: GrafanaTheme, scrollableContent: boolean) => { +const getStyles = stylesFactory((theme: GrafanaThemeV2, scrollableContent: boolean) => { return { drawer: css` .drawer-content { - background-color: ${theme.colors.bg1}; + background-color: ${theme.colors.background.primary}; display: flex; flex-direction: column; overflow: hidden; } + &.drawer-open .drawer-mask { + background-color: ${theme.components.overlay.background}; + backdrop-filter: blur(1px); + opacity: 1; + } + .drawer-mask { + background-color: ${theme.components.overlay.background}; + backdrop-filter: blur(1px); + } + .drawer-open .drawer-content-wrapper { + box-shadow: ${theme.shadows.z3}; + } z-index: ${theme.zIndex.dropdown}; `, header: css` - background-color: ${theme.colors.bg2}; + background-color: ${theme.colors.background.canvas}; z-index: 1; flex-grow: 0; - padding-top: ${theme.spacing.xs}; + padding-top: ${theme.spacing(0.5)}; `, actions: css` display: flex; @@ -53,14 +65,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme, scrollableContent: boolean justify-content: flex-end; `, titleWrapper: css` - margin-bottom: ${theme.spacing.lg}; - padding: 0 ${theme.spacing.sm} 0 ${theme.spacing.lg}; + margin-bottom: ${theme.spacing(3)}; + padding: ${theme.spacing(0, 1, 0, 3)}; `, titleSpacing: css` - margin-bottom: ${theme.spacing.md}; + margin-bottom: ${theme.spacing(2)}; `, content: css` - padding: ${theme.spacing.md}; + padding: ${theme.spacing(2)}; flex-grow: 1; overflow: ${!scrollableContent ? 'hidden' : 'auto'}; z-index: 0; @@ -80,7 +92,7 @@ export const Drawer: FC = ({ width = '40%', expandable = false, }) => { - const theme = useTheme(); + const theme = useTheme2(); const drawerStyles = getStyles(theme, scrollableContent); const [isExpanded, setIsExpanded] = useState(false); const currentWidth = isExpanded ? '100%' : width; diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts index 39431594dd5..eb7b674eced 100644 --- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts +++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts @@ -3,7 +3,6 @@ import { GrafanaThemeV2 } from '@grafana/data'; import { stylesFactory } from '../../themes'; export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => { - const backdropBackground = theme.isDark ? 'rgba(0, 0, 0, 0.27)' : 'rgba(208, 209, 211, 0.24)'; const borderRadius = theme.shape.borderRadius(2); return { @@ -30,8 +29,8 @@ export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => { bottom: 0; left: 0; z-index: ${theme.zIndex.modalBackdrop}; - background-color: ${backdropBackground}; - backdrop-filter: blur(2px); + background-color: ${theme.components.overlay.background}; + backdrop-filter: blur(1px); `, modalHeader: css` label: modalHeader; diff --git a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx b/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx index e4008ff298b..4f180d2b7e9 100644 --- a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx +++ b/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx @@ -1,8 +1,8 @@ import React, { useState } from 'react'; import { css } from '@emotion/css'; -import { SelectableValue, GrafanaTheme } from '@grafana/data'; -import { stylesFactory, useTheme } from '../../themes'; +import { SelectableValue, GrafanaThemeV2 } from '@grafana/data'; +import { stylesFactory, useTheme2 } from '../../themes'; import { IconName, TabsBar, Tab, IconButton, CustomScrollbar, TabContent } from '../..'; export interface TabConfig { @@ -19,14 +19,14 @@ export interface TabbedContainerProps { onClose: () => void; } -const getStyles = stylesFactory((theme: GrafanaTheme) => { +const getStyles = stylesFactory((theme: GrafanaThemeV2) => { return { container: css` height: 100%; `, tabContent: css` - padding: ${theme.spacing.md}; - background-color: ${theme.colors.bodyBg}; + padding: ${theme.spacing(2)}; + background-color: ${theme.colors.background.primary}; height: 100%; `, close: css` @@ -37,16 +37,12 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { font-size: ${theme.typography.size.lg}; `, tabs: css` - padding-top: ${theme.spacing.sm}; - border-color: ${theme.colors.formInputBorder}; + padding-top: ${theme.spacing(1)}; + border-color: ${theme.colors.border.weak}; ul { - margin-left: ${theme.spacing.md}; + margin-left: ${theme.spacing(2)}; } `, - scrollbar: css` - min-height: 100% !important; - background-color: ${theme.colors.panelBg}; - `, }; }); @@ -60,7 +56,7 @@ export function TabbedContainer(props: TabbedContainerProps) { }; const { tabs, onClose, closeIconTooltip } = props; - const theme = useTheme(); + const theme = useTheme2(); const styles = getStyles(theme); return ( @@ -77,7 +73,7 @@ export function TabbedContainer(props: TabbedContainerProps) { ))} - + {tabs.find((t) => t.value === activeTab)?.content} diff --git a/public/app/features/explore/ExploreDrawer.tsx b/public/app/features/explore/ExploreDrawer.tsx index 872fb2e3875..a59c7e20aab 100644 --- a/public/app/features/explore/ExploreDrawer.tsx +++ b/public/app/features/explore/ExploreDrawer.tsx @@ -4,10 +4,10 @@ import { Resizable, ResizeCallback } from 're-resizable'; import { css, cx, keyframes } from '@emotion/css'; // Services & Utils -import { stylesFactory, useTheme } from '@grafana/ui'; +import { stylesFactory, useTheme2 } from '@grafana/ui'; // Types -import { GrafanaTheme } from '@grafana/data'; +import { GrafanaThemeV2 } from '@grafana/data'; const drawerSlide = keyframes` 0% { @@ -19,19 +19,15 @@ const drawerSlide = keyframes` } `; -const getStyles = stylesFactory((theme: GrafanaTheme) => { - const shadowColor = theme.isLight ? theme.palette.gray4 : theme.palette.black; - +const getStyles = stylesFactory((theme: GrafanaThemeV2) => { return { container: css` position: fixed !important; bottom: 0; - background: ${theme.colors.pageHeaderBg}; - border-top: 1px solid ${theme.colors.formInputBorder}; - margin: 0px; - margin-right: -${theme.spacing.md}; - margin-left: -${theme.spacing.md}; - box-shadow: 0 0 4px ${shadowColor}; + background: ${theme.colors.background.primary}; + border-top: 1px solid ${theme.colors.border.weak}; + margin: ${theme.spacing(0, -2, 0, -2)}; + box-shadow: ${theme.shadows.z3}; z-index: ${theme.zIndex.sidemenu}; `, drawerActive: css` @@ -39,7 +35,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { animation: 0.5s ease-out ${drawerSlide}; `, rzHandle: css` - background: ${theme.colors.formInputBorder}; + background: ${theme.colors.secondary.main}; transition: 0.3s background ease-in-out; position: relative; width: 200px !important; @@ -49,7 +45,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { cursor: grab; border-radius: 4px; &:hover { - background: ${theme.colors.formInputBorderHover}; + background: ${theme.colors.secondary.shade}; } `, }; @@ -63,7 +59,7 @@ export interface Props { export function ExploreDrawer(props: Props) { const { width, children, onResize } = props; - const theme = useTheme(); + const theme = useTheme2(); const styles = getStyles(theme); const drawerWidth = `${width + 31.5}px`; diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.tsx index 85a61188c00..f60601313a5 100644 --- a/public/app/features/explore/RichHistory/RichHistoryCard.tsx +++ b/public/app/features/explore/RichHistory/RichHistoryCard.tsx @@ -37,19 +37,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => { const rigtColumnContentWidth = '170px'; /* If datasource was removed, card will have inactive color */ - const cardColor = theme.isLight - ? isRemoved - ? theme.palette.gray95 - : theme.palette.white - : isRemoved - ? theme.palette.gray15 - : theme.palette.gray05; + const cardColor = theme.colors.bg2; return { queryCard: css` display: flex; flex-direction: column; - border: 1px solid ${theme.colors.formInputBorder}; + border: 1px solid ${theme.colors.border1}; margin: ${theme.spacing.sm} 0; background-color: ${cardColor}; border-radius: ${theme.border.radius.sm}; @@ -64,7 +58,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => { padding: ${theme.spacing.sm}; border-bottom: none; :first-of-type { - border-bottom: 1px solid ${theme.colors.formInputBorder}; + border-bottom: 1px solid ${theme.colors.border1}; padding: ${theme.spacing.xs} ${theme.spacing.sm}; } img { @@ -93,7 +87,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => { width: calc(100% - ${rigtColumnWidth}); `, queryRow: css` - border-top: 1px solid ${theme.colors.formInputBorder}; + border-top: 1px solid ${theme.colors.border1}; word-break: break-all; padding: 4px 2px; :first-child { @@ -117,14 +111,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => { } `, textArea: css` - border: 1px solid ${theme.colors.formInputBorder}; - background: inherit; - color: inherit; width: 100%; - font-size: ${theme.typography.size.sm}; - &placeholder { - padding: 0 ${theme.spacing.sm}; - } `, runButton: css` max-width: ${rigtColumnContentWidth};