Add glass dropdown styles

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}

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"