Style changes

src/pages/settings/Settings.tsx

@@ -26,8 +26,8 @@ export function Settings() {
 	const navigate = useNavigate();
 	const { tabValue } = useParams();
 	return (
-		<Stack h={'100%'}>
-			<Group gap={0} pl={'2rem'}>
+		<Stack h={'100%'} gap={0}>
+			<Group gap={0} pb={'1rem'} pl={'2rem'}>
 				<ActionIcon
 					className={actionIconClasses.backButton}
 					classNames={actionIconClasses}
@@ -47,7 +47,7 @@ export function Settings() {
 				classNames={tabClasses}
 				keepMounted={false}
 				value={tabValue}
-				h={'100%'}
+				h={isMobile ? undefined : '100%'}
 				onChange={(value) =>
 					navigate(`/${import.meta.env.VITE_BASE_URL}/settings/${value}`)
 				}

src/pages/settings/components/Applications/Applications.tsx

@@ -240,7 +240,12 @@ const ApplicationSettings = () => {
 			/>
 			{dragging ? (
 				<DragDropContext onDragEnd={onDragEnd}>
-					<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
+					<Stack
+						mt={isMobile ? '9rem' : '6rem'}
+						mb={isMobile ? '6rem' : '1rem'}
+						w={'100%'}
+						align='center'
+					>
 						<Droppable droppableId={'groupList'}>
 							{(provided) => (
 								<Stack
@@ -316,7 +321,12 @@ const ApplicationSettings = () => {
 					</Stack>
 				</DragDropContext>
 			) : (
-				<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
+				<Stack
+					mt={isMobile ? '9rem' : '6rem'}
+					mb={isMobile ? '6rem' : '1rem'}
+					w={'100%'}
+					align='center'
+				>
 					<Grid columns={18} w={'75%'}>
 						{applicationData?.map((application: Application) => (
 							<GridCol span={6} key={application.id}>
@@ -340,7 +350,7 @@ const ApplicationSettings = () => {
 											/>
 										</Box>
 									</Popover.Target>
-									<Popover.Dropdown>
+									<Popover.Dropdown w={isMobile ? '100%' : undefined}>
 										<DebouncedApplication
 											application={application}
 											setIsOpen={setIsOpen}

src/pages/settings/components/Bookmarks/Bookmarks.tsx

@@ -182,7 +182,12 @@ const BookmarkSettings = () => {
 			/>
 			{dragging ? (
 				<DragDropContext onDragEnd={onDragEnd}>
-					<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
+					<Stack
+						mt={isMobile ? '9rem' : '6rem'}
+						mb={isMobile ? '6rem' : '1rem'}
+						w={'100%'}
+						align='center'
+					>
 						<Droppable droppableId={'groupList'}>
 							{(provided) => (
 								<Stack
@@ -258,8 +263,13 @@ const BookmarkSettings = () => {
 					</Stack>
 				</DragDropContext>
 			) : (
-				<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
-					<Group w={isMobile ? undefined : '75%'} align='start'>
+				<Stack
+					mt={isMobile ? '9rem' : '6rem'}
+					mb={isMobile ? '6rem' : '1rem'}
+					w={'100%'}
+					align='center'
+				>
+					<Group w={isMobile ? undefined : '75%'} align='start' justify='center'>
 						{groups?.map((group: BookmarkGroup) => (
 							<DebouncedGroupSettingsItem
 								key={group.id}

src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx

@@ -234,6 +234,7 @@ function DebouncedGroupSettingsItem({
 															</Box>
 														</Popover.Target>
 														<Popover.Dropdown
+															w={isMobile ? '100%' : undefined}
 															style={{
 																'--color-text-pri': theme.primaryColor,
 																'--color-text-acc': theme.accentColor,
@@ -290,6 +291,7 @@ function DebouncedGroupSettingsItem({
 							</Button>
 						</Popover.Target>
 						<Popover.Dropdown
+							w={isMobile ? '100%' : undefined}
 							style={{
 								'--color-text-pri': theme.primaryColor,
 								'--color-text-acc': theme.accentColor,

src/pages/settings/components/Messages/Messages.tsx

@@ -107,7 +107,12 @@ const MessageSettings = () => {
 					</Stack>
 				}
 			/>
-			<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
+			<Stack
+				mt={isMobile ? '9rem' : '6rem'}
+				mb={isMobile ? '6rem' : '1rem'}
+				w={'100%'}
+				align='center'
+			>
 				<Grid w={'75%'}>
 					{messages?.map((message: Message) => (
 						<GridCol span={isMobile ? 12 : 6} key={message.id}>

src/pages/settings/components/Search/SearchProviders.tsx

@@ -148,7 +148,12 @@ const SearchProviderSettings = () => {
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
 			/>
-			<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
+			<Stack
+				mt={isMobile ? '9rem' : '6rem'}
+				mb={isMobile ? '6rem' : '1rem'}
+				w={'100%'}
+				align='center'
+			>
 				<Grid columns={18} w={'75%'}>
 					{providerData?.map((provider: Provider) => (
 						<GridCol span={isMobile ? 18 : 6} key={provider.id}>
@@ -167,7 +172,7 @@ const SearchProviderSettings = () => {
 										<SearchProviderSettingsItem provider={provider} />
 									</Box>
 								</Popover.Target>
-								<Popover.Dropdown>
+								<Popover.Dropdown w={isMobile ? '100%' : undefined}>
 									<DebouncedSearchProvider
 										searchProvider={provider}
 										setIsOpen={setIsOpen}

src/pages/settings/components/Shared/SettingsHeader.tsx

@@ -32,10 +32,14 @@ function SettingsHeader({
 			mt={0}
 			justify='center'
 			pos={'absolute'}
-			style={{ backdropFilter: 'blur(10px) brightness(.5)', zIndex: 1 }}
+			style={{ backdropFilter: 'blur(10px) brightness(.5)', zIndex: 99 }}
 		>
 			<Group w={isMobile ? undefined : '100%'}>
-				<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
+				<Text
+					miw={isMobile ? 100 : undefined}
+					className={textClasses.settingsSubTitle}
+					classNames={textClasses}
+				>
 					{title}
 				</Text>
 				<Popover withArrow withOverlay withinPortal={true}>
@@ -51,7 +55,7 @@ function SettingsHeader({
 						style={{
 							color: theme.primaryColor,
 							backgroundColor: theme.backgroundColor,
-							width: '500px',
+							width: isMobile ? '95%' : '500px',
 						}}
 					>
 						<Stack>
@@ -108,7 +112,7 @@ function SettingsHeader({
 					labelPosition='left'
 					pos={'absolute'}
 					right={isMobile ? '2rem' : '1rem'}
-					top={isMobile ? '10rem' : undefined}
+					top={isMobile ? '3.5rem' : undefined}
 					onChange={(e) => {
 						setDragging(e.target.checked);
 					}}

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

@@ -21,7 +21,8 @@ function ThemePlaylists() {
 	const { mutateAsync } = useMutationAPI();
 	const [opened, { open, close }] = useDisclosure(false);
 	const [selectedPlaylist, setSelectedPlaylist] = useState<any>({});
-	const { currentThemePlaylist, setCurrentThemePlaylist, theme } = useCommonHooks();
+	const { currentThemePlaylist, setCurrentThemePlaylist, theme, isMobile } =
+		useCommonHooks();
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
 
@@ -118,7 +119,12 @@ function ThemePlaylists() {
 						User Made
 					</Text>
 				</Group>
-				<Group justify='center' align='center' pos={'relative'}>
+				<Group
+					justify='center'
+					align='center'
+					pos={'relative'}
+					mb={isMobile ? '6rem' : undefined}
+				>
 					{themePlaylists
 						?.filter((playlist: ThemePlaylist) => playlist.default === 0)
 						?.filter((a: ThemePlaylist) =>

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>
 	);
 }

src/pages/settings/components/WoL/WolClients.tsx

@@ -131,7 +131,12 @@ const WolClientSettings = () => {
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
 			/>
-			<Stack mt={'6rem'} mb={'1rem'} w={'100%'} align='center'>
+			<Stack
+				mt={isMobile ? '9rem' : '6rem'}
+				mb={isMobile ? '6rem' : '1rem'}
+				w={'100%'}
+				align='center'
+			>
 				<Grid columns={18} w={'75%'}>
 					{wolClients?.map((client: WolClient) => (
 						<GridCol w={'100%'} span={isMobile ? 18 : 6} key={client.id}>
@@ -151,7 +156,7 @@ const WolClientSettings = () => {
 										<WolClientSettingsItem client={client} />
 									</Group>
 								</Popover.Target>
-								<Popover.Dropdown>
+								<Popover.Dropdown w={isMobile ? '100%' : undefined}>
 									<DebouncedWolClient wolClient={client} setIsOpen={setIsOpen} />
 								</Popover.Dropdown>
 							</Popover>

src/styles/Tabs.module.css

@@ -2,6 +2,7 @@
 	@media (max-width: 600px) {
 		.panel {
 			padding-left: 0 !important;
+			height: 100%;
 		}
 	}
 	.panel {
@@ -22,7 +23,6 @@
 		border-top: solid 2px var(--color-text-acc);
 		padding-left: 2rem;
 		padding-top: 2rem;
-		height: 100%;
 	}
 	.list::before {
 		border-color: var(--color-text-acc);

src/styles/Text.module.css

@@ -98,8 +98,12 @@
 	&.root {
 		font-size: 32px;
 		font-weight: bold;
-		padding-top: 1.5rem;
-		color: var(--color-text-pri);
+		margin-top: 1.5rem;
+		color: var(--color-text-acc);
+		background-color: var(--color-search-background);
+		border-radius: 12px;
+		padding-left: 12px;
+		padding-right: 12px;
 	}
 }