Styling update

extensions/git-extended/media/index.css

@@ -6,7 +6,7 @@
 .title {
 	display: flex;
 	align-items: flex-start;
-	margin-top: 10px;
+	margin: 20px 0;
 }
 
 h3 {
@@ -23,12 +23,12 @@ body hr {
 
 }
 body .review-comment {
-	padding: 20px;
+	padding: 10px;
 	display: flex;
 }
 
 body .review-comment .avatar-container {
-	margin-top: 4px !important;
+	padding: 4px;
 }
 
 body img.avatar {
@@ -47,6 +47,21 @@ body img.avatar {
 
 body .review-comment .review-comment-contents {
 	margin-left: 20px;
+	width: 100%;
+	border: 2px solid var(--vscode-activityBar-background);
+}
+
+body .review-comment .review-comment-header {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	padding: 4px;
+	box-sizing: border-box;
+	background-color: var(--vscode-activityBar-background);
+}
+
+body .review-comment .review-comment-contents .comment-body {
+	padding: 10px;
 }
 
 body {
@@ -98,6 +113,16 @@ body {
 	margin-right: 5px;
 }
 
+.commit, .review {
+	display: flex;
+	padding: 14px 4px 14px 10px;
+	background-color: var(--vscode-activityBar-background);
+}
+
+.timestamp {
+	margin-left: auto;
+}
+
 .details {
 	display: flex;
 	flex-direction: column;

extensions/git-extended/package.json

@@ -140,6 +140,7 @@
     "markdown-it": "^8.4.0",
     "git-credential-node": "^1.1.0",
     "lodash": "4.17.5",
-    "tmp": "^0.0.31"
+    "tmp": "^0.0.31",
+    "moment": "^2.22.1"
   }
 }

extensions/git-extended/preview-src/pullRequestOverviewRenderer.ts

@@ -3,6 +3,8 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import * as moment from 'moment';
+
 export enum EventType {
 	Committed,
 	Mentioned,
@@ -138,19 +140,20 @@ export interface CommitEvent {
 
 export type TimelineEvent = CommitEvent | ReviewEvent | SubscribeEvent | CommentEvent | MentionEvent;
 
-export function renderComment(user: any, body: string): string {
-	return `<hr><div class="comment-container">
+export function renderComment(comment: CommentEvent): string {
+	return `<div class="comment-container">
 
 	<div class="review-comment" tabindex="0" role="treeitem">
-		<div class="avatar-container">
-			<img class="avatar" src="${user.avatar_url}">
-		</div>
 		<div class="review-comment-contents">
-			<div>
-				<strong class="author"><a href="${user.html_url}">${user.login}</a></strong>
+			<div class="review-comment-header">
+				<div class="avatar-container">
+					<img class="avatar" src="${comment.user.avatar_url}">
+				</div>
+				<strong class="author"><a href="${comment.user.html_url}">${comment.user.login}</a></strong>
+				<div class="timestamp">${moment(comment.created_at).fromNow()}</div>
 			</div>
 			<div class="comment-body">
-				${body}
+				${comment.body}
 			</div>
 		</div>
 	</div>
@@ -158,11 +161,11 @@ export function renderComment(user: any, body: string): string {
 }
 
 export function renderCommit(timelineEvent: CommitEvent): string {
-	return `<hr><div class="comment-container">
+	return `<div class="comment-container">
 
 	<div class="review-comment" tabindex="0" role="treeitem">
 		<div class="review-comment-contents">
-			<div>
+			<div class="commit">
 				<strong>${timelineEvent.author.name} commit: <a href="${timelineEvent.html_url}">${timelineEvent.message} (${timelineEvent.sha})</a></strong>
 			</div>
 		</div>
@@ -171,12 +174,13 @@ export function renderCommit(timelineEvent: CommitEvent): string {
 }
 
 export function renderReview(timelineEvent: ReviewEvent): string {
-	return `<hr><div class="comment-container">
+	return `<div class="comment-container">
 
 	<div class="review-comment" tabindex="0" role="treeitem">
 		<div class="review-comment-contents">
-			<div>
-				<strong><a href="${timelineEvent.html_url}">${timelineEvent.user.login} left a review.</a></strong><span></span>
+			<div class="review">
+				<strong><a href="${timelineEvent.html_url}">${timelineEvent.user.login} left a review </a></strong><span></span>
+				<div class="timestamp">${moment(timelineEvent.submitted_at).fromNow()}</div>
 			</div>
 		</div>
 	</div>
@@ -188,7 +192,7 @@ export function renderTimelineEvent(timelineEvent: TimelineEvent): string {
 		case EventType.Committed:
 			return renderCommit((<CommitEvent>timelineEvent));
 		case EventType.Commented:
-			return renderComment((<CommentEvent>timelineEvent).user, (<CommentEvent>timelineEvent).body);
+			return renderComment((<CommentEvent>timelineEvent));
 		case EventType.Reviewed:
 			return renderReview((<ReviewEvent>timelineEvent));
 	}