fix(css): transparent linear gradient not working in safari (apache#2…

…0086) * fix(css): transparent linear gradient not working in safari * use emotion-rgba instead
ValtechMobility · Jun 9, 2022 · 2765172 · 2765172
1 parent 2c4b400
commit 2765172
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
@@ -27,6 +27,7 @@ import {
 import Button from 'src/components/Button';
 import { isNullish } from 'src/utils/common';
 import { OPEN_FILTER_BAR_WIDTH } from 'src/dashboard/constants';
+import { rgba } from 'emotion-rgba';
 import { getFilterBarTestId } from '../index';
 
 interface ActionButtonsProps {
@@ -53,7 +54,10 @@ const ActionButtonsContainer = styled.div`
  padding: ${theme.gridUnit * 4}px;
  padding-top: ${theme.gridUnit * 6}px;
 
- background: linear-gradient(transparent, white 25%);
+ background: linear-gradient(
+ ${rgba(theme.colors.grayscale.light5, 0)},
+ ${theme.colors.grayscale.light5} ${theme.opacity.mediumLight}
+ );
 
  pointer-events: none;
 

diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -58,6 +58,7 @@ import { ExplorePageState } from 'src/explore/reducers/getInitialState';
 import { ChartState } from 'src/explore/types';
 import { Tooltip } from 'src/components/Tooltip';
 
+import { rgba } from 'emotion-rgba';
 import ControlRow from './ControlRow';
 import Control from './Control';
 import { ExploreAlert } from './ExploreAlert';
@@ -94,7 +95,7 @@ const actionButtonsContainerStyles = (theme: SupersetTheme) => css`
  padding: ${theme.gridUnit * 4}px;
  z-index: 999;
  background: linear-gradient(
- transparent,
+ ${rgba(theme.colors.grayscale.light5, 0)},
  ${theme.colors.grayscale.light5} ${theme.opacity.mediumLight}
  );