Minor changes to styles and packages

src/App.tsx

@@ -5,6 +5,7 @@ import {
 	createTheme,
 	mergeMantineTheme,
 } from '@mantine/core';
+import { Notifications } from '@mantine/notifications';
 import { useCommonHooks, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import {
@@ -16,10 +17,10 @@ import {
 } from 'react-router-dom';
 import { Loading, MainLayout } from './components';
 import '@mantine/core/styles.css';
+import '@mantine/notifications/styles.css';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import './index.css';
 import { Homepage, Settings } from 'pages';
-import { ToastContainer } from 'react-toastify';
 import type { Theme, ThemePlaylist } from 'types';
 
 function App() {
@@ -73,10 +74,8 @@ function App() {
 				if (themeName !== 'random') {
 					const temp = allThemes.find((t: Theme) => t.name === themeName);
 					setTheme(temp);
-					setLoaded(true);
 				} else {
 					handleThemeChange(allThemes, false);
-					setLoaded(true);
 				}
 			} else if (currentThemePlaylist === 'Time of Day') {
 				const themeList = JSON.parse(
@@ -89,7 +88,6 @@ function App() {
 							t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
 					),
 				);
-				setLoaded(true);
 			} else {
 				const themeList = JSON.parse(
 					themePlaylists.find((t: ThemePlaylist) => t.name === currentThemePlaylist)
@@ -97,9 +95,9 @@ function App() {
 				);
 				const filteredThemes = allThemes.filter((t: Theme) => themeList.includes(t.id));
 				setTheme('random');
-				setLoaded(true);
 				handleThemeChange(filteredThemes, false);
 			}
+			setLoaded(true);
 		}
 	}, [
 		isAllThemesFetched,
@@ -112,7 +110,7 @@ function App() {
 		<>
 			{theme && (
 				<MantineProvider theme={mantineTheme}>
-					<ToastContainer />
+					<Notifications />
 					<Loading loaded={loaded} />
 					<RouterProvider router={router} />
 					<ReactQueryDevtools initialIsOpen={false} />

src/hooks/useAPI.tsx

@@ -1,6 +1,8 @@
+import { Text } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useRef } from 'react';
-import { Flip, toast } from 'react-toastify';
+import { FaCheck } from 'react-icons/fa';
+import { VscLoading } from 'react-icons/vsc';
 
 const url = `${import.meta.env.PROD ? import.meta.env.VITE_DOMAIN_PROD : import.meta.env.VITE_DOMAIN_DEV}/${import.meta.env.VITE_BASE_URL}`;
 const headers: HeadersInit = {
@@ -40,21 +42,32 @@ export function useQueryAPI({ endpoint }: { endpoint: string }) {
 }
 
 export function useMutationAPI() {
-	const toastId = useRef<any>(null);
-	const notify = () => {
-		toastId.current = toast('Sending...', { position: 'bottom-right', autoClose: false });
-	};
 	const callEndpoint = async (
 		method: string,
 		endpoint: string,
 		body: object | undefined | null,
 	) => {
+		const id = notifications.show({
+			loading: true,
+			title: (
+				<Text fw={600} c={'var(--mantine-color-accent-0)'}>
+					{method} {endpoint}
+				</Text>
+			),
+			message: (
+				<Text c={'var(--mantine-color-primary-0)'}>
+					{body ? JSON.stringify(body) : 'Calling API...'}
+				</Text>
+			),
+			autoClose: false,
+			withCloseButton: false,
+			icon: <VscLoading size={24} />,
+		});
 		const options: { method: string; headers: HeadersInit | undefined; body: string } = {
 			method: method,
 			headers: headers,
 			body: JSON.stringify(body),
 		};
-		notify();
 		const response = await fetch(`${url}/${endpoint}`, options);
 		if (!response.ok) {
 			const responseData = await response.json();
@@ -68,11 +81,6 @@ export function useMutationAPI() {
 					loc: responseData.detail[0]?.loc,
 					type: responseData.detail[0]?.type,
 				});
-				toast.update(toastId.current, {
-					render: errorResponse,
-					type: 'error',
-					autoClose: 5000,
-				});
 				throw new Error(errorResponse);
 			}
 			if (typeof responseData.detail === 'object') {
@@ -83,11 +91,6 @@ export function useMutationAPI() {
 					endpoint: endpoint,
 					msg: responseData.detail.message,
 				});
-				toast.update(toastId.current, {
-					render: errorResponse,
-					type: 'error',
-					autoClose: 5000,
-				});
 				throw new Error(errorResponse);
 			}
 			const errorResponse = JSON.stringify({
@@ -97,18 +100,24 @@ export function useMutationAPI() {
 				endpoint: endpoint,
 				msg: responseData.detail,
 			});
-			toast.update(toastId.current, {
-				render: errorResponse,
-				type: 'error',
-				autoClose: 5000,
-			});
 			throw new Error(errorResponse);
 		}
-		toast.update(toastId.current, {
-			render: 'Success!',
-			autoClose: 2000,
-			transition: Flip,
-		});
+		setTimeout(() => {
+			notifications.update({
+				id: id,
+				loading: false,
+				title: (
+					<Text fw={600} c={'var(--mantine-color-accent-0)'}>
+						{method} Success!
+					</Text>
+				),
+				message: (
+					<Text c={'var(--mantine-color-primary-0)'}>Called endpoint {endpoint}</Text>
+				),
+				autoClose: 2500,
+				icon: <FaCheck size={24} />,
+			});
+		}, 2500);
 		return await response.json();
 	};
 
@@ -266,7 +275,6 @@ export function useFileUploadAPI() {
 			method: string;
 			endpoint: string;
 			body: object | FormData | undefined | null;
-			toastID?: string;
 		}) => callEndpoint(method, endpoint, body),
 		onMutate: () => {},
 		onSuccess: (variables) => {

src/index.css

@@ -1,5 +1 @@
 @import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap");
-
-.Toastify__toast-theme--light {
-	backdrop-filter: blur(10px) !important;
-}

src/pages/homepage/components/SettingsButton/SettingsButton.tsx

@@ -18,7 +18,6 @@ import { useEffect, useState } from 'react';
 import { FaDice, FaSync } from 'react-icons/fa';
 import { FiMenu, FiPower, FiSettings, FiShuffle } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
-import { toast } from 'react-toastify';
 import {
 	actionIconClasses,
 	buttonClasses,
@@ -50,7 +49,6 @@ function SettingsButton() {
 	const [selectedClient] = useState<WolClient>(wolClientData?.[0]);
 	const [overlayOpened, setOverlayOpened] = useState(false);
 	const navigate = useNavigate();
-	const notify = (notification: any) => toast(notification, { position: 'bottom-right' });
 	const {
 		currentTheme,
 		setCurrentTheme,
@@ -150,7 +148,6 @@ function SettingsButton() {
 									disabled={!wolClients?.length || selectedClient === null}
 									onClick={() => {
 										handleWakeRequest();
-										notify('Wake command sent');
 									}}
 								>
 									<Stack gap={0} align='center'>

src/pages/settings/components/Applications/DebouncedApplication.tsx

@@ -85,7 +85,7 @@ function DebouncedApplication({
 						openModal();
 					}}
 				>
-					<FiTrash />
+					<FiTrash color='black' />
 				</ActionIcon>
 			</Tooltip>
 			<Tooltip

src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx

@@ -73,7 +73,7 @@ function DebouncedBookmarkItem({
 						openModal();
 					}}
 				>
-					<FiTrash />
+					<FiTrash color='black' />
 				</ActionIcon>
 			</Tooltip>
 			<Group w={'100%'} justify='center'>

src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx

@@ -180,7 +180,7 @@ function DebouncedGroupSettingsItem({
 									openModal();
 								}}
 							>
-								<FiTrash />
+								<FiTrash color='black' />
 							</ActionIcon>
 						</Tooltip>
 					</Group>

src/pages/settings/components/Messages/DebouncedMessage.tsx

@@ -55,7 +55,7 @@ function DebouncedMessage({
 						openModal();
 					}}
 				>
-					<FiTrash />
+					<FiTrash color='black' />
 				</ActionIcon>
 			</Tooltip>
 			<TextInput

src/pages/settings/components/Search/DebouncedSearchProvider.tsx

@@ -78,7 +78,7 @@ function DebouncedSearchProvider({
 						openModal();
 					}}
 				>
-					<FiTrash />
+					<FiTrash color='black' />
 				</ActionIcon>
 			</Tooltip>
 			<Stack>

src/pages/settings/components/Shared/DeleteItemModal.tsx

@@ -37,7 +37,7 @@ function DeleteItemModal({
 				<Modal.Body pb={'2rem'}>
 					<Card className={cardClasses.settingsItem} classNames={cardClasses}>
 						{body}
-						<Group w={'100%'} justify='center' bottom={8}>
+						<Group justify='center' mt={'-1.5rem'}>
 							<Button
 								color={'red'}
 								styles={{ label: { color: 'black' } }}
@@ -48,13 +48,7 @@ function DeleteItemModal({
 							>
 								Delete
 							</Button>
-							<Button
-								color={'grey'}
-								styles={{ label: { color: 'white' } }}
-								onClick={handleClose}
-							>
-								Cancel
-							</Button>
+							<Button onClick={handleClose}>Cancel</Button>
 						</Group>
 					</Card>
 				</Modal.Body>

src/pages/settings/components/Theming/ThemePlaylistCard.tsx

@@ -225,6 +225,7 @@ function ThemePlaylistCard({
 									color: 'var(--mantine-color-background-0)',
 									backgroundColor: 'var(--mantine-color-primary-0)',
 									borderRadius: '4px',
+									zIndex: 160,
 								}}
 							>
 								Count: {themeList.length}
@@ -252,6 +253,7 @@ function ThemePlaylistCard({
 									color: 'var(--mantine-color-background-0)',
 									backgroundColor: 'var(--mantine-color-primary-0)',
 									borderRadius: '4px',
+									zIndex: 160,
 								}}
 							>
 								Timed Themes

src/pages/settings/components/WoL/DebouncedWolClient.tsx

@@ -76,7 +76,7 @@ function DebouncedWolClient({
 						openModal();
 					}}
 				>
-					<FiTrash />
+					<FiTrash color='black' />
 				</ActionIcon>
 			</Tooltip>
 			<Group w={'100%'} justify='center'>