Removing X image placeholder in favor of contextual icons

src/js/components/GridItem.js

@@ -118,6 +118,7 @@ export default class GridItem extends React.Component {
           size="medium"
           className="grid__item__thumbnail"
           images={item.images || item.icons}
+          type={type}
         />
         <div className="grid__item__name">
           {item.name ? item.name : <span className="opaque-text">{item.uri}</span>}

src/js/components/Thumbnail.js

@@ -52,12 +52,39 @@ export default memo((props) => {
     zoom_icon = <Link className="thumbnail__zoom" to={`/image-zoom?url=${image}`}><Icon name="search" /></Link>;
   }
 
+  const placeholderIcon = () => {
+    switch (props.type) {
+      case 'artist':
+      case 'user':
+        return 'person';
+      case 'album':
+        return 'album';
+      case 'playlist':
+        return 'queue_music';
+      case 'track':
+        return 'audio_track';
+      default:
+        return 'image';
+    };
+  }
+  let placeholder = 'image';
+
   return (
     <div className={class_name}>
-      {props.useImageTag ? (
-        <img alt="Artwork thumbnail" className="thumbnail__image thumbnail__image--use-image-tag" src={`${image || '/iris/assets/no-image.svg'}`} />
+      {!image && (
+        <Icon className="thumbnail__placeholder" name={placeholderIcon()} />
+      )}
+      {props.useImageTag && image ? (
+        <img
+          alt="Artwork thumbnail"
+          className="thumbnail__image thumbnail__image--use-image-tag"
+          src={image}
+        />
       ) : (
-        <div className="thumbnail__image" style={{ backgroundImage: `url("${image || '/iris/assets/no-image.svg'}")` }} />
+        <div
+          className="thumbnail__image"
+          style={{ backgroundImage: `url("${image}")` }}
+        />
       )}
       {props.glow && image && <div className="thumbnail__image thumbnail__image--glow" style={{ backgroundImage: `url("${image}")` }} />}
       <div className="thumbnail__actions">

src/js/views/Artist.js

@@ -52,7 +52,7 @@ class Artist extends React.Component {
         loadArtist,
       },
     } = this.props;
-  
+
     if (uri !== prevUri) {
       loadArtist(uri);
     } else if (!prev_mopidy_connected && mopidy_connected) {
@@ -407,7 +407,7 @@ class Artist extends React.Component {
             <div className="heading">
 
               <div className="heading__thumbnail">
-                <Thumbnail size="medium" circle canZoom image={image} />
+                <Thumbnail size="medium" circle canZoom type="artist" image={image} />
               </div>
 
               <div className="heading__content">