Styled Homepage

src/pages/homepage/Homepage.tsx

@@ -6,16 +6,14 @@ import Header from './components/Header';
 import Applications from './components/Applications';
 import Bookmarks from './components/Bookmarks';
 import SettingsButton from './components/SettingsButton';
-import { useAtom } from 'jotai';
-import { HomepageFilters } from '../../contexts/HomepageFilters';
 import { useEffect, useState } from 'react';
+import '../../index.css';
+import { useLocalStorage } from '@mantine/hooks';
 
-
-export default function Homepage() {
+export default function Homepage({theme}:any) {
 	const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' });
 	const [displayedGreeting, setDisplayedGreeting] = useState('');
-	const [homepageFilter, setHomepageFilter] = useAtom<any>(HomepageFilters);
-	
+	const [contentType, setContentType] = useLocalStorage<any>({ key: 'contenttype', defaultValue: 'All' });
 	function date() {
 		const currentDate = new Date();
 		const dateOptions: Intl.DateTimeFormatOptions = {
@@ -27,7 +25,6 @@ export default function Homepage() {
 		const date = currentDate.toLocaleDateString('en-GB', dateOptions);
 		return date;
 	}
-
 	function greet(list: any) {
 		const currentTime = new Date();
 		const greet = Math.floor(currentTime.getHours() / 6);
@@ -54,12 +51,12 @@ export default function Homepage() {
 	}, [isFetching]);
 
 	return (
-		<Stack className={stackClasses.containerStack}>
+		<Stack gap={0} className={stackClasses.containerStack} justify='center'>
 			<Search />
 			<Header date={date()} greet={displayedGreeting} />
-			<Applications />
-			<Bookmarks />
-			<SettingsButton />
+			<Applications contentType={contentType}/>
+			<Bookmarks contentType={contentType}/>
+			<SettingsButton theme={theme} contentType={contentType} setContentType={setContentType}/>
 		</Stack>
 	);
 }

src/pages/homepage/components/Applications.tsx

@@ -4,16 +4,14 @@ import {useQueryAPI} from '../../../hooks/useAPI';
 import texts from '../../../styles/Text.module.css';
 import AppItem from './AppItem';
 
-function Applications() {
+function Applications({contentType}: any) {
 	const { data, isFetching } = useQueryAPI({ endpoint: 'api/apps' });
 	const [applications, setApplications] = useState([]);
-	const contentType = localStorage.getItem('contenttype');
 	useEffect(() => {
 		if (!isFetching) {
 			setApplications(data);
 		}
 	}, [isFetching]);
-
 	return (
 		<Stack id='apps' style={{ gap: 0 }}>
 			<Text className={texts.sectionTitle} classNames={texts}>Applications</Text>

src/pages/homepage/components/Bookmarks.tsx

@@ -4,7 +4,7 @@ import {useQueryAPI} from '../../../hooks/useAPI';
 import texts from '../../../styles/Text.module.css';
 import LinkGroups from './LinkGroups';
 
-function Links() {
+function Links({contentType}: any) {
 	const { data: linkData, isFetched: linksIsFetched } = useQueryAPI({
 		endpoint: 'api/links',
 	});
@@ -38,8 +38,8 @@ function Links() {
 					>
 						{categories.map((category: any) => {
 							if (
-								category.column_filter === localStorage.getItem('contenttype') ||
-								localStorage.getItem('contenttype') === 'All'
+								category.column_filter === contentType ||
+								contentType === 'All'
 							) {
 								return (
 									<LinkGroups

src/pages/homepage/components/Header.tsx

@@ -44,6 +44,7 @@ function Header({ greet, date }: any) {
 					float: 'right',
 					justifyContent: 'right',
 					width: 'auto',
+					gap: 0,
 				}}
 			>
 				<Text className={textClasses.dateTime} classNames={textClasses} style={{ width: 'max-content' }}>

src/pages/homepage/components/Search.tsx

@@ -53,10 +53,10 @@ export default function Search() {
 			}}
 		>
 			<TextInput
-				className={textInputClasses.keyword}
+				className={textInputClasses.search}
                 classNames={textInputClasses}
 				spellCheck='true'
-                label={providerLabel}
+                leftSection={providerLabel}
 				onChange={(item: any) => {
                     if(item.target.value.startsWith('/')) {
                         setProviderLabel(providers?.find((p: any) => p.prefix === item.target.value.split(' ')[0]).name);

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>