1 files changed, 88 insertions, 15 deletions

diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
index 3943371..50cc1c9 100644
--- a/packages/renderer/src/components/ThemeProvider.tsx
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -23,22 +23,95 @@ 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.js';
 
-export default observer(
-  ({ children }: { children: JSX.Element | JSX.Element[] }) => {
-    const {
-      shared: { shouldUseDarkColors },
-    } = useStore();
-
-    const theme = createTheme({
-      palette: {
-        mode: shouldUseDarkColors ? 'dark' : 'light',
+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)',
+        },
+    typography: {
+      fontFamily: 'system-ui',
+      body1: {
+        letterSpacing: 0,
+      },
+      body2: {
+        letterSpacing: 0,
+      },
+      subtitle1: {
+        letterSpacing: 0,
+      },
+      subtitle2: {
+        letterSpacing: 0,
+      },
+      button: {
+        fontSize: '1rem',
+        textTransform: 'none',
+        letterSpacing: 0,
+        lineHeight: 1.5,
+        fontWeight: 700,
+      },
+    },
+    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,
+          },
+        },
+      },
+      MuiButton: {
+        styleOverrides: {
+          sizeSmall: {
+            fontSize: '0.875rem',
+          },
+          sizeLarge: {
+            fontSize: '1rem',
+          },
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            fontWeight: 500,
+          },
+        },
+      },
+    },
+  });
 
-    return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
-  },
-);
+  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
+}
+
+ThemeProvider.defaultProps = {
+  children: undefined,
+};
+
+export default observer(ThemeProvider);