Remove costume canvas and just display tiles using <img> tags

src/components/sprite-selector-item/sprite-selector-item.css

@@ -42,6 +42,8 @@
 .sprite-image {
     margin: auto;
     user-select: none;
+    max-width: 32px;
+    max-height: 32px;
 }
 
 .sprite-info {

src/components/sprite-selector-item/sprite-selector-item.jsx

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import CostumeCanvas from '../costume-canvas/costume-canvas.jsx';
 import CloseButton from '../close-button/close-button.jsx';
 import styles from './sprite-selector-item.css';
 import {ContextMenuTrigger} from 'react-contextmenu';
@@ -38,11 +37,9 @@ const SpriteSelectorItem = props => (
             <div className={styles.number}>{props.number}</div>
         )}
         {props.costumeURL ? (
-            <CostumeCanvas
+            <img
                 className={styles.spriteImage}
-                height={32}
-                url={props.costumeURL}
-                width={32}
+                src={props.costumeURL}
             />
         ) : null}
         <div className={styles.spriteInfo}>

src/components/stage-selector/stage-selector.css

@@ -89,6 +89,8 @@ $header-height: calc($stage-menu-height - 2px);
     border: 1px solid $ui-black-transparent;
     border-radius: .25rem;
     box-shadow: inset 0 0 4px $ui-black-transparent;
+    max-width: 64px;
+    max-height: 48px;
 }
 
 .add-button {

src/components/stage-selector/stage-selector.jsx

@@ -5,7 +5,6 @@ import {defineMessages, intlShape, injectIntl, FormattedMessage} from 'react-int
 
 import Box from '../box/box.jsx';
 import ActionMenu from '../action-menu/action-menu.jsx';
-import CostumeCanvas from '../costume-canvas/costume-canvas.jsx';
 import styles from './stage-selector.css';
 
 import backdropIcon from '../action-menu/icon--backdrop.svg';
@@ -78,11 +77,9 @@ const StageSelector = props => {
                 </div>
             </div>
             {url ? (
-                <CostumeCanvas
+                <img
                     className={styles.costumeCanvas}
-                    height={48}
-                    url={url}
-                    width={64}
+                    src={url}
                 />
             ) : null}
             <div className={styles.label}>

test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap

@@ -30,16 +30,9 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number and de
   >
     5
   </div>
-  <canvas
+  <img
     className={undefined}
-    height={32}
-    style={
-      Object {
-        "height": "32px",
-        "width": "32px",
-      }
-    }
-    width={32}
+    src="https://scratch.mit.edu/foo/bar/pony"
   />
   <div
     className={undefined}
@@ -113,16 +106,9 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
       src="test-file-stub"
     />
   </div>
-  <canvas
+  <img
     className={undefined}
-    height={32}
-    style={
-      Object {
-        "height": "32px",
-        "width": "32px",
-      }
-    }
-    width={32}
+    src="https://scratch.mit.edu/foo/bar/pony"
   />
   <div
     className={undefined}

test/unit/components/sprite-selector-item.test.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {mountWithIntl, shallowWithIntl, componentWithIntl} from '../../helpers/intl-helpers.jsx';
 import SpriteSelectorItemComponent from '../../../src/components/sprite-selector-item/sprite-selector-item';
-import CostumeCanvas from '../../../src/components/costume-canvas/costume-canvas';
 import CloseButton from '../../../src/components/close-button/close-button';
 
 describe('SpriteSelectorItemComponent', () => {
@@ -73,17 +72,6 @@ describe('SpriteSelectorItemComponent', () => {
         expect(onDeleteButtonClick).toHaveBeenCalled();
     });
 
-    test('creates a CostumeCanvas when a costume url is defined', () => {
-        const wrapper = shallowWithIntl(getComponent());
-        expect(wrapper.find(CostumeCanvas).exists()).toBe(true);
-    });
-
-    test('does not create a CostumeCanvas when a costume url is null', () => {
-        costumeURL = null;
-        const wrapper = shallowWithIntl(getComponent());
-        expect(wrapper.find(CostumeCanvas).exists()).toBe(false);
-    });
-
     test('it has a context menu with delete menu item and callback', () => {
         const wrapper = mountWithIntl(getComponent());
         const contextMenu = wrapper.find('ContextMenu');