Bug fixes
This commit is contained in:
Sean Edmunds
70
package-lock.json
generated
70
package-lock.json
generated
@@ -13,19 +13,19 @@
|
||||
"@mantine/form": "^8.1.2",
|
||||
"@mantine/hooks": "^8.1.2",
|
||||
"@mantine/notifications": "^8.1.2",
|
||||
"@tanstack/react-query": "^5.81.4",
|
||||
"@tanstack/react-query-devtools": "^5.81.4",
|
||||
"@tanstack/react-query-persist-client": "^5.81.4",
|
||||
"@tanstack/react-query": "^5.81.5",
|
||||
"@tanstack/react-query-devtools": "^5.81.5",
|
||||
"@tanstack/react-query-persist-client": "^5.81.5",
|
||||
"idb-keyval": "^6.2.2",
|
||||
"jotai": "^2.12.5",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^7.6.2",
|
||||
"react-router-dom": "^7.6.3",
|
||||
"recharts": "^3.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.0.4",
|
||||
"@types/node": "^24.0.8",
|
||||
"@types/react": "^19.1.8",
|
||||
"@types/react-dom": "^19.1.6",
|
||||
"@vitejs/plugin-react": "^4.6.0",
|
||||
@@ -1630,9 +1630,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@tanstack/query-core": {
|
||||
"version": "5.81.4",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.4.tgz",
|
||||
"integrity": "sha512-z0yBgRFTPIEYcjFFiahOwtEU3kEKpF5Rwls7UjBCsRghmhwIXyxd5U2p0yEmUfcwm85W4XZkt4dc1OWc5my3Yw==",
|
||||
"version": "5.81.5",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.5.tgz",
|
||||
"integrity": "sha512-ZJOgCy/z2qpZXWaj/oxvodDx07XcQa9BF92c0oINjHkoqUPsmm3uG08HpTaviviZ/N9eP1f9CM7mKSEkIo7O1Q==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
@@ -1650,12 +1650,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/query-persist-client-core": {
|
||||
"version": "5.81.4",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.81.4.tgz",
|
||||
"integrity": "sha512-8SlCCzIPBYCOfWRPUGkzJAdPMu+7JT42J51n6rWvaLVj20mzrVX2EKTtm7QoP19LdX+prS8ndCMClrILQi7nUA==",
|
||||
"version": "5.81.5",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.81.5.tgz",
|
||||
"integrity": "sha512-imiMWYXf8KuXavOgVRc5IDixqP0VKEN6IxZ/vyuX87Wk0eX7QmRtjLn1AD4Hz7GxYPM3RalRzP5Bshc30hgOcg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-core": "5.81.4"
|
||||
"@tanstack/query-core": "5.81.5"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
@@ -1663,12 +1663,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query": {
|
||||
"version": "5.81.4",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.4.tgz",
|
||||
"integrity": "sha512-bBrf5kTNr9t5BnskvyHQGwe2LRZsgnmx1sClyRQbAHxhSJfnT6z9h27IfGpY6JtfEH5y5R9jJegTG/93zyox/A==",
|
||||
"version": "5.81.5",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.5.tgz",
|
||||
"integrity": "sha512-lOf2KqRRiYWpQT86eeeftAGnjuTR35myTP8MXyvHa81VlomoAWNEd8x5vkcAfQefu0qtYCvyqLropFZqgI2EQw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-core": "5.81.4"
|
||||
"@tanstack/query-core": "5.81.5"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
@@ -1679,9 +1679,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query-devtools": {
|
||||
"version": "5.81.4",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.81.4.tgz",
|
||||
"integrity": "sha512-zFg7rzOmM9Q+Ym/TujWR4HD+jKwQd+N8WuWZRmHU8sjI2flyxWTWIEQvl9BFt+HiNA6leS3ODZ9SHYmEb3zduw==",
|
||||
"version": "5.81.5",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.81.5.tgz",
|
||||
"integrity": "sha512-lCGMu4RX0uGnlrlLeSckBfnW/UV+KMlTBVqa97cwK7Z2ED5JKnZRSjNXwoma6sQBTJrcULvzgx2K6jEPvNUpDw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-devtools": "5.81.2"
|
||||
@@ -1691,24 +1691,24 @@
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tanstack/react-query": "^5.81.4",
|
||||
"@tanstack/react-query": "^5.81.5",
|
||||
"react": "^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query-persist-client": {
|
||||
"version": "5.81.4",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.81.4.tgz",
|
||||
"integrity": "sha512-8SlkNDZmWUZLKYYm6DvYybJYrZngnERx/7W1KLUQ3IPaANM9tfmtQjBQBhr1dagyebNK1h/c69IY24dfUaNVIA==",
|
||||
"version": "5.81.5",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.81.5.tgz",
|
||||
"integrity": "sha512-ZV69n636C22RkbFK0rzel80oWjyWbMKiUwUE2MKhYWTSr42+JmqoehDwJ5sWcO8CxHNm4vWF8pyG+goRzluMYw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-persist-client-core": "5.81.4"
|
||||
"@tanstack/query-persist-client-core": "5.81.5"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tanstack/react-query": "^5.81.4",
|
||||
"@tanstack/react-query": "^5.81.5",
|
||||
"react": "^18 || ^19"
|
||||
}
|
||||
},
|
||||
@@ -1847,9 +1847,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "24.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.4.tgz",
|
||||
"integrity": "sha512-ulyqAkrhnuNq9pB76DRBTkcS6YsmDALy6Ua63V8OhrOBgbcYt6IOdzpw5P1+dyRIyMerzLkeYWBeOXPpA9GMAA==",
|
||||
"version": "24.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.8.tgz",
|
||||
"integrity": "sha512-WytNrFSgWO/esSH9NbpWUfTMGQwCGIKfCmNlmFDNiI5gGhgMmEA+V1AEvKLeBNvvtBnailJtkrEa2OIISwrVAA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@@ -3694,9 +3694,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "7.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.2.tgz",
|
||||
"integrity": "sha512-U7Nv3y+bMimgWjhlT5CRdzHPu2/KVmqPwKUCChW8en5P3znxUqwlYFlbmyj8Rgp1SF6zs5X4+77kBVknkg6a0w==",
|
||||
"version": "7.6.3",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.6.3.tgz",
|
||||
"integrity": "sha512-zf45LZp5skDC6I3jDLXQUu0u26jtuP4lEGbc7BbdyxenBN1vJSTA18czM2D+h5qyMBuMrD+9uB+mU37HIoKGRA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cookie": "^1.0.1",
|
||||
@@ -3716,12 +3716,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "7.6.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.2.tgz",
|
||||
"integrity": "sha512-Q8zb6VlTbdYKK5JJBLQEN06oTUa/RAbG/oQS1auK1I0TbJOXktqm+QENEVJU6QvWynlXPRBXI3fiOQcSEA78rA==",
|
||||
"version": "7.6.3",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.6.3.tgz",
|
||||
"integrity": "sha512-DiWJm9qdUAmiJrVWaeJdu4TKu13+iB/8IEi0EW/XgaHCjW/vWGrwzup0GVvaMteuZjKnh5bEvJP/K0MDnzawHw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-router": "7.6.2"
|
||||
"react-router": "7.6.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
|
||||
10
package.json
10
package.json
@@ -15,19 +15,19 @@
|
||||
"@mantine/form": "^8.1.2",
|
||||
"@mantine/hooks": "^8.1.2",
|
||||
"@mantine/notifications": "^8.1.2",
|
||||
"@tanstack/react-query": "^5.81.4",
|
||||
"@tanstack/react-query-devtools": "^5.81.4",
|
||||
"@tanstack/react-query-persist-client": "^5.81.4",
|
||||
"@tanstack/react-query": "^5.81.5",
|
||||
"@tanstack/react-query-devtools": "^5.81.5",
|
||||
"@tanstack/react-query-persist-client": "^5.81.5",
|
||||
"idb-keyval": "^6.2.2",
|
||||
"jotai": "^2.12.5",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^7.6.2",
|
||||
"react-router-dom": "^7.6.3",
|
||||
"recharts": "^3.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.0.4",
|
||||
"@types/node": "^24.0.8",
|
||||
"@types/react": "^19.1.8",
|
||||
"@types/react-dom": "^19.1.6",
|
||||
"@vitejs/plugin-react": "^4.6.0",
|
||||
|
||||
@@ -60,7 +60,7 @@ export function useMutationAPI() {
|
||||
</Text>
|
||||
),
|
||||
autoClose: false,
|
||||
withCloseButton: false,
|
||||
withCloseButton: true,
|
||||
icon: <VscLoading size={24} />,
|
||||
});
|
||||
const options: { method: string; headers: HeadersInit | undefined; body: string } = {
|
||||
@@ -73,7 +73,6 @@ export function useMutationAPI() {
|
||||
const responseData = await response.json();
|
||||
if (typeof responseData === 'object') {
|
||||
if (responseData.error.code === 'ER_DUP_ENTRY') {
|
||||
setTimeout(() => {
|
||||
notifications.update({
|
||||
id: id,
|
||||
loading: false,
|
||||
@@ -90,12 +89,10 @@ export function useMutationAPI() {
|
||||
autoClose: 2500,
|
||||
icon: <FaCheck size={24} />,
|
||||
});
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
return await responseData;
|
||||
}
|
||||
setTimeout(() => {
|
||||
notifications.update({
|
||||
id: id,
|
||||
loading: false,
|
||||
@@ -110,7 +107,6 @@ export function useMutationAPI() {
|
||||
autoClose: 2500,
|
||||
icon: <FaCheck size={24} />,
|
||||
});
|
||||
}, 2500);
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
@@ -249,7 +245,6 @@ export function useFileUploadAPI() {
|
||||
const responseData = await response.json();
|
||||
if (typeof responseData === 'object') {
|
||||
if (responseData.error.code === 'ER_DUP_ENTRY') {
|
||||
setTimeout(() => {
|
||||
notifications.update({
|
||||
id: id,
|
||||
loading: false,
|
||||
@@ -266,12 +261,10 @@ export function useFileUploadAPI() {
|
||||
autoClose: 2500,
|
||||
icon: <FaCheck size={24} />,
|
||||
});
|
||||
}, 2500);
|
||||
}
|
||||
}
|
||||
return await responseData;
|
||||
}
|
||||
setTimeout(() => {
|
||||
notifications.update({
|
||||
id: id,
|
||||
loading: false,
|
||||
@@ -284,7 +277,6 @@ export function useFileUploadAPI() {
|
||||
autoClose: 2500,
|
||||
icon: <FaCheck size={24} />,
|
||||
});
|
||||
}, 2500);
|
||||
return await response.json();
|
||||
};
|
||||
|
||||
|
||||
@@ -6,18 +6,26 @@ import {
|
||||
Group,
|
||||
Image,
|
||||
Modal,
|
||||
Overlay,
|
||||
ScrollArea,
|
||||
SimpleGrid,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
} from '@mantine/core';
|
||||
import { useDebouncedValue } from '@mantine/hooks';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { useFileUploadAPI, useMutationAPI } from 'hooks/useAPI';
|
||||
import { useState } from 'react';
|
||||
import { FiEdit, FiTrash } from 'react-icons/fi';
|
||||
import { modalClasses, scrollAreaClasses, textInputClasses } from 'styles';
|
||||
import { useFileUploadAPI } from 'hooks/useAPI';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FiEdit, FiLoader, FiPlus, FiTrash, FiX } from 'react-icons/fi';
|
||||
import {
|
||||
actionIconClasses,
|
||||
buttonClasses,
|
||||
modalClasses,
|
||||
scrollAreaClasses,
|
||||
textInputClasses,
|
||||
} from 'styles';
|
||||
import DeleteBackground from './DeleteBackground';
|
||||
import EditBackground from './EditBackground';
|
||||
|
||||
function BackgroundModal({
|
||||
backgroundModalOpened,
|
||||
@@ -33,19 +41,26 @@ function BackgroundModal({
|
||||
const [background, setBackground] = useState<File | null>(null);
|
||||
const [fileName, setFileName] = useState<string>('');
|
||||
const [newFileName, setNewFileName] = useState<string>('');
|
||||
const [rename, setRename] = useState<string>('');
|
||||
const [err, setErr] = useState<boolean>(false);
|
||||
const [confirm, setConfirm] = useState<boolean>(false);
|
||||
const [editing, setEditing] = useState<boolean>(false);
|
||||
const [adding, setAdding] = useState<boolean>(false);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(false);
|
||||
const [searchValue, setSearchValue] = useState<string>('');
|
||||
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
|
||||
const { isMobile } = useCommonHooks();
|
||||
const { mutateAsync: uploadAsync } = useFileUploadAPI();
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
const fd = new FormData();
|
||||
const handleFileUpload = (e: any) => {
|
||||
setErr(false);
|
||||
setBackground(e);
|
||||
setFileName(e?.name);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (debouncedSearch === searchValue) {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [debouncedSearch]);
|
||||
return (
|
||||
<Modal.Root
|
||||
size={'75%'}
|
||||
@@ -75,177 +90,76 @@ function BackgroundModal({
|
||||
</Modal.Header>
|
||||
<Modal.Body p={'1rem'}>
|
||||
<Stack align='center' w={'100%'}>
|
||||
{confirm && (
|
||||
<Stack
|
||||
justify='center'
|
||||
align='center'
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '30rem',
|
||||
backgroundColor: 'var(--mantine-color-search-0)',
|
||||
padding: '1rem',
|
||||
borderRadius: '.5rem',
|
||||
backgroundFilter: 'blur(5px)',
|
||||
}}
|
||||
>
|
||||
<Text fw={600} fz={'2rem'}>
|
||||
Are you sure you want to delete {fileName}?
|
||||
</Text>
|
||||
{inUseBackgrounds.includes(fileName) && (
|
||||
<Text fw={600} fz={'1.5rem'}>
|
||||
This background is currently in use! This will result in a blank
|
||||
background on the theme.
|
||||
</Text>
|
||||
)}
|
||||
<Text fw={600} fz={'3rem'}>
|
||||
THIS ACTION CANNOT BE UNDONE!!!
|
||||
</Text>
|
||||
<Card
|
||||
style={{
|
||||
aspectRatio: '16/9',
|
||||
height: '100%',
|
||||
backgroundImage: `url(../../api/backgroundImages/${fileName})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
padding: '2rem',
|
||||
margin: '1rem',
|
||||
}}
|
||||
/>
|
||||
<Group>
|
||||
<Button
|
||||
mt={'auto'}
|
||||
w={'min-content'}
|
||||
color='red'
|
||||
onClick={() => {
|
||||
setBackground(null);
|
||||
setFileName('');
|
||||
setNewFileName('');
|
||||
setConfirm(false);
|
||||
setFileName('');
|
||||
mutateAsync({
|
||||
method: 'DELETE',
|
||||
endpoint: 'api/backgrounds',
|
||||
body: { fileName },
|
||||
});
|
||||
}}
|
||||
>
|
||||
DELETE
|
||||
</Button>
|
||||
<Button
|
||||
mt={'auto'}
|
||||
w={'min-content'}
|
||||
onClick={() => {
|
||||
setBackground(null);
|
||||
setFileName('');
|
||||
setNewFileName('');
|
||||
setConfirm(false);
|
||||
setFileName('');
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
)}
|
||||
{editing && (
|
||||
<Stack
|
||||
justify='center'
|
||||
align='center'
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '30rem',
|
||||
backgroundColor: 'var(--mantine-color-search-0)',
|
||||
padding: '1rem',
|
||||
borderRadius: '.5rem',
|
||||
backgroundFilter: 'blur(5px)',
|
||||
}}
|
||||
>
|
||||
<Text fw={600} fz={'2rem'}>
|
||||
Editing {fileName}
|
||||
</Text>
|
||||
{inUseBackgrounds.includes(fileName) && (
|
||||
<Text fw={600} fz={'1.5rem'}>
|
||||
Updating the name will update the associated themes.
|
||||
</Text>
|
||||
)}
|
||||
<Group h={'100%'} mb={'1rem'}>
|
||||
{!editing && !confirm && !adding && searchValue !== undefined && (
|
||||
<Group w={'100%'} justify='center'>
|
||||
<TextInput
|
||||
w={'50%'}
|
||||
className={textInputClasses.settingsItem}
|
||||
classNames={textInputClasses}
|
||||
label='New Name'
|
||||
onChange={(e) => setRename(e.target.value)}
|
||||
/>
|
||||
<Card
|
||||
autoFocus={!isMobile}
|
||||
placeholder={'Search...'}
|
||||
value={searchValue}
|
||||
onInput={(event: any) => {
|
||||
setIsLoading(true);
|
||||
setSearchValue(event.target.value);
|
||||
}}
|
||||
style={{
|
||||
aspectRatio: '16/9',
|
||||
height: '100%',
|
||||
backgroundImage: `url(../../api/backgroundImages/${fileName})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
padding: '2rem',
|
||||
margin: '1rem',
|
||||
zIndex: 100,
|
||||
paddingTop: 0,
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<Group>
|
||||
<Button
|
||||
mt={'auto'}
|
||||
w={'min-content'}
|
||||
color='green'
|
||||
onClick={() => {
|
||||
if (
|
||||
!rename.endsWith('.png') &&
|
||||
!rename.endsWith('.jpg') &&
|
||||
!rename.endsWith('.jpeg')
|
||||
) {
|
||||
mutateAsync({
|
||||
method: 'PATCH',
|
||||
endpoint: 'api/backgrounds',
|
||||
body: {
|
||||
fileName,
|
||||
newFileName: `${rename}${fileName.substring(
|
||||
fileName.lastIndexOf('.'),
|
||||
fileName.length,
|
||||
)}`,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
mutateAsync({
|
||||
method: 'PATCH',
|
||||
endpoint: 'api/backgrounds',
|
||||
body: {
|
||||
fileName,
|
||||
newFileName: rename,
|
||||
},
|
||||
});
|
||||
rightSection={
|
||||
isLoading ? (
|
||||
<ActionIcon
|
||||
className={actionIconClasses.loadingSpinner}
|
||||
classNames={actionIconClasses}
|
||||
>
|
||||
<FiLoader />
|
||||
</ActionIcon>
|
||||
) : (
|
||||
searchValue && (
|
||||
<ActionIcon
|
||||
className={actionIconClasses.settingsTooltip}
|
||||
classNames={actionIconClasses}
|
||||
onClick={() => setSearchValue('')}
|
||||
>
|
||||
<FiX />
|
||||
</ActionIcon>
|
||||
)
|
||||
)
|
||||
}
|
||||
setBackground(null);
|
||||
setFileName('');
|
||||
setNewFileName('');
|
||||
setEditing(false);
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
/>
|
||||
<Button
|
||||
mt={'auto'}
|
||||
w={'min-content'}
|
||||
className={buttonClasses.newItemButton}
|
||||
classNames={buttonClasses}
|
||||
onClick={() => {
|
||||
setBackground(null);
|
||||
setFileName('');
|
||||
setNewFileName('');
|
||||
setEditing(false);
|
||||
setFileName('');
|
||||
setAdding(true);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
<FiPlus />
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
)}
|
||||
{!editing && !confirm && (
|
||||
{confirm && (
|
||||
<DeleteBackground
|
||||
fileName={fileName}
|
||||
setFileName={setFileName}
|
||||
inUseBackgrounds={inUseBackgrounds}
|
||||
setBackground={setBackground}
|
||||
setNewFileName={setNewFileName}
|
||||
setConfirm={setConfirm}
|
||||
/>
|
||||
)}
|
||||
{editing && (
|
||||
<EditBackground
|
||||
fileName={fileName}
|
||||
setFileName={setFileName}
|
||||
inUseBackgrounds={inUseBackgrounds}
|
||||
setBackground={setBackground}
|
||||
setNewFileName={setNewFileName}
|
||||
setEditing={setEditing}
|
||||
/>
|
||||
)}
|
||||
{!editing && !confirm && !adding && (
|
||||
<ScrollArea
|
||||
className={scrollAreaClasses.default}
|
||||
classNames={scrollAreaClasses}
|
||||
@@ -262,6 +176,13 @@ function BackgroundModal({
|
||||
<SimpleGrid w={'100%'} cols={3} p={'.5rem'}>
|
||||
{backgroundList
|
||||
.filter((background) => background !== 'None')
|
||||
.filter(
|
||||
(background) =>
|
||||
!debouncedSearch ||
|
||||
background
|
||||
.toLocaleLowerCase()
|
||||
.includes(debouncedSearch.toLocaleLowerCase()),
|
||||
)
|
||||
.map((background) => (
|
||||
<Group key={background} display={'flex'} pos={'relative'}>
|
||||
<Text
|
||||
@@ -324,6 +245,7 @@ function BackgroundModal({
|
||||
</SimpleGrid>
|
||||
</ScrollArea>
|
||||
)}
|
||||
{adding && (
|
||||
<Stack
|
||||
display={'flex'}
|
||||
pos={'relative'}
|
||||
@@ -332,14 +254,6 @@ function BackgroundModal({
|
||||
justify='space-between'
|
||||
p={16}
|
||||
>
|
||||
{confirm ||
|
||||
(editing && (
|
||||
<Overlay
|
||||
opacity={1}
|
||||
color='var(--mantine-color-search-0)'
|
||||
style={{ borderRadius: '.5rem', backdropFilter: 'blur(5px)' }}
|
||||
/>
|
||||
))}
|
||||
<Group gap={0}>
|
||||
<Stack gap={0} w={'60%'}>
|
||||
<FileInput
|
||||
@@ -394,7 +308,11 @@ function BackgroundModal({
|
||||
}}
|
||||
>
|
||||
{background ? (
|
||||
<Image src={URL.createObjectURL(background)} w={'100%'} h={'100%'} />
|
||||
<Image
|
||||
src={URL.createObjectURL(background)}
|
||||
w={'100%'}
|
||||
h={'100%'}
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src={'https://placehold.co/800x450?text=Upload%20an%20Image'}
|
||||
@@ -404,8 +322,10 @@ function BackgroundModal({
|
||||
)}
|
||||
</Card>
|
||||
</Group>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<Button
|
||||
w={'min-content'}
|
||||
disabled={!background}
|
||||
onClick={() => {
|
||||
if (background) {
|
||||
const newBackground = new File(
|
||||
@@ -419,6 +339,7 @@ function BackgroundModal({
|
||||
endpoint: 'api/backgrounds',
|
||||
body: fd,
|
||||
});
|
||||
setAdding(false);
|
||||
setBackground(null);
|
||||
setNewFileName('');
|
||||
setErr(false);
|
||||
@@ -429,7 +350,21 @@ function BackgroundModal({
|
||||
>
|
||||
Upload
|
||||
</Button>
|
||||
<Button
|
||||
w={'min-content'}
|
||||
color='var(--mantine-color-red-6)'
|
||||
onClick={() => {
|
||||
setAdding(false);
|
||||
setBackground(null);
|
||||
setNewFileName('');
|
||||
setErr(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
|
||||
95
src/pages/settings/components/Theming/DeleteBackground.tsx
Normal file
95
src/pages/settings/components/Theming/DeleteBackground.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
import { Button, Card, Group, Stack, Text } from '@mantine/core';
|
||||
import { useMutationAPI } from 'hooks';
|
||||
|
||||
function DeleteBackground({
|
||||
fileName,
|
||||
setFileName,
|
||||
inUseBackgrounds,
|
||||
setBackground,
|
||||
setNewFileName,
|
||||
setConfirm,
|
||||
}: {
|
||||
fileName: string;
|
||||
setFileName: (searchValue: string) => void;
|
||||
inUseBackgrounds: string[];
|
||||
setBackground: React.Dispatch<React.SetStateAction<File | null>>;
|
||||
setNewFileName: (searchValue: string) => void;
|
||||
setConfirm: (value: boolean) => void;
|
||||
}) {
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
return (
|
||||
<Stack
|
||||
justify='center'
|
||||
align='center'
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '30rem',
|
||||
backgroundColor: 'var(--mantine-color-search-0)',
|
||||
padding: '1rem',
|
||||
borderRadius: '.5rem',
|
||||
backgroundFilter: 'blur(5px)',
|
||||
}}
|
||||
>
|
||||
<Text fw={600} fz={'2rem'}>
|
||||
Are you sure you want to delete {fileName}?
|
||||
</Text>
|
||||
{inUseBackgrounds.includes(fileName) && (
|
||||
<Text fw={600} fz={'1.5rem'}>
|
||||
This background is currently in use! This will result in a blank background on
|
||||
the theme.
|
||||
</Text>
|
||||
)}
|
||||
<Text fw={600} fz={'3rem'}>
|
||||
THIS ACTION CANNOT BE UNDONE!!!
|
||||
</Text>
|
||||
<Card
|
||||
style={{
|
||||
aspectRatio: '16/9',
|
||||
height: '100%',
|
||||
backgroundImage: `url(../../api/backgroundImages/${fileName})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
padding: '2rem',
|
||||
margin: '1rem',
|
||||
}}
|
||||
/>
|
||||
<Group>
|
||||
<Button
|
||||
mt={'auto'}
|
||||
w={'min-content'}
|
||||
color='red'
|
||||
onClick={() => {
|
||||
setBackground(null);
|
||||
setFileName('');
|
||||
setNewFileName('');
|
||||
setConfirm(false);
|
||||
setFileName('');
|
||||
mutateAsync({
|
||||
method: 'DELETE',
|
||||
endpoint: 'api/backgrounds',
|
||||
body: { fileName },
|
||||
});
|
||||
}}
|
||||
>
|
||||
DELETE
|
||||
</Button>
|
||||
<Button
|
||||
mt={'auto'}
|
||||
w={'min-content'}
|
||||
onClick={() => {
|
||||
setBackground(null);
|
||||
setFileName('');
|
||||
setNewFileName('');
|
||||
setConfirm(false);
|
||||
setFileName('');
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default DeleteBackground;
|
||||
123
src/pages/settings/components/Theming/EditBackground.tsx
Normal file
123
src/pages/settings/components/Theming/EditBackground.tsx
Normal file
@@ -0,0 +1,123 @@
|
||||
import { Button, Card, Group, Stack, Text, TextInput } from '@mantine/core';
|
||||
import { useMutationAPI } from 'hooks';
|
||||
import { useState } from 'react';
|
||||
import { textInputClasses } from 'styles';
|
||||
|
||||
function EditBackground({
|
||||
fileName,
|
||||
setFileName,
|
||||
inUseBackgrounds,
|
||||
setBackground,
|
||||
setNewFileName,
|
||||
setEditing,
|
||||
}: {
|
||||
fileName: string;
|
||||
setFileName: (searchValue: string) => void;
|
||||
inUseBackgrounds: string[];
|
||||
setBackground: React.Dispatch<React.SetStateAction<File | null>>;
|
||||
setNewFileName: (searchValue: string) => void;
|
||||
setEditing: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}) {
|
||||
const [rename, setRename] = useState<string>('');
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
return (
|
||||
<Stack
|
||||
justify='center'
|
||||
align='center'
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '30rem',
|
||||
backgroundColor: 'var(--mantine-color-search-0)',
|
||||
padding: '1rem',
|
||||
borderRadius: '.5rem',
|
||||
backgroundFilter: 'blur(5px)',
|
||||
}}
|
||||
>
|
||||
<Text fw={600} fz={'2rem'}>
|
||||
Editing {fileName}
|
||||
</Text>
|
||||
{inUseBackgrounds.includes(fileName) && (
|
||||
<Text fw={600} fz={'1.5rem'}>
|
||||
Updating the name will update the associated themes.
|
||||
</Text>
|
||||
)}
|
||||
<Group h={'100%'} mb={'1rem'}>
|
||||
<TextInput
|
||||
className={textInputClasses.settingsItem}
|
||||
classNames={textInputClasses}
|
||||
label='New Name'
|
||||
onChange={(e) => setRename(e.target.value)}
|
||||
/>
|
||||
<Card
|
||||
style={{
|
||||
aspectRatio: '16/9',
|
||||
height: '100%',
|
||||
backgroundImage: `url(../../api/backgroundImages/${fileName})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
padding: '2rem',
|
||||
margin: '1rem',
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<Group>
|
||||
<Button
|
||||
mt={'auto'}
|
||||
w={'min-content'}
|
||||
color='green'
|
||||
onClick={() => {
|
||||
if (
|
||||
!rename.endsWith('.png') &&
|
||||
!rename.endsWith('.jpg') &&
|
||||
!rename.endsWith('.jpeg')
|
||||
) {
|
||||
mutateAsync({
|
||||
method: 'PATCH',
|
||||
endpoint: 'api/backgrounds',
|
||||
body: {
|
||||
fileName,
|
||||
newFileName: `${rename}${fileName.substring(
|
||||
fileName.lastIndexOf('.'),
|
||||
fileName.length,
|
||||
)}`,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
mutateAsync({
|
||||
method: 'PATCH',
|
||||
endpoint: 'api/backgrounds',
|
||||
body: {
|
||||
fileName,
|
||||
newFileName: rename,
|
||||
},
|
||||
});
|
||||
}
|
||||
setBackground(null);
|
||||
setFileName('');
|
||||
setNewFileName('');
|
||||
setEditing(false);
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
mt={'auto'}
|
||||
w={'min-content'}
|
||||
color={'var(--mantine-color-red-6)'}
|
||||
onClick={() => {
|
||||
setBackground(null);
|
||||
setFileName('');
|
||||
setNewFileName('');
|
||||
setEditing(false);
|
||||
setFileName('');
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
export default EditBackground;
|
||||
@@ -1,9 +1,7 @@
|
||||
import { Group, Text } from '@mantine/core';
|
||||
import type { Theme } from 'types';
|
||||
|
||||
function ThemeMiniCard({ allThemes, item }: { allThemes: Theme[]; item: number }) {
|
||||
const theme = allThemes?.find((theme: Theme) => theme.id === item);
|
||||
|
||||
function ThemeMiniCard({ miniTheme }: { miniTheme: Theme | undefined }) {
|
||||
return (
|
||||
<Group
|
||||
gap={0}
|
||||
@@ -15,30 +13,30 @@ function ThemeMiniCard({ allThemes, item }: { allThemes: Theme[]; item: number }
|
||||
h={'60px'}
|
||||
style={{
|
||||
backgroundImage:
|
||||
theme?.backgroundImage.toLocaleLowerCase() !== 'none'
|
||||
? `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), url(../../api/backgroundImages/${theme?.backgroundImage})`
|
||||
miniTheme?.backgroundImage.toLocaleLowerCase() !== 'none'
|
||||
? `linear-gradient(${miniTheme?.backgroundColor}33, ${miniTheme?.backgroundColor}33), url(../../api/backgroundImages/${miniTheme?.backgroundImage})`
|
||||
: undefined,
|
||||
backgroundSize:
|
||||
theme?.backgroundImage.toLocaleLowerCase() !== 'none' ? 'cover' : undefined,
|
||||
miniTheme?.backgroundImage.toLocaleLowerCase() !== 'none' ? 'cover' : undefined,
|
||||
backgroundColor:
|
||||
theme?.backgroundImage.toLocaleLowerCase() === 'none'
|
||||
? theme?.backgroundColor
|
||||
miniTheme?.backgroundImage.toLocaleLowerCase() === 'none'
|
||||
? miniTheme?.backgroundColor
|
||||
: undefined,
|
||||
backgroundPosition: 'center',
|
||||
border: `solid ${theme?.borderColor}`,
|
||||
border: `solid ${miniTheme?.borderColor}`,
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
>
|
||||
<Text
|
||||
bg={theme?.backgroundColor}
|
||||
c={theme?.primaryColor}
|
||||
bg={miniTheme?.backgroundColor}
|
||||
c={miniTheme?.primaryColor}
|
||||
size='md'
|
||||
style={{
|
||||
padding: '.25rem',
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
>
|
||||
{allThemes.find((theme: Theme) => theme.id === item)?.name}
|
||||
{miniTheme?.name}
|
||||
</Text>
|
||||
</Group>
|
||||
);
|
||||
|
||||
@@ -47,6 +47,7 @@ function ThemeModal({
|
||||
const [hovered, setHovered] = useState(-1);
|
||||
const [colorId, setColorId] = useState<string>('');
|
||||
const [colorValue, setColorValue] = useState('#000000');
|
||||
const [defaultTheme, setDefaultTheme] = useState<Theme>({ ...selectedTheme });
|
||||
const [designerTheme, setDesignerTheme] = useState<Theme>({
|
||||
...selectedTheme,
|
||||
});
|
||||
@@ -118,9 +119,19 @@ function ThemeModal({
|
||||
);
|
||||
});
|
||||
|
||||
const handleSwatchClick = () => {
|
||||
closeBackgroundPicker();
|
||||
openPicker();
|
||||
setDesignerTheme(selectedTheme);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setDesignerTheme(selectedTheme);
|
||||
if (defaultTheme.name !== selectedTheme.name) {
|
||||
setDefaultTheme(selectedTheme);
|
||||
}
|
||||
}, [selectedTheme]);
|
||||
|
||||
return (
|
||||
<Modal.Root
|
||||
size={'75%'}
|
||||
@@ -169,10 +180,9 @@ function ThemeModal({
|
||||
>
|
||||
<ColorSwatch
|
||||
onClick={() => {
|
||||
closeBackgroundPicker();
|
||||
setColorId('primaryColor');
|
||||
openPicker();
|
||||
setColorValue(selectedTheme.primaryColor);
|
||||
handleSwatchClick();
|
||||
}}
|
||||
color={selectedTheme.primaryColor}
|
||||
bd={`1px solid ${selectedTheme.primaryColor}`}
|
||||
@@ -188,10 +198,9 @@ function ThemeModal({
|
||||
>
|
||||
<ColorSwatch
|
||||
onClick={() => {
|
||||
closeBackgroundPicker();
|
||||
setColorId('accentColor');
|
||||
openPicker();
|
||||
setColorValue(selectedTheme.accentColor);
|
||||
handleSwatchClick();
|
||||
}}
|
||||
color={selectedTheme.accentColor}
|
||||
bd={`1px solid ${selectedTheme.primaryColor}`}
|
||||
@@ -207,10 +216,9 @@ function ThemeModal({
|
||||
>
|
||||
<ColorSwatch
|
||||
onClick={() => {
|
||||
closeBackgroundPicker();
|
||||
setColorId('backgroundColor');
|
||||
openPicker();
|
||||
setColorValue(selectedTheme.backgroundColor);
|
||||
handleSwatchClick();
|
||||
}}
|
||||
color={selectedTheme.backgroundColor}
|
||||
bd={`1px solid ${selectedTheme.primaryColor}`}
|
||||
@@ -226,10 +234,9 @@ function ThemeModal({
|
||||
>
|
||||
<ColorSwatch
|
||||
onClick={() => {
|
||||
closeBackgroundPicker();
|
||||
setColorId('borderColor');
|
||||
openPicker();
|
||||
setColorValue(selectedTheme.borderColor);
|
||||
handleSwatchClick();
|
||||
}}
|
||||
color={selectedTheme.borderColor}
|
||||
bd={`1px solid ${selectedTheme.primaryColor}`}
|
||||
@@ -245,10 +252,9 @@ function ThemeModal({
|
||||
>
|
||||
<ColorSwatch
|
||||
onClick={() => {
|
||||
closeBackgroundPicker();
|
||||
setColorId('searchColor');
|
||||
openPicker();
|
||||
setColorValue(selectedTheme.searchColor);
|
||||
handleSwatchClick();
|
||||
}}
|
||||
color={selectedTheme.searchColor}
|
||||
bd={`1px solid ${selectedTheme.primaryColor}`}
|
||||
@@ -266,6 +272,7 @@ function ThemeModal({
|
||||
onClick={() => {
|
||||
closePicker();
|
||||
openBackgroundPicker();
|
||||
setDesignerTheme(selectedTheme);
|
||||
}}
|
||||
pos={'absolute'}
|
||||
right={0}
|
||||
@@ -289,6 +296,22 @@ function ThemeModal({
|
||||
<Text className={textClasses.sectionTitle} classNames={textClasses}>
|
||||
Change {colorId}
|
||||
</Text>
|
||||
{colorId === 'backgroundColor' && (
|
||||
<ColorPicker
|
||||
value={colorValue}
|
||||
onChange={(e) => {
|
||||
setColorValue(e);
|
||||
setDesignerTheme({
|
||||
...designerTheme,
|
||||
backgroundColor: e,
|
||||
});
|
||||
}}
|
||||
format={'hex'}
|
||||
w={'90%'}
|
||||
mb={'1.5rem'}
|
||||
/>
|
||||
)}
|
||||
{colorId !== 'backgroundColor' && (
|
||||
<ColorPicker
|
||||
value={colorValue}
|
||||
onChange={(e) => {
|
||||
@@ -298,10 +321,10 @@ function ThemeModal({
|
||||
[colorId]: e,
|
||||
});
|
||||
}}
|
||||
format={colorId === 'backgroundColor' ? 'hex' : 'hexa'}
|
||||
format={'hexa'}
|
||||
w={'90%'}
|
||||
mb={colorId === 'backgroundColor' ? '1.5rem' : undefined}
|
||||
/>
|
||||
)}
|
||||
<TextInput
|
||||
className={textInputClasses.default}
|
||||
classNames={textInputClasses}
|
||||
@@ -458,11 +481,25 @@ function ThemeModal({
|
||||
</Group>
|
||||
</Stack>
|
||||
)}
|
||||
{!pickerOpen && !backgroundPicker && <Stack />}
|
||||
{!pickerOpen && !backgroundPicker && (
|
||||
<Stack h={'100%'} align='center' justify='center' gap={0}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setSelectedTheme({ ...defaultTheme });
|
||||
}}
|
||||
>
|
||||
Reset Changes
|
||||
</Button>
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Group>
|
||||
<Group>
|
||||
<Button color={'green'} onClick={handleSaveTheme}>
|
||||
<Button
|
||||
disabled={JSON.stringify(defaultTheme) === JSON.stringify(selectedTheme)}
|
||||
color={'green'}
|
||||
onClick={handleSaveTheme}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
|
||||
@@ -174,8 +174,11 @@ function ThemePlaylistCard({
|
||||
themeList
|
||||
.sort((a: number, b: number) => (a > b ? 1 : -1))
|
||||
.map((item: number) => {
|
||||
const miniTheme: any = allThemes.find(
|
||||
(theme: Theme) => theme.id === item,
|
||||
);
|
||||
return (
|
||||
<ThemeMiniCard key={item} item={item} allThemes={allThemes} />
|
||||
<ThemeMiniCard key={miniTheme?.id} miniTheme={miniTheme} />
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
@@ -198,10 +201,26 @@ function ThemePlaylistCard({
|
||||
</Text>
|
||||
<ScrollArea h={'255px'} w={'100%'} style={{ zIndex: 2 }}>
|
||||
<Stack gap={4}>
|
||||
<ThemeMiniCard item={Number(themeList[0])} allThemes={allThemes} />
|
||||
<ThemeMiniCard item={Number(themeList[1])} allThemes={allThemes} />
|
||||
<ThemeMiniCard item={Number(themeList[2])} allThemes={allThemes} />
|
||||
<ThemeMiniCard item={Number(themeList[3])} allThemes={allThemes} />
|
||||
<ThemeMiniCard
|
||||
miniTheme={allThemes.find(
|
||||
(theme: Theme) => theme.id === Number(themeList[0]),
|
||||
)}
|
||||
/>
|
||||
<ThemeMiniCard
|
||||
miniTheme={allThemes.find(
|
||||
(theme: Theme) => theme.id === Number(themeList[1]),
|
||||
)}
|
||||
/>
|
||||
<ThemeMiniCard
|
||||
miniTheme={allThemes.find(
|
||||
(theme: Theme) => theme.id === Number(themeList[2]),
|
||||
)}
|
||||
/>
|
||||
<ThemeMiniCard
|
||||
miniTheme={allThemes.find(
|
||||
(theme: Theme) => theme.id === Number(themeList[3]),
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
</ScrollArea>
|
||||
</>
|
||||
|
||||
@@ -98,7 +98,6 @@ function ThemePlaylistModal({
|
||||
newThemeList={newThemeList}
|
||||
miniTheme={miniTheme}
|
||||
themeList={themeList}
|
||||
allThemes={allThemes}
|
||||
selectedPlaylist={selectedPlaylist}
|
||||
setSelectedPlaylist={setSelectedPlaylist}
|
||||
/>
|
||||
|
||||
@@ -8,14 +8,12 @@ function ThemePreviewMiddleware({
|
||||
newThemeList,
|
||||
miniTheme,
|
||||
themeList,
|
||||
allThemes,
|
||||
selectedPlaylist,
|
||||
setSelectedPlaylist,
|
||||
}: {
|
||||
newThemeList: number[];
|
||||
miniTheme: any;
|
||||
themeList: number[];
|
||||
allThemes: any;
|
||||
selectedPlaylist: any;
|
||||
setSelectedPlaylist: (selectedPlaylist: any) => void;
|
||||
}) {
|
||||
@@ -56,7 +54,7 @@ function ThemePreviewMiddleware({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ThemeMiniCard allThemes={allThemes} item={Number(miniTheme.id)} />
|
||||
<ThemeMiniCard miniTheme={miniTheme} />
|
||||
</Group>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown
|
||||
|
||||
@@ -91,7 +91,7 @@ function ThemesSettings() {
|
||||
endpoint: themesEndpoint,
|
||||
body: selectedTheme,
|
||||
});
|
||||
close();
|
||||
handleClose();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
Reference in New Issue
Block a user