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>