Use button widget in issue reporter, fixes #46490

src/vs/code/electron-browser/issue/issueReporterMain.ts

@@ -41,6 +41,8 @@ import { LogLevelSetterChannelClient, FollowerLogService } from 'vs/platform/log
 import { ILogService, getLogLevel } from 'vs/platform/log/common/log';
 import { OcticonLabel } from 'vs/base/browser/ui/octiconLabel/octiconLabel';
 import { normalizeGitHubIssuesUrl } from 'vs/code/electron-browser/issue/issueReporterUtil';
+import { Button } from 'vs/base/browser/ui/button/button';
+import { Color } from 'vs/base/common/color';
 
 const MAX_URL_LENGTH = platform.isWindows ? 2081 : 5400;
 
@@ -72,6 +74,8 @@ export class IssueReporter extends Disposable {
 	private receivedPerformanceInfo = false;
 	private shouldQueueSearch = false;
 
+	private previewButton: Button;
+
 	constructor(configuration: IssueReporterConfiguration) {
 		super();
 
@@ -86,6 +90,12 @@ export class IssueReporter extends Disposable {
 			extensionsDisabled: this.environmentService.disableExtensions,
 		});
 
+		this.previewButton = new Button(document.getElementById('issue-reporter'), {
+			buttonBackground: Color.fromHex(configuration.data.styles.buttonBackground),
+			buttonForeground: Color.fromHex(configuration.data.styles.buttonForeground),
+			buttonHoverBackground: Color.fromHex(configuration.data.styles.buttonHoverBackground)
+		});
+
 		ipcRenderer.on('issuePerformanceInfoResponse', (event, info) => {
 			this.logService.trace('issueReporter: Received performance data');
 			this.issueReporterModel.update(info);
@@ -171,18 +181,6 @@ export class IssueReporter extends Disposable {
 			content.push(`a, .workbenchCommand { color: ${styles.textLinkColor}; }`);
 		}
 
-		if (styles.buttonBackground) {
-			content.push(`button { background-color: ${styles.buttonBackground}; }`);
-		}
-
-		if (styles.buttonForeground) {
-			content.push(`button { color: ${styles.buttonForeground}; }`);
-		}
-
-		if (styles.buttonHoverBackground) {
-			content.push(`#github-submit-btn:hover:enabled, #github-submit-btn:focus:enabled { background-color: ${styles.buttonHoverBackground}; }`);
-		}
-
 		if (styles.textLinkColor) {
 			content.push(`a { color: ${styles.textLinkColor}; }`);
 		}
@@ -385,7 +383,7 @@ export class IssueReporter extends Disposable {
 			}
 		});
 
-		this.addEventListener('github-submit-btn', 'click', () => this.createIssue());
+		this.previewButton.onDidClick(() => this.createIssue());
 
 		this.addEventListener('disableExtensions', 'click', () => {
 			ipcRenderer.send('workbenchCommand', 'workbench.action.reloadWindowWithExtensionsDisabled');
@@ -421,13 +419,12 @@ export class IssueReporter extends Disposable {
 	}
 
 	private updatePreviewButtonState() {
-		const submitButton = <HTMLButtonElement>document.getElementById('github-submit-btn');
 		if (this.isPreviewEnabled()) {
-			submitButton.disabled = false;
-			submitButton.textContent = localize('previewOnGitHub', "Preview on GitHub");
+			this.previewButton.label = localize('previewOnGitHub', "Preview on GitHub");
+			this.previewButton.enabled = true;
 		} else {
-			submitButton.disabled = true;
-			submitButton.textContent = localize('loadingData', "Loading data...");
+			this.previewButton.enabled = false;
+			this.previewButton.label = localize('loadingData', "Loading data...");
 		}
 	}
 

src/vs/code/electron-browser/issue/issueReporterPage.ts

@@ -126,6 +126,4 @@ export default (): string => `
 			</div>
 		</div>
 	</div>
-
-	<button id="github-submit-btn" disabled>${escape(localize('loadingData', "Loading data..."))}</button>
 </div>`;

src/vs/code/electron-browser/issue/media/issueReporter.css

@@ -48,7 +48,6 @@ input[type="text"], textarea {
 	line-height: 1.5;
 	color: #495057;
 	background-color: #fff;
-	border-radius: .25rem;
 	border: 1px solid #ced4da;
 }
 
@@ -60,19 +59,12 @@ textarea {
 /**
  * Button
  */
-button {
-	display: inline-block;
-	font-weight: 400;
-	line-height: 1.25;
-	text-align: center;
-	white-space: nowrap;
-	vertical-align: middle;
-	user-select: none;
-	padding: .5rem 1rem;
-	font-size: 1rem;
-	border-radius: .25rem;
-	background: none;
-	border: 1px solid transparent;
+
+.monaco-text-button {
+	display: block;
+	width: auto;
+	padding: 4px 10px;
+	align-self: flex-end;
 }
 
 select {
@@ -129,14 +121,6 @@ pre code {
 	font-family: 'Menlo', 'Courier New', 'Courier', monospace;
 }
 
-button:hover:enabled {
-	cursor: pointer;
-}
-
-button:disabled {
-	cursor: auto;
-}
-
 #issue-reporter {
 	max-width: 85vw;
 	margin-left: auto;
@@ -257,11 +241,6 @@ a {
 	color: #be1100;
 }
 
-button {
-	background-color: #007ACC;
-	color: #fff;
-}
-
 .section .input-group .validation-error {
 	margin-left: 13%;
 }