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 (
-
+
+
+
+
+
);
}