From 5473829c7ef2fdf4bc0a2d1fcaa6f1f9e99f7427 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Sun, 6 Aug 2023 23:52:38 +0530
Subject: [PATCH] chore: fix Safari translucency issues [skip e2e]

---
 .../src/javascripts/Components/AlertDialog/AlertDialog.tsx   | 5 +----
 .../web/src/javascripts/Components/Dropdown/Dropdown.tsx     | 5 +----
 packages/web/src/javascripts/Components/Modal/Modal.tsx      | 5 +----
 .../Components/Popover/PositionedPopoverContent.tsx          | 3 +--
 packages/web/src/stylesheets/_modals.scss                    | 1 +
 5 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx b/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
index c060aa3a6..69be2d59d 100644
--- a/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
+++ b/packages/web/src/javascripts/Components/AlertDialog/AlertDialog.tsx
@@ -40,13 +40,10 @@ const AlertDialog = ({
       />
       <div
         className={classNames(
-          'w-[95vw] rounded border border-[--popover-border-color] bg-[--popover-background-color] px-6 py-5 shadow-xl md:w-auto',
+          'w-[95vw] rounded border border-[--popover-border-color] bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] px-6 py-5 shadow-xl md:w-auto',
           !className?.includes('max-w-') && 'max-w-[600px]',
           className,
         )}
-        style={{
-          backdropFilter: 'var(--popover-backdrop-filter)',
-        }}
       >
         {children}
       </div>
diff --git a/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx b/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx
index edd22d990..9d5b24c09 100644
--- a/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx
+++ b/packages/web/src/javascripts/Components/Dropdown/Dropdown.tsx
@@ -83,12 +83,9 @@ const Dropdown = ({
       <SelectPopover
         store={select}
         className={classNames(
-          'z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] overflow-y-auto rounded border border-passive-3 bg-default py-1',
+          'z-dropdown-menu max-h-[var(--popover-available-height)] w-[var(--popover-anchor-width)] [backdrop-filter:var(--popover-backdrop-filter)] overflow-y-auto rounded border border-passive-3 bg-default py-1',
           classNameOverride.popover,
         )}
-        style={{
-          backdropFilter: 'var(--popover-backdrop-filter)',
-        }}
         portal={false}
       >
         {items.map((item) => (
diff --git a/packages/web/src/javascripts/Components/Modal/Modal.tsx b/packages/web/src/javascripts/Components/Modal/Modal.tsx
index e35e77405..76ad000cc 100644
--- a/packages/web/src/javascripts/Components/Modal/Modal.tsx
+++ b/packages/web/src/javascripts/Components/Modal/Modal.tsx
@@ -104,12 +104,9 @@ const Modal = ({
       />
       <div
         className={classNames(
-          'z-[1] m-0 flex h-full w-full flex-col border-solid border-[--popover-border-color] bg-[--popover-background-color] p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
+          'z-[1] m-0 flex h-full w-full flex-col border-solid border-[--popover-border-color] bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
           className?.content,
         )}
-        style={{
-          backdropFilter: 'var(--popover-backdrop-filter)',
-        }}
       >
         {customHeader && !disableCustomHeader ? (
           customHeader
diff --git a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
index 112c40af8..cec6e46a9 100644
--- a/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx
@@ -98,7 +98,7 @@ const PositionedPopoverContent = ({
       <div
         className={classNames(
           'absolute left-0 top-0 flex w-full min-w-80 cursor-auto flex-col',
-          'overflow-y-auto rounded border border-[--popover-border-color] bg-[--popover-background-color] shadow-main md:h-auto md:max-w-xs',
+          'overflow-y-auto rounded border border-[--popover-border-color] bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] shadow-main md:h-auto md:max-w-xs',
           !disableMobileFullscreenTakeover && 'h-full',
           overrideZIndex ? overrideZIndex : 'z-dropdown-menu',
           !isDesktopScreen && !disableMobileFullscreenTakeover ? 'pb-safe-bottom pt-safe-top' : '',
@@ -109,7 +109,6 @@ const PositionedPopoverContent = ({
           {
             ...styles,
             ...adjustedStyles,
-            backdropFilter: 'var(--popover-backdrop-filter)',
           } as CSSProperties
         }
         ref={mergeRefs([setPopoverElement, addCloseMethod])}
diff --git a/packages/web/src/stylesheets/_modals.scss b/packages/web/src/stylesheets/_modals.scss
index 5150715ce..795ef62da 100644
--- a/packages/web/src/stylesheets/_modals.scss
+++ b/packages/web/src/stylesheets/_modals.scss
@@ -60,6 +60,7 @@
     border-color: var(--popover-border-color);
     background-color: var(--popover-background-color);
     backdrop-filter: var(--popover-backdrop-filter);
+    -webkit-backdrop-filter: var(--popover-backdrop-filter);
   }
 
   .sn-component {