From 9dcc42ff285b9786069087af28d4b0a4ba6d40a6 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Wed, 8 Feb 2023 11:45:29 -0800
Subject: [PATCH] Add border radius for all dropdown items (#22)

---
 src/renderer/components/context-menu/index.tsx     |  6 ++++++
 src/renderer/components/dropdown-menu/index.tsx    | 14 +++++++++++++-
 src/renderer/components/hover-card/index.tsx       |  1 +
 .../now-playing/components/drawer-play-queue.tsx   | 14 +++++++-------
 src/renderer/layouts/default-layout.tsx            |  5 ++---
 src/renderer/themes/default.scss                   |  2 +-
 6 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/context-menu/index.tsx b/src/renderer/components/context-menu/index.tsx
index 5b7b357c..ad342f89 100644
--- a/src/renderer/components/context-menu/index.tsx
+++ b/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)`
diff --git a/src/renderer/components/dropdown-menu/index.tsx b/src/renderer/components/dropdown-menu/index.tsx
index fa808729..931c186f 100644
--- a/src/renderer/components/dropdown-menu/index.tsx
+++ b/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) => {
diff --git a/src/renderer/components/hover-card/index.tsx b/src/renderer/components/hover-card/index.tsx
index a1a367a5..1d5459c5 100644
--- a/src/renderer/components/hover-card/index.tsx
+++ b/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,
diff --git a/src/renderer/features/now-playing/components/drawer-play-queue.tsx b/src/renderer/features/now-playing/components/drawer-play-queue.tsx
index f3dd51b0..20c64328 100644
--- a/src/renderer/features/now-playing/components/drawer-play-queue.tsx
+++ b/src/renderer/features/now-playing/components/drawer-play-queue.tsx
@@ -13,20 +13,20 @@ export const DrawerPlayQueue = () => {
       direction="column"
       h="100%"
       sx={{
-        borderTopLeftRadius: '5px',
-        borderTopRightRadius: '5px',
+        borderRadius: '10px',
       }}
     >
-      <Box
-        bg="var(--main-bg)"
-        sx={{ borderTopLeftRadius: '5px', borderTopRightRadius: '5px' }}
-      >
+      <Box bg="var(--main-bg)">
         <PlayQueueListControls
           tableRef={queueRef}
           type="sideQueue"
         />
       </Box>
-      <Flex h="100%">
+      <Flex
+        bg="var(--main-bg)"
+        h="100%"
+        mb="0.6rem"
+      >
         <PlayQueue
           ref={queueRef}
           type="sideQueue"
diff --git a/src/renderer/layouts/default-layout.tsx b/src/renderer/layouts/default-layout.tsx
index 46823a34..0ab45b05 100644
--- a/src/renderer/layouts/default-layout.tsx
+++ b/src/renderer/layouts/default-layout.tsx
@@ -97,9 +97,8 @@ const ResizeHandle = styled.div<{
 `;
 
 const QueueDrawer = styled(motion.div)`
-  background: transparent;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
+  background: var(--main-bg);
+  border-radius: 10px;
 `;
 
 const QueueDrawerArea = styled(motion.div)`
diff --git a/src/renderer/themes/default.scss b/src/renderer/themes/default.scss
index dd939bc9..25176b11 100644
--- a/src/renderer/themes/default.scss
+++ b/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);