diff --git a/packages/grafana-data/package.json b/packages/grafana-data/package.json index 456f6cc1af6..abe8c841ec1 100644 --- a/packages/grafana-data/package.json +++ b/packages/grafana-data/package.json @@ -42,6 +42,7 @@ "@types/react": "16.8.16", "@types/sinon": "^7.5.2", "@types/rollup-plugin-visualizer": "2.6.0", + "@types/braintree__sanitize-url": "4.0.0", "pretty-format": "25.1.0", "rollup": "2.0.6", "rollup-plugin-sourcemaps": "0.5.0", diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx index f739fa72156..43a460d9ac7 100644 --- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx +++ b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx @@ -6,7 +6,8 @@ import { css, cx } from 'emotion'; import RCCascader from 'rc-cascader'; import { CascaderOption } from '../Cascader/Cascader'; import { onChangeCascader, onLoadDataCascader } from '../Cascader/optionMappings'; -import { stylesFactory } from '../../themes'; +import { stylesFactory, useTheme } from '../../themes'; +import { GrafanaTheme } from '@grafana/data'; export interface ButtonCascaderProps { options: CascaderOption[]; @@ -20,11 +21,11 @@ export interface ButtonCascaderProps { className?: string; } -const getStyles = stylesFactory(() => { +const getStyles = stylesFactory((theme: GrafanaTheme) => { return { popup: css` label: popup; - z-index: 100; + z-index: ${theme.zIndex.dropdown}; `, icon: css` margin: 1px 0 0 4px; @@ -34,7 +35,8 @@ const getStyles = stylesFactory(() => { export const ButtonCascader: React.FC = props => { const { onChange, className, loadData, ...rest } = props; - const styles = getStyles(); + const theme = useTheme(); + const styles = getStyles(theme); return ( { height: 42px; `, modalHeaderTitle: css` - font-size: ${theme.typography.heading.h3}; + font-size: ${theme.typography.size.lg}; margin: 0 ${theme.spacing.md}; display: flex; align-items: center; diff --git a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap index ee7506ace10..8ce88d10416 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap +++ b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap @@ -2,7 +2,7 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
removePanel(dashboard, panel, false), diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index b6f24829b36..98626164113 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -138,7 +138,7 @@ $divider-border-color: $gray-1; $tight-form-func-bg: $dark-9; $tight-form-func-highlight-bg: $dark-10; -$modal-backdrop-bg: #343b40; +$modal-backdrop-bg: #141619; $code-tag-bg: $dark-1; $code-tag-border: $dark-9; diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss index 79456e3fcfd..e8009dfe70b 100644 --- a/public/sass/_variables.generated.scss +++ b/public/sass/_variables.generated.scss @@ -160,13 +160,13 @@ $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www // ------------------------- // Used for a bird's eye view of components dependent on the z-axis // Try to avoid customizing these :) -$zindex-dropdown: 1000; -$zindex-navbar-fixed: 1020; -$zindex-sidemenu: 1025; -$zindex-tooltip: 1030; -$zindex-modal-backdrop: 1040; -$zindex-modal: 1050; -$zindex-typeahead: 1060; +$zindex-dropdown: 1030; +$zindex-navbar-fixed: 1000; +$zindex-sidemenu: 1020; +$zindex-tooltip: 1040; +$zindex-modal-backdrop: 1050; +$zindex-modal: 1060; +$zindex-typeahead: 1030; // Buttons // diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 153c0066a18..7d3dbc6ce93 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -131,7 +131,7 @@ $divider-border-color: $gray-2; $tight-form-func-bg: $gray-5; $tight-form-func-highlight-bg: $gray-6; -$modal-backdrop-bg: $body-bg; +$modal-backdrop-bg: #ffffff; $code-tag-bg: $gray-6; $code-tag-border: $gray-4; diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 856403a3165..1c2aae7e9c1 100644 --- a/public/sass/components/_modals.scss +++ b/public/sass/components/_modals.scss @@ -40,11 +40,13 @@ background: $page-header-bg; box-shadow: $page-header-shadow; border-bottom: 1px solid $page-header-border-color; - @include clearfix(); + display: flex; + align-items: center; + justify-content: space-between; } .modal-header-title { - font-size: $font-size-h3; + font-size: $font-size-lg; float: left; padding-top: $space-sm; margin: 0 $space-md; diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index efb7085f5bf..edd3fd0043f 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -84,7 +84,7 @@ div.flot-text { padding: $panel-padding; width: 100%; flex-grow: 1; - max-height: calc(100% - #{$panel-header-height}); + height: calc(100% - #{$panel-header-height}); &--no-padding { padding: 0; diff --git a/yarn.lock b/yarn.lock index faec5d787d2..94b3e5f8631 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5060,6 +5060,11 @@ "@types/connect" "*" "@types/node" "*" +"@types/braintree__sanitize-url@4.0.0": + version "4.0.0" + resolved "https://registry.yarnpkg.com/@types/braintree__sanitize-url/-/braintree__sanitize-url-4.0.0.tgz#0e8a834501f8c375d4b3fb8dcf9398a08ebe068d" + integrity sha512-69eGJ8808/WfTJGsvMi1pxQ9UG5Z+llD1x9ash5QX+qvxElDD+eYNAn19cTEVTq6WwUqrqlaTWVCKaTRFTuGmA== + "@types/cheerio@*": version "0.22.13" resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.13.tgz#5eecda091a24514185dcba99eda77e62bf6523e6"