Styled Homepage

src/pages/homepage/components/SettingsButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Menu, NavLink, Select, Stack } from '@mantine/core';
+import { Button, Menu, NavLink, Select } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { FiMenu, FiMonitor } from 'react-icons/fi';
 import {useQueryAPI} from '../../../hooks/useAPI';
@@ -6,25 +6,14 @@ 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 { useAtom } from 'jotai';
-import { HomepageFilters } from '../../../contexts/HomepageFilters';
 
-function SettingsButton() {
+function SettingsButton({contentType, setContentType, theme}: any) {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
 	const [categories, setCategories] = useState([{value: 'All', label: 'All'}]);
-	const [homepageFilter, setHomepageFilter] = useAtom<object>(HomepageFilters);
-	const classNames = {
-		root: navLink.root,
-		body: navLink.body,
-		section: navLink.section,
-		label: navLink.label,
-		description: navLink.description,
-		chevron: navLink.chevron,
-	};
 	
 	useEffect(() => {
 		if(data) {
-			let list: [any] = data.map((category: any) => {return {value: category.category, label: category.category}}) || [];
+			const list: [any] = data.map((category: any) => {return {value: category.category, label: category.category}}) || [];
 			list.unshift({value: 'All', label: 'All'});
 			setCategories(list);
 		}
@@ -39,18 +28,10 @@ function SettingsButton() {
 	}
 	return (
 		<Menu
-			withinPortal
+			withinPortal={false}
 			withArrow
 			shadow='md'
 			position='top'
-			classNames={{
-				dropdown: menu.dropdown
-			}}
-			styles={{
-				dropdown: {
-					backgroundColor: 'var(--color-background)',
-				},
-			}}
 		>
 			<Menu.Target>
 				<Button className={button.settingsButton} classNames={button}>
@@ -58,40 +39,36 @@ function SettingsButton() {
 				</Button>
 			</Menu.Target>
 			<Menu.Dropdown
-				style={{
-					position: 'absolute',
-				}}
+				className={menu.dropdown}
 			>
 				<NavLink
 					label='Settings'
 					component='a'
 					href='/trigger/settings'
-					classNames={classNames}
+					className={navLink.defaultNavLink}
+					classNames={navLink}
 				/>
-				<NavLink label='Quick Actions' classNames={classNames}>
+				<NavLink label='Quick Actions'
+					className={navLink.defaultNavLink}
+					classNames={navLink}>
 					<NavLink
 						label='Wake Dakota'
 						leftSection={<FiMonitor />}
 						onClick={() => runWakeCommand()}
-						classNames={classNames}
+						className={navLink.defaultNavLink}
+						classNames={navLink}
 					/>
 				</NavLink>
 				<Select
 					label='Homepage Filter'
 					data={categories ?? []}
-					defaultValue={localStorage.getItem('contenttype')}
+					defaultValue={contentType}
 					withCheckIcon={false}
 					onChange={(data: any) => {
-						localStorage.setItem('contenttype', data || 'All');
-						setHomepageFilter({value: data, label: data});
+						setContentType(data)
 					}}
-					className={selectClasses.filterSelect}
 					classNames={selectClasses}
-					styles={{
-						label: {
-							color: 'var(--color-text-pri)',
-						},
-					}}
+					comboboxProps={{ withinPortal: false }}
 				/>
 			</Menu.Dropdown>
 		</Menu>