diff options
Diffstat (limited to 'packages/renderer')
-rw-r--r-- | packages/renderer/src/components/ThemeProvider.tsx | 82 | ||||
-rw-r--r-- | packages/renderer/src/i18n/RtlCacheProvider.tsx | 12 | ||||
-rw-r--r-- | packages/renderer/src/index.tsx | 18 |
3 files changed, 60 insertions, 52 deletions
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx index 2ea2186..0273234 100644 --- a/packages/renderer/src/components/ThemeProvider.tsx +++ b/packages/renderer/src/components/ThemeProvider.tsx | |||
@@ -23,48 +23,56 @@ import { | |||
23 | ThemeProvider as MuiThemeProvider, | 23 | ThemeProvider as MuiThemeProvider, |
24 | } from '@mui/material/styles'; | 24 | } from '@mui/material/styles'; |
25 | import { observer } from 'mobx-react-lite'; | 25 | import { observer } from 'mobx-react-lite'; |
26 | import React from 'react'; | 26 | import React, { type ReactNode } from 'react'; |
27 | 27 | ||
28 | import { useStore } from './StoreProvider'; | 28 | import type RendererStore from '../stores/RendererStore'; |
29 | 29 | ||
30 | export default observer( | 30 | function ThemeProvider({ |
31 | ({ children }: { children: JSX.Element | JSX.Element[] }) => { | 31 | children, |
32 | const { | 32 | store: { |
33 | shared: { shouldUseDarkColors, writingDirection }, | 33 | shared: { shouldUseDarkColors, writingDirection }, |
34 | } = useStore(); | 34 | }, |
35 | 35 | }: { | |
36 | const theme = createTheme({ | 36 | children?: ReactNode; |
37 | direction: writingDirection, | 37 | store: RendererStore; |
38 | palette: shouldUseDarkColors | 38 | }) { |
39 | ? { | 39 | const theme = createTheme({ |
40 | mode: 'dark', | 40 | direction: writingDirection, |
41 | divider: 'rgba(255, 255, 255, 0.22)', | 41 | palette: shouldUseDarkColors |
42 | } | 42 | ? { |
43 | : { | 43 | mode: 'dark', |
44 | mode: 'light', | 44 | divider: 'rgba(255, 255, 255, 0.22)', |
45 | divider: 'rgba(0, 0, 0, 0.24)', | 45 | } |
46 | }, | 46 | : { |
47 | components: { | 47 | mode: 'light', |
48 | MuiBadge: { | 48 | divider: 'rgba(0, 0, 0, 0.24)', |
49 | styleOverrides: { | 49 | }, |
50 | standard: { | 50 | components: { |
51 | // Reduce badge with to make the unread message badge with "99+" unread messages | 51 | MuiBadge: { |
52 | // fit within the sidebar. Applied for all badges for consistency. | 52 | styleOverrides: { |
53 | paddingLeft: 4, | 53 | standard: { |
54 | paddingRight: 4, | 54 | // Reduce badge with to make the unread message badge with "99+" unread messages |
55 | }, | 55 | // fit within the sidebar. Applied for all badges for consistency. |
56 | paddingLeft: 4, | ||
57 | paddingRight: 4, | ||
56 | }, | 58 | }, |
57 | }, | 59 | }, |
58 | MuiIconButton: { | 60 | }, |
59 | styleOverrides: { | 61 | MuiIconButton: { |
60 | sizeMedium: { | 62 | styleOverrides: { |
61 | padding: 6, | 63 | sizeMedium: { |
62 | }, | 64 | padding: 6, |
63 | }, | 65 | }, |
64 | }, | 66 | }, |
65 | }, | 67 | }, |
66 | }); | 68 | }, |
69 | }); | ||
67 | 70 | ||
68 | return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>; | 71 | return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>; |
69 | }, | 72 | } |
70 | ); | 73 | |
74 | ThemeProvider.defaultProps = { | ||
75 | children: undefined, | ||
76 | }; | ||
77 | |||
78 | export default observer(ThemeProvider); | ||
diff --git a/packages/renderer/src/i18n/RtlCacheProvider.tsx b/packages/renderer/src/i18n/RtlCacheProvider.tsx index be770b8..1303314 100644 --- a/packages/renderer/src/i18n/RtlCacheProvider.tsx +++ b/packages/renderer/src/i18n/RtlCacheProvider.tsx | |||
@@ -21,21 +21,21 @@ | |||
21 | import type { EmotionCache } from '@emotion/cache'; | 21 | import type { EmotionCache } from '@emotion/cache'; |
22 | import { CacheProvider } from '@emotion/react'; | 22 | import { CacheProvider } from '@emotion/react'; |
23 | import { observer } from 'mobx-react-lite'; | 23 | import { observer } from 'mobx-react-lite'; |
24 | import React, { ReactNode } from 'react'; | 24 | import React, { type ReactNode } from 'react'; |
25 | 25 | ||
26 | import { useStore } from '../components/StoreProvider'; | 26 | import type RendererStore from '../stores/RendererStore'; |
27 | 27 | ||
28 | function RtlCacheProvider({ | 28 | function RtlCacheProvider({ |
29 | children, | 29 | children, |
30 | store: { | ||
31 | shared: { writingDirection }, | ||
32 | }, | ||
30 | rtlCache, | 33 | rtlCache, |
31 | }: { | 34 | }: { |
32 | children?: ReactNode; | 35 | children?: ReactNode; |
36 | store: RendererStore; | ||
33 | rtlCache: EmotionCache; | 37 | rtlCache: EmotionCache; |
34 | }): JSX.Element { | 38 | }): JSX.Element { |
35 | const { | ||
36 | shared: { writingDirection }, | ||
37 | } = useStore(); | ||
38 | |||
39 | return writingDirection === 'rtl' ? ( | 39 | return writingDirection === 'rtl' ? ( |
40 | <CacheProvider value={rtlCache}>{children}</CacheProvider> | 40 | <CacheProvider value={rtlCache}>{children}</CacheProvider> |
41 | ) : ( | 41 | ) : ( |
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx index 726e00e..9971469 100644 --- a/packages/renderer/src/index.tsx +++ b/packages/renderer/src/index.tsx | |||
@@ -74,16 +74,16 @@ const App = lazy(() => import('./components/App')); | |||
74 | function Root(): JSX.Element { | 74 | function Root(): JSX.Element { |
75 | return ( | 75 | return ( |
76 | <React.StrictMode> | 76 | <React.StrictMode> |
77 | <StoreProvider store={store}> | 77 | <RtlCacheProvider store={store} rtlCache={rtlCache}> |
78 | <RtlCacheProvider rtlCache={rtlCache}> | 78 | <ThemeProvider store={store}> |
79 | <ThemeProvider> | 79 | <CssBaseline enableColorScheme /> |
80 | <CssBaseline enableColorScheme /> | 80 | <Suspense fallback={<Loading />}> |
81 | <Suspense fallback={<Loading />}> | 81 | <StoreProvider store={store}> |
82 | <App devMode={isDevelopment} /> | 82 | <App devMode={isDevelopment} /> |
83 | </Suspense> | 83 | </StoreProvider> |
84 | </ThemeProvider> | 84 | </Suspense> |
85 | </RtlCacheProvider> | 85 | </ThemeProvider> |
86 | </StoreProvider> | 86 | </RtlCacheProvider> |
87 | </React.StrictMode> | 87 | </React.StrictMode> |
88 | ); | 88 | ); |
89 | } | 89 | } |