Fixing warnings

components/ui/App.jsx

@@ -7,23 +7,26 @@ const { DarkMode } = Plugins;
 const App = ({ children, className, ...props }) => {
   const [darkMode, setDarkMode] = useState(false);
 
-  useEffect(async() => {
+  useEffect(async () => {
+    try {
       let darkmodeConfig = await DarkMode.isDarkModeOn();
       setDarkMode(darkmodeConfig.isDarkModeOn);
-    DarkMode.addListener("darkModeStateChanged", (state) => {
+      DarkMode.addListener('darkModeStateChanged', state => {
         setDarkMode(state.isDarkModeOn);
       });
+    } catch (e) {}
   }, []);
 
-  return (<div {...props} className={classNames(
+  return (
-    'flex h-screen flex-col', 
+    <div
-    className,
+      {...props}
-    {
+      className={classNames('flex h-screen flex-col', className, {
-      'dark': darkMode
+        dark: darkMode,
-    }
+      })}
-    )}>
+    >
       {children}
-  </div>);
+    </div>
-}
+  );
+};
 
 export default App;

components/ui/Menu.jsx

@@ -1,6 +1,6 @@
 import { Plugins } from '@capacitor/core';
 import classNames from 'classnames';
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useDrag } from 'react-use-gesture';
 
@@ -13,20 +13,22 @@ const Menu = ({ open, onClose, children, className, ...props }) => {
   const [dragging, setDragging] = useState(false);
 
   useEffect(async () => {
+    try {
       let darkmodeConfig = await DarkMode.isDarkModeOn();
-    console.log({open, darkMode: darkmodeConfig.isDarkModeOn})
+      console.log({ open, darkMode: darkmodeConfig.isDarkModeOn });
       Plugins.StatusBar.setStyle({
         style: open && !darkmodeConfig.isDarkModeOn ? 'LIGHT' : 'DARK',
       }).catch(() => {});
+    } catch (e) {}
   }, [open]);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const rect = ref.current?.getBoundingClientRect();
     setRect(rect);
     setX(-rect.width);
   }, []);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (open) {
       setX(0);
     } else if (rect) {

components/ui/Modal.jsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useDrag } from 'react-use-gesture';
 import Store from '../../store';
 import { SafeAreaContext } from './SafeArea';
@@ -26,14 +26,14 @@ const Modal = ({ open, onClose, children }) => {
   }, [safeAreaTop, rect]);
 
   // Get the layout rectangle for the modal
-  useLayoutEffect(() => {
+  useEffect(() => {
     const rect = ref.current?.getBoundingClientRect();
     setRect(rect);
     _close();
   }, [safeAreaTop]);
 
   // If open changes, open/close the modal
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (open) {
       _open();
     } else {