MainLayout for theme persistence

src/App.tsx

@@ -1,5 +1,4 @@
 import {
-	Box,
 	DEFAULT_THEME,
 	MantineProvider,
 	createTheme,
@@ -16,7 +15,7 @@ import {
 	createBrowserRouter,
 	createRoutesFromElements,
 } from 'react-router-dom';
-import { ThemeProvider } from './components';
+import { MainLayout, ThemeProvider } from './components';
 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
@@ -57,15 +56,20 @@ function App() {
 	const router = createBrowserRouter(
 		createRoutesFromElements(
 			<Route>
-				<Route path='/' element={<Navigate to={`/${import.meta.env.VITE_BASE_URL}`} />} />
-				<Route
-					path={`/${import.meta.env.VITE_BASE_URL}`}
-					element={<Homepage theme={theme} />}
-				/>
-				<Route
-					path={`/${import.meta.env.VITE_BASE_URL}/settings`}
-					element={<Settings theme={theme} />}
-				/>
+				<Route path='' element={<MainLayout theme={theme} />}>
+					<Route
+						path='/'
+						element={<Navigate to={`/${import.meta.env.VITE_BASE_URL}`} />}
+					/>
+					<Route
+						path={`/${import.meta.env.VITE_BASE_URL}`}
+						element={<Homepage theme={theme} />}
+					/>
+					<Route
+						path={`/${import.meta.env.VITE_BASE_URL}/settings`}
+						element={<Settings theme={theme} setTheme={setTheme} allThemes={data} />}
+					/>
+				</Route>
 			</Route>,
 		),
 	);
@@ -82,22 +86,8 @@ function App() {
 				<MantineProvider theme={mantineTheme}>
 					<ThemeProvider theme={theme}>
 						<ModalsProvider>
-							<>
-								<Box
-									style={{
-										width: '100%',
-										height: '100%',
-										position: 'fixed',
-										backgroundImage: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), url(/backgrounds/${theme.backgroundImage})`,
-										backgroundSize: 'cover',
-										backgroundRepeat: 'no-repeat',
-										backgroundPosition: 'center',
-										zIndex: -1,
-									}}
-								/>
-								<RouterProvider router={router} />
-								<ReactQueryDevtools initialIsOpen={false} />
-							</>
+							<RouterProvider router={router} />
+							<ReactQueryDevtools initialIsOpen={false} />
 						</ModalsProvider>
 					</ThemeProvider>
 				</MantineProvider>