Merge pull request #209 from Microsoft/misolori/ux-polish

Improve styling for reviews, comments, and blockquotes

preview-src/index.css

@@ -3,11 +3,15 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+:root {
+	--border-color: var(--vscode-notifications-border);
+}
+
  .title {
 	display: flex;
 	align-items: flex-start;
 	margin-top: 20px;
-	border-bottom: 1px solid var(--vscode-tab-inactiveBackground);
+	border-bottom: 1px solid var(--border-color);
 }
 
 #title:empty {
@@ -85,7 +89,7 @@ body .comment-container:last-child .comment {
     display: block;
     width: 2px;
 	content: "";
-    background-color: var(--vscode-tab-inactiveBackground);
+    background-color: var(--border-color);
 } */
 
 body .review-comment .review-comment-header {
@@ -186,7 +190,7 @@ body button.checkedOut svg {
 	align-items: center;
 	margin-top: 8px;
 	padding-bottom: 16px;
-	border-bottom: 1px solid var(--vscode-tab-inactiveBackground);
+	border-bottom: 1px solid var(--border-color);
 }
 
 .subtitle .avatar {
@@ -249,11 +253,11 @@ body .overview-title button {
 .comment-container {
 	position: relative;
 	padding: 20px 0;
-    border-top: 1px solid var(--vscode-tab-inactiveBackground);
+    border-top: 1px solid var(--border-color);
 }
 
 .comment-container:last-of-type {
-	border-bottom: 1px solid var(--vscode-tab-inactiveBackground);
+	border-bottom: 1px solid var(--border-color);
 }
 
 .comment-container[data-type="commit"] {
@@ -265,6 +269,25 @@ body .overview-title button {
 	border-top: none;
 }
 
+.comment-body div[data-type="review-comment"] {
+	padding: 0 20px;
+	border-right: 1px solid var(--vscode-notifications-background);
+	border-left: 1px solid var(--vscode-notifications-background);
+	border-bottom: 1px solid var(--vscode-notifications-background);
+}
+
+.comment-body div[data-type="review-comment"] .comment-container {
+	padding: 12px 0;
+}
+
+.comment-body div[data-type="review-comment"] .comment-container:last-child {
+	border-bottom: none;
+}
+
+.comment-body div[data-type="review-comment"] .comment-container:last-child .comment {
+	padding-bottom: 0;
+}
+
 body .comment-form {
 	padding: 20px 0 10px;
 }
@@ -318,11 +341,30 @@ body .comment-form .form-actions button {
 	content: "No description provided."
 }
 
+blockquote {
+	display: block;
+	flex-direction: column;
+	margin: 8px 0;
+	padding: 8px 12px;
+	border-left-width: 5px;
+	border-left-style: solid;
+}
+
+blockquote p {
+	margin: 8px 0;
+}
+
+blockquote p:first-child {
+	margin-top: 0;
+}
+
+blockquote p:last-child {
+	margin-bottom: 0;
+}
 
 .comment-body img {
 	max-width: 100%;
 	max-height: 100%;
-	margin-top: 8px;
 	display: block;
 }
 
@@ -389,13 +431,6 @@ body .comment-form .form-actions button {
 	border-top: 1px solid;
 }
 
-.comment-body blockquote {
-	margin: 0 7px 0 5px;
-	padding: 0 16px 0 10px;
-	border-left-width: 5px;
-	border-left-style: solid;
-}
-
 .comment-body code {
 	font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
 }
@@ -463,12 +498,16 @@ body .comment-form .form-actions button {
 }
 
 .diff {
-	margin: 8px 0;
+	margin: 40px 0 0px;
 	border: 1px solid var(--vscode-notifications-background) !important;
 }
 
+.diff:first-of-type {
+	margin-top: 8px;
+}
+
 .diff .diffHeader {
-	padding: 2px 12px;
+	padding: 6px 12px;
 	line-height: 1.5;
 	border-bottom: solid 1px var(--vscode-notifications-background);
 	background-color: var(--vscode-editorGroupHeader-tabsBackground);

preview-src/pullRequestOverviewRenderer.ts

@@ -331,12 +331,11 @@ export function renderReview(timelineEvent: ReviewEvent): string {
 
 			body += `
 				${diffView}
-				<div>${ comments && comments.length ? comments.map(comment => renderComment(comment)).join('') : ''}</div>
+				<div data-type="review-comment">${ comments && comments.length ? comments.map(comment => renderComment(comment)).join('') : ''}</div>
 			`;
 		}
 	}
 
-
 	return `<div class="comment-container"  data-type="review">
 
 	<div class="review-comment" role="treeitem">