Adjust base component styles
This commit is contained in:
parent
57c34637cf
commit
a4584ecd5c
4 changed files with 8 additions and 5 deletions
|
@ -162,7 +162,7 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
|
||||||
}
|
}
|
||||||
|
|
||||||
&:active {
|
&:active {
|
||||||
transform: scale(0.98);
|
transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .mantine-Button-centerLoader {
|
& .mantine-Button-centerLoader {
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|
Reference in a new issue