4 files changed, 51 insertions, 49 deletions

diff --git a/packages/renderer/src/components/BrowserViewPlaceholder.tsx b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
index 11c09d6..8f055e7 100644
--- a/packages/renderer/src/components/BrowserViewPlaceholder.tsx
+++ b/packages/renderer/src/components/BrowserViewPlaceholder.tsx
@@ -29,36 +29,37 @@ export default observer(() => {
   const store = useStore();
 
   // eslint-disable-next-line react-hooks/exhaustive-deps -- react-hooks doesn't support `throttle`.
-  const onResize = useCallback(throttle(([entry]: ResizeObserverEntry[]) => {
-    if (entry) {
-      const {
-        x,
-        y,
-        width,
-        height,
-      } = entry.target.getBoundingClientRect();
-      store.setBrowserViewBounds({
-        x,
-        y,
-        width,
-        height,
-      });
-    }
-  }, 100), [store]);
+  const onResize = useCallback(
+    throttle(([entry]: ResizeObserverEntry[]) => {
+      if (entry) {
+        const { x, y, width, height } = entry.target.getBoundingClientRect();
+        store.setBrowserViewBounds({
+          x,
+          y,
+          width,
+          height,
+        });
+      }
+    }, 100),
+    [store],
+  );
 
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
 
-  const ref = useCallback((element: HTMLElement | null) => {
-    if (resizeObserverRef.current !== null) {
-      resizeObserverRef.current.disconnect();
-    }
-    if (element === null) {
-      resizeObserverRef.current = null;
-      return;
-    }
-    resizeObserverRef.current = new ResizeObserver(onResize);
-    resizeObserverRef.current.observe(element);
-  }, [onResize, resizeObserverRef]);
+  const ref = useCallback(
+    (element: HTMLElement | null) => {
+      if (resizeObserverRef.current !== null) {
+        resizeObserverRef.current.disconnect();
+      }
+      if (element === null) {
+        resizeObserverRef.current = null;
+        return;
+      }
+      resizeObserverRef.current = new ResizeObserver(onResize);
+      resizeObserverRef.current.observe(element);
+    },
+    [onResize, resizeObserverRef],
+  );
 
   return (
     <Box
diff --git a/packages/renderer/src/components/StoreProvider.tsx b/packages/renderer/src/components/StoreProvider.tsx
index cde6a31..bb8495c 100644
--- a/packages/renderer/src/components/StoreProvider.tsx
+++ b/packages/renderer/src/components/StoreProvider.tsx
@@ -32,13 +32,14 @@ export function useStore(): RendererStore {
   return store;
 }
 
-export default function StoreProvider({ children, store }: {
-  children: JSX.Element | JSX.Element[],
-  store: RendererStore,
+export default function StoreProvider({
+  children,
+  store,
+}: {
+  children: JSX.Element | JSX.Element[];
+  store: RendererStore;
 }): JSX.Element {
   return (
-    <StoreContext.Provider value={store}>
-      {children}
-    </StoreContext.Provider>
+    <StoreContext.Provider value={store}>{children}</StoreContext.Provider>
   );
 }
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
index eacaa52..3943371 100644
--- a/packages/renderer/src/components/ThemeProvider.tsx
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -27,20 +27,18 @@ import React from 'react';
 
 import { useStore } from './StoreProvider';
 
-export default observer(({ children }: {
-  children: JSX.Element | JSX.Element[];
-}) => {
-  const { shared: { shouldUseDarkColors } } = useStore();
+export default observer(
+  ({ children }: { children: JSX.Element | JSX.Element[] }) => {
+    const {
+      shared: { shouldUseDarkColors },
+    } = useStore();
 
-  const theme = createTheme({
-    palette: {
-      mode: shouldUseDarkColors ? 'dark' : 'light',
-    },
-  });
+    const theme = createTheme({
+      palette: {
+        mode: shouldUseDarkColors ? 'dark' : 'light',
+      },
+    });
 
-  return (
-    <MuiThemeProvider theme={theme}>
-      {children}
-    </MuiThemeProvider>
-  );
-});
+    return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
+  },
+);
diff --git a/packages/renderer/src/components/ToggleDarkModeButton.tsx b/packages/renderer/src/components/ToggleDarkModeButton.tsx
index c8ffdf0..695756a 100644
--- a/packages/renderer/src/components/ToggleDarkModeButton.tsx
+++ b/packages/renderer/src/components/ToggleDarkModeButton.tsx
@@ -28,7 +28,9 @@ import { useStore } from './StoreProvider';
 
 export default observer(() => {
   const store = useStore();
-  const { shared: { shouldUseDarkColors } } = store;
+  const {
+    shared: { shouldUseDarkColors },
+  } = store;
 
   return (
     <IconButton