From abad473e4cd81de57bcef43040170742b9573027 Mon Sep 17 00:00:00 2001
From: Sean Edmunds <sean.edmunds@cottonteam.com>
Date: Wed, 4 Feb 2026 16:15:01 -0600
Subject: [PATCH] Added color swatches

---
 .../ThemeModal/components/BackgroundPicker.tsx    |  2 +-
 .../Themes/ThemeModal/components/ThemeChanges.tsx |  4 ++--
 .../ThemeModal/components/ThemeColorPicker.tsx    | 15 +++++++++++++--
 .../Themes/ThemeModal/components/ThemeOptions.tsx |  2 +-
 src/styles/TextInput.module.css                   |  1 -
 5 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/pages/settings/components/Theming/Themes/ThemeModal/components/BackgroundPicker.tsx b/src/pages/settings/components/Theming/Themes/ThemeModal/components/BackgroundPicker.tsx
index c988210..bd05b59 100644
--- a/src/pages/settings/components/Theming/Themes/ThemeModal/components/BackgroundPicker.tsx
+++ b/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={() => {
diff --git a/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeChanges.tsx b/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeChanges.tsx
index 3c029d0..225da2c 100644
--- a/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeChanges.tsx
+++ b/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' && (
 												<>
diff --git a/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeColorPicker.tsx b/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeColorPicker.tsx
index 24e45ad..0ab656a 100644
--- a/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeColorPicker.tsx
+++ b/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}
diff --git a/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeOptions.tsx b/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeOptions.tsx
index d341c5e..ba436b0 100644
--- a/src/pages/settings/components/Theming/Themes/ThemeModal/components/ThemeOptions.tsx
+++ b/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)'}
diff --git a/src/styles/TextInput.module.css b/src/styles/TextInput.module.css
index bff8a54..129ed5e 100644
--- a/src/styles/TextInput.module.css
+++ b/src/styles/TextInput.module.css
@@ -88,7 +88,6 @@
 		.wrapper {
 			display: flex;
 			margin-top: -16px;
-			padding-top: 8px;
 			border-radius: 4px;
 			.input {
 				border: none;