Style changes

src/pages/settings/components/Theming/Themes.tsx

@@ -58,7 +58,7 @@ function ThemesSettings() {
 		}
 	}, [backgroundData, isBackgroundFetched]);
 	return (
-		<Stack>
+		<Stack w={'100%'} align='center'>
 			<ThemeModal
 				opened={opened}
 				handleClose={handleClose}
@@ -75,96 +75,99 @@ function ThemesSettings() {
 				closePicker={closePicker}
 				handleSaveTheme={handleSaveTheme}
 			/>
-			<Stack h={'100%'} w={'100%'}>
-				<SettingsHeader
-					setDragging={undefined}
-					openModal={open}
-					title={'Themes'}
-					tooltip={{
-						title: 'Themes can be created here and applied to the homepage.',
-						highlightList: ['Clients', 'homepage'],
-						description:
-							'Themes are combinations of 5 colors and a background image, and can be added to a playlist. If a theme has been disabled, it will only be disabled with random/shuffle is enabled. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
-					}}
-					searchValue={searchValue}
-					setSearchValue={setSearchValue}
-				/>
-				<Switch
-					label={
-						isMobile ? (
-							<FaDice size={20} color={theme.primaryColor} />
-						) : (
-							<Text c={theme.primaryColor}>Random Theme</Text>
-						)
-					}
-					labelPosition='left'
-					pos={'absolute'}
-					right={isMobile ? '2rem' : '1rem'}
-					top={isMobile ? '9.5rem' : '2rem'}
-					checked={currentTheme === 'random'}
-					onChange={(e) => {
-						setCurrentTheme(e.target.checked ? 'random' : theme.name);
-						setCurrentThemePlaylist('All');
-					}}
-					color={theme.primaryColor}
+			<SettingsHeader
+				setDragging={undefined}
+				openModal={open}
+				title={'Themes'}
+				tooltip={{
+					title: 'Themes can be created here and applied to the homepage.',
+					highlightList: ['Clients', 'homepage'],
+					description:
+						'Themes are combinations of 5 colors and a background image, and can be added to a playlist. If a theme has been disabled, it will only be disabled with random/shuffle is enabled. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
+				}}
+				searchValue={searchValue}
+				setSearchValue={setSearchValue}
+			/>
+			<Switch
+				label={
+					isMobile ? (
+						<FaDice size={20} color={theme.primaryColor} />
+					) : (
+						<Text c={theme.primaryColor}>Random Theme</Text>
+					)
+				}
+				labelPosition='left'
+				pos={'absolute'}
+				right={isMobile ? '2rem' : '1rem'}
+				top={isMobile ? '3.5rem' : '2rem'}
+				checked={currentTheme === 'random'}
+				onChange={(e) => {
+					setCurrentTheme(e.target.checked ? 'random' : theme.name);
+					setCurrentThemePlaylist('All');
+				}}
+				color={theme.primaryColor}
+				style={{
+					zIndex: 100,
+				}}
+			/>
+			<Group
+				w={'85%'}
+				justify='center'
+				align='center'
+				pos={'relative'}
+				mt={isMobile ? '10rem' : '7rem'}
+				mb={isMobile ? '6rem' : '1rem'}
+			>
+				<Overlay
+					display={currentTheme === 'random' ? 'flex' : 'none'}
+					blur={5}
 					style={{
-						zIndex: 1,
+						borderRadius: '10px',
+						marginTop: '-15px',
+						marginBottom: '-10px',
+						boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
 					}}
+					pos={'absolute'}
 				/>
-				<Group justify='center' align='center' pos={'relative'} mt={'10rem'}>
-					<Overlay
-						display={currentTheme === 'random' ? 'flex' : 'none'}
-						blur={5}
-						style={{
-							borderRadius: '10px',
-							marginTop: '-15px',
-							marginBottom: '-10px',
-							boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
-						}}
-						pos={'absolute'}
-					/>
-					{allThemes
-						?.filter((a: Theme) =>
-							a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
-						)
-						.map((cardTheme: Theme) => (
-							<Group key={cardTheme.name} pos={'relative'}>
-								{cardTheme.name === currentTheme && (
-									<FiChevronRight
-										style={{
-											position: 'absolute',
-											left: -14,
-											zIndex: 1,
-											fontSize: '2em',
-											fontWeight: 'bold',
-											borderRadius: '50%',
-											backgroundColor: cardTheme.borderColor,
-											color:
-												cardTheme.borderColor === cardTheme.primaryColor
-													? cardTheme.accentColor
-													: cardTheme.primaryColor,
-										}}
-									/>
-								)}
-								<Box
+				{allThemes
+					?.filter((a: Theme) =>
+						a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
+					)
+					.map((cardTheme: Theme) => (
+						<Group key={cardTheme.name} pos={'relative'}>
+							{cardTheme.name === currentTheme && (
+								<FiChevronRight
 									style={{
-										zIndex:
-											currentTheme === 'random' && cardTheme.name === theme.name
-												? 200
-												: 0,
+										position: 'absolute',
+										left: -14,
+										zIndex: 1,
+										fontSize: '2em',
+										fontWeight: 'bold',
+										borderRadius: '50%',
+										backgroundColor: cardTheme.borderColor,
+										color:
+											cardTheme.borderColor === cardTheme.primaryColor
+												? cardTheme.accentColor
+												: cardTheme.primaryColor,
 									}}
-								>
-									<ThemeCard
-										allThemes={allThemes}
-										cardTheme={cardTheme}
-										handleOpen={handleOpen}
-										themePlaylists={themePlaylists}
-									/>
-								</Box>
-							</Group>
-						))}
-				</Group>
-			</Stack>
+								/>
+							)}
+							<Box
+								style={{
+									zIndex:
+										currentTheme === 'random' && cardTheme.name === theme.name ? 200 : 0,
+								}}
+							>
+								<ThemeCard
+									allThemes={allThemes}
+									cardTheme={cardTheme}
+									handleOpen={handleOpen}
+									themePlaylists={themePlaylists}
+								/>
+							</Box>
+						</Group>
+					))}
+			</Group>
 		</Stack>
 	);
 }