From df4eb6f3791fffa92e8af288b5182c2daafdc8fe Mon Sep 17 00:00:00 2001 From: aleka Date: Tue, 20 Aug 2024 01:10:16 +0200 Subject: [PATCH] chore: update Dialog overlay and scrolling tvchart (#922) --- src/components/Dialog.tsx | 34 ++++++--------------------- src/components/DropdownHeaderMenu.tsx | 2 +- src/constants/styles/base.ts | 1 + src/constants/styles/colors.ts | 1 + src/styles/globalStyle.ts | 1 + src/styles/popoverMixins.ts | 2 +- src/styles/themes.ts | 3 +++ src/views/charts/TvChart.tsx | 1 + 8 files changed, 16 insertions(+), 29 deletions(-) diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx index c3c181019..302fb7996 100644 --- a/src/components/Dialog.tsx +++ b/src/components/Dialog.tsx @@ -52,6 +52,7 @@ type StyleProps = { className?: string; stacked?: boolean; withAnimation?: boolean; + withOverlay?: boolean; }; export type DialogProps = ElementProps & StyleProps; @@ -88,18 +89,17 @@ export const Dialog = ({ hasHeaderBorder = false, hasHeaderBlur = true, withAnimation = false, + withOverlay = ![DialogPlacement.Inline, DialogPlacement.FullScreen].includes(placement), children, className, }: DialogProps) => { const closeButtonRef = useRef(null); - const showOverlay = ![DialogPlacement.Inline, DialogPlacement.FullScreen].includes(placement); - return ( - + {slotTrigger && {slotTrigger}} - {showOverlay && <$Overlay />} + {withOverlay && <$Overlay />} <$Container placement={placement} className={className} @@ -107,7 +107,7 @@ export const Dialog = ({ closeButtonRef.current?.focus(); }} onInteractOutside={(e: Event) => { - if (!showOverlay || preventClose) { + if (!withOverlay || preventClose) { e.preventDefault(); } }} @@ -172,29 +172,9 @@ const $Overlay = styled(Overlay)` position: fixed; inset: 0; - pointer-events: none; - - @media (prefers-reduced-motion: reduce) { - backdrop-filter: blur(8px); - } + pointer-events: none !important; - @media (prefers-reduced-motion: no-preference) { - &[data-state='open'] { - animation: ${keyframes` - to { - backdrop-filter: blur(8px); - } - `} 0.15s var(--ease-out-expo) forwards; - } - - &[data-state='closed'] { - animation: ${keyframes` - from { - backdrop-filter: blur(8px); - } - `} 0.15s; - } - } + backdrop-filter: brightness(var(--overlay-filter)); `; const $Container = styled(Content)<{ diff --git a/src/components/DropdownHeaderMenu.tsx b/src/components/DropdownHeaderMenu.tsx index c2dce5ae2..584141751 100644 --- a/src/components/DropdownHeaderMenu.tsx +++ b/src/components/DropdownHeaderMenu.tsx @@ -74,7 +74,7 @@ const $Trigger = styled(Trigger)` --trigger-open-textColor: var(--color-text-2); &[data-state='open']:after { - backdrop-filter: blur(6px); + backdrop-filter: brightness(var(--overlay-filter)); height: 100vh; } diff --git a/src/constants/styles/base.ts b/src/constants/styles/base.ts index 0e73a0036..b0e0e98be 100644 --- a/src/constants/styles/base.ts +++ b/src/constants/styles/base.ts @@ -77,5 +77,6 @@ export enum OpacityToken { export enum BrightnessFilterToken { Darken10 = '0.9', Darken5 = '0.95', + Darken30 = '0.7', Lighten10 = '1.1', } diff --git a/src/constants/styles/colors.ts b/src/constants/styles/colors.ts index e1bd1256c..5f833b52d 100644 --- a/src/constants/styles/colors.ts +++ b/src/constants/styles/colors.ts @@ -114,4 +114,5 @@ type Filters = { hoverFilterBase: string; hoverFilterVariant: string; activeFilter: string; + overlayFilter: string; }; diff --git a/src/styles/globalStyle.ts b/src/styles/globalStyle.ts index 8866b08e2..52bfa41ba 100644 --- a/src/styles/globalStyle.ts +++ b/src/styles/globalStyle.ts @@ -55,5 +55,6 @@ export const GlobalStyle = createGlobalStyle` --hover-filter-base: ${({ theme }) => theme.hoverFilterBase}; --hover-filter-variant: ${({ theme }) => theme.hoverFilterVariant}; --active-filter: ${({ theme }) => theme.activeFilter}; + --overlay-filter: ${({ theme }) => theme.overlayFilter}; } `; diff --git a/src/styles/popoverMixins.ts b/src/styles/popoverMixins.ts index 1e4f63ed0..aae0f9c70 100644 --- a/src/styles/popoverMixins.ts +++ b/src/styles/popoverMixins.ts @@ -175,7 +175,7 @@ export const popoverMixins = { } &[data-state='open']:after { - backdrop-filter: blur(6px); + backdrop-filter: brightness(var(--overlay-filter)); } `, diff --git a/src/styles/themes.ts b/src/styles/themes.ts index 86dca3995..80d0153e7 100644 --- a/src/styles/themes.ts +++ b/src/styles/themes.ts @@ -68,6 +68,7 @@ const ClassicThemeBase: ThemeColorBase = { hoverFilterBase: BrightnessFilterToken.Lighten10, hoverFilterVariant: BrightnessFilterToken.Lighten10, activeFilter: BrightnessFilterToken.Darken10, + overlayFilter: BrightnessFilterToken.Darken30, }; const DarkThemeBase: ThemeColorBase = { @@ -133,6 +134,7 @@ const DarkThemeBase: ThemeColorBase = { hoverFilterBase: BrightnessFilterToken.Lighten10, hoverFilterVariant: BrightnessFilterToken.Lighten10, activeFilter: BrightnessFilterToken.Darken10, + overlayFilter: BrightnessFilterToken.Darken30, }; const LightThemeBase: ThemeColorBase = { @@ -198,6 +200,7 @@ const LightThemeBase: ThemeColorBase = { hoverFilterBase: BrightnessFilterToken.Darken5, hoverFilterVariant: BrightnessFilterToken.Lighten10, activeFilter: BrightnessFilterToken.Darken10, + overlayFilter: BrightnessFilterToken.Darken10, }; const generateTheme = (themeBase: ThemeColorBase): Theme => { diff --git a/src/views/charts/TvChart.tsx b/src/views/charts/TvChart.tsx index de5c3eb4f..3c5ffaf51 100644 --- a/src/views/charts/TvChart.tsx +++ b/src/views/charts/TvChart.tsx @@ -89,6 +89,7 @@ export const TvChart = () => { const $PriceChart = styled.div<{ isChartReady?: boolean }>` ${layoutMixins.stack} user-select: none; + pointer-events: initial; // allow pointer events when dialog overlay is visible height: 100%;