Style fixes

src/pages/settings/Settings.tsx

@@ -27,7 +27,7 @@ export function Settings() {
 	const { tabValue } = useParams();
 	return (
 		<Stack h={'100%'} gap={0}>
-			<Group gap={0} pb={'1rem'} pl={'2rem'}>
+			<Group pos={'relative'} gap={0} pb={'1rem'}>
 				<ActionIcon
 					className={actionIconClasses.backButton}
 					classNames={actionIconClasses}

src/pages/settings/components/Applications/Applications.tsx

@@ -140,12 +140,12 @@ const ApplicationSettings = () => {
 								}}
 							/>
 						</Group>
-						<Group w={isMobile ? undefined : '60%'} justify='center'>
+						<Group w={isMobile ? undefined : '64%'} justify='center'>
 							<TextInput
 								label={'URL'}
 								className={textInputClasses.settingsItem}
 								pt={16}
-								w={isMobile ? undefined : '91%'}
+								w={isMobile ? undefined : '99%'}
 								classNames={textInputClasses}
 								defaultValue={newApplication.url}
 								onChange={(event) => {

src/pages/settings/components/Shared/SettingsHeader.tsx

@@ -32,7 +32,7 @@ function SettingsHeader({
 			mt={0}
 			justify='center'
 			pos={'absolute'}
-			style={{ backdropFilter: 'blur(10px) brightness(.5)', zIndex: 99 }}
+			style={{ backdropFilter: 'blur(10px) brightness(.75)', zIndex: 250 }}
 		>
 			<Group w={isMobile ? undefined : '100%'}>
 				<Text
@@ -67,8 +67,7 @@ function SettingsHeader({
 								className={textClasses.settingsTooltip}
 								classNames={textClasses}
 								highlightStyles={{
-									backgroundImage:
-										'linear-gradient(45deg, var(--color-text-acc), var(--color-text-pri))',
+									backgroundImage: `linear-gradient(45deg, ${theme.accentColor}, ${theme.primaryColor})`,
 									fontWeight: 700,
 									WebkitBackgroundClip: 'text',
 									WebkitTextFillColor: 'transparent',

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

@@ -107,7 +107,7 @@ function ThemesSettings() {
 				}}
 				color={theme.primaryColor}
 				style={{
-					zIndex: 100,
+					zIndex: 250,
 				}}
 			/>
 			<Group