MainLayout for theme persistence

src/pages/settings/Settings.tsx

@@ -9,6 +9,7 @@ import {
 	FiSearch,
 	FiUser,
 } from 'react-icons/fi';
+import { useNavigate } from 'react-router-dom';
 import { actionIconClasses, tabClasses, textClasses } from 'styles';
 import Applications from './components/Applications';
 import Bookmarks from './components/Bookmarks';
@@ -18,8 +19,9 @@ import Personalization from './components/Personalization';
 import SearchProviders from './components/SearchProviders';
 import Themes from './components/Themes';
 
-export function Settings({ theme }: any) {
+export function Settings({ theme, setTheme, allThemes }: any) {
 	const isMobile = window.matchMedia('(max-width: 600px)').matches;
+	const navigate = useNavigate();
 	return (
 		<Stack px={'2rem'}>
 			<Group gap={0}>
@@ -27,7 +29,7 @@ export function Settings({ theme }: any) {
 					className={actionIconClasses.backButton}
 					classNames={actionIconClasses}
 					component='a'
-					href={`/${import.meta.env.VITE_BASE_URL}`}
+					onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}`)}
 				>
 					<FiArrowLeftCircle />
 				</ActionIcon>
@@ -74,7 +76,7 @@ export function Settings({ theme }: any) {
 					<Categories />
 				</Tabs.Panel>
 				<Tabs.Panel value='themes'>
-					<Themes theme={theme} />
+					<Themes theme={theme} setTheme={setTheme} allThemes={allThemes} />
 				</Tabs.Panel>
 				<Tabs.Panel value='providers'>
 					<SearchProviders />