Background updates

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

@@ -4,6 +4,7 @@ import {
 	Card,
 	FileInput,
 	Group,
+	Image,
 	Modal,
 	ScrollArea,
 	SimpleGrid,
@@ -13,7 +14,7 @@ import { useCommonHooks } from 'hooks';
 import { useFileUploadAPI, useMutationAPI } from 'hooks/useAPI';
 import { useState } from 'react';
 import { FiTrash } from 'react-icons/fi';
-import { modalClasses } from 'styles';
+import { modalClasses, scrollAreaClasses } from 'styles';
 
 function BackgroundModal({
 	backgroundModalOpened,
@@ -34,9 +35,10 @@ function BackgroundModal({
 		setErr(false);
 		setBackground(e);
 	};
+	console.log(background);
 	return (
 		<Modal.Root
-			size={'50%'}
+			size={'75%'}
 			className={modalClasses.editThemeModal}
 			classNames={modalClasses}
 			opened={backgroundModalOpened}
@@ -57,11 +59,16 @@ function BackgroundModal({
 				</Modal.Header>
 				<Modal.Body p={'2rem'}>
 					<ScrollArea
+						className={scrollAreaClasses.default}
+						classNames={scrollAreaClasses}
 						type={'always'}
 						style={{
 							width: '100%',
-							height: '20rem',
-							backgroundColor: 'var(--mantine-color-background-0)',
+							height: '30rem',
+							backgroundColor: 'var(--mantine-color-search-0)',
+							padding: '1rem',
+							borderRadius: '.5rem',
+							backgroundFilter: 'blur(5px)',
 						}}
 					>
 						<SimpleGrid w={'100%'} cols={3} p={'.5rem'}>
@@ -96,8 +103,8 @@ function BackgroundModal({
 											}}
 										/>
 										<ActionIcon
+											color='var(--mantine-color-red-6)'
 											style={{
-												color: 'red',
 												position: 'absolute',
 												bottom: '.5rem',
 												right: '.5rem',
@@ -117,25 +124,53 @@ function BackgroundModal({
 								))}
 						</SimpleGrid>
 					</ScrollArea>
-					<FileInput
-						clearable
-						accept='image/png,image/jpeg'
-						value={background}
-						onChange={handleFileUpload}
-						label={'Upload Background'}
-						placeholder={'Upload Background'}
-						p={'xl'}
-						w={'100%'}
-						error={err && 'Please upload a background'}
-						styles={{
-							input: {
-								color: 'var(--mantine-color-primary-0)',
-							},
-							placeholder: {
-								color: 'var(--mantine-color-accent-0)',
-							},
-						}}
-					/>
+					<Group w={'100%'} align={'center'}>
+						<FileInput
+							clearable
+							accept='image/png,image/jpeg'
+							value={background}
+							onChange={handleFileUpload}
+							label={'Upload Background'}
+							placeholder={'Select...'}
+							description={
+								'Max size: 50MB for upload. Images are resized to 300kb after upload.'
+							}
+							p={'xl'}
+							w={'60%'}
+							error={err && 'Please upload a background'}
+							styles={{
+								input: {
+									color: 'var(--mantine-color-primary-0)',
+									borderColor: 'var(--mantine-color-primary-0)',
+								},
+								placeholder: {
+									color: 'var(--mantine-color-accent-0)',
+								},
+							}}
+						/>
+						<Card
+							style={{
+								aspectRatio: '16/9',
+								width: '30%',
+								backgroundSize: 'cover',
+								backgroundPosition: 'center',
+								backgroundRepeat: 'no-repeat',
+								backgroundColor: 'var(--mantine-color-search-0)',
+								padding: '2rem',
+								margin: '1rem',
+							}}
+						>
+							{background ? (
+								<Image src={URL.createObjectURL(background)} w={'100%'} h={'100%'} />
+							) : (
+								<Image
+									src={'https://placehold.co/800x450?text=Select%20an%20Image'}
+									w={'100%'}
+									h={'100%'}
+								/>
+							)}
+						</Card>
+					</Group>
 					<Button
 						onClick={() => {
 							if (background) {