From 7501fe095e0ecd74502bcee7b6848afe171ac61a Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Sat, 22 Apr 2023 16:12:43 -0500
Subject: [PATCH] New: Increase clickable area of movie select in
 poster/overview

---
 .../Index/Select/MovieIndexPosterSelect.css   | 42 ++++++++++---------
 .../Select/MovieIndexPosterSelect.css.d.ts    |  2 +-
 .../Index/Select/MovieIndexPosterSelect.tsx   | 26 +++++++-----
 3 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/frontend/src/Movie/Index/Select/MovieIndexPosterSelect.css b/frontend/src/Movie/Index/Select/MovieIndexPosterSelect.css
index 58390db06..d6f64cc83 100644
--- a/frontend/src/Movie/Index/Select/MovieIndexPosterSelect.css
+++ b/frontend/src/Movie/Index/Select/MovieIndexPosterSelect.css
@@ -1,36 +1,38 @@
-.checkContainer {
+.checkButton {
   position: absolute;
-  top: 10px;
-  left: 10px;
+  top: 0;
+  left: 0;
   z-index: 3;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background-color: var(--defaultColor);
+  width: 36px;
+  height: 36px;
 }
 
-.icon {
+.checkContainer {
   position: absolute;
-  top: -1px;
-  left: -1px;
+  top: 8px;
+  left: 8px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: var(--defaultColor);
 }
 
 .selected {
-  composes: icon;
-
-  color: var(--sonarrBlue);
-
-  &:hover {
-    color: var(--white);
-  }
+  color: var(--primaryColor);
 }
 
 .unselected {
-  composes: icon;
-
   color: var(--white);
+}
 
+.checkButton {
   &:hover {
-    color: var(--sonarrBlue);
+    .selected {
+      color: var(--white);
+    }
+
+    .unselected {
+      color: var(--primaryColor);
+    }
   }
 }
diff --git a/frontend/src/Movie/Index/Select/MovieIndexPosterSelect.css.d.ts b/frontend/src/Movie/Index/Select/MovieIndexPosterSelect.css.d.ts
index a443b31bc..d4de0b5f5 100644
--- a/frontend/src/Movie/Index/Select/MovieIndexPosterSelect.css.d.ts
+++ b/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;
 }
diff --git a/frontend/src/Movie/Index/Select/MovieIndexPosterSelect.tsx b/frontend/src/Movie/Index/Select/MovieIndexPosterSelect.tsx
index 12421cec9..594e9c7d0 100644
--- a/frontend/src/Movie/Index/Select/MovieIndexPosterSelect.tsx
+++ b/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>
   );
 }