Small UI Tweaks, Fix Banner Images When Artist Deleted

frontend/src/Album/Search/InteractiveEpisodeSearchRow.js

@@ -45,7 +45,13 @@ class InteractiveEpisodeSearchRow extends Component {
   // Listeners
 
   onGrabPress = () => {
-    this.props.onGrabPress(this.props.guid, this.props.indexerId);
+    const {
+      guid,
+      indexerId,
+      onGrabPress
+    }= this.props;
+
+    onGrabPress(guid, indexerId);
   }
 
   //

frontend/src/Artist/ArtistBanner.js

@@ -61,9 +61,11 @@ class ArtistBanner extends Component {
     if (nextBanner && (!banner || nextBanner.url !== banner.url)) {
       this.setState({
         banner: nextBanner,
-        posterUrl: getBannerUrl(nextBanner, pixelRatio * size),
+        bannerUrl: getBannerUrl(nextBanner, pixelRatio * size),
-        isLoaded: false,
         hasError: false
+        // Don't reset isLoaded, as we want to immediately try to
+        // show the new image, whether an image was shown previously
+        // or the placeholder was shown.
       });
     }
   }

frontend/src/Artist/ArtistPoster.js

@@ -62,8 +62,10 @@ class ArtistPoster extends Component {
       this.setState({
         poster: nextPoster,
         posterUrl: getPosterUrl(nextPoster, pixelRatio * size),
-        isLoaded: false,
         hasError: false
+        // Don't reset isLoaded, as we want to immediately try to
+        // show the new image, whether an image was shown previously
+        // or the placeholder was shown.
       });
     }
   }

frontend/src/Artist/Index/Banners/ArtistIndexBanner.css

@@ -21,7 +21,6 @@ $hoverScale: 1.05;
 
 .bannerContainer {
   position: relative;
-  background-color: #ffffff;
 }
 
 .link {

frontend/src/Artist/Index/Overview/ArtistIndexOverview.css

@@ -1,7 +1,16 @@
 $hoverScale: 1.05;
 
 .container {
+  &:hover {
+    .content {
+      background-color: $tableRowHoverBackgroundColor;
+    }
+  }
+}
+
+.content {
   display: flex;
+  flex-grow: 1;
 }
 
 .poster {

frontend/src/Artist/Index/Overview/ArtistIndexOverview.js

@@ -113,91 +113,93 @@ class ArtistIndexOverview extends Component {
 
     return (
       <div className={styles.container} style={style}>
-        <div className={styles.poster} style={elementStyle}>
+        <div className={styles.content}>
-          <div className={styles.posterContainer}>
+          <div className={styles.poster}>
-            {
+            <div className={styles.posterContainer}>
-              status === 'ended' &&
+              {
-              <div
+                status === 'ended' &&
-                className={styles.ended}
+                <div
-                title="Ended"
+                  className={styles.ended}
-              />
+                  title="Ended"
-            }
+                />
-
+              }
-            <Link
+
-              className={styles.link}
+              <Link
-              style={elementStyle}
+                className={styles.link}
-              to={link}
-            >
-              <ArtistPoster
-                className={styles.poster}
                 style={elementStyle}
-                images={images}
+                to={link}
-                size={250}
+              >
-                lazy={false}
+                <ArtistPoster
-                overflow={true}
+                  className={styles.poster}
-              />
+                  style={elementStyle}
-            </Link>
+                  images={images}
-          </div>
+                  size={250}
+                  lazy={false}
+                  overflow={true}
+                />
+              </Link>
+            </div>
 
-          <ArtistIndexProgressBar
+            <ArtistIndexProgressBar
-            monitored={monitored}
+              monitored={monitored}
-            status={status}
+              status={status}
-            trackCount={trackCount}
+              trackCount={trackCount}
-            trackFileCount={trackFileCount}
+              trackFileCount={trackFileCount}
-            posterWidth={posterWidth}
+              posterWidth={posterWidth}
-            detailedProgressBar={overviewOptions.detailedProgressBar}
+              detailedProgressBar={overviewOptions.detailedProgressBar}
-          />
+            />
-        </div>
+          </div>
 
-        <div className={styles.info}>
+          <div className={styles.info}>
-          <div className={styles.titleRow}>
+            <div className={styles.titleRow}>
-            <Link
+              <Link
-              className={styles.title}
+                className={styles.title}
-              to={link}
+                to={link}
-            >
+              >
-              {artistName}
+                {artistName}
-            </Link>
+              </Link>
-
+
-            <div className={styles.actions}>
+              <div className={styles.actions}>
-              <SpinnerIconButton
+                <SpinnerIconButton
-                name={icons.REFRESH}
+                  name={icons.REFRESH}
-                title="Refresh artist"
+                  title="Refresh Artist"
-                isSpinning={isRefreshingArtist}
+                  isSpinning={isRefreshingArtist}
-                onPress={onRefreshArtistPress}
+                  onPress={onRefreshArtistPress}
-              />
+                />
+
+                <IconButton
+                  name={icons.EDIT}
+                  title="Edit Artist"
+                  onPress={this.onEditArtistPress}
+                />
+              </div>
+            </div>
 
-              <IconButton
+            <div className={styles.details}>
-                name={icons.EDIT}
+              <Link
-                title="Edit Artist"
+                className={styles.overview}
-                onPress={this.onEditArtistPress}
+                style={{
+                  maxHeight: `${height}px`
+                }}
+                to={link}
+              >
+                <Truncate lines={Math.floor(height / (defaultFontSize * lineHeight))}>
+                  {overview}
+                </Truncate>
+              </Link>
+
+              <ArtistIndexOverviewInfo
+                height={height}
+                nextAiring={nextAiring}
+                qualityProfile={qualityProfile}
+                showRelativeDates={showRelativeDates}
+                shortDateFormat={shortDateFormat}
+                timeFormat={timeFormat}
+                {...overviewOptions}
+                {...otherProps}
               />
             </div>
           </div>
-
-          <div className={styles.details}>
-            <Link
-              className={styles.overview}
-              style={{
-                maxHeight: `${height}px`
-              }}
-              to={link}
-            >
-              <Truncate lines={Math.floor(height / (defaultFontSize * lineHeight))}>
-                {overview}
-              </Truncate>
-            </Link>
-
-            <ArtistIndexOverviewInfo
-              height={height}
-              nextAiring={nextAiring}
-              qualityProfile={qualityProfile}
-              showRelativeDates={showRelativeDates}
-              shortDateFormat={shortDateFormat}
-              timeFormat={timeFormat}
-              {...overviewOptions}
-              {...otherProps}
-            />
-          </div>
         </div>
 
         <EditArtistModalConnector