Improve rendering of errors within issue reporter

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

@@ -185,8 +185,16 @@ export class IssueReporter extends Disposable {
 		}
 
 		if (styles.inputErrorBorder) {
-			content.push(`.invalid-input, .invalid-input:focus { border: 1px solid ${styles.inputErrorBorder} !important; }`);
-			content.push(`.validation-error, .required-input { color: ${styles.inputErrorBorder}; }`);
+			content.push(`.invalid-input, .invalid-input:focus, .validation-error { border: 1px solid ${styles.inputErrorBorder} !important; }`);
+			content.push(`.required-input { color: ${styles.inputErrorBorder}; }`);
+		}
+
+		if (styles.inputErrorBackground) {
+			content.push(`.validation-error { background: ${styles.inputErrorBackground}; }`);
+		}
+
+		if (styles.inputErrorForeground) {
+			content.push(`.validation-error { color: ${styles.inputErrorForeground}; }`);
 		}
 
 		if (styles.inputActiveBorder) {

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

@@ -251,16 +251,9 @@ a {
 	text-decoration: none;
 }
 
-.invalid-input {
-	border: 1px solid #be1100;
-}
-
-.required-input, .validation-error {
-	color: #be1100;
-}
-
 .section .input-group .validation-error {
-	margin-left: 15%;
+	margin-left: calc(15% + 5px);
+	padding: 10px;
 }
 
 .section .inline-form-control, .section .inline-label {

src/vs/platform/issue/node/issue.ts

@@ -32,6 +32,8 @@ export interface IssueReporterStyles extends WindowStyles {
 	inputForeground?: string;
 	inputBorder?: string;
 	inputErrorBorder?: string;
+	inputErrorBackground?: string;
+	inputErrorForeground?: string;
 	inputActiveBorder?: string;
 	buttonBackground?: string;
 	buttonForeground?: string;

src/vs/workbench/contrib/issue/electron-browser/issueService.ts

@@ -5,7 +5,7 @@
 
 import { IssueReporterStyles, IIssueService, IssueReporterData, ProcessExplorerData, IssueReporterExtensionData } from 'vs/platform/issue/node/issue';
 import { ITheme, IThemeService } from 'vs/platform/theme/common/themeService';
-import { textLinkForeground, inputBackground, inputBorder, inputForeground, buttonBackground, buttonHoverBackground, buttonForeground, inputValidationErrorBorder, foreground, inputActiveOptionBorder, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, editorBackground, editorForeground, listHoverBackground, listHoverForeground, listHighlightForeground, textLinkActiveForeground } from 'vs/platform/theme/common/colorRegistry';
+import { textLinkForeground, inputBackground, inputBorder, inputForeground, buttonBackground, buttonHoverBackground, buttonForeground, inputValidationErrorBorder, foreground, inputActiveOptionBorder, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, editorBackground, editorForeground, listHoverBackground, listHoverForeground, listHighlightForeground, textLinkActiveForeground, inputValidationErrorBackground, inputValidationErrorForeground } from 'vs/platform/theme/common/colorRegistry';
 import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
 import { IExtensionManagementService } from 'vs/platform/extensionManagement/common/extensionManagement';
 import { IExtensionEnablementService } from 'vs/workbench/services/extensionManagement/common/extensionManagement';
@@ -86,6 +86,8 @@ export function getIssueReporterStyles(theme: ITheme): IssueReporterStyles {
 		inputBorder: getColor(theme, inputBorder),
 		inputActiveBorder: getColor(theme, inputActiveOptionBorder),
 		inputErrorBorder: getColor(theme, inputValidationErrorBorder),
+		inputErrorBackground: getColor(theme, inputValidationErrorBackground),
+		inputErrorForeground: getColor(theme, inputValidationErrorForeground),
 		buttonBackground: getColor(theme, buttonBackground),
 		buttonForeground: getColor(theme, buttonForeground),
 		buttonHoverBackground: getColor(theme, buttonHoverBackground),