Updates to styles; misc bugfixes

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

@@ -1,4 +1,4 @@
-import { Button, Group, Menu, Stack } from '@mantine/core';
+import { Box, Button, Group, Menu, Overlay, Stack } from '@mantine/core';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiMenu, FiSettings } from 'react-icons/fi';
@@ -31,12 +31,16 @@ function SettingsButton() {
 		setAppSort,
 		appDensity,
 		setAppDensity,
+		appScale,
+		setAppScale,
 		bookmarkSort,
 		setBookmarkSort,
 		bookmarkFilter,
 		setBookmarkFilter,
 		bookmarkDensity,
 		setBookmarkDensity,
+		bookmarkScale,
+		setBookmarkScale,
 	} = useCommonHooks();
 
 	const handleWakeRequest = () => {
@@ -96,12 +100,20 @@ function SettingsButton() {
 							width: isMobile ? '100%' : undefined,
 						}}
 					>
-						<WakeOnLan
-							wolClients={wolClients}
-							selectedClient={selectedClient}
-							setSelectedClient={setSelectedClient}
-							handleWakeRequest={handleWakeRequest}
-						/>
+						<Box
+							pos={'relative'}
+							style={{ filter: wolClients.length === 0 ? 'grayscale(1)' : undefined }}
+						>
+							{wolClients.length === 0 && (
+								<Overlay opacity={0.75} style={{ borderRadius: '10px' }} />
+							)}
+							<WakeOnLan
+								wolClients={wolClients}
+								selectedClient={selectedClient}
+								setSelectedClient={setSelectedClient}
+								handleWakeRequest={handleWakeRequest}
+							/>
+						</Box>
 						<ThemingCard />
 					</Stack>
 					<Stack>
@@ -114,6 +126,8 @@ function SettingsButton() {
 							setSort={setAppSort}
 							density={appDensity}
 							setDensity={setAppDensity}
+							scale={appScale}
+							setScale={setAppScale}
 						/>
 						<SettingsCard
 							categories={categories}
@@ -124,6 +138,8 @@ function SettingsButton() {
 							setSort={setBookmarkSort}
 							density={bookmarkDensity}
 							setDensity={setBookmarkDensity}
+							scale={bookmarkScale}
+							setScale={setBookmarkScale}
 						/>
 					</Stack>
 				</Group>

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

@@ -18,6 +18,8 @@ function SettingsCard({
 	setSort,
 	density,
 	setDensity,
+	scale,
+	setScale,
 }: {
 	categories: ComboboxItem[];
 	sectionTitle: string;
@@ -27,6 +29,8 @@ function SettingsCard({
 	setSort: any;
 	density: any;
 	setDensity: any;
+	scale: any;
+	setScale: any;
 }) {
 	return (
 		<Stack
@@ -53,19 +57,41 @@ function SettingsCard({
 			>
 				{sectionTitle}
 			</Text>
-			<Text fz={'.875rem'} mt={'1rem'}>
-				Density
-			</Text>
-			<Stack m={0} p={0} gap={0} w={'90%'}>
-				<Slider
-					className={sliderClasses.default}
-					classNames={sliderClasses}
-					value={density}
-					onChange={(value) => setDensity(value)}
-					min={1}
-					max={8}
-				/>
-			</Stack>
+			<Group w={'100%'} justify='center'>
+				<Stack w={scale !== undefined ? '60%' : '90%'} align='center'>
+					<Text fz={'.875rem'} mt={'1rem'}>
+						Density
+					</Text>
+					<Slider
+						className={sliderClasses.default}
+						classNames={sliderClasses}
+						value={density}
+						onChange={(value) => setDensity(value)}
+						min={1}
+						max={8}
+						marks={[{ value: 6, label: 'Default' }]}
+						onDoubleClick={() => setDensity(6)}
+					/>
+				</Stack>
+				{scale !== undefined && (
+					<Stack w={'33%'} align='center'>
+						<Text fz={'.875rem'} mt={'1rem'}>
+							Scale
+						</Text>
+						<Slider
+							className={sliderClasses.default}
+							classNames={sliderClasses}
+							value={scale}
+							onChange={(value) => setScale(value)}
+							step={0.1}
+							min={0.5}
+							max={2}
+							marks={[{ value: 1, label: 'Default' }]}
+							onDoubleClick={() => setScale(1)}
+						/>
+					</Stack>
+				)}
+			</Group>
 			<Group justify='center' mb={'.25rem'}>
 				<MultiSelect
 					label='Filter'

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

@@ -27,7 +27,7 @@ function WakeOnLan({
 			<Button
 				classNames={buttonClasses}
 				className={buttonClasses.wakeButton}
-				disabled={!wolClients?.length || selectedClient === null}
+				disabled={!wolClients?.length || selectedClient?.macAddress === undefined}
 				onClick={() => {
 					handleWakeRequest();
 				}}