Cool_Tools/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2024-11-20 06:27:09 +01:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Move MantineProvider context one level up

Browse Source
This commit is contained in:
jeffvli 2024-01-22 18:09:42 -08:00
parent 7cdd244220
commit 1dcdc5321e
2 changed files with 49 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/renderer/app.tsx
View File

@ -2,7 +2,6 @@ import { useEffect, useMemo, useRef } from 'react';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
import { ModuleRegistry } from '@ag-grid-community/core';
import { InfiniteRowModelModule } from '@ag-grid-community/infinite-row-model';
import { MantineProvider } from '@mantine/core';
import { ModalsProvider } from '@mantine/modals';
import isElectron from 'is-electron';
import { initSimpleImg } from 'react-simple-img';
@ -39,7 +38,6 @@ const ipc = isElectron() ? window.electron.ipc : null;
const remote = isElectron() ? window.electron.remote : null;
export const App = () => {
const theme = useTheme();
const accent = useSettingsStore((store) => store.general.accent);
const language = useSettingsStore((store) => store.general.language);
const { builtIn, custom, system, type } = useSettingsStore((state) => state.font);
@ -188,60 +186,7 @@ export const App = () => {
}, [language]);
return (
<MantineProvider
withGlobalStyles
withNormalizeCSS
theme={{
colorScheme: theme as 'light' | 'dark',
components: {
Modal: {
styles: {
body: { background: 'var(--modal-bg)', padding: '1rem !important' },
close: { marginRight: '0.5rem' },
content: { borderRadius: '5px' },
header: {
background: 'var(--modal-header-bg)',
paddingBottom: '1rem',
},
title: { fontSize: 'medium', fontWeight: 500 },
},
},
},
defaultRadius: 'xs',
dir: 'ltr',
focusRing: 'auto',
focusRingStyles: {
inputStyles: () => ({
border: '1px solid var(--primary-color)',
}),
resetStyles: () => ({ outline: 'none' }),
styles: () => ({
outline: '1px solid var(--primary-color)',
outlineOffset: '-1px',
}),
},
fontFamily: 'var(--content-font-family)',
fontSizes: {
lg: '1.1rem',
md: '1rem',
sm: '0.9rem',
xl: '1.5rem',
xs: '0.8rem',
},
headings: {
fontFamily: 'var(--content-font-family)',
fontWeight: 700,
},
other: {},
spacing: {
lg: '2rem',
md: '1rem',
sm: '0.5rem',
xl: '4rem',
xs: '0rem',
},
}}
>
<>
<ModalsProvider
modalProps={{
centered: true,
@ -264,6 +209,6 @@ export const App = () => {
</PlayQueueHandlerContext.Provider>
</ModalsProvider>
<IsUpdatedDialog />
</MantineProvider>
</>
);
};

53
src/renderer/index.tsx
View File

@ -1,3 +1,4 @@
import { MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';
import {
PersistedClient,
@ -8,7 +9,6 @@ import { get, set, del } from 'idb-keyval';
import { createRoot } from 'react-dom/client';
import { App } from './app';
import { queryClient } from './lib/react-query';
import 'overlayscrollbars/overlayscrollbars.css';
export function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
@ -59,10 +59,51 @@ root.render(
persister: indexedDbPersister,
}}
>
<Notifications
containerWidth="300px"
position="bottom-center"
/>
<App />
<MantineProvider
theme={{
components: {
Modal: {
styles: {
body: { background: 'var(--modal-bg)', padding: '1rem !important' },
close: { marginRight: '0.5rem' },
content: { borderRadius: '5px' },
header: {
background: 'var(--modal-header-bg)',
paddingBottom: '1rem',
},
title: { fontSize: 'medium', fontWeight: 500 },
},
},
},
defaultRadius: 'xs',
focusRing: 'auto',
fontFamily: 'var(--content-font-family)',
fontSizes: {
lg: '1.1rem',
md: '1rem',
sm: '0.9rem',
xl: '1.5rem',
xs: '0.8rem',
},
headings: {
fontFamily: 'var(--content-font-family)',
fontWeight: '700',
},
other: {},
spacing: {
lg: '2rem',
md: '1rem',
sm: '0.5rem',
xl: '4rem',
xs: '0rem',
},
}}
>
<Notifications
containerWidth="300px"
position="bottom-center"
/>
<App />
</MantineProvider>
</PersistQueryClientProvider>,
);