Adjust base component styles

This commit is contained in:
jeffvli 2022-12-22 01:59:02 -08:00
parent 57c34637cf
commit a4584ecd5c
4 changed files with 8 additions and 5 deletions

View file

@ -162,7 +162,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
} }
&:active { &:active {
transform: scale(0.98); transform: none;
} }
& .mantine-Button-centerLoader { & .mantine-Button-centerLoader {

View file

@ -6,7 +6,7 @@ import type {
MenuDropdownProps as MantineMenuDropdownProps, MenuDropdownProps as MantineMenuDropdownProps,
} from '@mantine/core'; } from '@mantine/core';
import { Menu as MantineMenu, createPolymorphicComponent } from '@mantine/core'; import { Menu as MantineMenu, createPolymorphicComponent } from '@mantine/core';
import { RiArrowLeftLine } from 'react-icons/ri'; import { RiArrowLeftSFill } from 'react-icons/ri';
import styled from 'styled-components'; import styled from 'styled-components';
type MenuProps = MantineMenuProps; type MenuProps = MantineMenuProps;
@ -42,7 +42,7 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
} }
& .mantine-Menu-itemLabel { & .mantine-Menu-itemLabel {
color: ${({ $isActive }) => ($isActive ? 'var(--primary-color)' : 'var(--dropdown-menu-fg)')}; color: var(--dropdown-menu-fg);
font-weight: 500; font-weight: 500;
font-size: 1em; font-size: 1em;
} }
@ -68,6 +68,7 @@ const StyledMenuDivider = styled(MantineMenu.Divider)`
export const DropdownMenu = ({ children, ...props }: MenuProps) => { export const DropdownMenu = ({ children, ...props }: MenuProps) => {
return ( return (
<StyledMenu <StyledMenu
withArrow
withinPortal withinPortal
radius="sm" radius="sm"
styles={{ styles={{
@ -91,7 +92,7 @@ const pMenuItem = ({ $isActive, children, ...props }: MenuItemProps) => {
return ( return (
<StyledMenuItem <StyledMenuItem
$isActive={$isActive} $isActive={$isActive}
rightSection={$isActive && <RiArrowLeftLine />} rightSection={$isActive && <RiArrowLeftSFill size={20} />}
{...props} {...props}
> >
{children} {children}

View file

@ -27,6 +27,7 @@ export const Popover = ({ children, ...props }: PopoverProps) => {
filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))', filter: 'drop-shadow(0 0 5px rgb(0, 0, 0, 50%))',
}, },
}} }}
transition="scale"
{...props} {...props}
> >
{children} {children}

View file

@ -47,10 +47,11 @@ export const SearchInput = ({
input: { input: {
backgroundColor: isOpened ? 'inherit' : 'transparent !important', backgroundColor: isOpened ? 'inherit' : 'transparent !important',
border: 'none !important', border: 'none !important',
cursor: isOpened ? 'text' : 'pointer',
padding: isOpened ? '10px' : 0, padding: isOpened ? '10px' : 0,
}, },
}} }}
width={isOpened ? openedWidth || 200 : initialWidth || 50} width={isOpened ? openedWidth || 150 : initialWidth || 50}
onChange={onChange} onChange={onChange}
onKeyDown={handleEscape} onKeyDown={handleEscape}
/> />