Change mode switcher to a select box

[jasmussen]

This PR changes the mode switcher from a custom JS thing to be a common selectbox, although heavily styled. The benefit is that you can click/hold the select box and release it on the option you want, making it easier to switch. It would also be more flexible if a plugin wanted to, say, add Markdown as an option.

GIF:

This will need a review, especially the React bits.

[aduth]

We don't want to duplicate the source of truth from state. We'll simply want the render logic to use the prop directly. I'll plan to refactor this afternoon.

[jasmussen]

Thanks.

[aduth]

Also failing on this accessibility lint rule:

https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md

[jasmussen]

Also failing on this accessibility lint rule:

My linter actually caught this, but when I tested onBlur it wasn't an instant change whereas onChange was. Perhaps I was missing something.

[aduth]

My linter actually caught this, but when I tested onBlur it wasn't an instant change whereas onChange was. Perhaps I was missing something.

Depending on what the lint rule is trying to suggest (in this case a less immediate feedback from toggling through options) we may consider simply bypassing or removing the rule altogether, or applying both an onChange and onBlur.

[aduth]

For now I've disabled the rule with reasoning left inline. I'll plan to create a separate "Accessibility Review" issue to discuss the case, as onBlur handling is at odds with a select which has immediate effect (unless we also wanted a confirm action).

[aduth]

No linting to capture it, but we ought to be cautious of mixed spacing in SCSS files.

[jasmussen]

Just wanted to let you know that I really appreciate this and very much taking notes. Thanks for pushing fixes too.