Add comment UI.

services/web/app/views/project/editor/editor.jade

@@ -57,7 +57,8 @@ div.full-size(
 							ng-class="'rp-entry-callout-' + entry.type"
 						)
 						.rp-entry(
-							ng-class="'rp-entry-' + entry.type"
+							ng-class="[ 'rp-entry-' + entry.type, (commentState.adding ? 'rp-entry-adding-comment' : '') ]"
+							ng-style="{'top': top}"
 						)
 							div(ng-if="entry.type == 'insert' || entry.type == 'delete'")
 								.rp-entry-header
@@ -107,7 +108,7 @@ div.full-size(
 								//- 	a(href, ng-click="cancelReply(entry)") X
 								//- a.btn.btn-sm.btn-primary(href, ng-click="startReply(entry)", ng-if="!entry.replying") Reply
 								.rp-comment-reply
-									textarea.rp-comment-reply-input(
+									textarea.rp-comment-input(
 										ng-model="entry.replyContent"
 										ng-keypress="handleCommentReplyKeyPress($event, entry);"
 										placeholder="Hit \"Enter\" to reply"
@@ -119,11 +120,26 @@ div.full-size(
 										|  Mark as resolved
 							
 							div(ng-if="entry.type == 'focus-position'")
-								a.btn.btn-sm(href, ng-if="!commentState.adding", ng-click="startNewComment()") Add comment
+								a.rp-add-comment-btn(
+									href
+									ng-if="!commentState.adding"
+									ng-click="startNewComment()"
+								) 
+									i.fa.fa-comment
+									|  Add comment
 								div(ng-if="commentState.adding")
-									textarea(ng-model="commentState.content")
-									a.btn.btn-sm.btn-primary(href, ng-click="submitNewComment()") Submit
-									a(href, ng-click="cancelNewComment()") X
+									.rp-new-comment
+										textarea.rp-comment-input(
+											ng-model="commentState.content"
+											placeholder="Add your comment here"
+										)
+									.rp-entry-actions
+										a.rp-entry-button(href, ng-click="submitNewComment()") 
+											i.fa.fa-comment
+											|  Comment
+										a.rp-entry-button(href, ng-click="cancelNewComment()") 
+											i.fa.fa-times
+											|  Cancel
 
 	.ui-layout-east
 		div(ng-if="ui.pdfLayout == 'sideBySide'")

services/web/public/stylesheets/app/editor/review-panel.less

@@ -85,6 +85,19 @@
 	&-comment {
 		border-left-color: @rp-yellow;
 	}
+
+	&-focus-position {
+		background-color: transparent;
+		right: auto;
+		border-left-width: 0;
+
+		&.rp-entry-adding-comment {
+			background-color: #FFF;
+			right: 5px;
+			border-left-width: 3px;
+			border-left-color: @rp-yellow;
+		}
+	}
 }
 	
 	.rp-entry-header {
@@ -191,14 +204,34 @@
 		.rp-comment-reply {
 			padding: 0 5px;
 		}
-			.rp-comment-reply-input {
-				width: 100%;
-				font-size: @rp-base-font-size;
-				padding: 2px 5px;
-				border-radius: 3px;
-				border: solid 1px @rp-border-grey;
-				resize: vertical;
-			}
+
+	.rp-add-comment-btn {
+		display: block;
+		background-color: @rp-highlight-blue;
+		color: #FFF;
+		padding: 5px 10px;
+		border-radius: 3px;
+
+		&:hover,
+		&:focus {
+			background-color: darken(@rp-highlight-blue, 5%);
+			text-decoration: none;
+			color: #FFF;
+		}
+	}
+
+	.rp-new-comment {
+		padding: 5px;
+	}
+
+	.rp-comment-input {
+		width: 100%;
+		font-size: @rp-base-font-size;
+		padding: 2px 5px;
+		border-radius: 3px;
+		border: solid 1px @rp-border-grey;
+		resize: vertical;
+	}
 
 .rp-avatar {
 	border-radius: 3px;