Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): more pedantic mantine select theming

Browse Source
This commit is contained in:
psychedelicious 2023-06-12 22:00:55 +10:00
parent 80474d26f9
commit 4a991b4daa
1 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
View File

@ -1,12 +1,14 @@
import { forwardRef } from '@chakra-ui/react';
import { Select, SelectProps } from '@mantine/core'; import { Select, SelectProps } from '@mantine/core';
import { memo } from 'react'; import { memo } from 'react';
type IAISelectProps = SelectProps; type IAISelectProps = SelectProps;
const IAIMantineSelect = (props: IAISelectProps) => { const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
const { searchable = true, ...rest } = props; const { searchable = true, ...rest } = props;
return ( return (
<Select <Select
ref={ref}
searchable={searchable} searchable={searchable}
styles={() => ({ styles={() => ({
label: { label: {
@ -31,6 +33,7 @@ const IAIMantineSelect = (props: IAISelectProps) => {
item: { item: {
backgroundColor: 'var(--invokeai-colors-base-800)', backgroundColor: 'var(--invokeai-colors-base-800)',
color: 'var(--invokeai-colors-base-200)', color: 'var(--invokeai-colors-base-200)',
padding: 6,
'&[data-hovered]': { '&[data-hovered]': {
color: 'var(--invokeai-colors-base-100)', color: 'var(--invokeai-colors-base-100)',
backgroundColor: 'var(--invokeai-colors-base-750)', backgroundColor: 'var(--invokeai-colors-base-750)',
@ -44,10 +47,10 @@ const IAIMantineSelect = (props: IAISelectProps) => {
}, },
'&[data-selected]': { '&[data-selected]': {
color: 'var(--invokeai-colors-base-50)', color: 'var(--invokeai-colors-base-50)',
backgroundColor: 'var(--invokeai-colors-accent-750)', backgroundColor: 'var(--invokeai-colors-accent-650)',
fontWeight: 600, fontWeight: 600,
'&:hover': { '&:hover': {
backgroundColor: 'var(--invokeai-colors-accent-700)', backgroundColor: 'var(--invokeai-colors-accent-600)',
}, },
}, },
}, },
@ -55,6 +58,6 @@ const IAIMantineSelect = (props: IAISelectProps) => {
{...rest} {...rest}
/> />
); );
}; });
export default memo(IAIMantineSelect); export default memo(IAIMantineSelect);