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}
-								classNames={textInputClasses}
+								className={selectClasses.settingsItem}
+								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'}