New: Increase clickable area of movie select in poster/overview

frontend/src/Movie/Index/Select/MovieIndexPosterSelect.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback } from 'react';
+import React, { SyntheticEvent, useCallback } from 'react';
 import { SelectActionType, useSelect } from 'App/SelectContext';
-import IconButton from 'Components/Link/IconButton';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
 import { icons } from 'Helpers/Props';
 import styles from './MovieIndexPosterSelect.css';
 
@@ -14,8 +15,9 @@ function MovieIndexPosterSelect(props: MovieIndexPosterSelectProps) {
   const isSelected = selectState.selectedState[movieId];
 
   const onSelectPress = useCallback(
-    (event) => {
-      const shiftKey = event.nativeEvent.shiftKey;
+    (event: SyntheticEvent) => {
+      const nativeEvent = event.nativeEvent as PointerEvent;
+      const shiftKey = nativeEvent.shiftKey;
 
       selectDispatch({
         type: SelectActionType.ToggleSelected,
@@ -28,13 +30,15 @@ function MovieIndexPosterSelect(props: MovieIndexPosterSelectProps) {
   );
 
   return (
-    <IconButton
-      className={styles.checkContainer}
-      iconClassName={isSelected ? styles.selected : styles.unselected}
-      name={isSelected ? icons.CHECK_CIRCLE : icons.CIRCLE_OUTLINE}
-      size={20}
-      onPress={onSelectPress}
-    />
+    <Link className={styles.checkButton} onPress={onSelectPress}>
+      <span className={styles.checkContainer}>
+        <Icon
+          className={isSelected ? styles.selected : styles.unselected}
+          name={isSelected ? icons.CHECK_CIRCLE : icons.CIRCLE_OUTLINE}
+          size={20}
+        />
+      </span>
+    </Link>
   );
 }