From 5e693313d8810cb12dcf32c4a458e65e93373f3e Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Mon, 30 Jan 2023 01:04:38 -0800
Subject: [PATCH] Adjust context menu styles

---
 src/renderer/components/context-menu/index.tsx  | 17 +++++++++++++----
 .../context-menu/context-menu-provider.tsx      | 10 ++++++++--
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/context-menu/index.tsx b/src/renderer/components/context-menu/index.tsx
index 9b43d423..ae0bc5e9 100644
--- a/src/renderer/components/context-menu/index.tsx
+++ b/src/renderer/components/context-menu/index.tsx
@@ -1,8 +1,7 @@
 import { forwardRef, ReactNode, Ref } from 'react';
-import { Portal } from '@mantine/core';
+import { Portal, UnstyledButton } from '@mantine/core';
 import { motion } from 'framer-motion';
 import styled from 'styled-components';
-import { _Button } from '/@/renderer/components/button';
 
 interface ContextMenuProps {
   children: ReactNode;
@@ -23,17 +22,27 @@ const ContextMenuContainer = styled(motion.div)<Omit<ContextMenuProps, 'children
   box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 40%);
 `;
 
-export const ContextMenuButton = styled(_Button)`
-  padding: 0.5rem 1.5rem;
+export const ContextMenuButton = styled(UnstyledButton)`
+  padding: 1rem 1.5rem;
+  color: var(--dropdown-menu-fg);
+  font-weight: 500;
+  font-family: var(--content-font-family);
+  text-align: left;
   background: var(--dropdown-menu-bg);
+  border: none;
   cursor: default;
 
   & .mantine-Button-inner {
     justify-content: flex-start;
   }
 
+  &:hover {
+    background: var(--dropdown-menu-bg-hover);
+  }
+
   &:disabled {
     background: transparent;
+    opacity: 0.6;
   }
 `;
 
diff --git a/src/renderer/features/context-menu/context-menu-provider.tsx b/src/renderer/features/context-menu/context-menu-provider.tsx
index 2e25277e..cb952da7 100644
--- a/src/renderer/features/context-menu/context-menu-provider.tsx
+++ b/src/renderer/features/context-menu/context-menu-provider.tsx
@@ -350,13 +350,19 @@ export const ContextMenuProvider = ({ children }: ContextMenuProviderProps) => {
               return (
                 <Fragment key={`context-menu-${item.id}`}>
                   <ContextMenuButton
+                    as="button"
                     disabled={item.disabled}
-                    variant="default"
                     onClick={contextMenuItems[item.id as keyof typeof contextMenuItems].onClick}
                   >
                     {contextMenuItems[item.id as keyof typeof contextMenuItems].label}
                   </ContextMenuButton>
-                  {item.divider && <Divider key={`context-menu-divider-${item.id}`} />}
+                  {item.divider && (
+                    <Divider
+                      key={`context-menu-divider-${item.id}`}
+                      color="rgb(62, 62, 62)"
+                      size="sm"
+                    />
+                  )}
                 </Fragment>
               );
             })}