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()}`,