UX improvements

[varkor]

This PR includes various usability improvements.

• Make the code popup have a style consistent with the toolbar.
• Make pressing Escape while the code popup is open close the popup.
• Add Control/Command(-Shift)-Z for undo/redo.
• Use Alt rather than Control for triggering the arrow tool, as Control is used for context menus on macOS.
• Don't ask user if they really want to leave if there's no diagram.
• Allow the code popup to be closed by clicking on the code popup button.

[yishn]

I'm in progress of rewriting the code popup and I've included some of your proposed changes except for:

Add keyboard shortcuts for undo/redo

Hijacking browser shortcuts like that will interfere with browser/system functionality, e.g. when focusing the code textarea and pressing Ctrl/Cmd+Z to undo your textarea changes you will involuntarily undo your diagram.

Use Alt rather than Ctrl for arrows

This may work for macOS, but for Windows/Linux pressing Alt will focus the main menu, stealing the focus from the website, so that won't do. So I changed it to the Shift key. Would that cause any problems on macOS?

[varkor]

Hijacking browser shortcuts like that will interfere with browser/system functionality, e.g. when focusing the code textarea and pressing Ctrl/Cmd+Z to undo your textarea changes you will involuntarily undo your diagram.

That's true. It might be most intuitive to only trigger these actions when document.activeElement instanceof HTMLInputElement does not hold.

So I changed it to the Shift key. Would that cause any problems on macOS?

Shift key should work just as well!

I'm in progress of rewriting the code popup and I've included some of your proposed changes

In that case, feel free to close this pull request if it is no longer relevant.