Fixed styles

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

@@ -19,7 +19,7 @@ import { useEffect, useState } from 'react';
 import * as fa6 from 'react-icons/fa6';
 import * as si from 'react-icons/si';
 import * as vsc from 'react-icons/vsc';
-import { textInputClasses } from 'styles';
+import { selectClasses, textInputClasses } from 'styles';
 import type { Application } from 'types';
 import AddItemModal from '../Shared/AddItemModal';
 import SettingsHeader from '../Shared/SettingsHeader';
@@ -164,13 +164,28 @@ const ApplicationSettings = () => {
 						<Group justify='center'>
 							<Select
 								label={'Icon'}
-								className={textInputClasses.settingsItem}
+								className={selectClasses.settingsItem}
-								classNames={textInputClasses}
+								classNames={{
+									input: selectClasses.menuSelectInput,
+									label: selectClasses.menuSelectLabel,
+									options: selectClasses.menuSelectOptions,
+									option: selectClasses.menuSelectOption,
+									dropdown: selectClasses.dropdown,
+								}}
+								mt={12}
 								data={Object.keys(allIcons).map((icon) => {
 									return { value: icon, label: icon };
 								})}
+								defaultValue={newApplication.icon}
 								comboboxProps={{
-									zIndex: 1000,
+									zIndex: 3000,
+									withinPortal: false,
+								}}
+								onChange={(event: any) => {
+									setNewApplication({
+										...newApplication,
+										icon: event,
+									});
 								}}
 								renderOption={(item: any) => {
 									const Icon = allIcons[item.option.value];
@@ -182,6 +197,9 @@ const ApplicationSettings = () => {
 									);
 								}}
 								searchable
+								maxDropdownHeight={175}
+								onDropdownOpen={() => setIsOpen(true)}
+								onDropdownClose={() => setIsOpen(false)}
 							/>
 							<TextInput
 								label={'Filter'}

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

@@ -14,7 +14,7 @@ import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
 import { useCommonHooks, useMutationAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiTrash } from 'react-icons/fi';
-import { cardClasses, textInputClasses } from 'styles';
+import { cardClasses, selectClasses, textInputClasses } from 'styles';
 import type { Application } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';
 
@@ -170,17 +170,26 @@ function DebouncedApplication({
 					}}
 				/>
 			</Group>
-			<Group w={'100%'} justify='center'>
+			<Group w={'100%'} justify='space-between'>
 				<Select
+					w={'48%'}
 					label={'Icon'}
-					className={textInputClasses.settingsItem}
+					className={selectClasses.settingsItem}
-					classNames={textInputClasses}
+					classNames={{
+						input: selectClasses.menuSelectInput,
+						label: selectClasses.menuSelectLabel,
+						options: selectClasses.menuSelectOptions,
+						option: selectClasses.menuSelectOption,
+						dropdown: selectClasses.dropdown,
+					}}
+					mt={12}
 					data={Object.keys(allIcons).map((icon) => {
 						return { value: icon, label: icon };
 					})}
 					defaultValue={app.icon}
 					comboboxProps={{
 						zIndex: 3000,
+						withinPortal: false,
 					}}
 					onChange={(event: any) => {
 						setUpdate({
@@ -198,6 +207,7 @@ function DebouncedApplication({
 						);
 					}}
 					searchable
+					maxDropdownHeight={175}
 					onDropdownOpen={() => setIsOpen(true)}
 					onDropdownClose={() => setIsOpen(false)}
 				/>

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

@@ -32,7 +32,7 @@ function SettingsHeader({
 			mt={0}
 			justify='center'
 			pos={'absolute'}
-			style={{ backdropFilter: 'blur(10px) brightness(.75)', zIndex: 250 }}
+			style={{ backdropFilter: 'blur(10px) brightness(.75)', zIndex: 199 }}
 		>
 			<Group w={isMobile ? undefined : '100%'}>
 				<Text

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

@@ -122,6 +122,7 @@ function ThemesSettings() {
 					display={currentTheme === 'random' ? 'flex' : 'none'}
 					blur={5}
 					style={{
+						zIndex: 190,
 						borderRadius: '10px',
 						marginTop: '-15px',
 						marginBottom: '-10px',
@@ -155,7 +156,7 @@ function ThemesSettings() {
 							<Box
 								style={{
 									zIndex:
-										currentTheme === 'random' && cardTheme.name === theme.name ? 200 : 0,
+										currentTheme === 'random' && cardTheme.name === theme.name ? 195 : 0,
 								}}
 							>
 								<ThemeCard

src/styles/Select.module.css

@@ -4,8 +4,8 @@
 	font-size: 14px !important;
 }
 .menuSelectInput {
-	border-color: light-dark(var(--mantine-color-appGray-2), white) !important;
+	border-color: var(--color-border) !important;
-	background-color: var(--color-background) !important;
+	background-color: var(--color-search-background) !important;
 	color: var(--color-text-pri) !important;
 	&:focus {
 		border-color: var(--color-text-pri) !important;
@@ -37,8 +37,8 @@
 
 	/* applies styles to hovered item (with mouse or keyboard) */
 	&:hover {
-		background-color: var(--color-text-acc) !important;
+		background-color: var(--color-text-pri) !important;
-		color: var(--color-text-pri) !important;
+		color: var(--color-background) !important;
 	}
 }