chore: update Dialog overlay and scrolling tvchart (#922)

src/components/Dialog.tsx

@@ -52,6 +52,7 @@ type StyleProps = {
   className?: string;
   stacked?: boolean;
   withAnimation?: boolean;
+  withOverlay?: boolean;
 };
 
 export type DialogProps = ElementProps & StyleProps;
@@ -88,26 +89,25 @@ export const Dialog = ({
   hasHeaderBorder = false,
   hasHeaderBlur = true,
   withAnimation = false,
+  withOverlay = ![DialogPlacement.Inline, DialogPlacement.FullScreen].includes(placement),
   children,
   className,
 }: DialogProps) => {
   const closeButtonRef = useRef<HTMLButtonElement>(null);
 
-  const showOverlay = ![DialogPlacement.Inline, DialogPlacement.FullScreen].includes(placement);
-
   return (
-    <Root modal={showOverlay} open={isOpen} onOpenChange={setIsOpen}>
+    <Root modal={withOverlay} open={isOpen} onOpenChange={setIsOpen}>
       {slotTrigger && <Trigger asChild>{slotTrigger}</Trigger>}
       <DialogPortal withPortal={placement !== DialogPlacement.Inline} container={portalContainer}>
-        {showOverlay && <$Overlay />}
+        {withOverlay && <$Overlay />}
         <$Container
           placement={placement}
           className={className}
           onEscapeKeyDown={() => {
             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)<{

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;
   }
 

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',
 }

src/constants/styles/colors.ts

@@ -114,4 +114,5 @@ type Filters = {
   hoverFilterBase: string;
   hoverFilterVariant: string;
   activeFilter: string;
+  overlayFilter: string;
 };

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};
   }
 `;

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));
     }
   `,
 

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 => {

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%;