Improve web IDE commit input: Phase 1

We should improve the commit input area to encourage well structured and longer commit messages. Two important guidelines for this are:

• Writing subject lines under 50 characters so they are properly displayed in git log
• Wrapping the commit body at 72 characters so it's properly displayed in the console after indentations are added

Proposal

As a first iteration, we will keep the current commit UX and modify it slightly to help users keep track of line length.

We add a header to the commit message box and we put an information icon in it. When hovering over the icon, a pop-over appears with the text:

The character highlighter helps you keep the subject line under 50 characters and wrap the body at 72 so they are readable in git.

Info icon	Pop-over

When the subject line exceeds 50 characters, the remaining characters are highlighted in $orange-200.

The same things happens when a regular line exceeds 72 characters.

Additional details

The following elements should be changed to monospace font:

• The collapsed commit message box
• The branch name for the first radio box ('Commit to master branch')
• The branch name input for the other two radio boxes

Spec previews

Spec previews can be found in the hosted design repository

Original proposal

- Use monospaced font for commit input area - Default the commit panel to be 80 char wide - Show vertical line at 50 char because it is recommended to keep first line less than 50 chars so it will render nicely in `git log` - Show vertical line at 80 char because subsequent long message should be less than 80 chars per line

Links

https://chris.beams.io/posts/git-commit/

cc: @iamphill @jramsay @timzallmann