Adjust dropdown styling

src/renderer/components/dropdown-menu/index.tsx

@@ -26,13 +26,27 @@ const StyledMenuLabel = styled(MantineMenu.Label)<MenuLabelProps>`
 `;
 
 const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
-  padding: 0.8rem;
-  font-size: 0.9em;
+  position: relative;
+  padding: var(--dropdown-menu-item-padding);
+  font-size: var(--dropdown-menu-item-font-size);
   font-family: var(--content-font-family);
-  background-color: ${({ $isActive }) => {
-    if (!$isActive) return undefined;
-    return 'var(--dropdown-menu-bg-hover)';
-  }};
+
+  ${(props) =>
+    props.$isActive &&
+    `
+      &::before {
+        content: ''; // ::before and ::after both require content
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: var(--primary-color);
+        opacity: 0.2;
+        z-index: -1;
+      }
+
+  `}
 
   &:disabled {
     opacity: 0.6;
@@ -56,6 +70,8 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
     display: flex;
     margin-left: 2rem !important;
   }
+
+  cursor: default;
 `;
 
 const StyledMenuDropdown = styled(MantineMenu.Dropdown)`
@@ -73,13 +89,12 @@ export const DropdownMenu = ({ children, ...props }: MenuProps) => {
   return (
     <StyledMenu
       withinPortal
-      radius="sm"
       styles={{
         dropdown: {
           filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
         },
       }}
-      transition="scale-y"
+      transition="fade"
       {...props}
     >
       {children}

src/renderer/components/popover/index.tsx

@@ -27,7 +27,7 @@ export const Popover = ({ children, ...props }: PopoverProps) => {
           filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
         },
       }}
-      transition="scale-y"
+      transition="fade"
       {...props}
     >
       {children}

src/renderer/components/select/index.tsx

@@ -64,7 +64,7 @@ export const Select = ({ width, maxWidth, ...props }: SelectProps) => {
         },
       }}
       sx={{ maxWidth, width }}
-      transition="pop"
+      transition="fade"
       transitionDuration={100}
       {...props}
     />
@@ -126,7 +126,7 @@ export const MultiSelect = ({ width, maxWidth, ...props }: MultiSelectProps) =>
         },
       }}
       sx={{ maxWidth, width }}
-      transition="pop"
+      transition="fade"
       transitionDuration={100}
       {...props}
     />

src/renderer/themes/default.scss

@@ -63,11 +63,13 @@
   --input-active-fg: rgb(193, 193, 193);
   --input-active-bg: rgba(255, 255, 255, 0.1);
 
-  --dropdown-menu-bg: rgb(36, 36, 36);
-  --dropdown-menu-fg: rgb(220, 220, 220);
-  --dropdown-menu-bg-hover: rgb(46, 46, 46);
+  --dropdown-menu-bg: rgb(40, 40, 40);
+  --dropdown-menu-fg: rgb(235, 235, 235);
+  --dropdown-menu-item-padding: 1rem 0.8rem;
+  --dropdown-menu-item-font-size: 0.9em;
+  --dropdown-menu-bg-hover: rgb(62, 62, 62);
   --dropdown-menu-border: none;
-  --dropdown-menu-border-radius: 4px;
+  --dropdown-menu-border-radius: 2px;
 
   --switch-track-bg: rgb(50, 50, 50);
   --switch-track-enabled-bg: var(--primary-color);