Minor changes to styles and packages

package-lock.json

@@ -1,16 +1,17 @@
 {
 	"name": "triggerfrontend",
-	"version": "0.0.0",
+	"version": "0.1.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "triggerfrontend",
-			"version": "0.0.0",
+			"version": "0.1.0",
 			"dependencies": {
 				"@hello-pangea/dnd": "^18.0.1",
 				"@mantine/core": "^7.17.5",
 				"@mantine/hooks": "^7.17.5",
+				"@mantine/notifications": "^7.17.5",
 				"@tanstack/react-query": "^5.74.4",
 				"@tanstack/react-query-devtools": "^5.74.6",
 				"@tanstack/react-query-persist-client": "^5.74.6",
@@ -21,7 +22,6 @@
 				"react-icons": "^5.5.0",
 				"react-query": "^3.39.3",
 				"react-router-dom": "^7.5.2",
-				"react-toastify": "^11.0.5",
 				"recharts": "^2.15.3"
 			},
 			"devDependencies": {
@@ -1225,6 +1225,31 @@
 				"react": "^18.x || ^19.x"
 			}
 		},
+		"node_modules/@mantine/notifications": {
+			"version": "7.17.5",
+			"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-7.17.5.tgz",
+			"integrity": "sha512-dLbrSm7ct97fb0Yv8ImVj9mVNkjnD/xkDCP1PANt/shM9xDh0TguqQTvborb+8Wxh1g+RtWVML/an5rVsHbKmg==",
+			"license": "MIT",
+			"dependencies": {
+				"@mantine/store": "7.17.5",
+				"react-transition-group": "4.4.5"
+			},
+			"peerDependencies": {
+				"@mantine/core": "7.17.5",
+				"@mantine/hooks": "7.17.5",
+				"react": "^18.x || ^19.x",
+				"react-dom": "^18.x || ^19.x"
+			}
+		},
+		"node_modules/@mantine/store": {
+			"version": "7.17.5",
+			"resolved": "https://registry.npmjs.org/@mantine/store/-/store-7.17.5.tgz",
+			"integrity": "sha512-HQzy4rBlUFyw+39TgiAV+TGuQivMWYeQlnMctKJlaxwVY5ZTdF2IpJ/JZcjkGrmrZvBwUQ8IOMFvt2eZc20P1Q==",
+			"license": "MIT",
+			"peerDependencies": {
+				"react": "^18.x || ^19.x"
+			}
+		},
 		"node_modules/@microsoft/api-extractor": {
 			"version": "7.52.1",
 			"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.52.1.tgz",
@@ -4998,18 +5023,6 @@
 				"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
 			}
 		},
-		"node_modules/react-toastify": {
-			"version": "11.0.5",
-			"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
-			"integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
-			"dependencies": {
-				"clsx": "^2.1.1"
-			},
-			"peerDependencies": {
-				"react": "^18 || ^19",
-				"react-dom": "^18 || ^19"
-			}
-		},
 		"node_modules/react-transition-group": {
 			"version": "4.4.5",
 			"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

package.json

@@ -13,6 +13,7 @@
 		"@hello-pangea/dnd": "^18.0.1",
 		"@mantine/core": "^7.17.5",
 		"@mantine/hooks": "^7.17.5",
+		"@mantine/notifications": "^7.17.5",
 		"@tanstack/react-query": "^5.74.4",
 		"@tanstack/react-query-devtools": "^5.74.6",
 		"@tanstack/react-query-persist-client": "^5.74.6",
@@ -23,7 +24,6 @@
 		"react-icons": "^5.5.0",
 		"react-query": "^3.39.3",
 		"react-router-dom": "^7.5.2",
-		"react-toastify": "^11.0.5",
 		"recharts": "^2.15.3"
 	},
 	"devDependencies": {

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 { FaCheck } from 'react-icons/fa';
-import { Flip, toast } from 'react-toastify';
+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, {
+		setTimeout(() => {
-			render: 'Success!',
+			notifications.update({
-			autoClose: 2000,
+				id: id,
-			transition: Flip,
+				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
+							<Button onClick={handleClose}>Cancel</Button>
-								color={'grey'}
-								styles={{ label: { color: 'white' } }}
-								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'>

vite.config.ts

@@ -13,14 +13,14 @@ export default defineConfig(({ mode }) => {
 						reactIconsSi: ['react-icons/si'],
 						reactIconsFa6: ['react-icons/fa6'],
 						reactIconsVsc: ['react-icons/vsc'],
-						mantine: ['@mantine/core', '@mantine/hooks'],
+						mantine: ['@mantine/core', '@mantine/hooks', '@mantine/notifications'],
 						tanstack: [
 							'@tanstack/react-query',
 							'@tanstack/react-query-devtools',
 							'@tanstack/react-query-persist-client',
 						],
 						recharts: ['recharts'],
-						utils: ['@hello-pangea/dnd', 'react-toastify', 'jotai'],
+						utils: ['@hello-pangea/dnd', 'jotai'],
 					},
 				},
 			},