Styles, API calls, and more

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>