Typing

src/components/HelpModal/HelpModal.tsx

@@ -1,7 +1,7 @@
 import { Divider, Modal, Stack } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { modalClasses } from 'styles';
-import type { Provider } from 'types';
+import type { Application, Provider } from 'types';
 import HelpSection from './HelpSection';
 
 export function HelpModal({
@@ -12,8 +12,16 @@ export function HelpModal({
 	closeProviderModal,
 	applicationData,
 	providerData,
-}: any) {
-	const { theme, isMobile } = useCommonHooks();
+}: {
+	setSearchValue: (value: string) => void;
+	setProviderLabel: (label: string) => void;
+	setProviderURL: (url: string) => void;
+	providerModalOpened: boolean;
+	closeProviderModal: () => void;
+	applicationData: Application[];
+	providerData: Provider[];
+}) {
+	const { theme, isMobile, modalStyle } = useCommonHooks();
 	return (
 		<Modal.Root
 			size={'60%'}
@@ -28,14 +36,7 @@ export function HelpModal({
 				setProviderURL('https://www.google.com/search?q=');
 				closeProviderModal();
 			}}
-			style={{
-				'--color-text-pri': theme.primaryColor,
-				'--color-text-acc': theme.accentColor,
-				'--color-background': theme.backgroundColor,
-				'--color-border': theme.borderColor,
-				'--color-search-background': theme.searchColor,
-				'--image-background': `url(${theme.backgroundImage})`,
-			}}
+			style={modalStyle}
 			closeOnEscape
 			closeOnClickOutside
 		>
@@ -59,7 +60,7 @@ export function HelpModal({
 						<Divider my={8} color={theme.accentColor} />
 						<HelpSection
 							name={'Available Applications'}
-							items={applicationData.map((application: any) => {
+							items={applicationData.map((application: Application) => {
 								return {
 									name: application.url,
 									command: `!${application.baseUrl.substring(1).toLowerCase()}`,

src/components/HelpModal/HelpSection.tsx

@@ -2,7 +2,7 @@ import { Divider, Group } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import HintItem from './HintItem';
 
-function HelpSection({ name, items }: any) {
+function HelpSection({ name, items }: { name: string; items: object[] }) {
 	const { theme } = useCommonHooks();
 	return (
 		<>
@@ -30,7 +30,7 @@ function HelpSection({ name, items }: any) {
 				}}
 			>
 				{items
-					?.sort((a: any, b: any) => (a.command > b.command ? 1 : -1))
+					?.toSorted((a: any, b: any) => (a.command > b.command ? 1 : -1))
 					.map((item: any) => (
 						<HintItem key={item.command} command={item.command} name={item.name} />
 					))}

src/components/HelpModal/HintItem.tsx

@@ -1,6 +1,6 @@
 import { Group, Text } from '@mantine/core';
 
-function HintItem({ command, name }: any) {
+function HintItem({ command, name }: { command: string; name: string }) {
 	return (
 		<Group
 			gap={0}