Minor changes to styles and packages

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'>