6 files changed, 21 insertions, 22 deletions

diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index 8bd3dd8..1174bbb 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -21,10 +21,10 @@
 import Box from '@mui/material/Box';
 import React from 'react';
 
-import { BrowserViewPlaceholder } from './BrowserViewPlaceholder';
-import { Sidebar } from './Sidebar';
+import BrowserViewPlaceholder from './BrowserViewPlaceholder';
+import Sidebar from './Sidebar';
 
-export function App(): JSX.Element {
+export default function App(): JSX.Element {
   return (
     <Box
       sx={{
diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
index 6aa6b7b..c671983 100644
--- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx
+++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
@@ -18,17 +18,15 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { throttle } from 'lodash';
-import { observer } from 'mobx-react-lite';
 import Box from '@mui/material/Box';
+import throttle from 'lodash-es/throttle';
+import { observer } from 'mobx-react-lite';
 import React, { useCallback, useRef } from 'react';
 
 import { useStore } from './StoreProvider';
 
-export const BrowserViewPlaceholder = observer(function BrowserViewPlaceholder() {
-  const {
-    setBrowserViewBounds,
-  } = useStore();
+export default observer(() => {
+  const store = useStore();
 
   const onResize = useCallback(throttle(([entry]: ResizeObserverEntry[]) => {
     if (entry) {
@@ -38,14 +36,14 @@ export const BrowserViewPlaceholder = observer(function BrowserViewPlaceholder()
         width,
         height,
       } = entry.target.getBoundingClientRect();
-      setBrowserViewBounds({
+      store.setBrowserViewBounds({
         x,
         y,
         width,
         height,
       });
     }
-  }, 100), [setBrowserViewBounds]);
+  }, 100), [store]);
 
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
diff --git a/packages/renderer/src/components/Sidebar.tsx b/packages/renderer/src/components/Sidebar.tsx
index 6c79932..44a47b0 100644
--- a/packages/renderer/src/components/Sidebar.tsx
+++ b/packages/renderer/src/components/Sidebar.tsx
@@ -21,9 +21,9 @@
 import Box from '@mui/material/Box';
 import React from 'react';
 
-import { ToggleDarkModeButton } from './ToggleDarkModeButton';
+import ToggleDarkModeButton from './ToggleDarkModeButton';
 
-export function Sidebar(): JSX.Element {
+export default function Sidebar(): JSX.Element {
   return (
     <Box
       sx={(theme) => ({
diff --git a/packages/renderer/src/components/StoreProvider.tsx b/packages/renderer/src/components/StoreProvider.tsx
index da1e699..cde6a31 100644
--- a/packages/renderer/src/components/StoreProvider.tsx
+++ b/packages/renderer/src/components/StoreProvider.tsx
@@ -32,7 +32,7 @@ export function useStore(): RendererStore {
   return store;
 }
 
-export function StoreProvider({ children, store }: {
+export default function StoreProvider({ children, store }: {
   children: JSX.Element | JSX.Element[],
   store: RendererStore,
 }): JSX.Element {
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
index 9215f5c..eacaa52 100644
--- a/packages/renderer/src/components/ThemeProvider.tsx
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -18,18 +18,18 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { observer } from 'mobx-react-lite';
 import {
   unstable_createMuiStrictModeTheme as createTheme,
   ThemeProvider as MuiThemeProvider,
 } from '@mui/material/styles';
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { useStore } from './StoreProvider';
 
-export const ThemeProvider = observer(function ThemeProvider({ children }: {
-  children: JSX.Element | JSX.Element[],
-}) {
+export default observer(({ children }: {
+  children: JSX.Element | JSX.Element[];
+}) => {
   const { shared: { shouldUseDarkColors } } = useStore();
 
   const theme = createTheme({
diff --git a/packages/renderer/src/components/ToggleDarkModeButton.tsx b/packages/renderer/src/components/ToggleDarkModeButton.tsx
index 1b6757e..c8ffdf0 100644
--- a/packages/renderer/src/components/ToggleDarkModeButton.tsx
+++ b/packages/renderer/src/components/ToggleDarkModeButton.tsx
@@ -18,21 +18,22 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { observer } from 'mobx-react-lite';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import IconButton from '@mui/material/IconButton';
+import { observer } from 'mobx-react-lite';
 import React from 'react';
 
 import { useStore } from './StoreProvider';
 
-export const ToggleDarkModeButton = observer(function ToggleDarkModeButton() {
-  const { shared: { shouldUseDarkColors }, toggleDarkMode } = useStore();
+export default observer(() => {
+  const store = useStore();
+  const { shared: { shouldUseDarkColors } } = store;
 
   return (
     <IconButton
       aria-label="Toggle dark mode"
-      onClick={() => toggleDarkMode()}
+      onClick={() => store.toggleDarkMode()}
     >
       {shouldUseDarkColors ? <LightModeIcon /> : <DarkModeIcon />}
     </IconButton>