Add border radius for all dropdown items (#22)

This commit is contained in:
jeffvli 2023-02-08 11:45:29 -08:00
parent 2845476d83
commit 9dcc42ff28
6 changed files with 30 additions and 12 deletions

View file

@ -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)`

View file

@ -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) => {

View file

@ -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,