style updates

src/pages/homepage/components/SettingsButton.tsx

@@ -13,7 +13,13 @@ import { useEffect, useState } from 'react';
 import { FaDice } from 'react-icons/fa';
 import { FiMenu, FiMonitor, FiSettings, FiShuffle } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
-import { actionIconClasses, buttonClasses, menuClasses, selectClasses } from 'styles';
+import {
+	actionIconClasses,
+	buttonClasses,
+	menuClasses,
+	selectClasses,
+	stackClasses,
+} from 'styles';
 
 function SettingsButton() {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
@@ -70,16 +76,12 @@ function SettingsButton() {
 							}}
 						/>
 					</Tooltip>
-					<Group w={'100%'} align='center' justify='center'>
+					<Group w={'100%'} justify='center'>
 						<Stack
 							gap={0}
 							align='center'
-							style={{
+							className={stackClasses.menuStack}
-								width: '40%',
+							classNames={stackClasses}
-								height: '150px',
-								backgroundColor: `${theme.primaryColor}22`,
-								borderRadius: '10px',
-							}}
 						>
 							<Menu.Label>Wake on LAN</Menu.Label>
 							<Button
@@ -89,21 +91,15 @@ function SettingsButton() {
 							>
 								<Stack gap={0} align='center'>
 									<FiMonitor size={40} />
-									<Text m={0} p={0}>
+									<Text>Dakota</Text>
-										Dakota
-									</Text>
 								</Stack>
 							</Button>
 						</Stack>
 						<Stack
 							gap={0}
 							align='center'
-							style={{
+							className={stackClasses.menuStack}
-								width: '40%',
+							classNames={stackClasses}
-								height: '150px',
-								backgroundColor: `${theme.primaryColor}22`,
-								borderRadius: '10px',
-							}}
 						>
 							<Menu.Label pb={'1rem'}>Themes</Menu.Label>
 							<Group pb={'1rem'}>
@@ -157,19 +153,15 @@ function SettingsButton() {
 					/>
 					<Stack
 						gap={0}
-						justify='center'
 						align='center'
-						style={{
+						w={'85%'}
-							width: '85%',
+						h={'100px'}
-							height: '110px',
+						className={stackClasses.menuStack}
-							backgroundColor: `${theme.primaryColor}22`,
+						classNames={stackClasses}
-							borderRadius: '10px',
-						}}
 					>
 						<Menu.Label>Filters</Menu.Label>
-						<Group justify='center' w={'100%'}>
+						<Group>
 							<MultiSelect
-								w={'45%'}
 								label='Apps'
 								data={categories ?? []}
 								placeholder={
@@ -187,7 +179,6 @@ function SettingsButton() {
 								comboboxProps={{ withinPortal: false }}
 							/>
 							<MultiSelect
-								w={'45%'}
 								label='Bookmarks'
 								data={categories ?? []}
 								placeholder={

src/styles/Stack.module.css

@@ -64,3 +64,10 @@
 	text-align: center;
 	display: flex;
 }
+
+.menuStack {
+	width: 40%;
+	height: 150px;
+	background-color: hwb(from var(--color-text-pri) h w b / 0.15);
+	border-radius: 10px;
+}