From c5e6ca5200c851d6bd08063b5acf6a6ad9412d81 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Thu, 10 Nov 2016 15:08:41 +0000
Subject: [PATCH] More entry styling.

---
 .../web/app/views/project/editor/editor.jade  | 10 ++--
 .../stylesheets/app/editor/review-panel.less  | 47 +++++++++++++++----
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/services/web/app/views/project/editor/editor.jade b/services/web/app/views/project/editor/editor.jade
index b40bf396fc..9754f0cdef 100644
--- a/services/web/app/views/project/editor/editor.jade
+++ b/services/web/app/views/project/editor/editor.jade
@@ -69,7 +69,7 @@ div.full-size(
 
 									.rp-entry-metadata
 										p.rp-entry-metadata-line(style="color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].name }} 
-										p.rp-entry-metadata-line {{ entry.metadata.ts }}
+										p.rp-entry-metadata-line {{ entry.metadata.ts | date : 'MMM d, y h:mm a' }}
 									.rp-entry-avatar(style="background-color: hsl({{ users[entry.metadata.user_id].hue }}, 70%, 50%);") {{ users[entry.metadata.user_id].avatar_text }}
 								.rp-entry-body(ng-switch="entry.type")
 										span(ng-switch-when="insert") Added 
@@ -77,8 +77,12 @@ div.full-size(
 										span(ng-switch-when="delete") Deleted
 											span.rp-content-highlight &nbsp;{{ entry.content }} 
 								.rp-entry-actions
-									a(href, ng-click="acceptChange(entry_id)") Accept
-									a(href, ng-click="rejectChange(entry_id)") Reject
+									a.rp-entry-button(href, ng-click="acceptChange(entry_id)") 
+										i.fa.fa-check
+										| &nbsp;Accept
+									a.rp-entry-button(href, ng-click="rejectChange(entry_id)") 
+										i.fa.fa-times
+										| &nbsp;Reject
 
 							div(ng-if="entry.type == 'comment'")
 								div(ng-repeat="comment in entry.thread", class="comment-thread__comment")
diff --git a/services/web/public/stylesheets/app/editor/review-panel.less b/services/web/public/stylesheets/app/editor/review-panel.less
index 0eda258f5b..0503a0cb04 100644
--- a/services/web/public/stylesheets/app/editor/review-panel.less
+++ b/services/web/public/stylesheets/app/editor/review-panel.less
@@ -89,6 +89,7 @@
 	}
 		.rp-entry-action-icon {
 			font-size: @rp-icon-large-size;
+			padding: 0 5px;
 		}
 
 		.rp-entry-metadata {
@@ -101,11 +102,19 @@
 			}
 
 		.rp-entry-avatar {
-
+			border-radius: 3px;
+			font-weight: @rp-semibold-weight;
+			font-size: @rp-icon-large-size;
+			line-height: 1.2;
+			text-transform: uppercase;
+			color: #FFF;
+			width: 1.3em;
+			height: 1.3em;
+			text-align: center;
 		}
 
 	.rp-entry-body {
-		padding: 0 5px;
+		padding: 10px 5px 5px;
 	}
 		.rp-content-highlight {
 			color: @rp-type-darkgrey;
@@ -113,8 +122,28 @@
 		}
 
 	.rp-entry-actions {
-
+		display: flex;
 	}
+		.rp-entry-button {
+			flex: 1 0 50%;
+			background-color: @rp-highlight-blue;
+			color: #FFF;
+			text-align: center;
+			border-right: solid 1px #FFF;
+			padding: 2px 0;
+
+			&:hover,
+			&:focus {
+				background-color: darken(@rp-highlight-blue, 5%);
+				text-decoration: none;
+				color: #FFF;
+			}
+
+			&:last-child {
+				border-bottom-right-radius: 3px;
+				border-right-width: 0;
+			}
+		}
 
 
 .rp-icon-delete {
@@ -145,23 +174,23 @@
 	}
 	
 	&-insert {
-		border-color: green;
+		border-color: @rp-green;
 		&:after {
-			border-color: green;
+			border-color: @rp-green;
 		}
 	}
 	
 	&-delete {
-		border-color: red;
+		border-color: @rp-red;
 		&:after {
-			border-color: red;
+			border-color: @rp-red;
 		}
 	}
 	
 	&-comment {
-		border-color: orange;
+		border-color: @rp-yellow;
 		&:after {
-			border-color: orange;
+			border-color: @rp-yellow;
 		}
 	}
 }