Style updates

src/pages/settings/components/ThemeModal.tsx

@@ -48,11 +48,13 @@ function ThemeModal({
 				width: '100%',
 				height: '75px',
 				background:
-					index === hovered
+					item !== 'none'
+						? index === hovered
 							? `linear-gradient(${selectedTheme.backgroundColor}88, ${selectedTheme.backgroundColor}88), no-repeat center url(/backgrounds/${item})`
-						: `no-repeat center url(/backgrounds/${item})`,
-				backgroundSize: 'cover',
-				backgroundColor: item === 'None' ? '#00000088' : undefined,
+							: `no-repeat center url(/backgrounds/${item})`
+						: undefined,
+				backgroundSize: item !== 'none' ? 'cover' : undefined,
+				backgroundColor: item === 'none' ? '#00000088' : undefined,
 				paddingLeft: 8,
 				alignItems: 'center',
 			}}
@@ -138,6 +140,7 @@ function ThemeModal({
 								input: {
 									color: theme.primaryColor,
 									border: 'none',
+									borderBottom: `1px solid ${theme.primaryColor}`,
 								},
 							}}
 						/>
@@ -167,6 +170,7 @@ function ThemeModal({
 										/>
 										<Button
 											color={'green'}
+											styles={{ label: { color: 'black' } }}
 											onClick={() => {
 												switch (colorId) {
 													case 'primaryColor':
@@ -205,7 +209,11 @@ function ThemeModal({
 										>
 											<FiSave />
 										</Button>
-										<Button color={'red'} onClick={closePicker}>
+										<Button
+											color={'red'}
+											styles={{ label: { color: 'black' } }}
+											onClick={closePicker}
+										>
 											<FiX />
 										</Button>
 										<Group w={'100%'} align='center' justify='center' />

src/pages/settings/components/ThemeModalContent.tsx

@@ -70,14 +70,19 @@ export default function ThemeModalContent({ selectedTheme }: any) {
 			</Box>
 		);
 	};
-
 	return (
 		<Stack
 			style={{
 				width: '100%',
-				background: `linear-gradient(${selectedTheme.backgroundColor}33, ${selectedTheme.backgroundColor}33), no-repeat center url(/backgrounds/${selectedTheme.backgroundImage})`,
-				backgroundSize: 'cover',
-				backgroundColor: selectedTheme.backgroundColor,
+				background:
+					selectedTheme.backgroundImage !== 'none'
+						? `linear-gradient(${selectedTheme.backgroundColor}33, ${selectedTheme.backgroundColor}33), no-repeat center url(/backgrounds/${selectedTheme.backgroundImage})`
+						: undefined,
+				backgroundSize: selectedTheme.backgroundImage !== 'none' ? 'cover' : undefined,
+				backgroundColor:
+					selectedTheme.backgroundImage === 'none'
+						? selectedTheme.backgroundColor
+						: undefined,
 				borderRadius: '10px',
 				border: '2px solid',
 			}}