Style updates

src/pages/homepage/components/Header/Header.tsx

@@ -29,8 +29,8 @@ function Header({
 
 	useEffect(() => {
 		setInterval(() => {
-			const nwDate = new Date();
-			setTime(nwDate);
+			const newDate = new Date();
+			setTime(newDate);
 		}, 1000);
 	}, []);
 

src/pages/homepage/components/SettingsButton.tsx

@@ -86,9 +86,10 @@ function SettingsButton() {
 
 	return (
 		<>
-			{overlayOpened && <Overlay />}
+			{overlayOpened && <Overlay pos={'fixed'} />}
 			<Menu
 				classNames={menuClasses}
+				width={isMobile ? '98%' : '500px'}
 				withinPortal={false}
 				withArrow
 				shadow='md'
@@ -111,8 +112,7 @@ function SettingsButton() {
 									cursor: 'pointer',
 									position: 'absolute',
 									top: '.5rem',
-									right: isMobile ? undefined : '.5rem',
-									left: isMobile ? '.5rem' : undefined,
+									right: '.5rem',
 								}}
 							/>
 						</Tooltip>
@@ -142,15 +142,18 @@ function SettingsButton() {
 									placeholder='Pick a host...'
 									defaultValue={wolClientsData?.[0]?.hostname}
 									data={
-										wolClientsData?.map((wolClient: any) => {
-											return {
-												value: wolClient.hostname,
-												label: `${wolClient.hostname} (${wolClient.macAddress})`,
-												hostname: wolClient.hostname,
-												macAddress: wolClient.macAddress,
-											};
-										}) || []
+										wolClientsData
+											?.map((wolClient: any) => {
+												return {
+													value: wolClient.hostname,
+													label: `${wolClient.hostname} (${wolClient.macAddress})`,
+													hostname: wolClient.hostname,
+													macAddress: wolClient.macAddress,
+												};
+											})
+											.toSorted((a: any, b: any) => a.label.localeCompare(b.label)) || []
 									}
+									w='92%'
 									classNames={selectClasses}
 									className={selectClasses.default}
 									comboboxProps={{ withinPortal: false }}
@@ -225,10 +228,14 @@ function SettingsButton() {
 							classNames={stackClasses}
 						>
 							<Menu.Label>Filters</Menu.Label>
-							<Group>
+							<Group justify='space-between' px={'.5rem'}>
 								<MultiSelect
 									label='Apps'
-									data={categories ?? []}
+									data={
+										categories.toSorted((a: any, b: any) =>
+											a.label.localeCompare(b.label),
+										) ?? []
+									}
 									placeholder={
 										appFilter.length > 0
 											? appFilter.length === 1
@@ -245,7 +252,11 @@ function SettingsButton() {
 								/>
 								<MultiSelect
 									label='Bookmarks'
-									data={categories ?? []}
+									data={
+										categories.toSorted((a: any, b: any) =>
+											a.label.localeCompare(b.label),
+										) ?? []
+									}
 									placeholder={
 										bookmarkFilter.length > 0
 											? bookmarkFilter.length === 1

src/pages/settings/Settings.tsx

@@ -47,23 +47,29 @@ export function Settings() {
 				className={tabClasses.settingsTabs}
 				classNames={tabClasses}
 			>
-				<Tabs.List>
-					<Tabs.Tab value='personalization'>
+				<Tabs.List style={{ justifyContent: 'space-between' }}>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='personalization'>
 						{isMobile ? <FiUser /> : 'Personal Info'}
 					</Tabs.Tab>
-					<Tabs.Tab value='messages'>{isMobile ? <FiMail /> : 'Messages'}</Tabs.Tab>
-					<Tabs.Tab value='applications'>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='messages'>
+						{isMobile ? <FiMail /> : 'Messages'}
+					</Tabs.Tab>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='applications'>
 						{isMobile ? <FiGlobe /> : 'Applications'}
 					</Tabs.Tab>
-					<Tabs.Tab value='bookmarks'>{isMobile ? <FiBookmark /> : 'Bookmarks'}</Tabs.Tab>
-					<Tabs.Tab value='bookmarksCategories'>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='bookmarks'>
+						{isMobile ? <FiBookmark /> : 'Bookmarks'}
+					</Tabs.Tab>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='bookmarksCategories'>
 						{isMobile ? <FiBook /> : 'Categories'}
 					</Tabs.Tab>
-					<Tabs.Tab value='themes'>{isMobile ? <FiEdit /> : 'Themes'}</Tabs.Tab>
-					<Tabs.Tab value='providers'>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themes'>
+						{isMobile ? <FiEdit /> : 'Themes'}
+					</Tabs.Tab>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='providers'>
 						{isMobile ? <FiSearch /> : 'Search Providers'}
 					</Tabs.Tab>
-					<Tabs.Tab value='wolClients'>
+					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='wolClients'>
 						{isMobile ? <FiMonitor /> : 'WoL Clients'}
 					</Tabs.Tab>
 				</Tabs.List>

src/pages/settings/components/ThemeModal.tsx

@@ -285,10 +285,18 @@ function ThemeModal({
 					</Group>
 					<Divider color='black' my='sm' />
 					<Group mt={'2rem'}>
-						<Button color={'green'} styles={{ label: { color: 'black' }}} onClick={handleSaveTheme}>
+						<Button
+							color={'green'}
+							styles={{ label: { color: 'black' } }}
+							onClick={handleSaveTheme}
+						>
 							Save
 						</Button>
-						<Button color={'red'} styles={{ label: { color: 'black' }}} onClick={handleClose}>
+						<Button
+							color={'red'}
+							styles={{ label: { color: 'black' } }}
+							onClick={handleClose}
+						>
 							Cancel
 						</Button>
 					</Group>