Search/help updates

src/components/HelpModal/HelpModal.tsx

@@ -1,14 +1,15 @@
-import { Divider, Group, Modal, Stack, Text } from '@mantine/core';
+import { Divider, Group, Modal, Stack } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { modalClasses } from 'styles';
+import HintItem from './HintItem';
 
 export function HelpModal({
 	providerModalOpened,
 	closeProviderModal,
+	applicationData,
 	providerData,
 }: any) {
 	const { theme, setSearchValue, setProviderLabel, setProviderURL } = useCommonHooks();
-
 	return (
 		<Modal.Root
 			size={'60%'}
@@ -40,14 +41,67 @@ export function HelpModal({
 				</Modal.Header>
 				<Modal.Body pb={'2rem'}>
 					<Stack gap={0} w={'100%'} align='center'>
-						<h3 style={{ padding: 0, margin: 0 }}>Search Providers</h3>
-						<Divider py={8} w={'65%'} color={theme.accentColor} />
+						<h3
+							style={{
+								zIndex: 0,
+								padding: '8px',
+								marginTop: 0,
+								marginBottom: -32,
+								borderRadius: '8px',
+								color: theme.backgroundColor,
+								backgroundColor: theme.borderColor,
+							}}
+						>
+							Search Providers
+						</h3>
+						<Divider py={8} color={theme.accentColor} />
+						<Group
+							style={{
+								width: '100%',
+								backgroundColor: theme.searchColor,
+								borderRadius: '8px',
+								padding: '24px',
+								justifyItems: 'center',
+							}}
+						>
 							{providerData?.map((provider: any) => (
-							<Group key={provider.prefix} gap={0} w={'50%'} justify='space-between'>
-								<Text>{provider.prefix}</Text>
-								<Text>{provider.name}</Text>
-							</Group>
+								<HintItem
+									key={provider.prefix}
+									command={provider.prefix}
+									item={provider.name}
+								/>
 							))}
+						</Group>
+						<h3
+							style={{
+								zIndex: 0,
+								padding: '8px',
+								marginBottom: -32,
+								borderRadius: '8px',
+								color: theme.backgroundColor,
+								backgroundColor: theme.borderColor,
+							}}
+						>
+							Available Applications
+						</h3>
+						<Divider py={8} color={theme.accentColor} />
+						<Group
+							style={{
+								width: '100%',
+								backgroundColor: theme.searchColor,
+								borderRadius: '8px',
+								padding: '32px',
+								justifyItems: 'center',
+							}}
+						>
+							{applicationData?.map((application: any) => (
+								<HintItem
+									key={application.id}
+									command={`!${application.baseUrl.substr(1).toLowerCase()}`}
+									item={application.url}
+								/>
+							))}
+						</Group>
 					</Stack>
 				</Modal.Body>
 			</Modal.Content>

src/components/HelpModal/HintItem.tsx

@@ -0,0 +1,40 @@
+import { Group, Text } from '@mantine/core';
+
+function HintItem({ command, item }: any) {
+	return (
+		<Group
+			gap={0}
+			align='center'
+			justify='center'
+			style={{
+				display: 'flex',
+				padding: '8px',
+				borderRadius: '10px',
+				backgroundColor: 'var(--color-background)',
+			}}
+		>
+			<Text
+				style={{
+					color: 'var(--color-background)',
+					backgroundColor: 'var(--color-text-pri)',
+					padding: '8px',
+					borderRadius: '10px',
+				}}
+			>
+				{command}
+			</Text>
+			<Text
+				style={{
+					color: 'var(--color-background)',
+					backgroundColor: 'var(--color-text-acc)',
+					padding: '8px',
+					borderRadius: '10px',
+				}}
+			>
+				{item}
+			</Text>
+		</Group>
+	);
+}
+
+export default HintItem;

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

@@ -73,7 +73,7 @@ function LargeHeader({ greet, date, setCurrent, weather, basicWeather }: any) {
 					.replace('$^lastName', currentUser.lastName.toUpperCase())}
 			</Text>
 			<Text
-				fz={48}
+				fz={36}
 				className={textClasses.dateTime}
 				classNames={textClasses}
 				m={0}