Style updates and bugfixes

src/pages/settings/components/Theming/Backgrounds/EditBackground.tsx

@@ -0,0 +1,127 @@
+import { Button, Card, Group, Stack, Text, TextInput } from '@mantine/core';
+import { useCommonHooks, useMutationAPI } from 'hooks';
+import { useState } from 'react';
+import { textInputClasses } from 'styles';
+
+export 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();
+	const { theme } = useCommonHooks();
+	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)}
+					styles={
+						theme.textShadowsEnabled && {
+							label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
+						}
+					}
+				/>
+				<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>
+	);
+}