From 57a64b056a51ff539f5152d194689b4e2c693beb Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Mon, 13 Feb 2023 17:26:32 -0800
Subject: [PATCH] New: Increase clickable area of series select in
 poster/overview

---
 .../Index/Select/SeriesIndexPosterSelect.css  | 38 ++++++++++---------
 .../Select/SeriesIndexPosterSelect.css.d.ts   |  2 +-
 .../Index/Select/SeriesIndexPosterSelect.tsx  | 19 ++++++----
 3 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/frontend/src/Series/Index/Select/SeriesIndexPosterSelect.css b/frontend/src/Series/Index/Select/SeriesIndexPosterSelect.css
index 58390db06..953adae0e 100644
--- a/frontend/src/Series/Index/Select/SeriesIndexPosterSelect.css
+++ b/frontend/src/Series/Index/Select/SeriesIndexPosterSelect.css
@@ -1,36 +1,38 @@
-.checkContainer {
+.checkButton {
   position: absolute;
-  top: 10px;
-  left: 10px;
+  top: 0;
+  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);
+    }
   }
 }
diff --git a/frontend/src/Series/Index/Select/SeriesIndexPosterSelect.css.d.ts b/frontend/src/Series/Index/Select/SeriesIndexPosterSelect.css.d.ts
index a443b31bc..d4de0b5f5 100644
--- a/frontend/src/Series/Index/Select/SeriesIndexPosterSelect.css.d.ts
+++ b/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;
 }
diff --git a/frontend/src/Series/Index/Select/SeriesIndexPosterSelect.tsx b/frontend/src/Series/Index/Select/SeriesIndexPosterSelect.tsx
index ea327f150..d67b24ddc 100644
--- a/frontend/src/Series/Index/Select/SeriesIndexPosterSelect.tsx
+++ b/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
-      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>
   );
 }