smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Bug fixes

Browse Source
This commit is contained in:
Sean Edmunds
2025-07-01 15:54:59 -05:00
parent a6b98c409a
commit 5982e1add5
12 changed files with 628 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/hooks/useAPI.tsx
View File

@@ -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,44 +73,40 @@ 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,
title: (
<Text fw={600} c={'var(--mantine-color-accent-0)'}>
{method} Failure!
</Text>
),
message: (
<Text c={'var(--mantine-color-primary-0)'}>
Entry with that name already exists.
</Text>
),
autoClose: 2500,
icon: <FaCheck size={24} />,
});
}, 2500);
notifications.update({
id: id,
loading: false,
title: (
<Text fw={600} c={'var(--mantine-color-accent-0)'}>
{method} Failure!
</Text>
),
message: (
<Text c={'var(--mantine-color-primary-0)'}>
Entry with that name already exists.
</Text>
),
autoClose: 2500,
icon: <FaCheck size={24} />,
});
}
}
return await responseData;
}
setTimeout(() => {
notifications.update({
id: id,
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);
notifications.update({
id: id,
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} />,
});
return await response.json();
};
@@ -249,42 +245,38 @@ 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,
title: (
<Text fw={600} c={'var(--mantine-color-accent-0)'}>
{method} Failure!
</Text>
),
message: (
<Text c={'var(--mantine-color-primary-0)'}>
Entry with that name already exists.
</Text>
),
autoClose: 2500,
icon: <FaCheck size={24} />,
});
}, 2500);
notifications.update({
id: id,
loading: false,
title: (
<Text fw={600} c={'var(--mantine-color-accent-0)'}>
{method} Failure!
</Text>
),
message: (
<Text c={'var(--mantine-color-primary-0)'}>
Entry with that name already exists.
</Text>
),
autoClose: 2500,
icon: <FaCheck size={24} />,
});
}
}
return await responseData;
}
setTimeout(() => {
notifications.update({
id: id,
loading: false,
title: (
<Text fw={600} c={'var(--mantine-color-accent-0)'}>
{method} Success!
</Text>
),
message: <Text c={'var(--mantine-color-primary-0)'}>{response.statusText}</Text>,
autoClose: 2500,
icon: <FaCheck size={24} />,
});
}, 2500);
notifications.update({
id: id,
loading: false,
title: (
<Text fw={600} c={'var(--mantine-color-accent-0)'}>
{method} Success!
</Text>
),
message: <Text c={'var(--mantine-color-primary-0)'}>{response.statusText}</Text>,
autoClose: 2500,
icon: <FaCheck size={24} />,
});
return await response.json();
};

491
src/pages/settings/components/Theming/BackgroundModal.tsx
View File

@@ -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',
{!editing && !confirm && !adding && searchValue !== undefined && (
<Group w={'100%'} justify='center'>
<TextInput
w={'50%'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
autoFocus={!isMobile}
placeholder={'Search...'}
value={searchValue}
onInput={(event: any) => {
setIsLoading(true);
setSearchValue(event.target.value);
}}
style={{
zIndex: 100,
paddingTop: 0,
}}
rightSection={
isLoading ? (
<ActionIcon
className={actionIconClasses.loadingSpinner}
classNames={actionIconClasses}
>
<FiLoader />
</ActionIcon>
) : (
searchValue && (
<ActionIcon
className={actionIconClasses.settingsTooltip}
classNames={actionIconClasses}
onClick={() => setSearchValue('')}
>
<FiX />
</ActionIcon>
)
)
}
/>
<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>
<Button
className={buttonClasses.newItemButton}
classNames={buttonClasses}
onClick={() => {
setAdding(true);
}}
>
<FiPlus />
</Button>
</Group>
)}
{confirm && (
<DeleteBackground
fileName={fileName}
setFileName={setFileName}
inUseBackgrounds={inUseBackgrounds}
setBackground={setBackground}
setNewFileName={setNewFileName}
setConfirm={setConfirm}
/>
)}
{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'}>
<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'}
onClick={() => {
setBackground(null);
setFileName('');
setNewFileName('');
setEditing(false);
setFileName('');
}}
>
Cancel
</Button>
</Group>
</Stack>
<EditBackground
fileName={fileName}
setFileName={setFileName}
inUseBackgrounds={inUseBackgrounds}
setBackground={setBackground}
setNewFileName={setNewFileName}
setEditing={setEditing}
/>
)}
{!editing && !confirm && (
{!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,112 +245,126 @@ function BackgroundModal({
</SimpleGrid>
</ScrollArea>
)}
<Stack
display={'flex'}
pos={'relative'}
w={'100%'}
align={'center'}
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
clearable
accept='image/png,image/jpeg'
value={background}
onChange={handleFileUpload}
label={'Upload Background'}
placeholder={'Select...'}
error={err && 'Please upload a background'}
description={
'Max size: 50MB for upload. Images are resized to 300kb after upload.'
}
pr={'xl'}
pl={0}
styles={{
input: {
color: 'var(--mantine-color-primary-0)',
borderColor: 'var(--mantine-color-primary-0)',
},
placeholder: {
color: 'var(--mantine-color-accent-0)',
},
}}
/>
<TextInput
label={'File Name'}
placeholder={fileName}
value={newFileName}
onChange={(e) => setNewFileName(e.target.value)}
pr={'xl'}
pl={0}
styles={{
input: {
color: 'var(--mantine-color-primary-0)',
borderColor: 'var(--mantine-color-primary-0)',
},
}}
/>
</Stack>
<Card
style={{
aspectRatio: '16/9',
width: '35%',
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundColor: 'var(--mantine-color-search-0)',
padding: '2rem',
margin: '1rem',
marginRight: 0,
}}
>
{background ? (
<Image src={URL.createObjectURL(background)} w={'100%'} h={'100%'} />
) : (
<Image
src={'https://placehold.co/800x450?text=Upload%20an%20Image'}
w={'100%'}
h={'100%'}
/>
)}
</Card>
</Group>
<Button
w={'min-content'}
onClick={() => {
if (background) {
const newBackground = new File(
[background],
newFileName || background.name,
{ type: background.type },
);
fd.append('background', newBackground || '');
uploadAsync({
method: 'POST',
endpoint: 'api/backgrounds',
body: fd,
});
setBackground(null);
setNewFileName('');
setErr(false);
} else {
setErr(true);
}
}}
{adding && (
<Stack
display={'flex'}
pos={'relative'}
w={'100%'}
align={'center'}
justify='space-between'
p={16}
>
Upload
</Button>
</Stack>
<Group gap={0}>
<Stack gap={0} w={'60%'}>
<FileInput
clearable
accept='image/png,image/jpeg'
value={background}
onChange={handleFileUpload}
label={'Upload Background'}
placeholder={'Select...'}
error={err && 'Please upload a background'}
description={
'Max size: 50MB for upload. Images are resized to 300kb after upload.'
}
pr={'xl'}
pl={0}
styles={{
input: {
color: 'var(--mantine-color-primary-0)',
borderColor: 'var(--mantine-color-primary-0)',
},
placeholder: {
color: 'var(--mantine-color-accent-0)',
},
}}
/>
<TextInput
label={'File Name'}
placeholder={fileName}
value={newFileName}
onChange={(e) => setNewFileName(e.target.value)}
pr={'xl'}
pl={0}
styles={{
input: {
color: 'var(--mantine-color-primary-0)',
borderColor: 'var(--mantine-color-primary-0)',
},
}}
/>
</Stack>
<Card
style={{
aspectRatio: '16/9',
width: '35%',
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
backgroundColor: 'var(--mantine-color-search-0)',
padding: '2rem',
margin: '1rem',
marginRight: 0,
}}
>
{background ? (
<Image
src={URL.createObjectURL(background)}
w={'100%'}
h={'100%'}
/>
) : (
<Image
src={'https://placehold.co/800x450?text=Upload%20an%20Image'}
w={'100%'}
h={'100%'}
/>
)}
</Card>
</Group>
<Group w={'100%'} justify='center'>
<Button
w={'min-content'}
disabled={!background}
onClick={() => {
if (background) {
const newBackground = new File(
[background],
newFileName || background.name,
{ type: background.type },
);
fd.append('background', newBackground || '');
uploadAsync({
method: 'POST',
endpoint: 'api/backgrounds',
body: fd,
});
setAdding(false);
setBackground(null);
setNewFileName('');
setErr(false);
} else {
setErr(true);
}
}}
>
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
View 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
View 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;

22
src/pages/settings/components/Theming/ThemeMiniCard.tsx
View File

@@ -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>
);

87
src/pages/settings/components/Theming/ThemeModal.tsx
View File

@@ -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,19 +296,35 @@ function ThemeModal({
<Text className={textClasses.sectionTitle} classNames={textClasses}>
Change {colorId}
</Text>
<ColorPicker
value={colorValue}
onChange={(e) => {
setColorValue(e);
setDesignerTheme({
...designerTheme,
[colorId]: e,
});
}}
format={colorId === 'backgroundColor' ? 'hex' : 'hexa'}
w={'90%'}
mb={colorId === 'backgroundColor' ? '1.5rem' : undefined}
/>
{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) => {
setColorValue(e);
setDesignerTheme({
...designerTheme,
[colorId]: e,
});
}}
format={'hexa'}
w={'90%'}
/>
)}
<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

29
src/pages/settings/components/Theming/ThemePlaylistCard.tsx
View File

@@ -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>
</>

1
src/pages/settings/components/Theming/ThemePlaylistModal.tsx
View File

@@ -98,7 +98,6 @@ function ThemePlaylistModal({
newThemeList={newThemeList}
miniTheme={miniTheme}
themeList={themeList}
allThemes={allThemes}
selectedPlaylist={selectedPlaylist}
setSelectedPlaylist={setSelectedPlaylist}
/>

4
src/pages/settings/components/Theming/ThemePreivewMiddleware.tsx
View File

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

2
src/pages/settings/components/Theming/Themes.tsx
View File

@@ -91,7 +91,7 @@ function ThemesSettings() {
endpoint: themesEndpoint,
body: selectedTheme,
});
close();
handleClose();
};
useEffect(() => {