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: Match styling of Mantine Select with InvokeAI

Browse Source
This commit is contained in:
blessedcoolant 2023-06-12 22:37:05 +12:00 committed by psychedelicious
parent 5fe674e223
commit 9cfbea4c25
2 changed files with 37 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,43 @@ type IAISelectProps = SelectProps;
const IAIMantineSelect = (props: IAISelectProps) => { const IAIMantineSelect = (props: IAISelectProps) => {
const { searchable = true, ...rest } = props; const { searchable = true, ...rest } = props;
return <Select searchable={searchable} {...rest} />; return (
<Select
searchable={searchable}
styles={() => ({
label: {
color: 'var(--invokeai-colors-base-300)',
fontWeight: 'normal',
},
input: {
backgroundColor: 'var(--invokeai-colors-base-900)',
border: 'none',
color: 'var(--invokeai-colors-base-100)',
fontWeight: 500,
},
dropdown: {
backgroundColor: 'var(--invokeai-colors-base-800)',
borderColor: 'var(--invokeai-colors-base-700)',
},
item: {
color: 'var(--invokeai-colors-base-300)',
':hover': {
color: 'var(--invokeai-colors-base-300)',
backgroundColor: 'var(--invokeai-colors-accent-750)',
},
'&[data-selected]': {
color: 'var(--invokeai-colors-base-300)',
backgroundColor: 'var(--invokeai-colors-accent-750)',
fontWeight: 500,
':hover': {
backgroundColor: 'var(--invokeai-colors-accent-750)',
},
},
},
})}
{...rest}
/>
);
}; };
export default memo(IAIMantineSelect); export default memo(IAIMantineSelect);

16
invokeai/frontend/web/src/mantine-theme/theme.ts
View File

@ -3,20 +3,4 @@ import { MantineThemeOverride } from '@mantine/core';
export const mantineTheme: MantineThemeOverride = { export const mantineTheme: MantineThemeOverride = {
colorScheme: 'dark', colorScheme: 'dark',
fontFamily: `'InterVariable', sans-serif`, fontFamily: `'InterVariable', sans-serif`,
colors: {
ocean: [
'#dcf5ff',
'#afddff',
'#80c4fd',
'#50acf9',
'#2295f6',
'#097bdd',
'#0060ad',
'#00447d',
'#00294e',
'#000f20',
],
},
primaryColor: 'ocean',
primaryShade: 6,
}; };