Add menu styles

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

@@ -8,10 +8,14 @@ import {
   MenuDropdownProps as MantineMenuDropdownProps,
   createPolymorphicComponent,
 } from '@mantine/core';
+import { RiArrowLeftLine } from 'react-icons/ri';
 
 type MenuProps = MantineMenuProps;
 type MenuLabelProps = MantineMenuLabelProps;
-type MenuItemProps = MantineMenuItemProps;
+interface MenuItemProps extends MantineMenuItemProps {
+  children: React.ReactNode;
+  isActive?: boolean;
+}
 type MenuDividerProps = MantineMenuDividerProps;
 type MenuDropdownProps = MantineMenuDropdownProps;
 
@@ -27,11 +31,16 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
   font-family: var(--label-font-family);
   background-color: var(--dropdown-menu-bg);
 
+  &:hover {
+    background-color: var(--dropdown-menu-bg-hover);
+  }
+
   & .mantine-Menu-itemIcon {
     margin-right: 0.5rem;
   }
 
   & .mantine-Menu-itemLabel {
+    color: ${({ isActive }) => isActive && 'var(--primary-color)'};
     font-weight: 500;
     font-size: 1em;
   }
@@ -61,8 +70,18 @@ const MenuLabel = ({ children, ...props }: MenuLabelProps) => {
   return <StyledMenuLabel {...props}>{children}</StyledMenuLabel>;
 };
 
-const pMenuItem = ({ children, ...props }: MenuItemProps) => {
-  return <StyledMenuItem {...props}>{children}</StyledMenuItem>;
+const pMenuItem = ({ isActive, children, ...props }: MenuItemProps) => {
+  return (
+    <StyledMenuItem
+      isActive={isActive && isActive}
+      rightSection={
+        isActive && <RiArrowLeftLine color="var(--primary-color)" size="1em" />
+      }
+      {...props}
+    >
+      {children}
+    </StyledMenuItem>
+  );
 };
 
 const MenuDropdown = ({ children, ...props }: MenuDropdownProps) => {

src/renderer/components/select/index.tsx

@@ -9,10 +9,49 @@ interface SelectProps extends MantineSelectProps {
   width?: number | string;
 }
 
-const StyledSelect = styled(MantineSelect)``;
+const StyledSelect = styled(MantineSelect)`
+  & [data-selected='true'] {
+    background: black;
+  }
+
+  & .mantine-Select-itemsWrapper {
+    & .mantine-Select-item {
+      padding: 40px;
+    }
+  }
+`;
 
 export const Select = ({ width, maxWidth, ...props }: SelectProps) => {
-  return <StyledSelect withinPortal {...props} sx={{ maxWidth, width }} />;
+  return (
+    <StyledSelect
+      withinPortal
+      styles={{
+        dropdown: {
+          background: 'var(--dropdown-menu-bg)',
+        },
+        item: {
+          '&:hover': {
+            background: 'var(--dropdown-menu-bg-hover)',
+          },
+          '&[data-selected="true"]': {
+            '&:hover': {
+              background: 'var(--dropdown-menu-bg-hover)',
+            },
+            background: 'none',
+            color: 'var(--primary-color)',
+          },
+          padding: '.3rem',
+        },
+        itemsWrapper: {
+          background: 'var(--dropdown-menu-bg)',
+        },
+      }}
+      sx={{ maxWidth, width }}
+      transition="pop"
+      transitionDuration={100}
+      {...props}
+    />
+  );
 };
 
 Select.defaultProps = {