Adds BorderedMenuItem and use it for delete menu

src/components/context-menu/context-menu.css

@@ -17,14 +17,25 @@
     z-index: $z-index-context-menu;
 }
 
-.menu-item {
+.menu-item, .menu-item-bordered {
     padding: 8px 12px;
     white-space: nowrap;
     cursor: pointer;
     transition: 0.1s ease;
 }
 
+.menu-item-bordered {
+    border-top: 3px solid $text-primary;
+}
+
+.menu-item:hover, .menu-item-bordered:hover {
+    color: white;
+}
+
 .menu-item:hover {
     background: $motion-primary;
-    color: white;
+}
+
+.menu-item-bordered:hover {
+    background: $red-primary;
 }

src/components/context-menu/context-menu.jsx

@@ -17,7 +17,16 @@ const StyledMenuItem = props => (
     />
 );
 
+const BorderedMenuItem = props => (
+    <MenuItem
+        {...props}
+        attributes={{className: styles.menuItemBordered}}
+    />
+);
+
+
 export {
+    BorderedMenuItem,
     StyledContextMenu as ContextMenu,
     StyledMenuItem as MenuItem
 };

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

@@ -5,7 +5,7 @@ import React from 'react';
 import CloseButton from '../close-button/close-button.jsx';
 import styles from './sprite-selector-item.css';
 import {ContextMenuTrigger} from 'react-contextmenu';
-import {ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';
+import {BorderedMenuItem, ContextMenu, MenuItem} from '../context-menu/context-menu.jsx';
 import {FormattedMessage} from 'react-intl';
 
 // react-contextmenu requires unique id to match trigger and context menu
@@ -60,15 +60,6 @@ const SpriteSelectorItem = props => (
                         />
                     </MenuItem>
                 ) : null}
-                {props.onDeleteButtonClick ? (
-                    <MenuItem onClick={props.onDeleteButtonClick}>
-                        <FormattedMessage
-                            defaultMessage="delete"
-                            description="Menu item to delete in the right click menu"
-                            id="gui.spriteSelectorItem.contextMenuDelete"
-                        />
-                    </MenuItem>
-                ) : null }
                 {props.onExportButtonClick ? (
                     <MenuItem onClick={props.onExportButtonClick}>
                         <FormattedMessage
@@ -78,6 +69,15 @@ const SpriteSelectorItem = props => (
                         />
                     </MenuItem>
                 ) : null }
+                {props.onDeleteButtonClick ? (
+                    <BorderedMenuItem onClick={props.onDeleteButtonClick}>
+                        <FormattedMessage
+                            defaultMessage="delete"
+                            description="Menu item to delete in the right click menu"
+                            id="gui.spriteSelectorItem.contextMenuDelete"
+                        />
+                    </BorderedMenuItem>
+                ) : null }
             </ContextMenu>
         ) : null}
     </ContextMenuTrigger>