Updated Settings pages

README.md

@@ -29,4 +29,6 @@ sudo pm2 start server.cjs
 # TODO
 - Image uploads for backgrounds
 
-- Improve mobile
+- Improve mobile
+
+- Reorder/Rearrange Bookmarks/Groups

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

@@ -210,15 +210,24 @@ const ApplicationSettings = () => {
 						style={{
 							color: theme.primaryColor,
 							backgroundColor: theme.backgroundColor,
+							width: '500px',
 						}}
 					>
 						<Stack>
 							<Text className={textClasses.settingsTooltip} classNames={textClasses}>
-								{'Applications are the apps that will be displayed in the homepage.'}
+								{'Applications are the apps that will be displayed on the homepage.'}
 							</Text>
 							<Highlight
-								ta={'center'}
+								highlight={[
-								highlight={''}
+									'Applications',
+									'apps',
+									'application',
+									'name',
+									'base url',
+									'url',
+									'icon',
+									'filter',
+								]}
 								className={textClasses.settingsTooltip}
 								classNames={textClasses}
 								highlightStyles={{
@@ -229,7 +238,9 @@ const ApplicationSettings = () => {
 									WebkitTextFillColor: 'transparent',
 								}}
 							>
-								{''}
+								{
+									'Applications contain a name, base url, url, icon and filter. Currently the icon must be the mdi icon name. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.'
+								}
 							</Highlight>
 						</Stack>
 					</Popover.Dropdown>

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

@@ -162,6 +162,7 @@ const BookmarkSettings = () => {
 						style={{
 							color: theme.primaryColor,
 							backgroundColor: theme.backgroundColor,
+							width: '500px',
 						}}
 					>
 						<Stack>
@@ -169,8 +170,16 @@ const BookmarkSettings = () => {
 								{'Bookmarks are the links that will be displayed on the homepage.'}
 							</Text>
 							<Highlight
-								ta={'center'}
+								highlight={[
-								highlight={''}
+									'Bookmark',
+									'Bookmarks',
+									'Group',
+									'Groups',
+									'Link',
+									'Links',
+									'Category',
+									'Categories',
+								]}
 								className={textClasses.settingsTooltip}
 								classNames={textClasses}
 								highlightStyles={{
@@ -181,7 +190,9 @@ const BookmarkSettings = () => {
 									WebkitTextFillColor: 'transparent',
 								}}
 							>
-								{''}
+								{
+									'Bookmarks can only belong to a single category, and will be displayed under that category on the homepage.'
+								}
 							</Highlight>
 						</Stack>
 					</Popover.Dropdown>

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

@@ -151,14 +151,14 @@ const MessageSettings = () => {
 						style={{
 							color: theme.primaryColor,
 							backgroundColor: theme.backgroundColor,
+							width: '500px',
 						}}
 					>
 						<Stack>
 							<Text className={textClasses.settingsTooltip} classNames={textClasses}>
-								{'Messages may contain any unicode text.'}
+								{'These custom messages will be displayed in the header on the homepage.'}
 							</Text>
 							<Highlight
-								ta={'center'}
 								highlight={['$firstName', '$lastName', '$^firstName', '$^lastName']}
 								className={textClasses.settingsTooltip}
 								classNames={textClasses}
@@ -171,7 +171,7 @@ const MessageSettings = () => {
 								}}
 							>
 								{
-									'Built-in variables include $firstName and $lastName. To force the text to upper case, use a carat (^), ie, $^firstName.'
+									'Built-in variables include $firstName and $lastName. To force the text to upper case, use a carat (^), ie, $^firstName. Messages may contain any unicode text.'
 								}
 							</Highlight>
 						</Stack>

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

@@ -174,6 +174,7 @@ const SearchProviderSettings = () => {
 						style={{
 							color: theme.primaryColor,
 							backgroundColor: theme.backgroundColor,
+							width: '500px',
 						}}
 					>
 						<Stack>
@@ -181,7 +182,6 @@ const SearchProviderSettings = () => {
 								{'Search providers and shortcuts can be configured here.'}
 							</Text>
 							<Highlight
-								ta={'center'}
 								highlight={['Providers', 'search']}
 								className={textClasses.settingsTooltip}
 								classNames={textClasses}
@@ -193,7 +193,9 @@ const SearchProviderSettings = () => {
 									WebkitTextFillColor: 'transparent',
 								}}
 							>
-								{'Providers can be used in the search bar.'}
+								{
+									'Providers can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.'
+								}
 							</Highlight>
 						</Stack>
 					</Popover.Dropdown>

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

@@ -1,30 +1,40 @@
-import { ActionIcon, Box, Button, Group, Overlay, Stack, Text } from '@mantine/core';
+import {
-import { useCommonHooks, useQueryAPI } from 'hooks';
+	ActionIcon,
+	Box,
+	Button,
+	Group,
+	Modal,
+	Overlay,
+	Stack,
+	Text,
+} from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useState } from 'react';
 import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
-import { actionIconClasses } from 'styles';
+import { actionIconClasses, modalClasses } from 'styles';
 
-function ThemeCard({
+function ThemeCard({ cardTheme, handleOpen, allThemes }: any) {
-	cardTheme,
-	handleOpen,
-	handleDeleteTheme,
-	createTheme,
-	allThemes,
-}: any) {
 	const { data: themePlaylists } = useQueryAPI({
 		endpoint: 'api/themePlaylists',
 	});
 	const [hover, setHover] = useState(false);
 	const [shiftEdit, setShiftEdit] = useState<number>(0);
 	const [shiftShuffle, setShiftShuffle] = useState<number>(0);
+	const { mutateAsync } = useMutationAPI();
+	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const {
 		handleThemeChange,
 		currentTheme,
 		setCurrentTheme,
 		theme,
+		isMobile,
 		currentThemePlaylist,
 		setCurrentThemePlaylist,
 	} = useCommonHooks();
+	const handleDelete = (application: any) => {
+		mutateAsync({ method: 'DELETE', endpoint: 'api/themes', body: application });
+	};
 
 	return (
 		<Group
@@ -36,6 +46,72 @@ function ThemeCard({
 			onMouseEnter={() => setHover(true)}
 			onMouseLeave={() => setHover(false)}
 		>
+			<Modal.Root
+				size={'60%'}
+				fullScreen={isMobile}
+				className={modalClasses.helpModal}
+				classNames={modalClasses}
+				opened={modalOpened}
+				onClose={() => {
+					closeModal();
+				}}
+				style={{
+					'--color-text-pri': theme.primaryColor,
+					'--color-text-acc': theme.accentColor,
+					'--color-background': theme.backgroundColor,
+					'--color-border': theme.borderColor,
+					'--color-search-background': theme.searchColor,
+					'--image-background': `url(${theme.backgroundImage})`,
+				}}
+				closeOnEscape
+				closeOnClickOutside
+			>
+				<Modal.Overlay />
+				<Modal.Content>
+					<Modal.Header>
+						<Modal.Title>Delete Theme</Modal.Title>
+						<Modal.CloseButton />
+					</Modal.Header>
+					<Modal.Body pb={'2rem'}>
+						<Stack gap={0} w={'100%'} h={'150px'} align='center'>
+							<Text>Are you sure you want to delete this theme?</Text>
+							<Text
+								style={{
+									fontWeight: 'bold',
+									fontSize: '20px',
+									padding: '8px',
+									margin: '8px',
+									borderRadius: '10px',
+									backgroundColor: 'var(--color-text-acc)',
+									color: 'var(--color-background)',
+								}}
+							>{`"${cardTheme.name}"`}</Text>
+							<Text c='red'>This action cannot be undone!</Text>
+							<Group pos={'absolute'} bottom={8}>
+								<Button
+									color={'red'}
+									styles={{ label: { color: 'black' } }}
+									onClick={() => {
+										handleDelete(cardTheme);
+										closeModal();
+									}}
+								>
+									Delete
+								</Button>
+								<Button
+									color={'grey'}
+									styles={{ label: { color: 'black' } }}
+									onClick={() => {
+										closeModal();
+									}}
+								>
+									Cancel
+								</Button>
+							</Group>
+						</Stack>
+					</Modal.Body>
+				</Modal.Content>
+			</Modal.Root>
 			<Text
 				style={{
 					position: 'absolute',
@@ -279,7 +355,7 @@ function ThemeCard({
 							},
 						}}
 						onClick={() => {
-							createTheme({
+							mutateAsync({
 								method: 'PATCH',
 								endpoint: 'api/themes',
 								body: { ...cardTheme, randomEnabled: !cardTheme.randomEnabled },
@@ -299,7 +375,7 @@ function ThemeCard({
 					<ActionIcon
 						className={actionIconClasses.themeEditButton}
 						classNames={actionIconClasses}
-						onClick={() => handleDeleteTheme(cardTheme)}
+						onClick={openModal}
 					>
 						<FiTrash color='red' />
 					</ActionIcon>

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

@@ -2,30 +2,31 @@ import {
 	ActionIcon,
 	Button,
 	Group,
+	Modal,
 	Overlay,
 	ScrollArea,
 	Stack,
 	Text,
 } from '@mantine/core';
-import { useCommonHooks } from 'hooks';
+import { useDisclosure } from '@mantine/hooks';
+import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useState } from 'react';
 import { FiEdit, FiRefreshCcw, FiTrash } from 'react-icons/fi';
+import { modalClasses } from 'styles';
 import ThemeMiniCard from './ThemeMiniCard';
 
-function ThemePlaylistCard({
+function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
-	cardPlaylist,
-	handleOpen,
-	handleDeletePlaylist,
-	createPlaylist,
-	allThemes,
-}: any) {
 	const [hover, setHover] = useState(false);
-	const { setThemeName, setCurrentThemePlaylist, theme } = useCommonHooks();
+	const { setThemeName, setCurrentThemePlaylist, theme, isMobile } = useCommonHooks();
 	const syncableLists = ['All', 'Backgrounds', 'No Backgrounds'];
+	const { mutateAsync } = useMutationAPI();
+	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const themeList = JSON.parse(
 		cardPlaylist.themeList.name === 'Time of Day' ? '[]' : cardPlaylist.themeList,
 	);
-
+	const handleDelete = (application: any) => {
+		mutateAsync({ method: 'DELETE', endpoint: 'api/themePlaylists', body: application });
+	};
 	return (
 		<Group
 			gap={0}
@@ -36,6 +37,72 @@ function ThemePlaylistCard({
 			onMouseEnter={() => setHover(true)}
 			onMouseLeave={() => setHover(false)}
 		>
+			<Modal.Root
+				size={'60%'}
+				fullScreen={isMobile}
+				className={modalClasses.helpModal}
+				classNames={modalClasses}
+				opened={modalOpened}
+				onClose={() => {
+					closeModal();
+				}}
+				style={{
+					'--color-text-pri': theme.primaryColor,
+					'--color-text-acc': theme.accentColor,
+					'--color-background': theme.backgroundColor,
+					'--color-border': theme.borderColor,
+					'--color-search-background': theme.searchColor,
+					'--image-background': `url(${theme.backgroundImage})`,
+				}}
+				closeOnEscape
+				closeOnClickOutside
+			>
+				<Modal.Overlay />
+				<Modal.Content>
+					<Modal.Header>
+						<Modal.Title>Delete Theme Playlist</Modal.Title>
+						<Modal.CloseButton />
+					</Modal.Header>
+					<Modal.Body pb={'2rem'}>
+						<Stack gap={0} w={'100%'} h={'150px'} align='center'>
+							<Text>Are you sure you want to delete this Theme Playlist?</Text>
+							<Text
+								style={{
+									fontWeight: 'bold',
+									fontSize: '20px',
+									padding: '8px',
+									margin: '8px',
+									borderRadius: '10px',
+									backgroundColor: 'var(--color-text-acc)',
+									color: 'var(--color-background)',
+								}}
+							>{`"${cardPlaylist.name}"`}</Text>
+							<Text c='red'>This action cannot be undone!</Text>
+							<Group pos={'absolute'} bottom={8}>
+								<Button
+									color={'red'}
+									styles={{ label: { color: 'black' } }}
+									onClick={() => {
+										handleDelete(cardPlaylist);
+										closeModal();
+									}}
+								>
+									Delete
+								</Button>
+								<Button
+									color={'grey'}
+									styles={{ label: { color: 'black' } }}
+									onClick={() => {
+										closeModal();
+									}}
+								>
+									Cancel
+								</Button>
+							</Group>
+						</Stack>
+					</Modal.Body>
+				</Modal.Content>
+			</Modal.Root>
 			<Text
 				style={{
 					position: 'absolute',
@@ -73,7 +140,7 @@ function ThemePlaylistCard({
 					onClick={(event) => {
 						event.stopPropagation();
 						if (cardPlaylist.name === 'All') {
-							createPlaylist({
+							mutateAsync({
 								method: 'PATCH',
 								endpoint: 'api/themePlaylists',
 								body: {
@@ -84,7 +151,7 @@ function ThemePlaylistCard({
 							});
 						}
 						if (cardPlaylist.name === 'Backgrounds') {
-							createPlaylist({
+							mutateAsync({
 								method: 'PATCH',
 								endpoint: 'api/themePlaylists',
 								body: {
@@ -101,7 +168,7 @@ function ThemePlaylistCard({
 							});
 						}
 						if (cardPlaylist.name === 'No Backgrounds') {
-							createPlaylist({
+							mutateAsync({
 								method: 'PATCH',
 								endpoint: 'api/themePlaylists',
 								body: {
@@ -160,7 +227,9 @@ function ThemePlaylistCard({
 										: theme.primaryColor,
 								zIndex: 3,
 							}}
-							onClick={() => handleDeletePlaylist(cardPlaylist)}
+							onClick={() => {
+								openModal();
+							}}
 						>
 							<FiTrash />
 						</ActionIcon>

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

@@ -1,10 +1,18 @@
-import { Box, Button, Group, Stack, Text } from '@mantine/core';
+import {
+	ActionIcon,
+	Box,
+	Button,
+	Group,
+	Highlight,
+	Popover,
+	Stack,
+	Text,
+} from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
-import { modals } from '@mantine/modals';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useState } from 'react';
-import { FiChevronRight, FiPlus } from 'react-icons/fi';
+import { FiChevronRight, FiHelpCircle, FiPlus } from 'react-icons/fi';
-import { buttonClasses, textClasses } from 'styles';
+import { actionIconClasses, buttonClasses, textClasses } from 'styles';
 import ThemePlaylistCard from './ThemePlaylistCard';
 import ThemePlaylistModal from './ThemePlaylistModal';
 
@@ -15,8 +23,7 @@ function ThemePlaylists() {
 	const { data: themePlaylists } = useQueryAPI({
 		endpoint: 'api/themePlaylists',
 	});
-	const { mutateAsync: createPlaylist } = useMutationAPI();
+	const { mutateAsync } = useMutationAPI();
-	const { mutateAsync: deletePlaylist } = useMutationAPI();
 	const [opened, { open, close }] = useDisclosure(false);
 	const [selectedPlaylist, setSelectedPlaylist] = useState<any>({});
 	const { currentThemePlaylist, setCurrentThemePlaylist, theme } = useCommonHooks();
@@ -31,7 +38,7 @@ function ThemePlaylists() {
 	};
 
 	const handleSavePlaylist = () => {
-		createPlaylist({
+		mutateAsync({
 			method: selectedPlaylist.id === undefined ? 'POST' : 'PATCH',
 			endpoint: 'api/themePlaylists',
 			body: selectedPlaylist,
@@ -39,24 +46,6 @@ function ThemePlaylists() {
 		close();
 	};
 
-	const openDeleteConfirmModal = (playlist: any) =>
-		modals.openConfirmModal({
-			title: 'Are you sure you want to delete this theme playlist?',
-			labels: { confirm: 'Delete', cancel: 'Cancel' },
-			confirmProps: { color: 'red' },
-			onConfirm: () =>
-				deletePlaylist({
-					method: 'DELETE',
-					endpoint: 'api/themePlaylists',
-					body: playlist,
-				}),
-		});
-
-	const handleDeletePlaylist = (playlist: any) => {
-		openDeleteConfirmModal(playlist);
-		close();
-	};
-
 	return (
 		<>
 			<ThemePlaylistModal
@@ -66,7 +55,7 @@ function ThemePlaylists() {
 				setSelectedPlaylist={setSelectedPlaylist}
 				handleSavePlaylist={handleSavePlaylist}
 				allThemes={allThemes}
-				createPlaylist={createPlaylist}
+				createPlaylist={mutateAsync}
 			/>
 			<Stack h={'100%'} w={'100%'}>
 				<Group w={'100%'} justify='space-between'>
@@ -74,6 +63,45 @@ function ThemePlaylists() {
 						<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
 							Theme Playlists
 						</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}>
+										{'Theme playlists 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',
+										}}
+									>
+										{
+											'Playlists are lists of themes. They can be enabled either here or in the settings button on the homepage. When a playlist is enabled, it will shuffle the included themes on the homepage. 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}
@@ -123,9 +151,7 @@ function ThemePlaylists() {
 											handleOpen={handleOpen}
 											currentThemePlaylist={currentThemePlaylist}
 											setCurrentThemePlaylist={setCurrentThemePlaylist}
-											handleDeletePlaylist={handleDeletePlaylist}
 											allThemes={allThemes}
-											createPlaylist={createPlaylist}
 										/>
 									</Box>
 								</Group>
@@ -164,11 +190,7 @@ function ThemePlaylists() {
 										<ThemePlaylistCard
 											cardPlaylist={cardPlaylist}
 											handleOpen={handleOpen}
-											currentThemePlaylist={currentThemePlaylist}
-											setCurrentThemePlaylist={setCurrentThemePlaylist}
-											handleDeletePlaylist={handleDeletePlaylist}
 											allThemes={allThemes}
-											createPlaylist={createPlaylist}
 										/>
 									</Box>
 								</Group>

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 { actionIconClasses, buttonClasses, textClasses } from 'styles';
-import { 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 } = useMutationAPI();
-	const { mutateAsync: deleteTheme } = 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>