Style bugfixes and updates

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
-				style={{
-					display: 'grid',
-					width: '100%',
-				}}
-			>
+			<Stack w={'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
-							component='h2'
-							className={textClasses.dateTime}
-							classNames={textClasses}
-							mr={'.25rem'}
-						>
+						<Text 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
-				fz={'6rem'}
-				fw={400}
-				m={0}
-				className={textClasses.dateTime}
-				classNames={textClasses}
-			>
+			<Text fz={'6rem'} 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} />
-				</Stack>
+				<FiPower size={32} />
 			</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) => {