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): even more pedantic mantine select theming

Browse Source
This commit is contained in:
psychedelicious 2023-06-12 22:31:54 +10:00
parent 1878ea94f6
commit 705573f0a8
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,4 +1,4 @@
import { Tooltip, forwardRef } from '@chakra-ui/react'; import { Tooltip } from '@chakra-ui/react';
import { Select, SelectProps } from '@mantine/core'; import { Select, SelectProps } from '@mantine/core';
import { memo } from 'react'; import { memo } from 'react';
@ -6,12 +6,11 @@ type IAISelectProps = SelectProps & {
tooltip?: string; tooltip?: string;
}; };
const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => { const IAIMantineSelect = (props: IAISelectProps) => {
const { searchable = true, tooltip, ...rest } = props; const { searchable = true, tooltip, ...rest } = props;
return ( return (
<Tooltip label={tooltip} placement="top" hasArrow> <Tooltip label={tooltip} placement="top" hasArrow>
<Select <Select
ref={ref}
searchable={searchable} searchable={searchable}
styles={() => ({ styles={() => ({
root: {}, root: {},
@ -24,6 +23,7 @@ const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
borderWidth: '2px', borderWidth: '2px',
borderColor: 'var(--invokeai-colors-base-800)', borderColor: 'var(--invokeai-colors-base-800)',
color: 'var(--invokeai-colors-base-100)', color: 'var(--invokeai-colors-base-100)',
paddingRight: 24,
fontWeight: 600, fontWeight: 600,
'&:hover': { borderColor: 'var(--invokeai-colors-base-700)' }, '&:hover': { borderColor: 'var(--invokeai-colors-base-700)' },
'&:focus': { '&:focus': {
@ -58,11 +58,14 @@ const IAIMantineSelect = forwardRef((props: IAISelectProps, ref) => {
}, },
}, },
}, },
rightSection: {
width: 24,
},
})} })}
{...rest} {...rest}
/> />
</Tooltip> </Tooltip>
); );
}); };
export default memo(IAIMantineSelect); export default memo(IAIMantineSelect);