diff --git a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.css b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.css index a862c117c..4a2792b61 100644 --- a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.css +++ b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.css @@ -1,4 +1,5 @@ -.series { +.container { + display: flex; padding: 10px 20px; width: 100%; @@ -6,3 +7,19 @@ background-color: $menuItemHoverBackgroundColor; } } + +.series { + flex: 1 0 0; + overflow: hidden; +} + +.tvdbLink { + composes: link from '~Components/Link/Link.css'; + + margin-left: auto; + color: $textColor; +} + +.tvdbLinkIcon { + margin-left: 10px; +} diff --git a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.js b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.js index d82cdc924..7b67adab7 100644 --- a/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.js +++ b/frontend/src/AddSeries/ImportSeries/Import/SelectSeries/ImportSeriesSearchResult.js @@ -1,33 +1,28 @@ import PropTypes from 'prop-types'; -import React, { Component } from 'react'; +import React, { useCallback } from 'react'; +import { icons } from 'Helpers/Props'; import Link from 'Components/Link/Link'; +import Icon from 'Components/Icon'; import ImportSeriesTitle from './ImportSeriesTitle'; import styles from './ImportSeriesSearchResult.css'; -class ImportSeriesSearchResult extends Component { +function ImportSeriesSearchResult(props) { + const { + tvdbId, + title, + year, + network, + isExistingSeries, + onPress + } = props; - // - // Listeners + const onPressCallback = useCallback(() => onPress(tvdbId), [tvdbId, onPress]); - onPress = () => { - this.props.onPress(this.props.tvdbId); - } - - // - // Render - - render() { - const { - title, - year, - network, - isExistingSeries - } = this.props; - - return ( + return ( +