CSS tweaks to issue reporter, fixes #42064, #41993, and #42054

6ae8a18c · Rachel Macfarlane · c7496249 · 6ae8a18c · 6ae8a18c · 6ae8a18c
4 changed file
--- a/src/vs/code/electron-browser/issue/issueReporter.html
+++ b/src/vs/code/electron-browser/issue/issueReporter.html
@@ -8,8 +8,7 @@
 	<style>body{display: none}</style>
 </head>

-<body aria-label="">
-	Issue Reporter
+<body>
 </body>

 <!-- Startup via issueReporter.js -->

--- a/src/vs/code/electron-browser/issue/issueReporterMain.ts
+++ b/src/vs/code/electron-browser/issue/issueReporterMain.ts
@@ -115,7 +115,8 @@ export class IssueReporter extends Disposable {
 		}

 		if (styles.inputErrorBorder) {
-			content.push(`.invalid-input, .invalid-input:focus { border: 1px solid ${styles.inputErrorBorder}; }`);
+			content.push(`.invalid-input, .invalid-input:focus { border: 1px solid ${styles.inputErrorBorder} !important; }`);
+			content.push(`.validation-error { color: ${styles.inputErrorBorder}; }`);
 		}

 		if (styles.inputActiveBorder) {
@@ -256,8 +257,8 @@ export class IssueReporter extends Disposable {
 		const processBlock = document.querySelector('.block-process');
 		const workspaceBlock = document.querySelector('.block-workspace');

-		const descriptionTitle = document.querySelector('.block-description .block-title');
-		const descriptionSubtitle = document.querySelector('.block-description .block-subtitle');
+		const descriptionTitle = document.getElementById('issue-description-label');
+		const descriptionSubtitle = document.getElementById('issue-description-subtitle');

 		// 1 - Bug
 		if (issueType === 0) {

--- a/src/vs/code/electron-browser/issue/issueReporterPage.ts
+++ b/src/vs/code/electron-browser/issue/issueReporterPage.ts
@@ -40,7 +40,7 @@ export default (): string => `
 		</div>
 	</div>

-	<div id="block-container">
+	<div id="block-container" class="input-group">
 		<div class="block block-system">
 			<details>
 				<summary>${escape(localize('systemInfo', "My System Info"))}
@@ -79,18 +79,19 @@ export default (): string => `
 				</pre>
 			</details>
 		</div>
-		<div class="block block-description">
-			<label class="block-title">
-				<!-- To be dynamically filled -->
-			</label>
-			<small class="block-subtitle">
-				<!-- To be dynamically filled -->
-			</small>
-			<div class="block-info-text">
-				<small>${escape(localize('githubMarkdown', "We support GitHub-flavored Markdown. You will still be able to edit your issue when we preview it on GitHub."))}</small>
-				<div id="description-validation-error" class="validation-error hidden">${escape(localize('issueDescriptionRequired', "Please enter a description."))}</div>
-				<textarea name="description" id="description" cols="100" rows="15" required></textarea>
-			</div>
+	</div>
+
+	<div class="input-group">
+		<label for="description" id="issue-description-label">
+			<!-- To be dynamically filled -->
+		</label>
+		<small id="issue-description-subtitle">
+			<!-- To be dynamically filled -->
+		</small>
+		<div class="block-info-text">
+			<small>${escape(localize('githubMarkdown', "We support GitHub-flavored Markdown. You will still be able to edit your issue when we preview it on GitHub."))}</small>
+			<div id="description-validation-error" class="validation-error hidden">${escape(localize('issueDescriptionRequired', "Please enter a description."))}</div>
+			<textarea name="description" id="description" cols="100" rows="15" required></textarea>
 		</div>
 	</div>


--- a/src/vs/code/electron-browser/issue/media/issueReporter.css
+++ b/src/vs/code/electron-browser/issue/media/issueReporter.css
@@ -104,14 +104,7 @@ body {
 }

 #block-container {
-	margin-top: 20px;
-}
-
-.block {
-	margin-bottom: 20px;
-}
-.block summary {
-	margin-bottom: 16px;
+	margin-top: 1em;
 }

 .block .block-info {
@@ -170,23 +163,29 @@ select, input, textarea {

 summary {
 	border: 1px solid transparent;
+	padding: 10px;
+	margin-bottom: 5px;
 }

 .validation-error {
 	font-size: 12px;
-	font-weight: bold;
 	margin-top: 1em;
 }

 .caption {
 	display: inline-block;
 	font-size: 12px;
+	vertical-align: middle;
+	height: 18px;
 }

 input[type="checkbox"] {
 	margin-left: 1em;
+	height: 18px;
 	width: auto;
 	display: inline-block;
+	margin-top: 0;
+	vertical-align: middle;
 }

 input:disabled {
@@ -213,7 +212,7 @@ a {
 	border: 1px solid #be1100;
 }

-.required-input {
+.required-input, .validation-error {
 	color: #be1100;
 }