Style bugfixes and updates

package-lock.json

@@ -9,10 +9,10 @@
 			"version": "1.0.0",
 			"dependencies": {
 				"@hello-pangea/dnd": "^18.0.1",
-				"@mantine/core": "^8.1.2",
+				"@mantine/core": "^8.1.3",
-				"@mantine/form": "^8.1.2",
+				"@mantine/form": "^8.1.3",
-				"@mantine/hooks": "^8.1.2",
+				"@mantine/hooks": "^8.1.3",
-				"@mantine/notifications": "^8.1.2",
+				"@mantine/notifications": "^8.1.3",
 				"@tanstack/react-query": "^5.81.5",
 				"@tanstack/react-query-devtools": "^5.81.5",
 				"@tanstack/react-query-persist-client": "^5.81.5",
@@ -32,7 +32,7 @@
 				"@vitest/coverage-v8": "^3.2.4",
 				"@vitest/ui": "^3.2.4",
 				"typescript": "^5.8.3",
-				"vite": "^7.0.1",
+				"vite": "^7.0.2",
 				"vite-plugin-dts": "~4.5.4",
 				"vite-tsconfig-paths": "^5.1.4",
 				"vitest": "^3.2.4"
@@ -931,9 +931,9 @@
 			}
 		},
 		"node_modules/@mantine/core": {
-			"version": "8.1.2",
+			"version": "8.1.3",
-			"resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.1.2.tgz",
+			"resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.1.3.tgz",
-			"integrity": "sha512-+maX0a1+fxh6Lvnzi0qb0AZsCnnHlIiTE/hFC+dd3eRfUW2PEKJ5/wTpmrX8IGyxa+NS+fXjZD/cU4Yt9xNjdg==",
+			"integrity": "sha512-2WOPC8GSN3MApet0MccSn6LaXRhcP6SVtZnbuHoqJ/atrfK7kLE66ILr4OXov7JAj1ASJ4Xk0bOXmu5fBExAvQ==",
 			"license": "MIT",
 			"dependencies": {
 				"@floating-ui/react": "^0.26.28",
@@ -944,15 +944,15 @@
 				"type-fest": "^4.27.0"
 			},
 			"peerDependencies": {
-				"@mantine/hooks": "8.1.2",
+				"@mantine/hooks": "8.1.3",
 				"react": "^18.x || ^19.x",
 				"react-dom": "^18.x || ^19.x"
 			}
 		},
 		"node_modules/@mantine/form": {
-			"version": "8.1.2",
+			"version": "8.1.3",
-			"resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.1.2.tgz",
+			"resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.1.3.tgz",
-			"integrity": "sha512-w+PWUQPE3JDiK4ZBWN+WtfixWtt/+KavHjsSjCxIuUodzygdkV/4bWtPKYx7dFQTozWhfMVqxtORhn3no28Qwg==",
+			"integrity": "sha512-OoSVv2cyjKRZ+C4Rw63VsnO3qjKGZHJkd6DSJTVRQHXfDr10hxmC5yXgxGKsxGQ+xFd4ZCdtzPUU2BoWbHfZAA==",
 			"license": "MIT",
 			"dependencies": {
 				"fast-deep-equal": "^3.1.3",
@@ -963,34 +963,34 @@
 			}
 		},
 		"node_modules/@mantine/hooks": {
-			"version": "8.1.2",
+			"version": "8.1.3",
-			"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.1.2.tgz",
+			"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.1.3.tgz",
-			"integrity": "sha512-BrriTsiazqZ2fLuL7UDasNTQJSaoJ7mN2qYVkdsiYI158lxJdUaFWHhd6BDyzK+W6thvBx2D+R/hh1rsWWefdQ==",
+			"integrity": "sha512-yL4SbyYjrkmtIhscswajNz9RL0iO2+V8CMtOi0KISch2rPNvTAJNumFuZaXgj4UHeDc0JQYSmcZ+EW8NGm7xcQ==",
 			"license": "MIT",
 			"peerDependencies": {
 				"react": "^18.x || ^19.x"
 			}
 		},
 		"node_modules/@mantine/notifications": {
-			"version": "8.1.2",
+			"version": "8.1.3",
-			"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.1.2.tgz",
+			"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.1.3.tgz",
-			"integrity": "sha512-9yqMRz9KlU0rXYc2xB+gfKwm6wt5e05B2eCAx0QcSDaxUl2EIfDINqdD+rTTvuWDxiQoN16wF/VJvFHn9wj3Xw==",
+			"integrity": "sha512-Xy6f/l1yLTo77hz8X80sOuY+HW80e1rn8ucygx9TAexK5+XtyriOv26TQ3EJ6Ej5jlchtZRFEUJ4tJGRWjGCNg==",
 			"license": "MIT",
 			"dependencies": {
-				"@mantine/store": "8.1.2",
+				"@mantine/store": "8.1.3",
 				"react-transition-group": "4.4.5"
 			},
 			"peerDependencies": {
-				"@mantine/core": "8.1.2",
+				"@mantine/core": "8.1.3",
-				"@mantine/hooks": "8.1.2",
+				"@mantine/hooks": "8.1.3",
 				"react": "^18.x || ^19.x",
 				"react-dom": "^18.x || ^19.x"
 			}
 		},
 		"node_modules/@mantine/store": {
-			"version": "8.1.2",
+			"version": "8.1.3",
-			"resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.1.2.tgz",
+			"resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.1.3.tgz",
-			"integrity": "sha512-Dt7NJc2+kvtpWkTXR5Mwmwo5zluFM9n6UYaIn4i726PPoABCAvQU4wwkw9GkOEdPNkRcnRdNg5SxWa+QZY/4ag==",
+			"integrity": "sha512-rO72LfSJqSNCwufqJxTWiHMyOR6sR3mqAcnBcw/f5aTvyOYoHZzlm4q4+TL8/2vYGRVsr9YM2Ez6HQ1vk/RR8g==",
 			"license": "MIT",
 			"peerDependencies": {
 				"react": "^18.x || ^19.x"
@@ -4517,9 +4517,9 @@
 			}
 		},
 		"node_modules/vite": {
-			"version": "7.0.1",
+			"version": "7.0.2",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-7.0.1.tgz",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-7.0.2.tgz",
-			"integrity": "sha512-BiKOQoW5HGR30E6JDeNsati6HnSPMVEKbkIWbCiol+xKeu3g5owrjy7kbk/QEMuzCV87dSUTvycYKmlcfGKq3Q==",
+			"integrity": "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {

package.json

@@ -11,10 +11,10 @@
 	},
 	"dependencies": {
 		"@hello-pangea/dnd": "^18.0.1",
-		"@mantine/core": "^8.1.2",
+		"@mantine/core": "^8.1.3",
-		"@mantine/form": "^8.1.2",
+		"@mantine/form": "^8.1.3",
-		"@mantine/hooks": "^8.1.2",
+		"@mantine/hooks": "^8.1.3",
-		"@mantine/notifications": "^8.1.2",
+		"@mantine/notifications": "^8.1.3",
 		"@tanstack/react-query": "^5.81.5",
 		"@tanstack/react-query-devtools": "^5.81.5",
 		"@tanstack/react-query-persist-client": "^5.81.5",
@@ -34,7 +34,7 @@
 		"@vitest/coverage-v8": "^3.2.4",
 		"@vitest/ui": "^3.2.4",
 		"typescript": "^5.8.3",
-		"vite": "^7.0.1",
+		"vite": "^7.0.2",
 		"vite-plugin-dts": "~4.5.4",
 		"vite-tsconfig-paths": "^5.1.4",
 		"vitest": "^3.2.4"

src/pages/homepage/components/Applications/AppItem.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import * as fa6 from 'react-icons/fa6';
 import * as si from 'react-icons/si';
 import * as vsc from 'react-icons/vsc';
-import { stackClasses, textClasses } from 'styles';
+import { boxClasses, textClasses } from 'styles';
 
 function AppItem({ url, icon, name }: { url: string; icon: string; name: string }) {
 	const allIcons: any = { ...fa6, ...vsc, ...si };
@@ -26,7 +26,8 @@ function AppItem({ url, icon, name }: { url: string; icon: string; name: string
 				setTextDecoration('none');
 				setHover(false);
 			}}
-			className={stackClasses.appItemBox}
+			className={boxClasses.appItemBox}
+			h={'64px'}
 		>
 			{hover && (
 				<svg
@@ -51,13 +52,12 @@ function AppItem({ url, icon, name }: { url: string; icon: string; name: string
 				{Icon && <Icon style={{ height: '2rem', width: '2rem' }} />}
 			</Stack>
 			<Stack
+				justify='center'
 				style={{
-					display: 'flex',
-					flexDirection: 'column',
-					justifyContent: 'center',
-					flex: 1,
 					overflow: 'hidden',
+					whiteSpace: 'nowrap',
 					gap: 0,
+					flex: 1,
 				}}
 			>
 				<Text className={textClasses.appName} classNames={textClasses}>

src/pages/homepage/components/Applications/Applications.tsx

@@ -41,20 +41,15 @@ function Applications({ contentType }: { contentType: string[] }) {
 	return (
 		<>
 			{applications.length > 0 && contentType.length > 0 && (
-				<Stack style={{ gap: 0 }}>
+				<Stack gap={0}>
 					<Text className={textClasses.sectionTitle} classNames={textClasses}>
 						Applications
 					</Text>
 					<Stack
 						style={{
 							gap: '.25rem',
-							backgroundSize: 'cover',
-							borderBottom: '0px solid',
 							display: 'grid',
-							gridColumnGap: '5px',
-							gridRowGap: '5px',
 							gridTemplateColumns: `repeat(${appDensity}, 1fr)`,
-							gridTemplateRows: '64px',
 						}}
 					>
 						{applications

src/pages/homepage/components/Bookmarks/BookmarkGroups.tsx

@@ -13,9 +13,7 @@ function BookmarkGroups({
 	return (
 		<Stack
 			style={{
-				marginBottom: 0,
 				display: 'block',
-				lineHeight: '1.5rem',
 				overflow: 'hidden',
 				whiteSpace: 'nowrap',
 			}}

src/pages/homepage/components/Bookmarks/Bookmarks.tsx

@@ -58,18 +58,15 @@ function Bookmarks({ contentType }: { contentType: string[] }) {
 				bookmarksIsFetched &&
 				groups?.length > 0 &&
 				contentType.length > 0 && (
-					<Stack style={{ gap: 0 }}>
+					<Stack gap={0}>
 						<Text className={textClasses.sectionTitle} classNames={textClasses}>
 							Bookmarks
 						</Text>
 						<Stack
 							style={{
 								display: 'grid',
-								flexWrap: 'nowrap',
-								gridColumnGap: '20px',
 								gridRowGap: '0px',
 								gridTemplateColumns: `repeat(${bookmarkDensity}, 1fr)`,
-								gridTemplateRows: 'auto',
 							}}
 						>
 							{groups

src/pages/homepage/components/Header/Header.tsx

@@ -71,20 +71,10 @@ function Header({
 	return (
 		<Stack
 			style={{
-				borderBottom: '0px solid',
-				zIndex: 1,
-				clear: 'both',
-				display: 'flex',
 				flexDirection: isMobile ? 'column' : 'row',
-				gap: 0,
 			}}
 		>
-			<Stack
+			<Stack w={'100%'}>
-				style={{
-					display: 'grid',
-					width: '100%',
-				}}
-			>
 				<Text
 					className={textClasses.greeting}
 					classNames={textClasses}
@@ -99,10 +89,6 @@ function Header({
 			</Stack>
 			<Stack
 				style={{
-					display: 'flex',
-					float: 'right',
-					justifyContent: 'right',
-					width: 'auto',
 					gap: 0,
 					flexDirection: isMobile ? 'row' : 'column',
 				}}
@@ -119,27 +105,20 @@ function Header({
 						position: 'relative',
 						justifyContent: isMobile ? 'right' : 'space-between',
 						width: '100%',
-						gap: 0,
 					}}
 				>
 					<Group
 						align='end'
 						style={{
-							display: 'flex',
 							position: 'absolute',
 							bottom: isMobile ? -32 : 0,
-							right: 16,
+							right: 4,
 							cursor: 'pointer',
 							gap: 0,
 						}}
 						onClick={openWeatherModal}
 					>
-						<Text
+						<Text className={textClasses.dateTime} classNames={textClasses} mr={'.25rem'}>
-							component='h2'
-							className={textClasses.dateTime}
-							classNames={textClasses}
-							mr={'.25rem'}
-						>
 							{current.temperature}°F
 						</Text>
 						<Text
@@ -151,7 +130,7 @@ function Header({
 							{current.highTemp}°F/{current.lowTemp}°F
 						</Text>
 					</Group>
-					<Text component='h2' className={textClasses.dateTime} classNames={textClasses}>
+					<Text className={textClasses.dateTime} classNames={textClasses}>
 						{`${
 							time.getHours() === 0
 								? 12

src/pages/homepage/components/Header/LargeHeader.tsx

@@ -87,13 +87,7 @@ function LargeHeader({
 			>
 				{date}
 			</Text>
-			<Text
+			<Text fz={'6rem'} m={0} className={textClasses.dateTime} classNames={textClasses}>
-				fz={'6rem'}
-				fw={400}
-				m={0}
-				className={textClasses.dateTime}
-				classNames={textClasses}
-			>
 				{`${
 					time.getHours() === 0
 						? 12

src/pages/homepage/components/Search/Search.tsx

@@ -323,7 +323,7 @@ export default function Search({
 
 	return (
 		<>
-			{dropdownOpened && <Overlay pos={'absolute'} h={'100%'} w={'100%'} blur={5} />}
+			{dropdownOpened && <Overlay blur={5} />}
 			<Stack
 				style={{
 					height: '100px',

src/pages/homepage/components/Search/SearchSelectItem.tsx

@@ -33,7 +33,7 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
 				setShowFillButton(false);
 			}}
 		>
-			<Group m={0} p={0} miw={'160px'} style={{ overflow: 'hidden' }}>
+			<Group m={0} p={0} miw={'160px'}>
 				<Text
 					style={{
 						backgroundColor: `${theme.primaryColor}33`,

src/pages/homepage/components/SettingsButton/SettingsButton.tsx

@@ -62,10 +62,11 @@ function SettingsButton() {
 			setWolClients(wolClientData);
 		}
 	}, [wolClientData, wolClientDataIsFetched]);
+
 	return (
 		<Menu
 			classNames={menuClasses}
-			width={isMobile ? '98%' : 'auto'}
+			width={isMobile ? '98%' : undefined}
 			withArrow
 			shadow='md'
 			position='top'
@@ -90,10 +91,7 @@ function SettingsButton() {
 			>
 				<Group p={'1rem'} gap={12}>
 					<Stack
-						justify='center'
-						align='center'
 						style={{
-							display: 'flex',
 							flexDirection: isMobile ? 'row' : 'column',
 							width: isMobile ? '100%' : undefined,
 						}}
@@ -106,7 +104,7 @@ function SettingsButton() {
 						/>
 						<ThemingCard />
 					</Stack>
-					<Stack display={'flex'} align='center'>
+					<Stack>
 						<SettingsCard
 							categories={categories}
 							sectionTitle={'Applications'}
@@ -129,7 +127,7 @@ function SettingsButton() {
 						/>
 					</Stack>
 				</Group>
-				<Group mt={'-.75rem'} w={'100%'} align='center' justify='center'>
+				<Group mt={'-.75rem'} justify='center'>
 					<Button
 						leftSection={<FiSettings />}
 						onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}

src/pages/homepage/components/SettingsButton/SettingsCard.tsx

@@ -31,7 +31,6 @@ function SettingsCard({
 	return (
 		<Stack
 			gap={0}
-			align='center'
 			justify='space-between'
 			className={stackClasses.menuStack}
 			classNames={stackClasses}
@@ -61,7 +60,6 @@ function SettingsCard({
 				<Slider
 					className={sliderClasses.default}
 					classNames={sliderClasses}
-					restrictToMarks
 					value={density}
 					onChange={(value) => setDensity(value)}
 					min={1}

src/pages/homepage/components/SettingsButton/ThemingCard.tsx

@@ -29,6 +29,7 @@ function ThemingCard() {
 		}
 	}, [allThemeData, allThemeDataIsFetched]);
 	const {
+		isMobile,
 		currentTheme,
 		setCurrentTheme,
 		setThemeName,
@@ -40,10 +41,9 @@ function ThemingCard() {
 	return (
 		<Stack
 			gap={0}
-			align='center'
 			className={stackClasses.menuStack}
 			classNames={stackClasses}
-			style={{ aspectRatio: '1/1' }}
+			style={{ aspectRatio: isMobile ? undefined : '1/1' }}
 		>
 			<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
 			<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'>

src/pages/homepage/components/SettingsButton/WakeOnLanCard.tsx

@@ -1,4 +1,5 @@
 import { Button, type ComboboxItem, Menu, Select, Stack } from '@mantine/core';
+import { useCommonHooks } from 'hooks';
 import { FiPower } from 'react-icons/fi';
 import { buttonClasses, selectClasses, stackClasses } from 'styles';
 import type { WolClient } from 'types';
@@ -14,13 +15,13 @@ function WakeOnLan({
 	setSelectedClient: any;
 	handleWakeRequest: () => void;
 }) {
+	const { isMobile } = useCommonHooks();
 	return (
 		<Stack
 			gap={0}
-			align='center'
 			className={stackClasses.menuStack}
 			classNames={stackClasses}
-			style={{ aspectRatio: '1/1' }}
+			style={{ aspectRatio: isMobile ? undefined : '1/1' }}
 		>
 			<Menu.Label>Wake on LAN</Menu.Label>
 			<Button
@@ -31,12 +32,9 @@ function WakeOnLan({
 					handleWakeRequest();
 				}}
 			>
-				<Stack gap={0} align='center'>
+				<FiPower size={32} />
-					<FiPower size={32} />
-				</Stack>
 			</Button>
 			<Select
-				labelProps={{ display: 'none' }}
 				placeholder='Pick a host...'
 				defaultValue={wolClients?.[0]?.hostname}
 				onChange={(_, option: any) => {
@@ -45,6 +43,7 @@ function WakeOnLan({
 						macAddress: option?.macAddress,
 					});
 				}}
+				withCheckIcon={false}
 				data={
 					wolClients
 						?.map((wolClient: WolClient) => {

src/pages/settings/Settings.tsx

@@ -80,7 +80,6 @@ export function Settings() {
 				</Tabs.List>
 				<Tabs.Panel value='personalization'>
 					<ScrollArea
-						h={'100%'}
 						className={scrollAreaClasses.default}
 						classNames={scrollAreaClasses}
 					>
@@ -89,7 +88,6 @@ export function Settings() {
 				</Tabs.Panel>
 				<Tabs.Panel value='messages'>
 					<ScrollArea
-						h={'100%'}
 						className={scrollAreaClasses.default}
 						classNames={scrollAreaClasses}
 					>
@@ -98,7 +96,6 @@ export function Settings() {
 				</Tabs.Panel>
 				<Tabs.Panel value='applications'>
 					<ScrollArea
-						h={'100%'}
 						className={scrollAreaClasses.default}
 						classNames={scrollAreaClasses}
 					>
@@ -107,7 +104,6 @@ export function Settings() {
 				</Tabs.Panel>
 				<Tabs.Panel value='bookmarks'>
 					<ScrollArea
-						h={'100%'}
 						className={scrollAreaClasses.default}
 						classNames={scrollAreaClasses}
 					>
@@ -116,7 +112,6 @@ export function Settings() {
 				</Tabs.Panel>
 				<Tabs.Panel value='themes'>
 					<ScrollArea
-						h={'100%'}
 						className={scrollAreaClasses.default}
 						classNames={scrollAreaClasses}
 					>
@@ -125,7 +120,6 @@ export function Settings() {
 				</Tabs.Panel>
 				<Tabs.Panel value='themePlaylists'>
 					<ScrollArea
-						h={'100%'}
 						className={scrollAreaClasses.default}
 						classNames={scrollAreaClasses}
 					>
@@ -134,7 +128,6 @@ export function Settings() {
 				</Tabs.Panel>
 				<Tabs.Panel value='providers'>
 					<ScrollArea
-						h={'100%'}
 						className={scrollAreaClasses.default}
 						classNames={scrollAreaClasses}
 					>
@@ -143,7 +136,6 @@ export function Settings() {
 				</Tabs.Panel>
 				<Tabs.Panel value='wolClients'>
 					<ScrollArea
-						h={'100%'}
 						className={scrollAreaClasses.default}
 						classNames={scrollAreaClasses}
 					>

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

@@ -118,7 +118,35 @@ const ApplicationSettings = () => {
 		}
 	}, [applicationList]);
 	return (
-		<Stack w={'100%'}>
+		<Stack>
+			<SettingsHeader
+				setDragging={applications.length > 0 ? setDragging : undefined}
+				openModal={openModal}
+				title={'Applications'}
+				tooltip={{
+					title:
+						'Applications are the app buttons that will be displayed on the homepage.',
+					highlightList: [
+						'Applications',
+						'applicationData',
+						'application',
+						'app',
+						'apps',
+						'name',
+						'base url',
+						'url',
+						'icon',
+						'filter',
+					],
+					description:
+						'Applications contain a name, base url, url, icon and filter. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.',
+				}}
+				searchValue={searchValue}
+				setSearchValue={setSearchValue}
+				searchPlaceholder={'Search Applications...'}
+				isLoading={isLoading}
+				setIsLoading={setIsLoading}
+			/>
 			<AddItemModal
 				modalOpened={modalOpened}
 				handleClose={handleClose}
@@ -238,41 +266,8 @@ const ApplicationSettings = () => {
 					</form>
 				}
 			/>
-			<SettingsHeader
-				setDragging={applications.length > 0 ? setDragging : undefined}
-				openModal={openModal}
-				title={'Applications'}
-				tooltip={{
-					title:
-						'Applications are the app buttons that will be displayed on the homepage.',
-					highlightList: [
-						'Applications',
-						'applicationData',
-						'application',
-						'app',
-						'apps',
-						'name',
-						'base url',
-						'url',
-						'icon',
-						'filter',
-					],
-					description:
-						'Applications contain a name, base url, url, icon and filter. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.',
-				}}
-				searchValue={searchValue}
-				setSearchValue={setSearchValue}
-				searchPlaceholder={'Search Applications...'}
-				isLoading={isLoading}
-				setIsLoading={setIsLoading}
-			/>
 			<DragDropContext onDragEnd={onDragEnd}>
-				<Stack
+				<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
-					mt={isMobile ? '10rem' : '6rem'}
-					mb={isMobile ? '6rem' : '1rem'}
-					w={'100%'}
-					align='center'
-				>
 					{applications.length > 0 ? (
 						<Droppable droppableId={'groupList'}>
 							{(provided) => (
@@ -301,12 +296,9 @@ const ApplicationSettings = () => {
 																	style={{
 																		color: 'var(--mantine-color-primary-0)',
 																		zIndex: 1,
-																		alignContent: 'center',
-																		fontSize: '1.5em',
 																		position: 'absolute',
-																		right: 0,
+																		right: 4,
-																		paddingRight: '1rem',
+																		bottom: 0,
-																		height: '100%',
 																	}}
 																>
 																	#{index + 1}

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

@@ -14,7 +14,7 @@ import {
 import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiTrash } from 'react-icons/fi';
+import { FiPower, FiTrash } from 'react-icons/fi';
 import { cardClasses, selectClasses, switchClasses, textInputClasses } from 'styles';
 import type { Application } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';
@@ -79,48 +79,70 @@ function DebouncedApplication({
 					</Stack>
 				}
 			/>
-			<Tooltip
+			<Group
-				c={'var(--mantine-color-primary-0)'}
+				style={{
-				bg={'var(--mantine-color-background-0)'}
+					position: 'absolute',
-				bd={'solid 1px var(--mantine-color-border-0)'}
+					right: '1rem',
-				label={'Delete'}
+					top: '.5rem',
+					width: 'fit-content',
+					backgroundColor:
+						'color-mix(in srgb, var(--mantine-color-background-0), transparent 50%)',
+					padding: '.5rem',
+					borderRadius: '10px',
+					color: 'var(--mantine-color-search-0)',
+					backdropFilter: 'brightness(0.5)',
+				}}
 			>
-				<ActionIcon
+				<Tooltip
-					pos={'absolute'}
+					c={'var(--mantine-color-primary-0)'}
-					top={'1rem'}
+					bg={'var(--mantine-color-background-0)'}
-					right={'1rem'}
+					bd={'solid 1px var(--mantine-color-border-0)'}
-					color='red'
-					onClick={() => {
-						setIsOpen(true);
-						openModal();
-					}}
-				>
-					<FiTrash color='black' />
-				</ActionIcon>
-			</Tooltip>
-			<Tooltip
-				c={'var(--mantine-color-primary-0)'}
-				bg={'var(--mantine-color-background-0)'}
-				bd={'solid 1px var(--mantine-color-border-0)'}
-				label={'Enabled'}
-			>
-				<Switch
-					className={switchClasses.default}
-					classNames={switchClasses}
 					label={'Enabled'}
-					labelPosition='left'
+					refProp='rootRef'
-					pos={'absolute'}
+					styles={{
-					left={'1rem'}
+						tooltip: { marginTop: '-.5rem' },
-					defaultChecked={app.enabled === 1}
+						arrow: { border: 'solid 1px var(--mantine-color-accent-0)' },
-					defaultValue={app.enabled}
-					onChange={(event) => {
-						setUpdate({
-							...app,
-							enabled: event.target.checked ? 1 : 0,
-						});
 					}}
-				/>
+					withArrow
-			</Tooltip>
+				>
+					<Switch
+						className={switchClasses.enable}
+						classNames={switchClasses}
+						defaultChecked={app.enabled === 1}
+						defaultValue={app.enabled}
+						thumbIcon={
+							<FiPower
+								style={{
+									color: app.enabled === 1 ? 'var(--mantine-color-accent-0)' : 'red',
+								}}
+							/>
+						}
+						onChange={(event) => {
+							setUpdate({
+								...app,
+								enabled: event.target.checked ? 1 : 0,
+							});
+						}}
+					/>
+				</Tooltip>
+				|
+				<Tooltip
+					c={'var(--mantine-color-primary-0)'}
+					bg={'var(--mantine-color-background-0)'}
+					bd={'solid 1px var(--mantine-color-border-0)'}
+					label={'Delete'}
+				>
+					<ActionIcon
+						color='red'
+						onClick={() => {
+							setIsOpen(true);
+							openModal();
+						}}
+					>
+						<FiTrash color='black' />
+					</ActionIcon>
+				</Tooltip>
+			</Group>
 			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
 				<TextInput
 					label={'Name'}

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

@@ -203,12 +203,7 @@ const BookmarkSettings = () => {
 			/>
 			{dragging ? (
 				<DragDropContext onDragEnd={onDragEnd}>
-					<Stack
+					<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
-						mt={isMobile ? '10rem' : '6rem'}
-						mb={isMobile ? '6rem' : '1rem'}
-						w={'100%'}
-						align='center'
-					>
 						<Droppable droppableId={'groupList'}>
 							{(provided) => (
 								<Stack
@@ -284,12 +279,7 @@ const BookmarkSettings = () => {
 					</Stack>
 				</DragDropContext>
 			) : (
-				<Stack
+				<Stack mb={isMobile ? '6rem' : '1rem'} align='center'>
-					mt={isMobile ? '10rem' : '6rem'}
-					mb={isMobile ? '6rem' : '1rem'}
-					w={'100%'}
-					align='center'
-				>
 					<Group w={isMobile ? undefined : '80%'} align='start' justify='center'>
 						{groups.length > 0 ? (
 							groups?.map((group: BookmarkGroup) => (
@@ -303,9 +293,7 @@ const BookmarkSettings = () => {
 								/>
 							))
 						) : (
-							<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
+							<NoItemsFound />
-								<NoItemsFound />
-							</Group>
 						)}
 					</Group>
 				</Stack>

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

@@ -80,7 +80,7 @@ const MessageSettings = () => {
 				handleClose={handleClose}
 				title={'Add a new message'}
 				body={
-					<Stack gap={0} w={'100%'} align='center'>
+					<Stack gap={0} align='center'>
 						<TextInput
 							label='Message text'
 							autoFocus={!isMobile}
@@ -120,12 +120,7 @@ const MessageSettings = () => {
 					</Stack>
 				}
 			/>
-			<Stack
+			<Stack mb={isMobile ? '6rem' : undefined} align='center'>
-				mt={isMobile ? '10rem' : '6rem'}
-				mb={isMobile ? '6rem' : '1rem'}
-				w={'100%'}
-				align='center'
-			>
 				<Grid w={'75%'}>
 					{messages.length > 0 ? (
 						messages?.map((message: Message) => (
@@ -138,11 +133,7 @@ const MessageSettings = () => {
 							</GridCol>
 						))
 					) : (
-						<GridCol
+						<GridCol style={{ display: 'flex', justifyContent: 'center' }}>
-							w={'100%'}
-							span={12}
-							style={{ display: 'flex', justifyContent: 'center' }}
-						>
 							<NoItemsFound />
 						</GridCol>
 					)}

src/pages/settings/components/Personalization/Personalization.tsx

@@ -66,11 +66,8 @@ const PersonalizationSettings = () => {
 				isLoading={false}
 				setIsLoading={() => {}}
 			/>
-			<Stack
+			<Stack align='center'>
-				align='center'
+				<Grid w={'75%'}>
-				style={{ marginTop: '6rem', marginBottom: '1rem', width: '100%' }}
-			>
-				<Grid w={'75%'} pos={'relative'}>
 					{personalIsFetching && (
 						<Overlay
 							style={{

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

@@ -152,12 +152,7 @@ const SearchProviderSettings = () => {
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>
-			<Stack
+			<Stack mb={isMobile ? '6rem' : '1rem'} w={'100%'} align='center'>
-				mt={isMobile ? '10rem' : '6rem'}
-				mb={isMobile ? '6rem' : '1rem'}
-				w={'100%'}
-				align='center'
-			>
 				<Grid columns={18} w={'75%'}>
 					{providers.length > 0 ? (
 						providers?.map((provider: Provider) => (

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

@@ -58,10 +58,6 @@ function SettingsHeader({
 				paddingTop: '1.5rem',
 				paddingBottom: '1.5rem',
 				paddingLeft: '1rem',
-				height: 'min-content',
-				width: '100%',
-				marginTop: 0,
-				position: 'absolute',
 			}}
 		>
 			<Group w={isMobile ? undefined : '100%'}>

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

@@ -1,7 +1,7 @@
 import { Box, Stack, Text } from '@mantine/core';
 import { useState } from 'react';
 import { FiCheck } from 'react-icons/fi';
-import { stackClasses } from 'styles';
+import { boxClasses, textClasses } from 'styles';
 import type { Theme } from 'types';
 
 function ExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
@@ -12,50 +12,33 @@ function ExampleApp({ selectedTheme }: { selectedTheme: Theme }) {
 			component='a'
 			onMouseOver={() => setTextDecoration('underline')}
 			onMouseOut={() => setTextDecoration('none')}
-			className={stackClasses.appItemBox}
+			className={boxClasses.appItemBox}
+			h={'64px'}
 		>
 			<Stack
 				style={{
-					height: '64px',
 					marginRight: '1rem',
 					marginLeft: '1rem',
-					paddingTop: '1rem',
 				}}
+				justify='center'
 			>
-				<FiCheck style={{ color: selectedTheme?.primaryColor }} height={32} width={32} />
+				<FiCheck style={{ color: selectedTheme?.primaryColor }} />
 			</Stack>
 			<Stack
 				style={{
-					display: 'flex',
-					flexDirection: 'column',
 					justifyContent: 'center',
-					flex: 1,
 					overflow: 'hidden',
+					textOverflow: 'ellipsis',
 					gap: 0,
 				}}
 			>
-				<Text
+				<Text className={textClasses.appName} classNames={textClasses}>
-					style={{
-						fontWeight: 400,
-						fontSize: '.625rem',
-						fontStyle: 'normal',
-						color: selectedTheme?.primaryColor,
-						fontFamily:
-							'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
-						margin: 0,
-					}}
-				>
 					{'Example App'}
 				</Text>
 				<Text
+					className={textClasses.appUrl}
+					classNames={textClasses}
 					style={{
-						fontWeight: 400,
-						fontSize: '.625rem',
-						fontStyle: 'italic',
-						color: selectedTheme?.accentColor,
-						fontFamily:
-							'-apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto, sans-serif !important',
-						margin: 0,
 						textDecoration: textDecoration,
 					}}
 				>

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

@@ -141,7 +141,6 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 						<Text
 							style={{
 								fontSize: '.875rem',
-								fontWeight: 400,
 								height: '10px',
 								width: 'auto',
 								color: selectedTheme?.accentColor,
@@ -188,7 +187,6 @@ export default function ThemeModalContent({ selectedTheme }: { selectedTheme: Th
 						<Text
 							style={{
 								fontSize: '.875rem',
-								fontWeight: 400,
 								height: '10px',
 								width: 'auto',
 								color: selectedTheme?.accentColor,

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

@@ -108,25 +108,21 @@ function ThemePlaylistCard({
 			)}
 			{cardPlaylist.default === 0 && (
 				<ActionIcon
+					color='red'
 					style={{
 						position: 'absolute',
 						top: -10,
 						right: 40,
 						paddingRight: '.25rem',
 						paddingLeft: '.25rem',
-						backgroundColor: 'var(--mantine-color-border-0)',
 						borderRadius: '4px',
-						color:
-							theme.borderColor === theme.primaryColor
-								? 'var(--mantine-color-accent-0)'
-								: 'var(--mantine-color-red-6)',
 						zIndex: 3,
 					}}
 					onClick={() => {
 						openModal();
 					}}
 				>
-					<FiTrash />
+					<FiTrash color='black' />
 				</ActionIcon>
 			)}
 			<Button

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

@@ -81,31 +81,26 @@ function ThemePlaylists() {
 				allThemes={allThemeData}
 				createPlaylist={mutateAsync}
 			/>
-			<Stack h={'100%'} w={'100%'}>
+			<SettingsHeader
-				<SettingsHeader
+				setDragging={undefined}
-					setDragging={undefined}
+				openModal={open}
-					openModal={open}
+				title={'Theme Playlists'}
-					title={'Theme Playlists'}
+				tooltip={{
-					tooltip={{
+					title: 'Theme playlists can be created here and applied to the homepage.',
-						title: 'Theme playlists can be created here and applied to the homepage.',
+					highlightList: ['theme', 'themes', 'homepage', 'playlist'],
-						highlightList: ['theme', 'themes', 'homepage', 'playlist'],
+					description:
-						description:
+						'Playlists are lists of themes. They can be enabled either here or in the settings button on the homepage. When a playlist is enabled, it will shuffle the included themes on the homepage. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
-							'Playlists are lists of themes. They can be enabled either here or in the settings button on the homepage. When a playlist is enabled, it will shuffle the included themes on the homepage. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.',
+				}}
-					}}
+				searchValue={searchValue}
-					searchValue={searchValue}
+				setSearchValue={setSearchValue}
-					setSearchValue={setSearchValue}
+				searchPlaceholder={'Search Theme Playlists...'}
-					searchPlaceholder={'Search Theme Playlists...'}
+				isLoading={isLoading}
-					isLoading={isLoading}
+				setIsLoading={setIsLoading}
-					setIsLoading={setIsLoading}
+			/>
-				/>
+			<Stack>
 				{allThemeData && (
 					<>
-						<Group
+						<Group justify='center' align='center' pos={'relative'}>
-							mt={isMobile ? '10rem' : '6rem'}
-							justify='center'
-							align='center'
-							pos={'relative'}
-						>
 							<Text
 								p={0}
 								className={textClasses.settingsSubTitle}

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

@@ -136,7 +136,7 @@ function ThemesSettings() {
 	}, [allThemes]);
 
 	return (
-		<Stack w={'100%'} align='center'>
+		<Stack>
 			<ThemeModal
 				opened={themeModalOpened}
 				handleClose={handleClose}
@@ -170,80 +170,81 @@ function ThemesSettings() {
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>
-			<Group
+			<Stack mt={'1rem'} align='center'>
-				w={'85%'}
+				<Group
-				justify='center'
+					w={'85%'}
-				align='center'
+					justify='center'
-				pos={'relative'}
+					pos={'relative'}
-				display={'flex'}
+					mb={isMobile ? '10rem' : '7.5rem'}
-				mt={isMobile ? '11.5rem' : '7rem'}
+				>
-				mb={isMobile ? '100%' : '6.5rem'}
+					<Overlay
-			>
+						display={
-				<Overlay
+							currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'
-					display={currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'}
+						}
-					blur={5}
+						blur={5}
-					style={{
+						style={{
-						zIndex: 190,
+							zIndex: 190,
-						borderRadius: '10px',
+							borderRadius: '10px',
-						marginTop: '-1rem',
+							marginTop: '-1rem',
-						marginBottom: '-1.25rem',
+							marginBottom: '-1rem',
-						boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
+							boxShadow: '0px 0px 10px 3px rgba(0, 0, 0, .8)',
-					}}
+						}}
-					pos={'absolute'}
+						pos={'absolute'}
-				/>
+					/>
-				{allThemes.length > 0 ? (
+					{allThemes.length > 0 ? (
-					allThemes.map((cardTheme: Theme) => (
+						allThemes.map((cardTheme: Theme) => (
-						<Group key={cardTheme.name} pos={'relative'}>
+							<Group key={cardTheme.name} pos={'relative'}>
-							{cardTheme.name === currentTheme && (
+								{cardTheme.name === currentTheme && (
-								<FiChevronRight
+									<FiChevronRight
+										style={{
+											position: 'absolute',
+											left: -14,
+											zIndex: 1,
+											fontSize: '2rem',
+											fontWeight: 'bold',
+											borderRadius: '50%',
+											backgroundColor: cardTheme.borderColor,
+											color:
+												cardTheme.borderColor === cardTheme.primaryColor
+													? cardTheme.accentColor
+													: cardTheme.primaryColor,
+										}}
+									/>
+								)}
+								<Box
 									style={{
-										position: 'absolute',
+										zIndex:
-										left: -14,
+											currentTheme === 'random' &&
-										zIndex: 1,
+											(themePlaylists
-										fontSize: '2rem',
+												.filter(
-										fontWeight: 'bold',
+													(t: ThemePlaylist) =>
-										borderRadius: '50%',
+														t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
-										backgroundColor: cardTheme.borderColor,
+												)[0]
-										color:
+												?.themeList.includes(`${cardTheme.id}`) ||
-											cardTheme.borderColor === cardTheme.primaryColor
+												cardTheme.name === theme.name)
-												? cardTheme.accentColor
+												? 195
-												: cardTheme.primaryColor,
+												: 0,
 									}}
-								/>
+								>
-							)}
+									<ThemeCard
-							<Box
+										allThemes={allThemeData}
-								style={{
+										cardTheme={cardTheme}
-									zIndex:
+										handleOpen={handleOpen}
-										currentTheme === 'random' &&
+										themePlaylists={themePlaylists}
-										(themePlaylists
+									/>
-											.filter(
+								</Box>
-												(t: ThemePlaylist) =>
+							</Group>
-													t.name.toLowerCase() === currentThemePlaylist.toLowerCase(),
+						))
-											)[0]
+					) : (
-											?.themeList.includes(`${cardTheme.id}`) ||
+						<Group
-											cardTheme.name === theme.name)
+							w={'100%'}
-											? 195
+							style={{ zIndex: 1000, display: 'flex', justifyContent: 'center' }}
-											: 0,
+						>
-								}}
+							<NoItemsFound />
-							>
-								<ThemeCard
-									allThemes={allThemeData}
-									cardTheme={cardTheme}
-									handleOpen={handleOpen}
-									themePlaylists={themePlaylists}
-								/>
-							</Box>
 						</Group>
-					))
+					)}
-				) : (
+				</Group>
-					<Group
+			</Stack>
-						w={'100%'}
-						style={{ zIndex: 1000, display: 'flex', justifyContent: 'center' }}
-					>
-						<NoItemsFound />
-					</Group>
-				)}
-			</Group>
 			<Group
 				style={{
 					backdropFilter: 'blur(5px) brightness(.75)',
@@ -271,7 +272,7 @@ function ThemesSettings() {
 						w={isMobile ? undefined : '100%'}
 						justify='center'
 					>
-						<Group align='center' justify='center'>
+						<Group>
 							<Text
 								style={{
 									color: 'var(--mantine-color-accent-0)',

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

@@ -127,12 +127,7 @@ const WolClientSettings = () => {
 				isLoading={isLoading}
 				setIsLoading={setIsLoading}
 			/>
-			<Stack
+			<Stack mb={isMobile ? '6rem' : '1rem'} w={'100%'} align='center'>
-				mt={isMobile ? '10rem' : '6rem'}
-				mb={isMobile ? '6rem' : '1rem'}
-				w={'100%'}
-				align='center'
-			>
 				<Grid columns={18} w={'75%'}>
 					{wolClients.length > 0 ? (
 						wolClients?.map((client: WolClient) => (

src/styles/Box.module.css

@@ -13,15 +13,14 @@
 
 .appItemBox {
 	display: flex;
-	flex-direction: row;
+	flex: 1;
-	flex-wrap: wrap;
-	height: 128px;
 	margin: 0;
 	backdrop-filter: blur(5px) brightness(1.2);
 	border-radius: 6px;
 	font-size: 2rem;
-	font-weight: 400;
 	text-transform: uppercase;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .appItemBox rect {

src/styles/ScrollArea.module.css

@@ -1,4 +1,5 @@
 .default {
+    height: 100%;
     .thumb {
         background-color: var(--mantine-color-primary-0);
         z-index: 1000;

src/styles/Stack.module.css

@@ -12,45 +12,11 @@
 	height: auto;
 }
 
-.appItemBox {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	height: 64px;
-	margin: 0;
-	backdrop-filter: blur(5px) brightness(1.2);
-	border-radius: 6px;
-	font-size: 1rem;
-	font-weight: 400;
-	text-transform: uppercase;
-}
-
-.appItemBox rect {
-	border-radius: 6px;
-	stroke-dasharray: 260;
-	stroke-width: 10px;
-	fill: transparent;
-	stroke: var(--mantine-color-search-0);
-	animation: svgAnimation 1.5s linear infinite;
-}
-
-.appItemBox rect::after {
-	filter: blur(5px);
-}
-
-@keyframes svgAnimation {
-	from {
-		stroke-dashoffset: 0;
-	}
-	to {
-		stroke-dashoffset: 1000;
-	}
-}
-
 .menuStack {
 	height: 150px;
 	background-color: var(--mantine-color-search-0);
 	border-radius: 10px;
+	align-items: center !important;
 }
 
 .fadeAway {

src/styles/Text.module.css

@@ -6,7 +6,6 @@
 		padding: 0;
 		text-align: left;
 		font-size: 3.5rem;
-		font-weight: 400;
 		width: max-content;
 		color: var(--mantine-color-accent-0);
 	}
@@ -49,7 +48,6 @@
 
 .appName {
 	&.root {
-		font-weight: 400;
 		font-size: .6875rem;
 		font-style: normal;
 		color: var(--mantine-color-primary-0);
@@ -61,7 +59,6 @@
 .appUrl {
 	&.root {
 		font-size: .6875rem;
-		font-weight: 400;
 		font-style: italic;
 		text-transform: uppercase;
 		color: var(--mantine-color-accent-0);
@@ -72,15 +69,11 @@
 .bookmarkCategory {
 	&.root {
 		font-size: .875rem;
-		font-weight: 400;
 		color: var(--mantine-color-accent-0);
 		text-transform: uppercase;
-		margin-top: 1.25rem;
+		margin-top: 1rem;
-		margin-bottom: .625rem;
 		text-overflow: ellipsis;
 		overflow: hidden;
-		width: 100%;
-		height: fit-content;
 	}
 }
 
@@ -92,7 +85,6 @@
 		color: var(--mantine-color-primary-0);
 		text-overflow: ellipsis;
 		overflow: hidden;
-		width: 100%;
 		&:hover {
 			text-decoration: underline;
 		}