Use button widget

extensions/git-extended/src/prView/prProvider.ts

@@ -150,7 +150,7 @@ export class PRProvider implements vscode.TreeDataProvider<PRGroupTreeItem | Pul
 			});
 			let reply = {
 				command: 'diff-' + element.prItem.number + '-post',
-				title: 'Add single comment'
+				title: 'Add comment'
 			};
 
 			const _onDidChangeCommentThreads = new vscode.EventEmitter<vscode.CommentThreadChangedEvent>();

src/vs/workbench/parts/comments/electron-browser/commentsEditorContribution.ts

@@ -36,6 +36,8 @@ import { ZoneWidget, IOptions } from 'vs/editor/contrib/zoneWidget/zoneWidget';
 import { ReviewModel } from 'vs/workbench/parts/comments/common/reviewModel';
 import { ICommentService } from '../../../services/comments/electron-browser/commentService';
 import { CommentThreadCollapsibleState } from '../../../api/node/extHostTypes';
+import { Button } from 'vs/base/browser/ui/button/button';
+import { attachButtonStyler } from 'vs/platform/theme/common/styler';
 
 export const ctxReviewPanelVisible = new RawContextKey<boolean>('reviewPanelVisible', false);
 export const ID = 'editor.contrib.review';
@@ -334,8 +336,10 @@ export class ReviewZoneWidget extends ZoneWidget {
 
 			const formActions = $('.form-actions').appendTo(commentForm).getHTMLElement();
 
-			const button = $('button').appendTo(formActions).getHTMLElement();
-			button.onclick = async () => {
+			const button = new Button(formActions);
+			attachButtonStyler(button, this.themeService);
+			button.label = this.commentThread.reply.title;
+			button.onDidClick(async () => {
 				let newComment = await this.commandService.executeCommand(this._replyCommand.id, this.editor.getModel().uri, {
 					start: { line: lineNumber, column: 1 },
 					end: { line: lineNumber, column: 1 }
@@ -349,8 +353,7 @@ export class ReviewZoneWidget extends ZoneWidget {
 					let secondaryHeading = this._commentThread.comments.filter(arrays.uniqueFilter(comment => comment.userName)).map(comment => `@${comment.userName}`).join(', ');
 					$(this._secondaryHeading).safeInnerHtml(secondaryHeading);
 				}
-			};
-			button.textContent = this.commentThread.reply.title;
+			});
 		}
 
 		this._resizeObserver = new ResizeObserver(entries => {

src/vs/workbench/parts/comments/electron-browser/media/review.css

@@ -150,33 +150,10 @@
 	display: none;
 }
 
-.monaco-editor .review-widget .body .comment-form .form-actions button {
+.monaco-editor .review-widget .body .comment-form .monaco-text-button {
+	width: auto;
+	padding: 4px 10px;
 	float: right;
-	box-sizing: content-box;
-	margin-right: 5px;
-	position: relative;
-	padding: 6px 12px;
-	font-size: 14px;
-	font-weight: 600;
-	line-height: 20px;
-	white-space: nowrap;
-	vertical-align: middle;
-	cursor: pointer;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	background-repeat: repeat-x;
-	background-position: -1px -1px;
-	background-size: 110% 110%;
-	border: 1px solid rgba(27,31,35,0.2);
-	border-radius: 0.25em;
-}
-
-.monaco-editor .review-widget .body .comment-form .form-actions button:hover {
-	background-color: #e6ebf1;
-	background-image: linear-gradient(-180deg, #f0f3f6 0%, #e6ebf1 90%);
-	background-position: -.5em;
 }
 
 .monaco-editor .review-widget .head {