Style updates

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 { selectClasses, textInputClasses } from 'styles';
+import { popoverClasses, selectClasses, textInputClasses } from 'styles';
 import type { Application } from 'types';
 import AddItemModal from '../Shared/AddItemModal';
 import SettingsHeader from '../Shared/SettingsHeader';
@@ -117,11 +117,12 @@ const ApplicationSettings = () => {
 				title={'Add a new application'}
 				body={
 					<Stack gap={0} align='center'>
-						<Group justify='center'>
+						<Group w={'100%'} justify='center'>
 							<TextInput
 								label={'Name'}
 								className={textInputClasses.settingsItem}
 								pt={16}
+								w={'45%'}
 								classNames={textInputClasses}
 								defaultValue={newApplication.name}
 								onChange={(event) => {
@@ -135,6 +136,7 @@ const ApplicationSettings = () => {
 								label={'Base URL'}
 								className={textInputClasses.settingsItem}
 								pt={16}
+								w={'45%'}
 								classNames={textInputClasses}
 								defaultValue={newApplication.baseUrl}
 								onChange={(event) => {
@@ -145,12 +147,12 @@ const ApplicationSettings = () => {
 								}}
 							/>
 						</Group>
-						<Group w={isMobile ? undefined : '64%'} justify='center'>
+						<Group w={isMobile ? '94%' : '92%'} justify='center'>
 							<TextInput
 								label={'URL'}
 								className={textInputClasses.settingsItem}
 								pt={16}
-								w={isMobile ? undefined : '99%'}
+								w={'100%'}
 								classNames={textInputClasses}
 								defaultValue={newApplication.url}
 								onChange={(event) => {
@@ -161,7 +163,7 @@ const ApplicationSettings = () => {
 								}}
 							/>
 						</Group>
-						<Group justify='center'>
+						<Group w={'100%'} justify='center'>
 							<Select
 								label={'Icon'}
 								className={selectClasses.settingsItem}
@@ -172,7 +174,10 @@ const ApplicationSettings = () => {
 									option: selectClasses.menuSelectOption,
 									dropdown: selectClasses.dropdown,
 								}}
+								w={'45%'}
 								mt={12}
+								limit={100}
+								placeholder='Search for an icon...'
 								data={Object.keys(allIcons).map((icon) => {
 									return { value: icon, label: icon };
 								})}
@@ -205,6 +210,7 @@ const ApplicationSettings = () => {
 								label={'Filter'}
 								className={textInputClasses.settingsItem}
 								pt={16}
+								w={'45%'}
 								classNames={textInputClasses}
 								defaultValue={newApplication.filterName}
 								onChange={(event) => {
@@ -268,6 +274,7 @@ const ApplicationSettings = () => {
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}
+				searchPlaceholder={'Search Applications...'}
 			/>
 			{dragging ? (
 				<DragDropContext onDragEnd={onDragEnd}>
@@ -366,6 +373,7 @@ const ApplicationSettings = () => {
 									withOverlay
 									withinPortal={false}
 									closeOnClickOutside={!isOpen}
+									classNames={popoverClasses}
 								>
 									<Popover.Target>
 										<Box