Popovers: Improve contrast by darkening shadow and changing border to medium (#45136)

* Popovers: Improve contrast by darkening shadow and changing border to medium

* Updated sass theme

* Revert back to weak border

packages/grafana-data/src/themes/createShadows.ts

@@ -13,7 +13,7 @@ export function createShadows(colors: ThemeColors): ThemeShadows {
     return {
       z1: '0px 1px 2px rgba(24, 26, 27, 0.75)',
       z2: '0px 4px 8px rgba(24, 26, 27, 0.75)',
-      z3: '0px 10px 20px rgb(20,20,20)',
+      z3: '0px 8px 24px rgb(1,4,9)',
     };
   }
 

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx

@@ -14,120 +14,6 @@ import { getFocusStyles } from '../../../themes/mixins';
 import { selectors } from '@grafana/e2e-selectors';
 import { FilterInput } from '../..';
 
-const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRanges, isContainerTall) => {
-  return {
-    container: css`
-      background: ${theme.colors.background.primary};
-      box-shadow: ${theme.shadows.z3};
-      position: absolute;
-      z-index: ${theme.zIndex.dropdown};
-      width: 546px;
-      top: 116%;
-      border-radius: 2px;
-      border: 1px solid ${theme.colors.border.weak};
-      ${isReversed ? 'left' : 'right'}: 0;
-
-      @media only screen and (max-width: ${theme.breakpoints.values.lg}px) {
-        width: 262px;
-      }
-    `,
-    body: css`
-      display: flex;
-      flex-direction: row-reverse;
-      height: ${isContainerTall ? '381px' : '217px'};
-    `,
-    leftSide: css`
-      display: flex;
-      flex-direction: column;
-      border-right: ${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`};
-      width: ${!hideQuickRanges ? '60%' : '100%'};
-      overflow: hidden;
-      order: ${isReversed ? 1 : 0};
-    `,
-    rightSide: css`
-      width: 40% !important;
-      border-right: ${isReversed ? `1px solid ${theme.colors.border.weak}` : 'none'};
-      display: flex;
-      flex-direction: column;
-      @media only screen and (max-width: ${theme.breakpoints.values.lg}px) {
-        width: 100% !important;
-      }
-    `,
-    timeRangeFilter: css`
-      padding: ${theme.spacing(1)};
-    `,
-    spacing: css`
-      margin-top: 16px;
-    `,
-  };
-});
-
-const getNarrowScreenStyles = stylesFactory((theme: GrafanaTheme2) => {
-  return {
-    header: css`
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
-      border-bottom: 1px solid ${theme.colors.border.weak};
-      padding: 7px 9px 7px 9px;
-    `,
-    expandButton: css`
-      background-color: transparent;
-      border: none;
-      display: flex;
-      width: 100%;
-
-      &:focus-visible {
-        ${getFocusStyles(theme)}
-      }
-    `,
-    body: css`
-      border-bottom: 1px solid ${theme.colors.border.weak};
-    `,
-    form: css`
-      padding: 7px 9px 7px 9px;
-    `,
-  };
-});
-
-const getFullScreenStyles = stylesFactory((theme: GrafanaTheme2, hideQuickRanges?: boolean) => {
-  return {
-    container: css`
-      padding-top: 9px;
-      padding-left: 11px;
-      padding-right: ${!hideQuickRanges ? '20%' : '11px'};
-    `,
-    title: css`
-      margin-bottom: 11px;
-    `,
-    recent: css`
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-      padding-top: ${theme.spacing(1)};
-    `,
-  };
-});
-
-const getEmptyListStyles = stylesFactory((theme: GrafanaTheme2) => {
-  return {
-    container: css`
-      padding: 12px;
-      margin: 12px;
-
-      a,
-      span {
-        font-size: 13px;
-      }
-    `,
-    link: css`
-      color: ${theme.colors.text.link};
-    `,
-  };
-});
-
 interface Props {
   value: TimeRange;
   onChange: (timeRange: TimeRange) => void;
@@ -363,3 +249,117 @@ const useTimeOption = (raw: RawTimeRange, quickOptions: TimeOption[]): TimeOptio
     });
   }, [raw, quickOptions]);
 };
+
+const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRanges, isContainerTall) => {
+  return {
+    container: css`
+      background: ${theme.colors.background.primary};
+      box-shadow: ${theme.shadows.z3};
+      position: absolute;
+      z-index: ${theme.zIndex.dropdown};
+      width: 546px;
+      top: 116%;
+      border-radius: 2px;
+      border: 1px solid ${theme.colors.border.weak};
+      ${isReversed ? 'left' : 'right'}: 0;
+
+      @media only screen and (max-width: ${theme.breakpoints.values.lg}px) {
+        width: 262px;
+      }
+    `,
+    body: css`
+      display: flex;
+      flex-direction: row-reverse;
+      height: ${isContainerTall ? '381px' : '217px'};
+    `,
+    leftSide: css`
+      display: flex;
+      flex-direction: column;
+      border-right: ${isReversed ? 'none' : `1px solid ${theme.colors.border.weak}`};
+      width: ${!hideQuickRanges ? '60%' : '100%'};
+      overflow: hidden;
+      order: ${isReversed ? 1 : 0};
+    `,
+    rightSide: css`
+      width: 40% !important;
+      border-right: ${isReversed ? `1px solid ${theme.colors.border.weak}` : 'none'};
+      display: flex;
+      flex-direction: column;
+      @media only screen and (max-width: ${theme.breakpoints.values.lg}px) {
+        width: 100% !important;
+      }
+    `,
+    timeRangeFilter: css`
+      padding: ${theme.spacing(1)};
+    `,
+    spacing: css`
+      margin-top: 16px;
+    `,
+  };
+});
+
+const getNarrowScreenStyles = stylesFactory((theme: GrafanaTheme2) => {
+  return {
+    header: css`
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid ${theme.colors.border.weak};
+      padding: 7px 9px 7px 9px;
+    `,
+    expandButton: css`
+      background-color: transparent;
+      border: none;
+      display: flex;
+      width: 100%;
+
+      &:focus-visible {
+        ${getFocusStyles(theme)}
+      }
+    `,
+    body: css`
+      border-bottom: 1px solid ${theme.colors.border.weak};
+    `,
+    form: css`
+      padding: 7px 9px 7px 9px;
+    `,
+  };
+});
+
+const getFullScreenStyles = stylesFactory((theme: GrafanaTheme2, hideQuickRanges?: boolean) => {
+  return {
+    container: css`
+      padding-top: 9px;
+      padding-left: 11px;
+      padding-right: ${!hideQuickRanges ? '20%' : '11px'};
+    `,
+    title: css`
+      margin-bottom: 11px;
+    `,
+    recent: css`
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      padding-top: ${theme.spacing(1)};
+    `,
+  };
+});
+
+const getEmptyListStyles = stylesFactory((theme: GrafanaTheme2) => {
+  return {
+    container: css`
+      padding: 12px;
+      margin: 12px;
+
+      a,
+      span {
+        font-size: 13px;
+      }
+    `,
+    link: css`
+      color: ${theme.colors.text.link};
+    `,
+  };
+});

public/sass/_variables.dark.generated.scss

@@ -237,7 +237,7 @@ $dropdownBackground: #181b1f;
 $dropdownBorder: rgba(204, 204, 220, 0.07);
 $dropdownDividerTop: rgba(204, 204, 220, 0.07);
 $dropdownDividerBottom: rgba(204, 204, 220, 0.07);
-$dropdownShadow: 0px 10px 20px rgb(20,20,20);
+$dropdownShadow: 0px 8px 24px rgb(1,4,9);
 
 $dropdownLinkColor: $link-color;
 $dropdownLinkColorHover: $white;
@@ -267,7 +267,7 @@ $side-menu-header-color: rgb(204, 204, 220);
 // -------------------------
 $menu-dropdown-bg: #181b1f;
 $menu-dropdown-hover-bg: rgba(204, 204, 220, 0.16);
-$menu-dropdown-shadow: 0px 10px 20px rgb(20,20,20);
+$menu-dropdown-shadow: 0px 8px 24px rgb(1,4,9);
 
 // Tabs
 // -------------------------
@@ -301,7 +301,7 @@ $popover-bg: #181b1f;
 $popover-color: rgb(204, 204, 220);
 $popover-border-color: rgba(204, 204, 220, 0.07);
 $popover-header-bg: #22252b;
-$popover-shadow: 0px 10px 20px rgb(20,20,20);
+$popover-shadow: 0px 8px 24px rgb(1,4,9);
 
 $popover-help-bg: $tooltipBackground;
 $popover-help-color: $text-color;