Themes modal udpated

src/App.tsx

@@ -1,66 +1,76 @@
-import Homepage from './pages/homepage/Homepage'
-import { MantineProvider, DEFAULT_THEME, createTheme, mergeMantineTheme } from '@mantine/core'
+import Homepage from "./pages/homepage/Homepage";
+import {
+	MantineProvider,
+	DEFAULT_THEME,
+	createTheme,
+	mergeMantineTheme,
+} from "@mantine/core";
 import {
 	Route,
 	createBrowserRouter,
 	createRoutesFromElements,
 	RouterProvider,
 } from "react-router-dom";
-import Settings from './pages/settings/Settings';
-import { ModalsProvider } from '@mantine/modals';
-import { useLocalStorage } from '@mantine/hooks';
-import { useEffect, useState } from 'react';
-import { useQueryAPI } from './hooks/useAPI';
-import ThemeProvider from './components/ThemeProvider';
-import '@mantine/core/styles.css'; //import Mantine V7 styles needed by MRT
-import '@mantine/dates/styles.css'; //if using mantine date picker features
-import 'mantine-react-table/styles.css'; //import MRT styles
+import Settings from "./pages/settings/Settings";
+import { ModalsProvider } from "@mantine/modals";
+import { useLocalStorage } from "@mantine/hooks";
+import { useEffect, useState } from "react";
+import { useQueryAPI } from "./hooks/useAPI";
+import ThemeProvider from "./components/ThemeProvider";
+import "@mantine/core/styles.css"; //import Mantine V7 styles needed by MRT
+import "@mantine/dates/styles.css"; //if using mantine date picker features
+import "mantine-react-table/styles.css"; //import MRT styles
 
 function App() {
-  
-  const { data, isFetched } = useQueryAPI({
+	const { data, isFetched } = useQueryAPI({
 		endpoint: "api/themes",
 	});
 
-  const [themeName, setThemeName] = useLocalStorage<any>({
-		key: 'theme',
-		defaultValue: 'blackboard',
+	const [themeName, setThemeName] = useLocalStorage<any>({
+		key: "theme",
+		defaultValue: "blackboard",
 	});
 
-  const [currentTheme, setCurrentTheme] = useState<any>({});
+	const [currentTheme, setCurrentTheme] = useState<any>({});
 
-  const overrides = createTheme({
-    white:currentTheme.colorbackground,
-    fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif',
-  });
+	const overrides = createTheme({
+		white: currentTheme.colorbackground,
+		fontFamily:
+			"-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif",
+	});
 
-  const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
+	const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
 
-  useEffect(() => {
-    if(data && themeName) {
-      let temp = data.find((t: any) => t.name === themeName)
-      setCurrentTheme(temp);
-    }
-  }, [isFetched, themeName])
+	useEffect(() => {
+		if (data && themeName) {
+			const temp = data.find((t: any) => t.name === themeName);
+			setCurrentTheme(temp);
+		}
+	}, [isFetched, themeName]);
 
-  const router = createBrowserRouter(
+	const router = createBrowserRouter(
 		createRoutesFromElements(
 			<Route>
 				<Route path="/trigger" element={<Homepage theme={currentTheme} />} />
-				<Route path="/trigger/settings" element={<Settings theme={currentTheme}/>} />
+				<Route
+					path="/trigger/settings"
+					element={<Settings theme={currentTheme} />}
+				/>
 			</Route>,
 		),
 	);
 
-  return (
-      <MantineProvider theme={mantineTheme}>
-        <ThemeProvider theme={currentTheme}>
-          <ModalsProvider>
-              <RouterProvider router={router} />
-          </ModalsProvider>
-        </ThemeProvider>
-      </MantineProvider>
-  )
+	return (
+		<MantineProvider theme={mantineTheme}>
+			{currentTheme && (
+				<ThemeProvider theme={currentTheme}>
+					<ModalsProvider>
+						<RouterProvider router={router} />
+					</ModalsProvider>
+				</ThemeProvider>
+			)}
+		</MantineProvider>
+	);
 }
 
-export default App
+export default App;