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