diff --git a/packages/grafana-data/src/themes/createPalette.ts b/packages/grafana-data/src/themes/createPalette.ts index cb3fe3e08f3..5c5b8ef15a7 100644 --- a/packages/grafana-data/src/themes/createPalette.ts +++ b/packages/grafana-data/src/themes/createPalette.ts @@ -1,5 +1,5 @@ import { merge } from 'lodash'; -import { darken, emphasize, getContrastRatio, lighten } from './colorManipulator'; +import { alpha, darken, emphasize, getContrastRatio, lighten } from './colorManipulator'; import { colors } from './colors'; import { DeepPartial, ThemePaletteColor } from './types'; @@ -75,8 +75,8 @@ class DarkPalette implements ThemePaletteBase> { mode: ThemePaletteMode = 'dark'; text = { - primary: 'rgba(255, 255, 255, 0.75)', - secondary: 'rgba(255, 255, 255, 0.50)', + primary: 'rgba(255, 255, 255, 0.77)', + secondary: 'rgba(255, 255, 255, 0.55)', disabled: 'rgba(255, 255, 255, 0.35)', link: colors.blueDarkText, maxContrast: colors.white, @@ -188,7 +188,6 @@ class LightPalette implements ThemePaletteBase> { divider = 'rgba(0, 2, 78, 0.07)'; border0 = this.layer1; - border1 = 'rgba(0, 2, 78, 0.20)'; border2 = 'rgba(0, 2, 78, 0.30)'; @@ -246,11 +245,14 @@ export function createPalette(palette: ThemePaletteInput): ThemePalette { color.text = color.main; } if (!color.border) { - color.text = color.text; + color.border = color.text; } if (!color.shade) { color.shade = base.mode === 'light' ? darken(color.main, tonalOffset) : lighten(color.main, tonalOffset); } + if (!color.transparent) { + color.transparent = base.mode === 'light' ? alpha(color.main, 0.08) : alpha(color.main, 0.15); + } if (!color.contrastText) { color.contrastText = getContrastText(color.main); } diff --git a/packages/grafana-data/src/themes/createShadows.ts b/packages/grafana-data/src/themes/createShadows.ts index 4c1ccddf230..56351b90043 100644 --- a/packages/grafana-data/src/themes/createShadows.ts +++ b/packages/grafana-data/src/themes/createShadows.ts @@ -22,9 +22,9 @@ function createDarkShadow(...px: number[]) { } function createLightShadow(...px: number[]) { - const shadowKeyUmbraOpacity = 0.2; - const shadowKeyPenumbraOpacity = 0.14; - const shadowAmbientShadowOpacity = 0.12; + const shadowKeyUmbraOpacity = 0.15; + const shadowKeyPenumbraOpacity = 0.1; + const shadowAmbientShadowOpacity = 0.1; return [ `${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, @@ -50,6 +50,6 @@ export function createShadows(palette: ThemePalette): ThemeShadows { z1: createLightShadow(0, 1, 1, -1, 0, 1, 2, 0, 0, 1, 3, 0), z2: createLightShadow(0, 2, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), z3: createLightShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), - z4: createLightShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), + z4: createLightShadow(0, 5, 5, -5, 0, 8, 10, 1, 0, 3, 14, 2), }; } diff --git a/packages/grafana-ui/src/components/Alert/Alert.story.tsx b/packages/grafana-ui/src/components/Alert/Alert.story.tsx index 4b2c2027f16..6cfcff7bf13 100644 --- a/packages/grafana-ui/src/components/Alert/Alert.story.tsx +++ b/packages/grafana-ui/src/components/Alert/Alert.story.tsx @@ -36,12 +36,17 @@ export const Examples: Story = ({ severity, title, buttonContent }) => { buttonContent={{buttonContent}} onRemove={action('Remove button clicked')} > - Child content that includes some alert details, like maybe what actually happened. + +
Child content that includes some alert details, like maybe what actually happened.
+ + + + {severities.map((severity) => ( diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx index c40a4a23636..93029ab4d94 100644 --- a/packages/grafana-ui/src/components/Alert/Alert.tsx +++ b/packages/grafana-ui/src/components/Alert/Alert.tsx @@ -5,7 +5,8 @@ import { selectors } from '@grafana/e2e-selectors'; import { useTheme } from '../../themes'; import { Icon } from '../Icon/Icon'; import { IconName } from '../../types/icon'; -import { getColorsFromSeverity } from '../../utils/colors'; +import { IconButton } from '../IconButton/IconButton'; +import { Button } from '../Button/Button'; export type AlertVariant = 'success' | 'warning' | 'error' | 'info'; @@ -15,14 +16,8 @@ export interface Props extends HTMLAttributes { onRemove?: (event: React.MouseEvent) => void; severity?: AlertVariant; children?: ReactNode; - /** Custom component or text for alert button */ - buttonContent?: ReactNode | string; - /** @deprecated */ - /** Deprecated use onRemove instead */ - onButtonClick?: (event: React.MouseEvent) => void; - /** @deprecated */ - /** Deprecated use buttonContent instead */ - buttonText?: string; + elevated?: boolean; + buttonContent?: React.ReactNode | string; } function getIconFromSeverity(severity: AlertVariant): string { @@ -40,9 +35,9 @@ function getIconFromSeverity(severity: AlertVariant): string { } export const Alert: FC = React.forwardRef( - ({ title, buttonText, onButtonClick, onRemove, children, buttonContent, severity = 'error', ...restProps }, ref) => { + ({ title, onRemove, children, buttonContent, elevated, severity = 'error', ...restProps }, ref) => { const theme = useTheme(); - const styles = getStyles(theme, severity, !!buttonContent); + const styles = getStyles(theme, severity, elevated); return (
@@ -54,15 +49,18 @@ export const Alert: FC = React.forwardRef( {children &&
{children}
}
{/* If onRemove is specified, giving preference to onRemove */} - {onRemove ? ( - - ) : onButtonClick ? ( - - ) : null} + {onRemove && !buttonContent && ( +
+ +
+ )} + {onRemove && buttonContent && ( +
+ +
+ )} ); } @@ -70,54 +68,65 @@ export const Alert: FC = React.forwardRef( Alert.displayName = 'Alert'; -const getStyles = (theme: GrafanaTheme, severity: AlertVariant, outline: boolean) => { - const { white } = theme.palette; - const severityColors = getColorsFromSeverity(severity, theme); - const background = css` - background: linear-gradient(90deg, ${severityColors[0]}, ${severityColors[0]}); - `; +const getStyles = (theme: GrafanaTheme, severity: AlertVariant, elevated?: boolean) => { + const color = theme.v2.palette[severity]; return { alert: css` flex-grow: 1; - padding: 15px 20px; - margin-bottom: ${theme.spacing.xs}; + margin-bottom: ${theme.v2.spacing(0.5)}; position: relative; - color: ${white}; - text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); - border-radius: ${theme.border.radius.md}; + border-radius: ${theme.v2.shape.borderRadius()}; display: flex; flex-direction: row; - align-items: center; - ${background} + align-items: stretch; + background: ${theme.v2.palette.layer2}; + box-shadow: ${elevated ? theme.v2.shadows.z4 : theme.v2.shadows.z1}; + + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + background: ${theme.v2.palette.layer1}; + z-index: -1; + } `, icon: css` - padding: 0 ${theme.spacing.md} 0 0; + padding: ${theme.v2.spacing(2, 3)}; + background: ${color.main}; + color: ${color.contrastText}; display: flex; align-items: center; justify-content: center; - width: 35px; `, title: css` - font-weight: ${theme.typography.weight.semibold}; + font-weight: ${theme.v2.typography.fontWeightMedium}; + color: ${theme.v2.palette.text.primary}; `, body: css` + color: ${theme.v2.palette.text.secondary}; + padding: ${theme.v2.spacing(2)}; flex-grow: 1; - margin: 0 ${theme.spacing.md} 0 0; + display: flex; + flex-direction: column; + justify-content: center; overflow-wrap: break-word; word-break: break-word; - - a { - color: ${white}; - text-decoration: underline; - } `, - close: css` + buttonWrapper: css` + padding: ${theme.v2.spacing(1)}; background: none; display: flex; align-items: center; - border: ${outline ? `1px solid ${white}` : 'none'}; - border-radius: ${theme.border.radius.sm}; + `, + close: css` + padding: ${theme.v2.spacing(1)}; + background: none; + align-items: center; + display: flex; `, }; }; diff --git a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx index b72b0c4159c..e901eb56d39 100644 --- a/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx +++ b/packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx @@ -17,13 +17,13 @@ export const AlphaNotice: FC = ({ state, text, className }) => { const styles = cx( className, css` - background: linear-gradient(to bottom, ${theme.palette.blue85}, ${theme.palette.blue77}); - color: ${theme.palette.gray7}; + background: ${theme.v2.palette.primary.transparent}; + color: ${theme.v2.palette.text.secondary}; white-space: nowrap; border-radius: 3px; text-shadow: none; - font-size: 13px; - padding: 4px 8px; + font-size: ${theme.v2.typography.size.sm}; + padding: 0 8px; cursor: help; display: inline-block; ` diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.tsx index 5249724c484..c7fd8aba14d 100644 --- a/packages/grafana-ui/src/components/IconButton/IconButton.tsx +++ b/packages/grafana-ui/src/components/IconButton/IconButton.tsx @@ -7,6 +7,7 @@ import { useTheme } from '../../themes/ThemeContext'; import { GrafanaTheme } from '@grafana/data'; import { Tooltip } from '../Tooltip/Tooltip'; import { TooltipPlacement } from '../Tooltip/PopoverController'; +import { focusCss } from '../../themes/mixins'; export interface Props extends React.ButtonHTMLAttributes { /** Name of the icon **/ @@ -97,6 +98,10 @@ const getStyles = stylesFactory((theme: GrafanaTheme, size: IconSize) => { transition-property: transform, opacity; } + &:focus { + ${focusCss(theme)} + } + &:hover { color: ${theme.colors.linkHover}; diff --git a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx index 118bff60d00..cc6f8ba6c2a 100644 --- a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx +++ b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx @@ -8,7 +8,6 @@ import { AlertVariant } from '../Alert/Alert'; import panelArtDark from './panelArt_dark.svg'; import panelArtLight from './panelArt_light.svg'; import { stylesFactory, useTheme } from '../../themes'; -import { getColorsFromSeverity } from '../../utils/colors'; export interface InfoBoxProps extends Omit, 'title'> { children: React.ReactNode; @@ -57,61 +56,66 @@ export const InfoBox = React.memo( ); InfoBox.displayName = 'InfoBox'; -const getInfoBoxStyles = stylesFactory((theme: GrafanaTheme, severity: AlertVariant) => ({ - wrapper: css` - position: relative; - padding: ${theme.spacing.md}; - background-color: ${theme.colors.bg2}; - border-top: 3px solid ${getColorsFromSeverity(severity, theme)[0]}; - margin-bottom: ${theme.spacing.md}; - flex-grow: 1; - color: ${theme.colors.textSemiWeak}; +const getInfoBoxStyles = stylesFactory((theme: GrafanaTheme, severity: AlertVariant) => { + const color = theme.v2.palette[severity]; - code { - font-size: ${theme.typography.size.sm}; - background-color: ${theme.colors.bg1}; - color: ${theme.colors.text}; - border: 1px solid ${theme.colors.border2}; - border-radius: 4px; - } + return { + wrapper: css` + position: relative; + padding: ${theme.spacing.md}; + background-color: ${theme.colors.bg2}; + border-left: 3px solid ${color.border}; + margin-bottom: ${theme.spacing.md}; + flex-grow: 1; + color: ${theme.colors.textSemiWeak}; + box-shadow: ${theme.v2.shadows.z1}; - p:last-child { - margin-bottom: 0; - } + code { + font-size: ${theme.typography.size.sm}; + background-color: ${theme.colors.bg1}; + color: ${theme.colors.text}; + border: 1px solid ${theme.colors.border2}; + border-radius: 4px; + } - &--max-lg { - max-width: ${theme.breakpoints.lg}; - } - `, - wrapperBranded: css` - padding: ${theme.spacing.md}; - border-radius: ${theme.border.radius.md}; - position: relative; - z-index: 0; + p:last-child { + margin-bottom: 0; + } - &:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-image: url(${theme.isLight ? panelArtLight : panelArtDark}); + &--max-lg { + max-width: ${theme.breakpoints.lg}; + } + `, + wrapperBranded: css` + padding: ${theme.spacing.md}; border-radius: ${theme.border.radius.md}; - background-position: 50% 50%; - background-size: cover; - filter: saturate(80%); - z-index: -1; - } + position: relative; + z-index: 0; - p:last-child { - margin-bottom: 0; - } - `, - docsLink: css` - display: inline-block; - margin-top: ${theme.spacing.md}; - font-size: ${theme.typography.size.sm}; - color: ${theme.colors.textSemiWeak}; - `, -})); + &:before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url(${theme.isLight ? panelArtLight : panelArtDark}); + border-radius: ${theme.border.radius.md}; + background-position: 50% 50%; + background-size: cover; + filter: saturate(80%); + z-index: -1; + } + + p:last-child { + margin-bottom: 0; + } + `, + docsLink: css` + display: inline-block; + margin-top: ${theme.spacing.md}; + font-size: ${theme.typography.size.sm}; + color: ${theme.colors.textSemiWeak}; + `, + }; +}); diff --git a/packages/grafana-ui/src/utils/colors.ts b/packages/grafana-ui/src/utils/colors.ts index 5d28628c275..bf6d2c6b53f 100644 --- a/packages/grafana-ui/src/utils/colors.ts +++ b/packages/grafana-ui/src/utils/colors.ts @@ -6,8 +6,6 @@ import zip from 'lodash/zip'; import tinycolor from 'tinycolor2'; import lightTheme from '../themes/light'; import darkTheme from '../themes/dark'; -import { GrafanaTheme } from '@grafana/data'; -import { AlertVariant } from '../components/Alert/Alert'; const PALETTE_ROWS = 4; @@ -126,23 +124,3 @@ export function getTextColorForBackground(color: string) { } export let sortedColors = sortColorsByHue(colors); - -/** - * Returns colors used for severity color coding. Use for single color retrievel(0 index) or gradient definition - * @internal - **/ -export function getColorsFromSeverity(severity: AlertVariant, theme: GrafanaTheme): [string, string] { - switch (severity) { - case 'error': - return [theme.palette.redBase, theme.palette.redShade]; - case 'warning': - return [theme.palette.queryOrange, theme.palette.orange]; - case 'info': - case 'info': - return [theme.palette.blue80, theme.palette.blue77]; - case 'success': - return [theme.palette.greenBase, theme.palette.greenShade]; - default: - return [theme.palette.blue80, theme.palette.blue77]; - } -} diff --git a/public/app/AppWrapper.tsx b/public/app/AppWrapper.tsx index 9e6e4b8ba0a..e1c6c617797 100644 --- a/public/app/AppWrapper.tsx +++ b/public/app/AppWrapper.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { ComponentType } from 'react'; import { Router, Route, Redirect, Switch } from 'react-router-dom'; import { config, locationService, navigationLogger } from '@grafana/runtime'; import { Provider } from 'react-redux'; @@ -22,6 +22,13 @@ interface AppWrapperState { ngInjector: any; } +/** Used by enterprise */ +let bodyRenderHooks: ComponentType[] = []; + +export function addBodyRenderHook(fn: ComponentType) { + bodyRenderHooks.push(fn); +} + export class AppWrapper extends React.Component { container = React.createRef(); @@ -98,6 +105,9 @@ export class AppWrapper extends React.Component {this.state.ngInjector && this.container && this.renderRoutes()} + {bodyRenderHooks.map((Hook, index) => ( + + ))} diff --git a/public/app/core/components/AppNotifications/AppNotificationItem.tsx b/public/app/core/components/AppNotifications/AppNotificationItem.tsx index ded2186577e..c1c227f4fd4 100644 --- a/public/app/core/components/AppNotifications/AppNotificationItem.tsx +++ b/public/app/core/components/AppNotifications/AppNotificationItem.tsx @@ -27,6 +27,7 @@ export default class AppNotificationItem extends Component { severity={appNotification.severity} title={appNotification.title} onRemove={() => onClearNotification(appNotification.id)} + elevated > {appNotification.component || appNotification.text} diff --git a/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap b/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap index 54964a37a18..188676b1368 100644 --- a/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap +++ b/public/app/features/dashboard/components/AddPanelWidget/__snapshots__/AddPanelWidget.test.tsx.snap @@ -8,7 +8,7 @@ exports[`Render should render component 1`] = ` onCancel={[Function]} styles={ Object { - "actionsRow": "css-7gkft9", + "actionsRow": "css-sxfls", "actionsWrapper": "css-gxxmom", "backButton": "css-1cdxa9p", "headerRow": "css-3sdqvi", @@ -25,7 +25,7 @@ exports[`Render should render component 1`] = ` className="css-gxxmom" >
= ({ isReadOnly, onDelete, onSubmit, onTest }) => { return (
{!isReadOnly && ( - + )} {isReadOnly && ( - + )} - - + + Back - +
); }; diff --git a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx index 46beaf30ff7..3633bd68371 100644 --- a/public/app/features/datasources/settings/DataSourceSettingsPage.tsx +++ b/public/app/features/datasources/settings/DataSourceSettingsPage.tsx @@ -233,7 +233,7 @@ export class DataSourceSettingsPage extends PureComponent { /> )} -
+
{testingStatus?.message && ( - - - + Back - +
`; @@ -33,29 +33,29 @@ exports[`Render should render with buttons enabled 1`] = `
- - - + Back - +
`; diff --git a/public/app/features/plugins/PluginStateInfo.tsx b/public/app/features/plugins/PluginStateInfo.tsx index 35db0a2549b..401f9a5b587 100644 --- a/public/app/features/plugins/PluginStateInfo.tsx +++ b/public/app/features/plugins/PluginStateInfo.tsx @@ -1,7 +1,6 @@ import React, { FC } from 'react'; import { AlphaNotice } from '@grafana/ui'; import { PluginState } from '@grafana/data'; -import { css } from '@emotion/css'; interface Props { state?: PluginState; @@ -24,15 +23,7 @@ const PluginStateinfo: FC = (props) => { return null; } - return ( - - ); + return ; }; export default PluginStateinfo; diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index bf0a8a3d90c..846ceade663 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -99,8 +99,8 @@ $page-bg: #181b1f; $dashboard-bg: #0d0f16; $text-color-strong: #fff; -$text-color: rgba(255, 255, 255, 0.75); -$text-color-semi-weak: rgba(255, 255, 255, 0.50); +$text-color: rgba(255, 255, 255, 0.77); +$text-color-semi-weak: rgba(255, 255, 255, 0.55); $text-color-weak: rgba(255, 255, 255, 0.35); $text-color-faint: rgba(255, 255, 255, 0.35); $text-color-emphasis: #fff; @@ -122,7 +122,7 @@ $external-link-color: #33a2e5; // Typography // ------------------------- -$headings-color: rgba(255, 255, 255, 0.75); +$headings-color: rgba(255, 255, 255, 0.77); $abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; @@ -258,7 +258,7 @@ $side-menu-border: none; $side-menu-item-hover-bg: #22252b; $side-menu-shadow: 0 0 20px black; $side-menu-icon-color: #9fa7b3; -$side-menu-header-color: rgba(255, 255, 255, 0.75); +$side-menu-header-color: rgba(255, 255, 255, 0.77); // Menu dropdowns // ------------------------- @@ -288,13 +288,13 @@ $tooltipLinkColor: $link-color; $graph-tooltip-bg: $dark-1; $tooltipBackground: #22252b; -$tooltipColor: rgba(255, 255, 255, 0.75); +$tooltipColor: rgba(255, 255, 255, 0.77); $tooltipArrowColor: #22252b; $tooltipBackgroundError: #D10E5C; $tooltipShadow: 0px 3px 1px -2px rgba(0,0,0,0.5),0px 2px 2px 0px rgba(0,0,0,0.4),0px 1px 5px 0px rgba(0,0,0,0.3); $popover-bg: #22252b; -$popover-color: rgba(255, 255, 255, 0.75); +$popover-color: rgba(255, 255, 255, 0.77); $popover-border-color: rgba(218,224,254,0.15); $popover-header-bg: #22252b; $popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.5),0px 8px 10px 1px rgba(0,0,0,0.4),0px 3px 14px 2px rgba(0,0,0,0.3); @@ -339,7 +339,7 @@ $diff-group-bg: #22252b; $diff-arrow-color: $white; $diff-json-bg: #22252b; -$diff-json-fg: rgba(255, 255, 255, 0.75); +$diff-json-fg: rgba(255, 255, 255, 0.77); $diff-json-added: $blue-shade; $diff-json-deleted: $red-shade; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 903b8b43557..320f32b2a0b 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -127,7 +127,7 @@ $hr-border-color: $gray-4 !default; $panel-bg: #fff; $panel-border: #fff; $panel-header-hover-bg: rgba(0, 0, 0, 0.04); -$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.2),0px 0px 0px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12); +$panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.15),0px 0px 0px 0px rgba(0,0,0,0.1),0px 1px 3px 0px rgba(0,0,0,0.1); $panel-corner: $panel-bg; // Page header @@ -260,7 +260,7 @@ $side-menu-header-color: #e9edf2; // ------------------------- $menu-dropdown-bg: #F7F7F8; $menu-dropdown-hover-bg: rgba(0, 0, 0, 0.04); -$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12); +$menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.15),0px 4px 5px 0px rgba(0,0,0,0.1),0px 1px 10px 0px rgba(0,0,0,0.1); // Tabs // ------------------------- @@ -282,13 +282,13 @@ $tooltipBackground: #F7F7F8; $tooltipColor: rgba(0, 0, 0, 0.75); $tooltipArrowColor: #F7F7F8; $tooltipBackgroundError: #E0226E; -$tooltipShadow: 0px 2px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12); +$tooltipShadow: 0px 2px 1px -2px rgba(0,0,0,0.15),0px 2px 2px 0px rgba(0,0,0,0.1),0px 1px 5px 0px rgba(0,0,0,0.1); $popover-bg: #F7F7F8; $popover-color: rgba(0, 0, 0, 0.75); $popover-border-color: rgba(0, 2, 78, 0.20); $popover-header-bg: #F7F7F8; -$popover-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12); +$popover-shadow: 0px 5px 5px -5px rgba(0,0,0,0.15),0px 8px 10px 1px rgba(0,0,0,0.1),0px 3px 14px 2px rgba(0,0,0,0.1); $graph-tooltip-bg: $gray-5; diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss index a31be9afc55..95ec71f4e99 100644 --- a/public/sass/components/_infobox.scss +++ b/public/sass/components/_infobox.scss @@ -2,7 +2,7 @@ position: relative; padding: $space-lg; background-color: $empty-list-cta-bg; - border-top: 3px solid $info-box-border-color; + border-left: 3px solid $info-box-border-color; margin-bottom: $space-md; margin-right: $space-xs; box-shadow: $card-shadow;