fix focus styling

Don’t use default focus style it’s ugly.

Don’t allow the image to be dragged.

src/components/delete-button/delete-button.css

@@ -6,11 +6,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    border-radius: 50%;
     user-select: none;
     cursor: pointer;
     transition: all 0.15s ease-out;
 }
 
+.delete-button:focus {
+    outline: none;
+    box-shadow: 0px 0px 0px 4px $motion-transparent;
+}
+
 .delete-button-visible {
   display: flex;
   align-items: center;

src/components/delete-button/delete-button.jsx

@@ -19,6 +19,7 @@ const DeleteButton = props => (
         <div className={styles.deleteButtonVisible}>
             <img
                 className={styles.deleteIcon}
+                draggable={false}
                 src={deleteIcon}
             />
         </div>

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

@@ -57,6 +57,7 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number and de
     >
       <img
         className={undefined}
+        draggable={false}
         src="test-file-stub"
       />
     </div>
@@ -141,6 +142,7 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
     >
       <img
         className={undefined}
+        draggable={false}
         src="test-file-stub"
       />
     </div>