Refactor

src/pages/homepage/components/SettingsButton.tsx

@@ -1,18 +1,14 @@
 import { Button, Menu, MultiSelect, NavLink } from '@mantine/core';
+import { useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiMenu, FiMonitor } from 'react-icons/fi';
-import { useQueryAPI } from '../../../hooks/useAPI';
-import button from '../../../styles/Button.module.css';
-import menu from '../../../styles/Menu.module.css';
-import navLink from '../../../styles/NavLink.module.css';
-import selectClasses from '../../../styles/Select.module.css';
+import { buttonClasses, menuClasses, navLinkClasses, selectClasses } from 'styles';
 
 function SettingsButton({
 	appFilter,
 	setAppFilter,
 	bookmarkFilter,
 	setBookmarkFilter,
-	theme,
 }: any) {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
@@ -38,29 +34,29 @@ function SettingsButton({
 	return (
 		<Menu withinPortal={false} withArrow shadow='md' position='top'>
 			<Menu.Target>
-				<Button className={button.settingsButton} classNames={button}>
+				<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
 					<FiMenu />
 				</Button>
 			</Menu.Target>
-			<Menu.Dropdown className={menu.dropdown}>
+			<Menu.Dropdown className={menuClasses.dropdown}>
 				<NavLink
 					label='Settings'
 					component='a'
 					href={`/${import.meta.env.VITE_BASE_URL}/settings`}
-					className={navLink.defaultNavLink}
-					classNames={navLink}
+					className={navLinkClasses.defaultNavLink}
+					classNames={navLinkClasses}
 				/>
 				<NavLink
 					label='Quick Actions'
-					className={navLink.defaultNavLink}
-					classNames={navLink}
+					className={navLinkClasses.defaultNavLink}
+					classNames={navLinkClasses}
 				>
 					<NavLink
 						label='Wake Dakota'
 						leftSection={<FiMonitor />}
 						onClick={() => runWakeCommand()}
-						className={navLink.defaultNavLink}
-						classNames={navLink}
+						className={navLinkClasses.defaultNavLink}
+						classNames={navLinkClasses}
 					/>
 				</NavLink>
 				<MultiSelect