From acf873f0d6fc2776b1a60366808a8cad398969c8 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Tue, 13 Dec 2022 15:06:21 -0800
Subject: [PATCH] Add glass dropdown styles

---
 packages/renderer/src/components/dropdown-menu/index.tsx | 6 ++++--
 packages/renderer/src/components/select/index.tsx        | 8 +++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/renderer/src/components/dropdown-menu/index.tsx b/packages/renderer/src/components/dropdown-menu/index.tsx
index 7dbb471f3..a6920b445 100644
--- a/packages/renderer/src/components/dropdown-menu/index.tsx
+++ b/packages/renderer/src/components/dropdown-menu/index.tsx
@@ -28,7 +28,6 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
   padding: 0.8rem;
   font-size: 0.9em;
   font-family: var(--content-font-family);
-  background-color: var(--dropdown-menu-bg);
 
   &:disabled {
     opacity: 0.6;
@@ -72,7 +71,10 @@ export const DropdownMenu = ({ children, ...props }: MenuProps) => {
       withinPortal
       radius="sm"
       styles={{
-        dropdown: { filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))' },
+        dropdown: {
+          backdropFilter: 'blur(8px)',
+          filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
+        },
       }}
       transition="scale"
       {...props}
diff --git a/packages/renderer/src/components/select/index.tsx b/packages/renderer/src/components/select/index.tsx
index aa1a1495a..12221880e 100644
--- a/packages/renderer/src/components/select/index.tsx
+++ b/packages/renderer/src/components/select/index.tsx
@@ -17,11 +17,11 @@ interface MultiSelectProps extends MantineMultiSelectProps {
 
 const StyledSelect = styled(MantineSelect)`
   & [data-selected='true'] {
-    background: var(--input-select-bg);
+    background: var(--input-bg);
   }
 
   & .mantine-Select-disabled {
-    background: var(--input-select-bg);
+    background: var(--input-bg);
     opacity: 0.6;
   }
 
@@ -38,6 +38,7 @@ export const Select = ({ width, maxWidth, ...props }: SelectProps) => {
       withinPortal
       styles={{
         dropdown: {
+          backdropFilter: 'blur(8px)',
           background: 'var(--dropdown-menu-bg)',
           filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 20%))',
         },
@@ -62,9 +63,6 @@ export const Select = ({ width, maxWidth, ...props }: SelectProps) => {
           color: 'var(--dropdown-menu-fg)',
           padding: '.3rem',
         },
-        itemsWrapper: {
-          background: 'var(--dropdown-menu-bg)',
-        },
       }}
       sx={{ maxWidth, width }}
       transition="pop"