Style updates

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

@@ -53,7 +53,9 @@ function BackgroundModal({
 			<Modal.Content>
 				<Modal.Header style={{ justifyContent: 'center' }}>
 					<Group pos={'absolute'}>
-						<Text c={'var(--mantine-color-background-0)'}>Backgrounds</Text>
+						<Text fw={600} fz={'1.5rem'} c={'var(--mantine-color-primary-0)'}>
+							Manage Backgrounds
+						</Text>
 					</Group>
 					<Modal.CloseButton />
 				</Modal.Header>
@@ -124,7 +126,7 @@ function BackgroundModal({
 								))}
 						</SimpleGrid>
 					</ScrollArea>
-					<Group w={'100%'} align={'center'}>
+					<Group gap={0} w={'100%'} align={'center'} justify='space-between'>
 						<FileInput
 							clearable
 							accept='image/png,image/jpeg'
@@ -137,6 +139,7 @@ function BackgroundModal({
 							}
 							p={'xl'}
 							w={'60%'}
+							pl={0}
 							error={err && 'Please upload a background'}
 							styles={{
 								input: {
@@ -151,13 +154,14 @@ function BackgroundModal({
 						<Card
 							style={{
 								aspectRatio: '16/9',
-								width: '30%',
+								width: '35%',
 								backgroundSize: 'cover',
 								backgroundPosition: 'center',
 								backgroundRepeat: 'no-repeat',
 								backgroundColor: 'var(--mantine-color-search-0)',
 								padding: '2rem',
 								margin: '1rem',
+								marginRight: 0,
 							}}
 						>
 							{background ? (