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

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, selectClasses, textInputClasses } from 'styles';
+import { cardClasses, selectClasses, switchClasses, textInputClasses } from 'styles';
 import type { Application } from 'types';
 import DeleteItemModal from '../Shared/DeleteItemModal';
 
@@ -111,7 +111,9 @@ function DebouncedApplication({
 				label={'Enabled'}
 			>
 				<Switch
-					label={<Text c={theme.primaryColor}>Enabled</Text>}
+					className={switchClasses.default}
+					classNames={switchClasses}
+					label={'Enabled'}
 					labelPosition='left'
 					pos={'absolute'}
 					left={16}
@@ -123,7 +125,6 @@ function DebouncedApplication({
 							enabled: event.target.checked ? 1 : 0,
 						});
 					}}
-					color={theme.primaryColor}
 				/>
 			</Tooltip>
 			<Group w={'100%'} justify='center'>
@@ -183,10 +184,12 @@ function DebouncedApplication({
 						dropdown: selectClasses.dropdown,
 					}}
 					mt={12}
+					limit={100}
+					defaultSearchValue={app?.icon}
 					data={Object.keys(allIcons).map((icon) => {
 						return { value: icon, label: icon };
 					})}
-					defaultValue={app.icon}
+					defaultValue={app?.icon}
 					comboboxProps={{
 						zIndex: 3000,
 						withinPortal: false,