Styles, API calls, and more

src/pages/homepage/Homepage.tsx

@@ -1,5 +1,4 @@
 import { Stack } from '@mantine/core';
-import { useEffect, useState } from 'react';
 import stackClasses from '../../styles/Stack.module.css';
 import {useQueryAPI} from '../../hooks/useAPI';
 import Search from './components/Search';
@@ -9,6 +8,7 @@ import Bookmarks from './components/Bookmarks';
 import SettingsButton from './components/SettingsButton';
 import { useAtom } from 'jotai';
 import { HomepageFilters } from '../../contexts/HomepageFilters';
+import { useEffect, useState } from 'react';
 
 
 export default function Homepage() {

src/pages/homepage/components/AppItem.tsx

@@ -35,9 +35,10 @@ function AppItem({ url, icon, name }: any) {
 					gap: 0,
 				}}
 			>
-				<Text className={texts.appName}>{name}</Text>
+				<Text className={texts.appName} classNames={texts}>{name}</Text>
 				<Text
 					className={texts.appUrl}
+					classNames={texts}
 					style={{
 						textDecoration: textDecoration,
 					}}

src/pages/homepage/components/Applications.tsx

@@ -16,10 +16,10 @@ function Applications() {
 
 	return (
 		<Stack id='apps' style={{ gap: 0 }}>
-			<Text className={texts.sectionTitle}>Applications</Text>
+			<Text className={texts.sectionTitle} classNames={texts}>Applications</Text>
 			<Stack
 				style={{
-					// background: 'var(--color-background)',
+					background: 'var(--color-background)',
 					gap: '.25rem',
 					backgroundSize: 'cover',
 					borderBottom: '0px solid',

src/pages/homepage/components/Bookmarks.tsx

@@ -25,7 +25,7 @@ function Links() {
 		<>
 			{groupsIsFetched && linksIsFetched && categories?.length > 0 && (
 				<Stack id='links' style={{ gap: 0 }}>
-					<Text className={texts.sectionTitle}>Bookmarks</Text>
+					<Text className={texts.sectionTitle} classNames={texts}>Bookmarks</Text>
 					<Stack
 						style={{
 							display: 'grid',

src/pages/homepage/components/LinkGroups.tsx

@@ -11,7 +11,7 @@ function LinkGroups({ links, category }: any) {
 				lineHeight: '1.5rem',
 			}}
 		>
-			<Text className={texts.linkCategory}>{category}</Text>
+			<Text className={texts.linkCategory} classNames={texts}>{category}</Text>
 			{links?.map((link: any) => (
 				<LinkItem key={link.name} link={link} />
 			))}

src/pages/homepage/components/LinkItem.tsx

@@ -3,7 +3,7 @@ import texts from '../../../styles/Text.module.css';
 
 function LinkItem({ link }: any) {
 	return (
-		<Text className={texts.linkItem} component='a' href={link.url}>
+		<Text className={texts.linkItem} classNames={texts} component='a' href={link.url}>
 			{link.name}
 		</Text>
 	);

src/pages/homepage/components/SettingsButton.tsx

@@ -24,7 +24,9 @@ function SettingsButton() {
 	
 	useEffect(() => {
 		if(data) {
-			setCategories(data.map((category: any) => {return {value: category.category, label: category.category}}));
+			let list: [any] = data.map((category: any) => {return {value: category.category, label: category.category}}) || [];
+			list.unshift({value: 'All', label: 'All'});
+			setCategories(list);
 		}
 	}, [data, isFetched]);
 
@@ -41,7 +43,9 @@ function SettingsButton() {
 			withArrow
 			shadow='md'
 			position='top'
-			classNames={menu}
+			classNames={{
+				dropdown: menu.dropdown
+			}}
 			styles={{
 				dropdown: {
 					backgroundColor: 'var(--color-background)',
@@ -49,7 +53,7 @@ function SettingsButton() {
 			}}
 		>
 			<Menu.Target>
-				<Button className={button.settingsButton}>
+				<Button className={button.settingsButton} classNames={button}>
 					<FiMenu />
 				</Button>
 			</Menu.Target>