Updated Settings pages

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

@@ -1,12 +1,22 @@
-import { Box, Button, Group, Overlay, Stack, Switch, Text } from '@mantine/core';
+import {
+	ActionIcon,
+	Box,
+	Button,
+	Group,
+	Highlight,
+	Overlay,
+	Popover,
+	Stack,
+	Switch,
+	Text,
+} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FiChevronRight, FiPlus } from 'react-icons/fi';
+import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
 import '@mantine/core/styles/ModalBase.css';
 import '@mantine/core/styles/Modal.css';
-import { modals } from '@mantine/modals';
-import { buttonClasses, textClasses } from 'styles';
+import { actionIconClasses, buttonClasses, textClasses } from 'styles';
 import ThemeCard from './ThemeCard';
 import ThemeModal from './ThemeModal';
 function ThemesSettings() {
@@ -16,8 +26,7 @@ function ThemesSettings() {
 	const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
 		endpoint: 'api/backgrounds',
 	});
-	const { mutateAsync: createTheme } = useMutationAPI();
-	const { mutateAsync: deleteTheme } = useMutationAPI();
+	const { mutateAsync } = useMutationAPI();
 	const [opened, { open, close }] = useDisclosure(false);
 	const [colorId, setColorId] = useState<string>('');
 	const [colorValue, setColorValue] = useState('#000000');
@@ -38,7 +47,7 @@ function ThemesSettings() {
 	};
 
 	const handleSaveTheme = () => {
-		createTheme({
+		mutateAsync({
 			method: selectedTheme.id === undefined ? 'POST' : 'PATCH',
 			endpoint: 'api/themes',
 			body: selectedTheme,
@@ -46,20 +55,6 @@ function ThemesSettings() {
 		close();
 	};
 
-	const openDeleteConfirmModal = (theme: any) =>
-		modals.openConfirmModal({
-			title: 'Are you sure you want to delete this theme?',
-			labels: { confirm: 'Delete', cancel: 'Cancel' },
-			confirmProps: { color: 'red' },
-			onConfirm: () =>
-				deleteTheme({ method: 'DELETE', endpoint: 'api/themes', body: theme }),
-		});
-
-	const handleDeleteTheme = (theme: any) => {
-		openDeleteConfirmModal(theme);
-		close();
-	};
-
 	useEffect(() => {
 		if (backgroundData && isBackgroundFetched) {
 			setBackgroundList(['None', ...backgroundData]);
@@ -89,6 +84,45 @@ function ThemesSettings() {
 						<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
 							Themes
 						</Text>
+						<Popover withArrow withOverlay withinPortal={false}>
+							<Popover.Target>
+								<ActionIcon
+									className={actionIconClasses.settingsTooltip}
+									classNames={actionIconClasses}
+								>
+									<FiHelpCircle />
+								</ActionIcon>
+							</Popover.Target>
+							<Popover.Dropdown
+								style={{
+									color: theme.primaryColor,
+									backgroundColor: theme.backgroundColor,
+									width: '500px',
+								}}
+							>
+								<Stack>
+									<Text className={textClasses.settingsTooltip} classNames={textClasses}>
+										{'Themes can be created here and applied to the homepage.'}
+									</Text>
+									<Highlight
+										highlight={['Theme', 'Themes', 'Playlist', 'Playlists']}
+										className={textClasses.settingsTooltip}
+										classNames={textClasses}
+										highlightStyles={{
+											backgroundImage:
+												'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
+											fontWeight: 700,
+											WebkitBackgroundClip: 'text',
+											WebkitTextFillColor: 'transparent',
+										}}
+									>
+										{
+											'Themes are combinations of 5 colors and a background image, and can be added to a playlist. If a theme has been disabled, it will only be disabled with random/shuffle is enabled. If a theme is part of a playlist, it will appear while the playlist is active, regardless of random/shuffle.'
+										}
+									</Highlight>
+								</Stack>
+							</Popover.Dropdown>
+						</Popover>
 						<Button
 							className={buttonClasses.tableButton}
 							classNames={buttonClasses}
@@ -161,8 +195,6 @@ function ThemesSettings() {
 									allThemes={allThemes}
 									cardTheme={cardTheme}
 									handleOpen={handleOpen}
-									handleDeleteTheme={handleDeleteTheme}
-									createTheme={createTheme}
 								/>
 							</Box>
 						</Group>