mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
79d65125c2
IAIMantineSelect and IAIMantineMultiSelect have a bit of extra logic that prevents simple select functionality from working as expected. - extract the styles into hooks - rename those two components to IAIMantineSearchableSelect and IAIMantineSearchableMultiSelect - Create IAIMantineSelect (which is just a dropdown) and use it in model manager and a few other places When we only have a few options to present and searching is not efficient, we should use this instead.
47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import {
|
|
ChakraProvider,
|
|
createLocalStorageManager,
|
|
extendTheme,
|
|
} from '@chakra-ui/react';
|
|
import { ReactNode, useEffect, useMemo } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { theme as invokeAITheme } from 'theme/theme';
|
|
|
|
import '@fontsource-variable/inter';
|
|
import { MantineProvider } from '@mantine/core';
|
|
import 'overlayscrollbars/overlayscrollbars.css';
|
|
import 'theme/css/overlayscrollbars.css';
|
|
|
|
type ThemeLocaleProviderProps = {
|
|
children: ReactNode;
|
|
};
|
|
|
|
const manager = createLocalStorageManager('@@invokeai-color-mode');
|
|
|
|
function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
|
|
const { i18n } = useTranslation();
|
|
|
|
const direction = i18n.dir();
|
|
|
|
const theme = useMemo(() => {
|
|
return extendTheme({
|
|
...invokeAITheme,
|
|
direction,
|
|
});
|
|
}, [direction]);
|
|
|
|
useEffect(() => {
|
|
document.body.dir = direction;
|
|
}, [direction]);
|
|
|
|
return (
|
|
<MantineProvider>
|
|
<ChakraProvider theme={theme} colorModeManager={manager}>
|
|
{children}
|
|
</ChakraProvider>
|
|
</MantineProvider>
|
|
);
|
|
}
|
|
|
|
export default ThemeLocaleProvider;
|