update popover/dropdown bg styles

This commit is contained in:
jeffvli
2025-10-08 21:38:06 -07:00
parent 3b4a667f61
commit 53daa90bff
3 changed files with 8 additions and 6 deletions
@@ -6,7 +6,7 @@
cursor: default; cursor: default;
&:hover { &:hover {
background: var(--theme-colors-background); background: var(--theme-colors-surface);
} }
} }
@@ -18,7 +18,7 @@
margin-right: var(--theme-spacing-md); margin-right: var(--theme-spacing-md);
margin-left: var(--theme-spacing-md); margin-left: var(--theme-spacing-md);
font-size: var(--theme-font-size-sm); font-size: var(--theme-font-size-sm);
color: var(--theme-colors-surface-foreground); color: var(--theme-colors-surfaceforeground);
} }
.selected { .selected {
@@ -45,8 +45,8 @@
.menu-dropdown { .menu-dropdown {
padding: var(--theme-spacing-xs); padding: var(--theme-spacing-xs);
color: var(--theme-colors-surface-foreground); color: var(--theme-colors-foreground);
background: var(--theme-colors-surface); background: var(--theme-colors-background);
border: 1px solid var(--theme-colors-border); border: 1px solid var(--theme-colors-border);
filter: drop-shadow(0 0 5px rgb(0 0 0 / 50%)); filter: drop-shadow(0 0 5px rgb(0 0 0 / 50%));
} }
@@ -1,7 +1,7 @@
.dropdown { .dropdown {
padding: var(--theme-spacing-xs); padding: var(--theme-spacing-xs);
color: var(--theme-colors-surface-foreground); color: var(--theme-colors-foreground);
background: var(--theme-colors-surface); background: var(--theme-colors-background);
border: 1px solid var(--theme-colors-border); border: 1px solid var(--theme-colors-border);
filter: drop-shadow(0 0 5px rgb(0 0 0 / 50%)); filter: drop-shadow(0 0 5px rgb(0 0 0 / 50%));
} }
@@ -13,10 +13,12 @@ export interface PopoverProps extends MantinePopoverProps {}
export const Popover = ({ children, ...props }: PopoverProps) => { export const Popover = ({ children, ...props }: PopoverProps) => {
return ( return (
<MantinePopover <MantinePopover
arrowSize={10}
classNames={{ classNames={{
dropdown: styles.dropdown, dropdown: styles.dropdown,
}} }}
transitionProps={{ transition: 'fade' }} transitionProps={{ transition: 'fade' }}
withArrow
withinPortal withinPortal
{...props} {...props}
> >