From 3d8a5ad7c8a5d9ef62ab464bd7a1976e93cfb0a3 Mon Sep 17 00:00:00 2001
From: Sean Edmunds <sean.edmunds@cottonteam.com>
Date: Fri, 11 Jul 2025 18:12:25 -0500
Subject: [PATCH] Style updates

---
 .../components/Applications/Applications.tsx  |  2 +-
 .../Applications/DebouncedApplication.tsx     | 13 ++++++++--
 .../Bookmarks/DebouncedBookmarkItem.tsx       |  2 +-
 .../Bookmarks/DebouncedGroupSettingsItem.tsx  | 25 -------------------
 .../Personalization/Personalization.tsx       |  8 +++---
 .../components/Theming/ThemePlaylistCard.tsx  | 12 +++------
 .../components/Theming/ThemePlaylists.tsx     |  5 +---
 src/styles/Card.module.css                    |  1 +
 src/styles/Select.module.css                  | 17 ++++++++++---
 src/styles/TextInput.module.css               | 21 ++++++++++++++--
 10 files changed, 55 insertions(+), 51 deletions(-)

diff --git a/src/pages/settings/components/Applications/Applications.tsx b/src/pages/settings/components/Applications/Applications.tsx
index 0fcf515..b8cb075 100644
--- a/src/pages/settings/components/Applications/Applications.tsx
+++ b/src/pages/settings/components/Applications/Applications.tsx
@@ -199,7 +199,7 @@ const ApplicationSettings = () => {
 									withAsterisk
 								/>
 							</Group>
-							<Group w={'100%'} justify='center'>
+							<Group w={'100%'} justify='center' pos={'relative'}>
 								<Select
 									key={form.key('icon')}
 									{...form.getInputProps('icon')}
diff --git a/src/pages/settings/components/Applications/DebouncedApplication.tsx b/src/pages/settings/components/Applications/DebouncedApplication.tsx
index d2a1492..2240e64 100644
--- a/src/pages/settings/components/Applications/DebouncedApplication.tsx
+++ b/src/pages/settings/components/Applications/DebouncedApplication.tsx
@@ -86,7 +86,11 @@ function DebouncedApplication({
 				}}
 				openModal={openModal}
 			/>
-			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
+			<Group
+				justify='center'
+				pos={'relative'}
+				style={{ flexDirection: isMobile ? 'column' : 'row' }}
+			>
 				<TextInput
 					label={'Name'}
 					className={textInputClasses.settingsItem}
@@ -113,7 +117,11 @@ function DebouncedApplication({
 					}}
 				/>
 			</Group>
-			<Group justify='center' style={{ flexDirection: isMobile ? 'column' : 'row' }}>
+			<Group
+				justify='center'
+				pos={'relative'}
+				style={{ flexDirection: isMobile ? 'column' : 'row' }}
+			>
 				<TextInput
 					label={'URL'}
 					className={textInputClasses.settingsItem}
@@ -130,6 +138,7 @@ function DebouncedApplication({
 			</Group>
 			<Group
 				justify='space-between'
+				pos={'relative'}
 				style={{ flexDirection: isMobile ? 'column' : 'row' }}
 			>
 				<Select
diff --git a/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx b/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
index 1384dbd..d5a03f3 100644
--- a/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
+++ b/src/pages/settings/components/Bookmarks/DebouncedBookmarkItem.tsx
@@ -115,8 +115,8 @@ function DebouncedBookmarkItem({
 				<TextInput
 					label={'URL'}
 					className={textInputClasses.settingsItem}
-					w={isMobile ? '80%' : '100%'}
 					classNames={textInputClasses}
+					w={isMobile ? '80%' : '100%'}
 					defaultValue={bookmark.url}
 					onChange={(event) => {
 						setUpdate({
diff --git a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
index d21bd46..0575b60 100644
--- a/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
+++ b/src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
@@ -145,11 +145,6 @@ function DebouncedGroupSettingsItem({
 					<Group gap={0} align='center' justify='space-between'>
 						<TextInput
 							label={'Name'}
-							labelProps={{
-								style: {
-									color: 'var(--mantine-color-primary-0)',
-								},
-							}}
 							w={isMobile ? undefined : '58%'}
 							className={textInputClasses.settingsItem}
 							classNames={textInputClasses}
@@ -163,11 +158,6 @@ function DebouncedGroupSettingsItem({
 						/>
 						<TextInput
 							label={'Filter Name'}
-							labelProps={{
-								style: {
-									color: 'var(--mantine-color-primary-0)',
-								},
-							}}
 							w={isMobile ? undefined : '28%'}
 							className={textInputClasses.settingsItem}
 							classNames={textInputClasses}
@@ -337,11 +327,6 @@ function DebouncedGroupSettingsItem({
 												{...form.getInputProps('name')}
 												label={'Name'}
 												placeholder='eg. Google'
-												labelProps={{
-													style: {
-														color: 'var(--mantine-color-primary-0)',
-													},
-												}}
 												className={textInputClasses.settingsItem}
 												pt={'1rem'}
 												classNames={textInputClasses}
@@ -351,11 +336,6 @@ function DebouncedGroupSettingsItem({
 												key={form.key('category')}
 												{...form.getInputProps('category')}
 												label={'Category'}
-												labelProps={{
-													style: {
-														color: 'var(--mantine-color-primary-0)',
-													},
-												}}
 												className={textInputClasses.settingsItem}
 												pt={'1rem'}
 												classNames={textInputClasses}
@@ -369,11 +349,6 @@ function DebouncedGroupSettingsItem({
 												{...form.getInputProps('url')}
 												label={'URL'}
 												placeholder='eg. https://google.com'
-												labelProps={{
-													style: {
-														color: 'var(--mantine-color-primary-0)',
-													},
-												}}
 												className={textInputClasses.settingsItem}
 												w={'100%'}
 												pt={'1rem'}
diff --git a/src/pages/settings/components/Personalization/Personalization.tsx b/src/pages/settings/components/Personalization/Personalization.tsx
index c59b25d..7512a12 100644
--- a/src/pages/settings/components/Personalization/Personalization.tsx
+++ b/src/pages/settings/components/Personalization/Personalization.tsx
@@ -78,7 +78,7 @@ const PersonalizationSettings = () => {
 						/>
 					)}
 					<GridCol span={isMobile ? 12 : 4}>
-						<Card className={cardClasses.settingsItem} classNames={cardClasses}>
+						<Card className={cardClasses.settingsItem} classNames={cardClasses} pt={0}>
 							<TextInput
 								label={'First Name'}
 								className={textInputClasses.settingsItem}
@@ -95,7 +95,7 @@ const PersonalizationSettings = () => {
 						</Card>
 					</GridCol>
 					<GridCol span={isMobile ? 12 : 4}>
-						<Card className={cardClasses.settingsItem} classNames={cardClasses}>
+						<Card className={cardClasses.settingsItem} classNames={cardClasses} pt={0}>
 							<TextInput
 								label={'Last Name'}
 								className={textInputClasses.settingsItem}
@@ -112,7 +112,7 @@ const PersonalizationSettings = () => {
 						</Card>
 					</GridCol>
 					<GridCol span={isMobile ? 12 : 4}>
-						<Card className={cardClasses.settingsItem} classNames={cardClasses}>
+						<Card className={cardClasses.settingsItem} classNames={cardClasses} pt={0}>
 							<TextInput
 								label={'Email'}
 								className={textInputClasses.settingsItem}
@@ -129,7 +129,7 @@ const PersonalizationSettings = () => {
 						</Card>
 					</GridCol>
 					<GridCol span={12}>
-						<Card className={cardClasses.settingsItem} classNames={cardClasses}>
+						<Card className={cardClasses.settingsItem} classNames={cardClasses} pt={0}>
 							<TextInput
 								label={'Physical Address'}
 								className={textInputClasses.settingsItem}
diff --git a/src/pages/settings/components/Theming/ThemePlaylistCard.tsx b/src/pages/settings/components/Theming/ThemePlaylistCard.tsx
index 73a5462..c925bbc 100644
--- a/src/pages/settings/components/Theming/ThemePlaylistCard.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylistCard.tsx
@@ -26,7 +26,7 @@ function ThemePlaylistCard({
 	allThemes: Theme[];
 }) {
 	const [hover, setHover] = useState(false);
-	const { setThemeName, setCurrentThemePlaylist, theme, handleDelete } = useCommonHooks();
+	const { setThemeName, setCurrentThemePlaylist, handleDelete } = useCommonHooks();
 	const defaultLists = ['All', 'Backgrounds', 'No Backgrounds'];
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const themeList = JSON.parse(
@@ -74,10 +74,7 @@ function ThemePlaylistCard({
 					paddingLeft: '.25rem',
 					backgroundColor: 'var(--mantine-color-border-0)',
 					borderRadius: '4px',
-					color:
-						theme.borderColor === theme.primaryColor
-							? 'var(--mantine-color-accent-0)'
-							: 'var(--mantine-color-primary-0)',
+					color: 'var(--mantine-color-background-0)',
 					zIndex: 3,
 				}}
 			>
@@ -93,10 +90,7 @@ function ThemePlaylistCard({
 						paddingLeft: '.25rem',
 						backgroundColor: 'var(--mantine-color-border-0)',
 						borderRadius: '4px',
-						color:
-							theme.borderColor === theme.primaryColor
-								? 'var(--mantine-color-accent-0)'
-								: 'var(--mantine-color-primary-0)',
+						color: 'var(--mantine-color-background-0)',
 						zIndex: 3,
 					}}
 					onClick={() => {
diff --git a/src/pages/settings/components/Theming/ThemePlaylists.tsx b/src/pages/settings/components/Theming/ThemePlaylists.tsx
index 25802ae..d8d0012 100644
--- a/src/pages/settings/components/Theming/ThemePlaylists.tsx
+++ b/src/pages/settings/components/Theming/ThemePlaylists.tsx
@@ -121,10 +121,7 @@ function ThemePlaylists() {
 											fontWeight: 'bold',
 											borderRadius: '50%',
 											backgroundColor: 'var(--mantine-color-border-0)',
-											color:
-												theme.borderColor === theme.primaryColor
-													? 'var(--mantine-color-accent-0)'
-													: 'var(--mantine-color-primary-0)',
+											color: 'var(--mantine-color-background-0)',
 										}}
 									/>
 								)}
diff --git a/src/styles/Card.module.css b/src/styles/Card.module.css
index b9e80df..cfd3af5 100644
--- a/src/styles/Card.module.css
+++ b/src/styles/Card.module.css
@@ -1,5 +1,6 @@
 .settingsItem {
 	&.root {
+		padding-top: 1.5rem;
 		color: var(--mantine-color-primary-0);
 		background-color: transparent;
 		backdrop-filter: blur(5px) brightness(1.25);
diff --git a/src/styles/Select.module.css b/src/styles/Select.module.css
index 8f7cdfa..e3beb48 100644
--- a/src/styles/Select.module.css
+++ b/src/styles/Select.module.css
@@ -2,11 +2,22 @@
 	width: 45%;
 }
 .menuSelectLabel {
-	margin-bottom: .25rem !important;
-	color: var(--mantine-color-primary-0) !important;
-	font-size: .875rem !important;
+	position: absolute;
+	font-size: .75rem !important;
+	padding-left: .5rem;
+	padding-right: .5rem;
+	padding-top: .125rem;
+	padding-bottom: .125rem;
+	margin-left: -8px;
+	border-radius: 8px;
+	background-color: var(--mantine-color-primary-0);
+	color: var(--mantine-color-background-0);
+	box-shadow: 2px 2px var(--mantine-color-border-0);
+	z-index: 1;
+	top: 18px;
 }
 .menuSelectInput {
+	margin-top: 1.75rem;
 	border-color: var(--mantine-color-border-0) !important;
 	background-color: var(--mantine-color-background-0) !important;
 	color: var(--mantine-color-primary-0) !important;
diff --git a/src/styles/TextInput.module.css b/src/styles/TextInput.module.css
index a5d4946..250125d 100644
--- a/src/styles/TextInput.module.css
+++ b/src/styles/TextInput.module.css
@@ -23,13 +23,30 @@
 .settingsItem {
 	&.root {
 		padding-top: 1rem;
+		.label {
+			position: relative;
+			font-size: .75rem;
+			padding-left: .5rem;
+			padding-right: .5rem;
+			padding-top: .125rem;
+			padding-bottom: .125rem;
+			margin-left: -8px;
+			margin-bottom: 8px;
+			border-radius: 8px;
+			background-color: var(--mantine-color-primary-0);
+			color: var(--mantine-color-background-0);
+			box-shadow: 2px 2px var(--mantine-color-border-0);
+			z-index: 1;
+		}
 		.wrapper {
 			display: flex;
-			justify-content: center;
+			background-color: var(--mantine-color-search-0);
+			margin-top: -16px;
+			padding-top: 8px;
 			.input {
 				width: 100%;
+				background-color: transparent;
 				border: none;
-				background-color: var(--mantine-color-search-0);
 				color: var(--mantine-color-primary-0);
 				font-size: 1.125rem;
 			}