MainLayout for theme persistence

src/components/MainLayout.tsx

@@ -0,0 +1,21 @@
+import { Box } from '@mantine/core';
+import { Outlet } from 'react-router-dom';
+
+export function MainLayout({ theme }: any) {
+	return (
+		<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,
+			}}
+		>
+			<Outlet />
+		</Box>
+	);
+}

src/components/WeatherModal/WeatherModal.tsx

@@ -14,7 +14,6 @@ export function WeatherModal({
 	hourly,
 	closeWeatherModal,
 	weatherModalOpened,
-	setValue,
 	setProviderLabel,
 	setProviderURL,
 	isMobile,
@@ -50,7 +49,6 @@ export function WeatherModal({
 			opened={weatherModalOpened}
 			onClose={() => {
 				closeWeatherModal();
-				setValue('');
 				setProviderLabel('Google Search');
 				setProviderURL('https://www.google.com/search?q=');
 			}}
@@ -119,7 +117,9 @@ export function WeatherModal({
 								>
 									{hourlyForecast.length > 0 &&
 										hourlyForecast.map((h: any) => {
-											return <HourlyCard key={h.time} weather={h} isMobile={isMobile} />;
+											return (
+												<HourlyCard key={h.number} weather={h} isMobile={isMobile} />
+											);
 										})}
 								</Box>
 							</Group>

src/components/index.ts

@@ -2,6 +2,7 @@ export { HelpModal } from './HelpModal/HelpModal';
 export { WeatherModal } from './WeatherModal/WeatherModal';
 export { DataTable } from './DataTable/DataTable';
 export { ThemeProvider } from './ThemeProvider';
+export { MainLayout } from './MainLayout';
 export { ApplicationColumns } from './DataTable/columns/ApplicationColumns';
 export { BookmarkColumns } from './DataTable/columns/BookmarkColumns';
 export { CategoryColumns } from './DataTable/columns/CategoryColumns';