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

frontend/src/Series/Index/Select/SeriesIndexPosterSelect.css

@@ -1,36 +1,38 @@
-.checkContainer {
+.checkButton {
   position: absolute;
-  top: 10px;
+  top: 0;
-  left: 10px;
+  left: 0;
   z-index: 3;
+  width: 36px;
+  height: 36px;
+}
+
+.checkContainer {
+  position: absolute;
+  top: 8px;
+  left: 8px;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   background-color: var(--defaultColor);
 }
 
-.icon {
-  position: absolute;
-  top: -1px;
-  left: -1px;
-}
-
 .selected {
-  composes: icon;
-
   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(--sonarrBlue);
+    }
   }
 }

frontend/src/Series/Index/Select/SeriesIndexPosterSelect.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/Series/Index/Select/SeriesIndexPosterSelect.tsx

@@ -1,6 +1,7 @@
 import React, { 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 './SeriesIndexPosterSelect.css';
 
@@ -28,13 +29,15 @@ function SeriesIndexPosterSelect(props: SeriesIndexPosterSelectProps) {
   );
 
   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>
   );
 }