MainLayout for theme persistence

src/pages/settings/components/Themes.tsx

@@ -9,7 +9,7 @@ import { modals } from '@mantine/modals';
 import { buttonClasses, textClasses } from 'styles';
 import ThemeCard from './ThemeCard';
 import ThemeModal from './ThemeModal';
-function ThemesSettings({ theme }: any) {
+function ThemesSettings({ theme, setTheme, allThemes }: any) {
 	const [opened, { open, close }] = useDisclosure(false);
 	const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
 	const [colorId, setColorId] = useState<string>('');
@@ -18,23 +18,14 @@ function ThemesSettings({ theme }: any) {
 		key: 'theme',
 		defaultValue: 'blackboard',
 	});
-	const { data, isFetched } = useQueryAPI({
-		endpoint: 'api/themes',
-	});
 	const { data: backgrounds, isFetched: isBackgroundFetched } = useQueryAPI({
 		endpoint: 'api/backgrounds',
 	});
-	const [themesList, setThemesList] = useState([]);
 	const [backgroundList, setBackgroundList] = useState<any>(['None']);
 	const [selectedTheme, setSelectedTheme] = useState<any>({});
 	const { mutateAsync: createTheme } = useMutationAPI();
 	const { mutateAsync: deleteTheme } = useMutationAPI();
-
-	useEffect(() => {
-		if (isFetched) {
-			setThemesList(data);
-		}
-	}, [data, isFetched]);
+	const isMobile = window.matchMedia('(max-width: 600px)').matches;
 
 	useEffect(() => {
 		if (backgrounds && isBackgroundFetched) {
@@ -128,7 +119,7 @@ function ThemesSettings({ theme }: any) {
 						color={theme.primaryColor}
 					/>
 				</Group>
-				<Group justify='center' pos={'relative'}>
+				<Group justify='center' align='center' pos={'relative'}>
 					<Overlay
 						display={currentTheme === 'random' ? 'flex' : 'none'}
 						blur={5}
@@ -136,10 +127,12 @@ function ThemesSettings({ theme }: any) {
 							borderRadius: '10px',
 							marginTop: '-15px',
 							marginBottom: '-10px',
+							marginRight: isMobile ? '0' : '50px',
+							marginLeft: isMobile ? '0' : '50px',
 						}}
 						pos={'absolute'}
 					/>
-					{themesList.map((cardTheme: any) => (
+					{allThemes?.map((cardTheme: any) => (
 						<Group key={cardTheme.name} pos={'relative'}>
 							{cardTheme.name === currentTheme && (
 								<FiChevronRight
@@ -166,6 +159,8 @@ function ThemesSettings({ theme }: any) {
 							>
 								<ThemeCard
 									theme={theme}
+									allThemes={allThemes}
+									setTheme={setTheme}
 									cardTheme={cardTheme}
 									currentTheme={currentTheme}
 									handleOpen={handleOpen}