Align review comments UX and diff buttons UX

[bpasero]

See here:

Since both components are very similar, why not align them:

• same border width for the vertical lines
• same button feedback when you hover

[alexr00]

@hediet I think the diff button looks a bit nicer, so I would change comments in the following ways:

• animation
• give "+" button a border

[alexr00]

Per #209627, I will not add a border to the comment buttons.

[alexr00]

After spending the afternoon on this, I am stumped on how to do the animation of the comments button fading in and out. The situation:

• As an editor gutter decoration, I can choose which css classes get added to the HTML element that gets added for my decoration.
• My decoration doesn't use :hover, instead when the whole line is hovered it shows. This is achieved by being an editor decoration that get's added/removed as needed.
• I can create a transition when the element is added to the dom using @starting-style ✅
• I can't come up with a way to fade the element out when the line is un-hovered, as the dom element is simply removed. ❌
• Similarly, to make the fade in look nice the commenting range vertical line would also need to fade out when it's removed, which has the same problem. ❌

For my own reference later, this is what I can do for the fade-in

.monaco-editor .comment-range-glyph.line-hover:before {
	background: var(--vscode-editorGutter-commentRangeForeground);
	opacity: 1;
	transition: opacity 0.3s;

	@starting-style {
		opacity: 0;
	}
}