Style updates

src/pages/homepage/components/SettingsButton.tsx

@@ -152,6 +152,7 @@ function SettingsButton() {
 										}) || []
 									}
 									classNames={selectClasses}
+									className={selectClasses.default}
 									comboboxProps={{ withinPortal: false }}
 									onChange={(_value, option: any) => setSelectedClient(option)}
 									onLoad={(option: any) => setSelectedClient(option)}

src/pages/settings/components/ThemeModal.tsx

@@ -14,7 +14,7 @@ import {
 } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { FiSave, FiX } from 'react-icons/fi';
-import { modalClasses, selectClasses, textClasses } from 'styles';
+import { modalClasses, selectClasses, textClasses, textInputClasses } from 'styles';
 import ThemeModalContent from './ThemeModalContent';
 
 function ThemeModal({
@@ -33,7 +33,6 @@ function ThemeModal({
 	handleSaveTheme,
 }: any) {
 	const { theme } = useCommonHooks();
-
 	return (
 		<Modal.Root
 			size={'50%'}
@@ -44,7 +43,7 @@ function ThemeModal({
 			style={{
 				'--color-text-pri': theme.primaryColor,
 				'--color-text-acc': theme.accentColor,
-				'--color-background': theme.backgroundImage ? 'gray' : theme.backgroundColor,
+				'--color-background': theme.backgroundColor,
 				'--color-border': theme.borderColor,
 				'--color-search-background': theme.searchColor,
 				'--image-background': `url("${theme.backgroundImage}")`,
@@ -60,6 +59,8 @@ function ThemeModal({
 					<ThemeModalContent selectedTheme={selectedTheme} />
 					<Divider color='black' my='sm' />
 					<TextInput
+						className={textInputClasses.default}
+						classNames={textInputClasses}
 						label='Theme Name'
 						value={selectedTheme.name}
 						onChange={(e) => setSelectedTheme({ ...selectedTheme, name: e.target.value })}
@@ -67,6 +68,10 @@ function ThemeModal({
 							label: {
 								color: theme.primaryColor,
 							},
+							input: {
+								color: theme.primaryColor,
+								border: 'none',
+							},
 						}}
 					/>
 					<Divider color='black' my='sm' />
@@ -85,7 +90,10 @@ function ThemeModal({
 									radius={'sm'}
 									w={'100px'}
 									color={selectedTheme.primaryColor}
-									style={{ cursor: 'pointer' }}
+									style={{
+										cursor: 'pointer',
+										border: `2px dashed ${theme.primaryColor}`,
+									}}
 								/>
 							</Group>
 							<Group justify='space-between'>
@@ -101,7 +109,10 @@ function ThemeModal({
 									radius={'sm'}
 									w={'100px'}
 									color={selectedTheme.accentColor}
-									style={{ cursor: 'pointer' }}
+									style={{
+										cursor: 'pointer',
+										border: `2px dashed ${theme.primaryColor}`,
+									}}
 								/>
 							</Group>
 							<Group justify='space-between'>
@@ -117,7 +128,10 @@ function ThemeModal({
 									radius={'sm'}
 									w={'100px'}
 									color={selectedTheme.backgroundColor}
-									style={{ cursor: 'pointer' }}
+									style={{
+										cursor: 'pointer',
+										border: `2px dashed ${theme.primaryColor}`,
+									}}
 								/>
 							</Group>
 							<Group justify='space-between'>
@@ -133,7 +147,10 @@ function ThemeModal({
 									radius={'sm'}
 									w={'100px'}
 									color={selectedTheme.borderColor}
-									style={{ cursor: 'pointer' }}
+									style={{
+										cursor: 'pointer',
+										border: `2px dashed ${theme.primaryColor}`,
+									}}
 								/>
 							</Group>
 							<Group justify='space-between'>
@@ -149,23 +166,40 @@ function ThemeModal({
 									radius={'sm'}
 									w={'100px'}
 									color={selectedTheme.searchColor}
-									style={{ cursor: 'pointer' }}
+									style={{
+										cursor: 'pointer',
+										border: `2px dashed ${theme.primaryColor}`,
+									}}
 								/>
 							</Group>
 							<Group justify='space-between'>
 								<Select
+									w={'100%'}
 									data={backgroundList}
 									classNames={selectClasses}
 									label='Background Image'
-									value={selectedTheme.backgroundImage}
+									value={
+										selectedTheme.backgroundImage === 'none'
+											? 'None'
+											: selectedTheme.backgroundImage
+									}
 									renderOption={(value) => {
 										return (
-											<Group h={'100%'} w={'100%'} justify='space-between'>
+											<Group
+												h={'50px'}
+												w={'100%'}
+												justify='space-between'
+												style={{
+													color: theme.primaryColor,
+													backgroundColor: theme.backgroundColor,
+													fontSize: '18px',
+												}}
+											>
 												{value.option.value}
 												{value.option.value && value.option.value !== 'None' && (
 													<Image
-														h={'28px'}
+														h={'50px'}
-														w={'50px'}
+														w={'90px'}
 														src={`/backgrounds/${value.option.value}`}
 													/>
 												)}
@@ -187,11 +221,13 @@ function ThemeModal({
 									<ColorPicker value={colorValue} onChange={setColorValue} />
 									<Group w={'75%'} justify='space-between'>
 										<TextInput
-											w={'50%'}
+											className={textInputClasses.default}
+											classNames={textInputClasses}
+											w={'100%'}
 											value={colorValue}
 											onChange={(e) => setColorValue(e.target.value)}
 										/>
-										<Group>
+										<Group w={'100%'} align='center' justify='center'>
 											<Button
 												color={'green'}
 												onClick={() => {
@@ -248,7 +284,7 @@ function ThemeModal({
 						</Stack>
 					</Group>
 					<Divider color='black' my='sm' />
-					<Group>
+					<Group mt={'2rem'}>
 						<Button color={'green'} onClick={handleSaveTheme}>
 							Save
 						</Button>

src/styles/Select.module.css

@@ -16,6 +16,7 @@
     &::placeholder {
         color: var(--color-text-acc) !important;
     }
+    
 }
 
 .options {
@@ -46,5 +47,5 @@
 
 .root {
 
-    width: 180px !important;
+    width: 180px;
 }