fix(feedback): use the Button widget in Feedback form (#46503)

src/vs/workbench/parts/feedback/electron-browser/feedback.ts

@@ -17,10 +17,11 @@ import { ICommandService } from 'vs/platform/commands/common/commands';
 import * as errors from 'vs/base/common/errors';
 import { IIntegrityService } from 'vs/platform/integrity/common/integrity';
 import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
-import { attachStylerCallback } from 'vs/platform/theme/common/styler';
+import { attachButtonStyler, attachStylerCallback } from 'vs/platform/theme/common/styler';
 import { editorWidgetBackground, widgetShadow, inputBorder, inputForeground, inputBackground, inputActiveOptionBorder, editorBackground, buttonBackground, contrastBorder, darken } from 'vs/platform/theme/common/colorRegistry';
 import { IWorkspaceConfigurationService } from 'vs/workbench/services/configuration/common/configuration';
 import { IAnchor } from 'vs/base/browser/ui/contextview/contextview';
+import { Button } from 'vs/base/browser/ui/button/button';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 
 export const FEEDBACK_VISIBLE_CONFIG = 'workbench.statusBar.feedback.visible';
@@ -61,7 +62,8 @@ export class FeedbackDropdown extends Dropdown {
 	private feedbackDescriptionInput: HTMLTextAreaElement;
 	private smileyInput: Builder;
 	private frownyInput: Builder;
-	private sendButton: Builder;
+	private sendButton: Button;
+	private $sendButton: Builder;
 	private hideButton: HTMLInputElement;
 	private remainingCharacterCount: Builder;
 
@@ -110,6 +112,7 @@ export class FeedbackDropdown extends Dropdown {
 		this.frownyInput = null;
 
 		this.sendButton = null;
+		this.$sendButton = null;
 
 		this.requestFeatureLink = product.sendASmile.requestFeatureUrl;
 	}
@@ -246,11 +249,17 @@ export class FeedbackDropdown extends Dropdown {
 
 		$('label').attr('for', 'hide-button').text(nls.localize('showFeedback', "Show Feedback Smiley in Status Bar")).appendTo($hideButtonContainer);
 
-		this.sendButton = this.invoke($('input.send').type('button').attr('disabled', '').value(nls.localize('tweet', "Tweet")).appendTo($buttons), () => {
+		this.sendButton = new Button($buttons);
+		this.sendButton.enabled = false;
+		this.sendButton.label = nls.localize('tweet', "Tweet");
+		this.$sendButton = new Builder(this.sendButton.element);
+		this.$sendButton.addClass('send');
+		this.toDispose.push(attachButtonStyler(this.sendButton, this.themeService));
+
+		this.invoke(this.$sendButton, () => {
 			if (this.isSendingFeedback) {
 				return;
 			}
-
 			this.onSubmit();
 		});
 
@@ -289,7 +298,7 @@ export class FeedbackDropdown extends Dropdown {
 
 	private updateCharCountText(): void {
 		this.remainingCharacterCount.text(this.getCharCountText(this.feedbackDescriptionInput.value.length));
-		this.feedbackDescriptionInput.value ? this.sendButton.removeAttribute('disabled') : this.sendButton.attr('disabled', '');
+		this.sendButton.enabled = this.feedbackDescriptionInput.value.length > 0;
 	}
 
 	private setSentiment(smile: boolean): void {
@@ -386,25 +395,28 @@ export class FeedbackDropdown extends Dropdown {
 		switch (event) {
 			case FormEvent.SENDING:
 				this.isSendingFeedback = true;
-				this.sendButton.setClass('send in-progress');
-				this.sendButton.value(nls.localize('feedbackSending', "Sending"));
+				this.sendButton.label = nls.localize('feedbackSending', "Sending");
+				this.$sendButton.addClass('in-progress');
 				break;
 			case FormEvent.SENT:
 				this.isSendingFeedback = false;
-				this.sendButton.setClass('send success').value(nls.localize('feedbackSent', "Thanks"));
+				this.sendButton.label = nls.localize('feedbackSent', "Thanks");
+				this.$sendButton.addClass('success');
 				this.resetForm();
 				this.autoHideTimeout = setTimeout(() => {
 					this.hide();
 				}, 1000);
-				this.sendButton.off(['click', 'keypress']);
-				this.invoke(this.sendButton, () => {
+				this.$sendButton.off(['click', 'keypress']);
+				this.invoke(this.$sendButton, () => {
 					this.hide();
-					this.sendButton.off(['click', 'keypress']);
+					this.$sendButton.off(['click', 'keypress']);
+					this.$sendButton.removeClass('in-progress');
 				});
 				break;
 			case FormEvent.SEND_ERROR:
 				this.isSendingFeedback = false;
-				this.sendButton.setClass('send error').value(nls.localize('feedbackSendingError', "Try again"));
+				this.$sendButton.addClass('error');
+				this.sendButton.label = nls.localize('feedbackSendingError', "Try again");
 				break;
 		}
 	}

src/vs/workbench/parts/feedback/electron-browser/media/feedback.css

@@ -100,23 +100,6 @@
 	text-align: right;
 }
 
-.monaco-shell .feedback-form .send {
-	padding: .5em 1.5em;
-	font-size: 1.1em;
-	margin: 0;
-	box-sizing:			border-box;
-	transition: width 200ms ease-out;
-}
-
-.monaco-shell .feedback-form .send.in-progress {
-	width: 22%;
-}
-
-.monaco-shell .feedback-form .send.success,
-.monaco-shell .feedback-form .send.error {
-	width: 20%;
-}
-
 .monaco-shell .feedback-form .sentiment {
 	height: 32px;
 	width: 32px;
@@ -165,19 +148,14 @@
 }
 
 .monaco-shell .feedback-form .form-buttons .send {
-	color: white;
-	border: none;
-	cursor: pointer;
+	width: auto;
 	background-image: url('twitter.svg');
-	background-color: #007ACC;
-	background-position: left;
+	background-position: 12px center;
 	background-size: 20px;
 	background-repeat: no-repeat;
-	padding-left: 30px;
-	padding-right: 12px;
-	border: 4px solid #007ACC;
-	border-radius: 4px;
+	padding: 8px 12px 8px 38px;
 	margin-left: auto;
+	transition: width 200ms ease-out;
 }
 
 .monaco-shell .feedback-form .form-buttons .send.in-progress,