CSS: Various css bug fixes (Safari fix for graph panels and more) (#23704)

* CSS: Various css bug fixes

* Updated

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",

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<ButtonCascaderProps> = props => {
   const { onChange, className, loadData, ...rest } = props;
-  const styles = getStyles();
+  const theme = useTheme();
+  const styles = getStyles(theme);
 
   return (
     <RCCascader

packages/grafana-ui/src/components/Modal/getModalStyles.ts

@@ -39,7 +39,7 @@ export const getModalStyles = stylesFactory((theme: GrafanaTheme) => {
       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;

packages/grafana-ui/src/components/TimePicker/TimePickerContent/__snapshots__/TimePickerContent.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`TimePickerContent renders correctly in full screen 1`] = `
 <div
-  className="css-1eellmz"
+  className="css-1py091y"
 >
   <div
     className="css-dlnzj7"
@@ -93,7 +93,7 @@ exports[`TimePickerContent renders correctly in full screen 1`] = `
 
 exports[`TimePickerContent renders correctly in narrow screen 1`] = `
 <div
-  className="css-1eellmz"
+  className="css-1py091y"
 >
   <div
     className="css-dlnzj7"
@@ -184,7 +184,7 @@ exports[`TimePickerContent renders correctly in narrow screen 1`] = `
 
 exports[`TimePickerContent renders recent absolute ranges correctly 1`] = `
 <div
-  className="css-1eellmz"
+  className="css-1py091y"
 >
   <div
     className="css-dlnzj7"

packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap

@@ -257,13 +257,13 @@ exports[`TimePicker renders buttons correctly 1`] = `
                   },
                 },
                 "zIndex": Object {
-                  "dropdown": "1000",
-                  "modal": "1050",
-                  "modalBackdrop": "1040",
-                  "navbarFixed": "1020",
-                  "sidemenu": "1025",
-                  "tooltip": "1030",
-                  "typeahead": "1060",
+                  "dropdown": "1030",
+                  "modal": "1060",
+                  "modalBackdrop": "1050",
+                  "navbarFixed": "1000",
+                  "sidemenu": "1020",
+                  "tooltip": "1040",
+                  "typeahead": "1030",
                 },
               }
             }
@@ -573,13 +573,13 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
                   },
                 },
                 "zIndex": Object {
-                  "dropdown": "1000",
-                  "modal": "1050",
-                  "modalBackdrop": "1040",
-                  "navbarFixed": "1020",
-                  "sidemenu": "1025",
-                  "tooltip": "1030",
-                  "typeahead": "1060",
+                  "dropdown": "1030",
+                  "modal": "1060",
+                  "modalBackdrop": "1050",
+                  "navbarFixed": "1000",
+                  "sidemenu": "1020",
+                  "tooltip": "1040",
+                  "typeahead": "1030",
                 },
               }
             }

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -135,7 +135,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: ${theme.colors.bg1};
 $code-tag-bg: $dark-1;
 $code-tag-border: $dark-9;
 

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -128,7 +128,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: ${theme.colors.bg1};
 $code-tag-bg: $gray-6;
 $code-tag-border: $gray-4;
 

packages/grafana-ui/src/themes/default.ts

@@ -122,13 +122,13 @@ const theme: GrafanaThemeCommons = {
   panelPadding: 8,
   panelHeaderHeight: 28,
   zIndex: {
-    dropdown: '1000',
-    navbarFixed: '1020',
-    sidemenu: '1025',
-    tooltip: '1030',
-    modalBackdrop: '1040',
-    modal: '1050',
-    typeahead: '1060',
+    navbarFixed: '1000',
+    sidemenu: '1020',
+    dropdown: '1030',
+    typeahead: '1030',
+    tooltip: '1040',
+    modalBackdrop: '1050',
+    modal: '1060',
   },
 };