1 files changed, 45 insertions, 37 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 {
   ThemeProvider as MuiThemeProvider,
 } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import React from 'react';
+import React, { type ReactNode } from 'react';
 
-import { useStore } from './StoreProvider';
+import type RendererStore from '../stores/RendererStore';
 
-export default observer(
-  ({ children }: { children: JSX.Element | JSX.Element[] }) => {
-    const {
-      shared: { shouldUseDarkColors, writingDirection },
-    } = useStore();
-
-    const theme = createTheme({
-      direction: writingDirection,
-      palette: shouldUseDarkColors
-        ? {
-            mode: 'dark',
-            divider: 'rgba(255, 255, 255, 0.22)',
-          }
-        : {
-            mode: 'light',
-            divider: 'rgba(0, 0, 0, 0.24)',
-          },
-      components: {
-        MuiBadge: {
-          styleOverrides: {
-            standard: {
-              // Reduce badge with to make the unread message badge with "99+" unread messages
-              // fit within the sidebar. Applied for all badges for consistency.
-              paddingLeft: 4,
-              paddingRight: 4,
-            },
+function ThemeProvider({
+  children,
+  store: {
+    shared: { shouldUseDarkColors, writingDirection },
+  },
+}: {
+  children?: ReactNode;
+  store: RendererStore;
+}) {
+  const theme = createTheme({
+    direction: writingDirection,
+    palette: shouldUseDarkColors
+      ? {
+          mode: 'dark',
+          divider: 'rgba(255, 255, 255, 0.22)',
+        }
+      : {
+          mode: 'light',
+          divider: 'rgba(0, 0, 0, 0.24)',
+        },
+    components: {
+      MuiBadge: {
+        styleOverrides: {
+          standard: {
+            // Reduce badge with to make the unread message badge with "99+" unread messages
+            // fit within the sidebar. Applied for all badges for consistency.
+            paddingLeft: 4,
+            paddingRight: 4,
           },
         },
-        MuiIconButton: {
-          styleOverrides: {
-            sizeMedium: {
-              padding: 6,
-            },
+      },
+      MuiIconButton: {
+        styleOverrides: {
+          sizeMedium: {
+            padding: 6,
           },
         },
       },
-    });
+    },
+  });
 
-    return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
-  },
-);
+  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
+}
+
+ThemeProvider.defaultProps = {
+  children: undefined,
+};
+
+export default observer(ThemeProvider);