Adds BorderedMenuItem and use it for delete menu

[apple502j]

Resolves

Resolves #4345

Proposed Changes

• Adds BorderedMenuItem, which has a border at the top and becomes red when hovered
• Use it for Delete menu (also reorder it)

Reason for Changes

Some people accidentally delete sprites because there was no difference between this and the others

Test Coverage

• Lint passed
• Checked on browser

Browser Coverage

Check the OS/browser combinations tested (At least 2)

Mac

• Chrome
• Firefox
• Safari

Windows

• Chrome
• Firefox
• Edge

Chromebook

• Chrome

iPad

• Safari

Android Tablet

• Chrome

[thisandagain]

/cc @carljbowman

[benjiwheeler]

LGTM! I tweaked the css slightly to simplify it, and softened the separator's appearance a tiny bit.

[carljbowman]

Sorry I was not able to respond quick enough yesterday, before this was merged.

@apple502j - Thanks for working on this. Great to have a divider style. We def need one in out Context Menu component. Also nice to shift the menu items specifically for this menu.

The separator is a little chunky and feels slightly inconsistent with the rest of the UI. It'd be great to reduce the border down to 1px and make it a transparent black, we should have one in GUI, possibly a 15% or 25%. @benjiwheeler - Do you mind making those changes?

We can keep the red hover for now, but it is something that we should continue to monitor.