Style updates

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')}

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

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({

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'}

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}

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:
+					color: 'var(--mantine-color-background-0)',
-						theme.borderColor === theme.primaryColor
-							? 'var(--mantine-color-accent-0)'
-							: 'var(--mantine-color-primary-0)',
 					zIndex: 3,
 				}}
 			>
@@ -93,10 +90,7 @@ function ThemePlaylistCard({
 						paddingLeft: '.25rem',
 						backgroundColor: 'var(--mantine-color-border-0)',
 						borderRadius: '4px',
-						color:
+						color: 'var(--mantine-color-background-0)',
-							theme.borderColor === theme.primaryColor
-								? 'var(--mantine-color-accent-0)'
-								: 'var(--mantine-color-primary-0)',
 						zIndex: 3,
 					}}
 					onClick={() => {

src/pages/settings/components/Theming/ThemePlaylists.tsx

@@ -121,10 +121,7 @@ function ThemePlaylists() {
 											fontWeight: 'bold',
 											borderRadius: '50%',
 											backgroundColor: 'var(--mantine-color-border-0)',
-											color:
+											color: 'var(--mantine-color-background-0)',
-												theme.borderColor === theme.primaryColor
-													? 'var(--mantine-color-accent-0)'
-													: 'var(--mantine-color-primary-0)',
 										}}
 									/>
 								)}

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);

src/styles/Select.module.css

@@ -2,11 +2,22 @@
 	width: 45%;
 }
 .menuSelectLabel {
-	margin-bottom: .25rem !important;
+	position: absolute;
-	color: var(--mantine-color-primary-0) !important;
+	font-size: .75rem !important;
-	font-size: .875rem !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;

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;
 			}