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

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

@@ -1,36 +1,38 @@
-.checkContainer {
+.checkButton {
   position: absolute;
-  top: 10px;
+  top: 0;
-  left: 10px;
+  left: 0;
   z-index: 3;
-  width: 18px;
+  width: 36px;
-  height: 18px;
+  height: 36px;
-  border-radius: 50%;
-  background-color: var(--defaultColor);
 }
 
-.icon {
+.checkContainer {
   position: absolute;
-  top: -1px;
+  top: 8px;
-  left: -1px;
+  left: 8px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: var(--defaultColor);
 }
 
 .selected {
-  composes: icon;
+  color: var(--primaryColor);
-
-  color: var(--sonarrBlue);
-
-  &:hover {
-    color: var(--white);
-  }
 }
 
 .unselected {
-  composes: icon;
-
   color: var(--white);
+}
 
+.checkButton {
   &:hover {
-    color: var(--sonarrBlue);
+    .selected {
+      color: var(--white);
+    }
+
+    .unselected {
+      color: var(--primaryColor);
+    }
   }
 }

frontend/src/Movie/Index/Select/MovieIndexPosterSelect.css.d.ts

@@ -1,8 +1,8 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'checkButton': string;
   'checkContainer': string;
-  'icon': string;
   'selected': string;
   'unselected': string;
 }

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) => {
+    (event: SyntheticEvent) => {
-      const shiftKey = event.nativeEvent.shiftKey;
+      const nativeEvent = event.nativeEvent as PointerEvent;
+      const shiftKey = nativeEvent.shiftKey;
 
       selectDispatch({
         type: SelectActionType.ToggleSelected,
@@ -28,13 +30,15 @@ function MovieIndexPosterSelect(props: MovieIndexPosterSelectProps) {
   );
 
   return (
-    <IconButton
+    <Link className={styles.checkButton} onPress={onSelectPress}>
-      className={styles.checkContainer}
+      <span className={styles.checkContainer}>
-      iconClassName={isSelected ? styles.selected : styles.unselected}
+        <Icon
-      name={isSelected ? icons.CHECK_CIRCLE : icons.CIRCLE_OUTLINE}
+          className={isSelected ? styles.selected : styles.unselected}
-      size={20}
+          name={isSelected ? icons.CHECK_CIRCLE : icons.CIRCLE_OUTLINE}
-      onPress={onSelectPress}
+          size={20}
-    />
+        />
+      </span>
+    </Link>
   );
 }