diff --git a/src/renderer/components/dropdown-menu/index.tsx b/src/renderer/components/dropdown-menu/index.tsx index 31a46a0d0..6474fe8ab 100644 --- a/src/renderer/components/dropdown-menu/index.tsx +++ b/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)` 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 {children}; }; -const pMenuItem = ({ children, ...props }: MenuItemProps) => { - return {children}; +const pMenuItem = ({ isActive, children, ...props }: MenuItemProps) => { + return ( + + } + {...props} + > + {children} + + ); }; const MenuDropdown = ({ children, ...props }: MenuDropdownProps) => { diff --git a/src/renderer/components/select/index.tsx b/src/renderer/components/select/index.tsx index c36302b5f..9ffee189f 100644 --- a/src/renderer/components/select/index.tsx +++ b/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 ; + return ( + + ); }; Select.defaultProps = {