Add border radius for all dropdown items (#22)

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

@@ -19,7 +19,13 @@ const ContextMenuContainer = styled(motion.div)<Omit<ContextMenuProps, 'children
   min-width: ${({ minWidth }) => minWidth}px;
   max-width: ${({ maxWidth }) => maxWidth}px;
   background: var(--dropdown-menu-bg);
+  border-radius: 10px;
   box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
+
+  button:first-child {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+  }
 `;
 
 export const StyledContextMenuButton = styled(UnstyledButton)`

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

@@ -65,14 +65,26 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
 `;
 
 const StyledMenuDropdown = styled(MantineMenu.Dropdown)`
+  margin: 0;
+  padding: 0;
   background: var(--dropdown-menu-bg);
   border: var(--dropdown-menu-border);
   border-radius: var(--dropdown-menu-border-radius);
   filter: drop-shadow(0 0 5px rgb(0, 0, 0, 50%));
+
+  *:first-child {
+    border-top-left-radius: var(--dropdown-menu-border-radius);
+    border-top-right-radius: var(--dropdown-menu-border-radius);
+  }
+
+  *:last-child {
+    border-bottom-right-radius: var(--dropdown-menu-border-radius);
+    border-bottom-left-radius: var(--dropdown-menu-border-radius);
+  }
 `;
 
 const StyledMenuDivider = styled(MantineMenu.Divider)`
-  margin: 0.3rem 0;
+  /* margin: 0.3rem 0; */
 `;
 
 export const DropdownMenu = ({ children, ...props }: MenuProps) => {

src/renderer/components/hover-card/index.tsx

@@ -7,6 +7,7 @@ export const HoverCard = ({ children, ...props }: HoverCardProps) => {
         dropdown: {
           background: 'var(--dropdown-menu-bg)',
           border: 'none',
+          borderRadius: 'var(--dropdown-menu-border-radius)',
           boxShadow: '2px 2px 10px 2px rgba(0, 0, 0, 40%)',
           margin: 0,
           padding: 0,

src/renderer/features/now-playing/components/drawer-play-queue.tsx

@@ -13,20 +13,20 @@ export const DrawerPlayQueue = () => {
       direction="column"
       h="100%"
       sx={{
-        borderTopLeftRadius: '5px',
+        borderRadius: '10px',
-        borderTopRightRadius: '5px',
       }}
     >
-      <Box
+      <Box bg="var(--main-bg)">
-        bg="var(--main-bg)"
-        sx={{ borderTopLeftRadius: '5px', borderTopRightRadius: '5px' }}
-      >
         <PlayQueueListControls
           tableRef={queueRef}
           type="sideQueue"
         />
       </Box>
-      <Flex h="100%">
+      <Flex
+        bg="var(--main-bg)"
+        h="100%"
+        mb="0.6rem"
+      >
         <PlayQueue
           ref={queueRef}
           type="sideQueue"

src/renderer/layouts/default-layout.tsx

@@ -97,9 +97,8 @@ const ResizeHandle = styled.div<{
 `;
 
 const QueueDrawer = styled(motion.div)`
-  background: transparent;
+  background: var(--main-bg);
-  border-top-left-radius: 5px;
+  border-radius: 10px;
-  border-top-right-radius: 5px;
 `;
 
 const QueueDrawerArea = styled(motion.div)`

src/renderer/themes/default.scss

@@ -70,7 +70,7 @@
   --dropdown-menu-item-font-size: 1rem;
   --dropdown-menu-bg-hover: rgb(62, 62, 62);
   --dropdown-menu-border: none;
-  --dropdown-menu-border-radius: 2px;
+  --dropdown-menu-border-radius: 10px;
 
   --switch-track-bg: rgb(50, 50, 50);
   --switch-track-enabled-bg: var(--primary-color);