Added color swatches

src/pages/settings/components/Theming/Themes/ThemeModal/components/BackgroundPicker.tsx

@@ -106,7 +106,7 @@ export default function BackgroundPicker({
 					))}
 				</Stack>
 			</ScrollArea.Autosize>
-			<Group justify='center'>
+			<Group mih={'36px'} pb={'.5rem'}>
 				<Button
 					color={'green'}
 					onClick={() => {

src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeChanges.tsx

@@ -140,7 +140,7 @@ export default function ThemeChanges({
 												</Group>
 											)}
 											{key.includes('Font') && (
-												<>
+												<Group w={'95%'} justify='space-between'>
 													<Text
 														style={{
 															fontFamily:
@@ -161,7 +161,7 @@ export default function ThemeChanges({
 														{designerTheme[key as keyof Theme] ||
 															`Default (${currentUser.defaultFont})`}
 													</Text>
-												</>
+												</Group>
 											)}
 											{key === 'backgroundImage' && (
 												<>

src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeColorPicker.tsx

@@ -37,8 +37,17 @@ export default function ThemeColorPicker({
 	closePicker: () => void;
 }) {
 	const { theme, textShadowStyle } = useCommonHooks();
+	const swatches = [
+		'#ffffff',
+		'#000000',
+		defaultTheme.primaryColor,
+		defaultTheme.accentColor,
+		defaultTheme.backgroundColor,
+		defaultTheme.searchColor,
+		defaultTheme.borderColor,
+	];
 	return (
-		<Stack h={'100%'} align='center'>
+		<Stack h={'100%'} align='center' gap={0}>
 			<Text
 				className={textClasses.sectionTitle}
 				classNames={textClasses}
@@ -61,6 +70,7 @@ export default function ThemeColorPicker({
 					}}
 					format={'hexa'}
 					w={'90%'}
+					swatches={swatches}
 				/>
 			)}
 			{colorId !== 'searchColor' && (
@@ -76,6 +86,7 @@ export default function ThemeColorPicker({
 					format={'hex'}
 					w={'90%'}
 					mb={'1.5rem'}
+					swatches={swatches}
 				/>
 			)}
 			<Stack w={'90%'} gap={0}>
@@ -182,7 +193,7 @@ export default function ThemeColorPicker({
 					/>
 				</Group>
 			</Stack>
-			<Group mt={'auto'} justify='center' mih={'36px'} pb={'1.5rem'}>
+			<Group mt={'auto'} justify='center' mih={'36px'} pb={'1rem'}>
 				<Tooltip
 					label={'Random Color'}
 					className={toolTipClasses.default}

src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeOptions.tsx

@@ -205,7 +205,7 @@ export default function ThemeOptions({
 					setDesignerTheme={setDesignerTheme}
 				/>
 			)}
-			<Group mih={'36px'} pb={'1.5rem'}>
+			<Group mih={'36px'} pb={'1rem'}>
 				<Tooltip
 					label={'Randomize Colors!'}
 					c={'var(--mantine-color-primary-0)'}

src/styles/TextInput.module.css

@@ -88,7 +88,6 @@
 		.wrapper {
 			display: flex;
 			margin-top: -16px;
-			padding-top: 8px;
 			border-radius: 4px;
 			.input {
 				border: none;