Background updates

src/pages/settings/Settings.tsx

@@ -11,7 +11,7 @@ import {
 	FiUser,
 } from 'react-icons/fi';
 import { useNavigate, useParams } from 'react-router-dom';
-import { actionIconClasses, tabClasses, textClasses } from 'styles';
+import { actionIconClasses, scrollAreaClasses, tabClasses, textClasses } from 'styles';
 import Applications from './components/Applications/Applications';
 import Bookmarks from './components/Bookmarks/Bookmarks';
 import Messages from './components/Messages/Messages';
@@ -79,42 +79,74 @@ export function Settings() {
 					</Tabs.Tab>
 				</Tabs.List>
 				<Tabs.Panel value='personalization'>
-					<ScrollArea h={'100%'}>
+					<ScrollArea
+						h={'100%'}
+						className={scrollAreaClasses.default}
+						classNames={scrollAreaClasses}
+					>
 						<Personalization />
 					</ScrollArea>
 				</Tabs.Panel>
 				<Tabs.Panel value='messages'>
-					<ScrollArea h={'100%'}>
+					<ScrollArea
+						h={'100%'}
+						className={scrollAreaClasses.default}
+						classNames={scrollAreaClasses}
+					>
 						<Messages />
 					</ScrollArea>
 				</Tabs.Panel>
 				<Tabs.Panel value='applications'>
-					<ScrollArea h={'100%'}>
+					<ScrollArea
+						h={'100%'}
+						className={scrollAreaClasses.default}
+						classNames={scrollAreaClasses}
+					>
 						<Applications />
 					</ScrollArea>
 				</Tabs.Panel>
 				<Tabs.Panel value='bookmarks'>
-					<ScrollArea h={'100%'}>
+					<ScrollArea
+						h={'100%'}
+						className={scrollAreaClasses.default}
+						classNames={scrollAreaClasses}
+					>
 						<Bookmarks />
 					</ScrollArea>
 				</Tabs.Panel>
 				<Tabs.Panel value='themes'>
-					<ScrollArea h={'100%'}>
+					<ScrollArea
+						h={'100%'}
+						className={scrollAreaClasses.default}
+						classNames={scrollAreaClasses}
+					>
 						<Themes />
 					</ScrollArea>
 				</Tabs.Panel>
 				<Tabs.Panel value='themePlaylists'>
-					<ScrollArea h={'100%'}>
+					<ScrollArea
+						h={'100%'}
+						className={scrollAreaClasses.default}
+						classNames={scrollAreaClasses}
+					>
 						<ThemePlaylists />
 					</ScrollArea>
 				</Tabs.Panel>
 				<Tabs.Panel value='providers'>
-					<ScrollArea h={'100%'}>
+					<ScrollArea
+						h={'100%'}
+						className={scrollAreaClasses.default}
+						classNames={scrollAreaClasses}
+					>
 						<SearchProviders />
 					</ScrollArea>
 				</Tabs.Panel>
 				<Tabs.Panel value='wolClients'>
-					<ScrollArea h={'100%'}>
+					<ScrollArea
+						h={'100%'}
+						className={scrollAreaClasses.default}
+						classNames={scrollAreaClasses}
+					>
 						<WolClients />
 					</ScrollArea>
 				</Tabs.Panel>

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) {

src/styles/ScrollArea.module.css

@@ -0,0 +1,6 @@
+.default {
+    .thumb {
+        background-color: var(--mantine-color-primary-0);
+        z-index: 1000;
+    }
+}

src/styles/index.ts

@@ -6,6 +6,7 @@ import menuClasses from './Menu.module.css';
 import modalClasses from './Modal.module.css';
 import multiSelectClasses from './MultiSelect.module.css';
 import popoverClasses from './Popover.module.css';
+import scrollAreaClasses from './ScrollArea.module.css';
 import selectClasses from './Select.module.css';
 import sliderClasses from './Slider.module.css';
 import stackClasses from './Stack.module.css';
@@ -24,6 +25,7 @@ export {
 	modalClasses,
 	multiSelectClasses,
 	popoverClasses,
+	scrollAreaClasses,
 	selectClasses,
 	sliderClasses,
 	stackClasses,