From c5e2560b435503807868435e453c0faa2148a2d4 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Wed, 13 Dec 2017 11:38:57 +0000
Subject: [PATCH 01/15] Basic colors for chat.

---
 services/web/public/stylesheets/app/editor/chat.less   | 10 ++++++----
 .../web/public/stylesheets/core/_common-variables.less |  8 ++++++++
 services/web/public/stylesheets/core/ol-variables.less |  9 +++++++++
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor/chat.less b/services/web/public/stylesheets/app/editor/chat.less
index c782384cb7..a03999cc37 100644
--- a/services/web/public/stylesheets/app/editor/chat.less
+++ b/services/web/public/stylesheets/app/editor/chat.less
@@ -31,11 +31,13 @@
 		right: 0;
 		bottom: @new-message-height;
 		overflow-x: hidden;
+		background-color: @chat-bg;
+
 		li.message {
 			margin: @line-height-computed / 2;
 			.date {
 				font-size: 12px;
-				color: @gray-light;
+				color: @chat-color;
 				border-bottom: 1px solid @gray-lightest;
 				margin-bottom: @line-height-computed / 2;
 				text-align: center;
@@ -63,8 +65,8 @@
 				.message {
 					border-left: 3px solid transparent;
 					font-size: 14px;
-					box-shadow: -1px 2px 3px #ddd;
-					border-raduis: @border-radius-base;
+					box-shadow: @chat-message-box-shadow;
+					border-radius: @chat-message-border-radius;
 					position: relative;
 					
 					.message-content {
@@ -124,7 +126,7 @@
 		.full-size;
 		top: auto;
 		height: @new-message-height;
-		background-color: @gray-lightest;
+		background-color: @chat-new-message-bg;
 		padding: @line-height-computed / 4;
 		border-top: 1px solid @editor-border-color;
 		textarea {
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index ab3ef2ccc9..57833767be 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -925,6 +925,14 @@
 @editor-toggler-hover-bg-color    : #DDD;
 @synctex-controls-z-index         : 3;
 @synctex-controls-padding         : 0 2px;
+
+// Chat
+@chat-bg                          : transparent;
+@chat-color                       : @gray-light;
+@chat-new-message-bg              : @gray-lightest;
+@chat-message-box-shadow          : -1px 2px 3px #ddd;
+@chat-message-border-radius       : 0;
+
 // Tags
 @tag-border-radius  : 0.25em;
 @tag-bg-color       : @label-default-bg;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 508ae6ed37..72281ad48c 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -196,6 +196,15 @@
 @editor-toggler-hover-bg-color    : @ol-green;
 @synctex-controls-z-index         : 6;
 @synctex-controls-padding         : 0;
+@editor-border-color              : @ol-blue-gray-5;
+
+// Chat
+@chat-bg                          : @ol-blue-gray-2;
+@chat-color                       : #FFF;
+@chat-new-message-bg              : @ol-blue-gray-3;
+@chat-message-box-shadow          : none;
+@chat-message-border-radius       : @border-radius-base;
+
 //## Gray and brand colors for use across Bootstrap.
 @gray-darker:           #252525;
 @gray-dark:             #505050;

From 9deddcf2a8b9c1b215d73ddd23e10d439458aeec Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Wed, 13 Dec 2017 11:39:17 +0000
Subject: [PATCH 02/15] Disable dark theme handling for v2, for now.

---
 services/web/public/stylesheets/app/editor/chat.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/web/public/stylesheets/app/editor/chat.less b/services/web/public/stylesheets/app/editor/chat.less
index a03999cc37..9c1b2038ec 100644
--- a/services/web/public/stylesheets/app/editor/chat.less
+++ b/services/web/public/stylesheets/app/editor/chat.less
@@ -147,7 +147,7 @@
 	word-break: break-all;
 }
 
-.editor-dark {
+.editor-dark when (@is-overleaf = false) {
 	.chat {
 		.new-message {
 			background-color: lighten(@editor-dark-background-color, 10%);

From ca68f01a9dbdb097501b1251c1b57deb167cd62d Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Wed, 13 Dec 2017 12:16:21 +0000
Subject: [PATCH 03/15] Build chat message styles on the controller side
 (allowing for extra parameters).

---
 services/web/app/views/project/editor/chat.pug           | 7 ++-----
 .../ide/chat/controllers/ChatMessageController.coffee    | 9 ++++++++-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/services/web/app/views/project/editor/chat.pug b/services/web/app/views/project/editor/chat.pug
index fcd47a81e3..cdfbcfc097 100644
--- a/services/web/app/views/project/editor/chat.pug
+++ b/services/web/app/views/project/editor/chat.pug
@@ -35,12 +35,9 @@ aside.chat(
 							span(ng-if="message.user.first_name") {{ message.user.first_name }}
 							span(ng-if="!message.user.first_name") {{ message.user.email }}
 						.message(
-							ng-style="{\
-								'border-color': 'hsl({{ hue(message.user) }}, 70%, 70%)',\
-								'background-color': 'hsl({{ hue(message.user) }}, 60%, 97%)'\
-							}"
+							ng-style="getMessageStyle(message.user);"
 						)
-							.arrow(ng-style="{'border-color': 'hsl({{ hue(message.user) }}, 70%, 70%)'}")
+							.arrow(ng-style="getArrowStyle(message.user)")
 							.message-content
 								p(
 									mathjax,
diff --git a/services/web/public/coffee/ide/chat/controllers/ChatMessageController.coffee b/services/web/public/coffee/ide/chat/controllers/ChatMessageController.coffee
index 30fbccd05a..302aa1fd94 100644
--- a/services/web/public/coffee/ide/chat/controllers/ChatMessageController.coffee
+++ b/services/web/public/coffee/ide/chat/controllers/ChatMessageController.coffee
@@ -3,9 +3,16 @@ define [
 	"ide/colors/ColorManager"
 ], (App, ColorManager) ->
 	App.controller "ChatMessageController", ["$scope", "ide", ($scope, ide) ->
-		$scope.hue = (user) ->
+		hue = (user) ->
 			if !user?
 				return 0
 			else
 				return ColorManager.getHueForUserId(user.id)
+
+		$scope.getMessageStyle = (user) ->
+				"border-color"     : "hsl(#{ hue(user) }, 70%, 70%)"
+				"background-color" : "hsl(#{ hue(user) }, 60%, 97%)"
+
+		$scope.getArrowStyle = (user) ->
+				"border-color"     : "hsl(#{ hue(user) }, 70%, 70%)"
 	]
\ No newline at end of file

From e47b20390b5cdbe918823f241b662bd4b60429aa Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Wed, 13 Dec 2017 12:16:44 +0000
Subject: [PATCH 04/15] Add per brand UI specific chat message styles.

---
 .../coffee/infrastructure/ExpressLocals.coffee   | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/services/web/app/coffee/infrastructure/ExpressLocals.coffee b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
index b126819f56..51e1209cdc 100644
--- a/services/web/app/coffee/infrastructure/ExpressLocals.coffee
+++ b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
@@ -296,10 +296,14 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 	webRouter.use (req, res, next) ->
 		isOl = (Settings.brandPrefix == 'ol-')
 		res.locals.uiConfig = 
-			defaultResizerSizeOpen   : if isOl then 2 else 24
-			defaultResizerSizeClosed : if isOl then 2 else 24
-			eastResizerCursor        : if isOl then "ew-resize" else null
-			westResizerCursor        : if isOl then "ew-resize" else null
-			chatResizerSizeOpen      : if isOl then 2 else 12
-			chatResizerSizeClosed    : 0
+			defaultResizerSizeOpen     : if isOl then 2 else 24
+			defaultResizerSizeClosed   : if isOl then 2 else 24
+			eastResizerCursor          : if isOl then "ew-resize" else null
+			westResizerCursor          : if isOl then "ew-resize" else null
+			chatResizerSizeOpen        : if isOl then 2 else 12
+			chatResizerSizeClosed      : 0
+			chatMessageBorderSaturation: if isOl then 90 else 70
+			chatMessageBorderLightness : if isOl then 50 else 70
+			chatMessageBgSaturation    : if isOl then 90 else 60
+			chatMessageBgLightness     : if isOl then 50 else 97
 		next()

From c03ce6fdf7aafacb27a31660f86ce6abd507f326 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Wed, 13 Dec 2017 13:21:42 +0000
Subject: [PATCH 05/15] Configure chat messages colors per brand.

---
 .../coffee/infrastructure/ExpressLocals.coffee |  8 ++++----
 .../controllers/ChatMessageController.coffee   | 18 +++++++++++++++---
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/services/web/app/coffee/infrastructure/ExpressLocals.coffee b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
index 51e1209cdc..9b7e9197b4 100644
--- a/services/web/app/coffee/infrastructure/ExpressLocals.coffee
+++ b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
@@ -302,8 +302,8 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 			westResizerCursor          : if isOl then "ew-resize" else null
 			chatResizerSizeOpen        : if isOl then 2 else 12
 			chatResizerSizeClosed      : 0
-			chatMessageBorderSaturation: if isOl then 90 else 70
-			chatMessageBorderLightness : if isOl then 50 else 70
-			chatMessageBgSaturation    : if isOl then 90 else 60
-			chatMessageBgLightness     : if isOl then 50 else 97
+			chatMessageBorderSaturation: if isOl then "90%" else "70%"
+			chatMessageBorderLightness : if isOl then "50%" else "70%"
+			chatMessageBgSaturation    : if isOl then "90%" else "60%"
+			chatMessageBgLightness     : if isOl then "50%" else "97%"
 		next()
diff --git a/services/web/public/coffee/ide/chat/controllers/ChatMessageController.coffee b/services/web/public/coffee/ide/chat/controllers/ChatMessageController.coffee
index 302aa1fd94..f69e04cad2 100644
--- a/services/web/public/coffee/ide/chat/controllers/ChatMessageController.coffee
+++ b/services/web/public/coffee/ide/chat/controllers/ChatMessageController.coffee
@@ -3,6 +3,12 @@ define [
 	"ide/colors/ColorManager"
 ], (App, ColorManager) ->
 	App.controller "ChatMessageController", ["$scope", "ide", ($scope, ide) ->
+		hslColorConfigs =
+			borderSaturation: window.uiConfig?.chatMessageBorderSaturation or "70%"
+			borderLightness : window.uiConfig?.chatMessageBorderLightness or "70%"
+			bgSaturation    : window.uiConfig?.chatMessageBgSaturation or "60%"
+			bgLightness     : window.uiConfig?.chatMessageBgLightness or "97%"
+
 		hue = (user) ->
 			if !user?
 				return 0
@@ -10,9 +16,15 @@ define [
 				return ColorManager.getHueForUserId(user.id)
 
 		$scope.getMessageStyle = (user) ->
-				"border-color"     : "hsl(#{ hue(user) }, 70%, 70%)"
-				"background-color" : "hsl(#{ hue(user) }, 60%, 97%)"
+			style =
+				"border-color"     : "hsl(#{ hue(user) }, #{ hslColorConfigs.borderSaturation }, #{ hslColorConfigs.borderLightness })"
+				"background-color" : "hsl(#{ hue(user) }, #{ hslColorConfigs.bgSaturation }, #{ hslColorConfigs.bgLightness })"
+			console.log style
+			return style
 
 		$scope.getArrowStyle = (user) ->
-				"border-color"     : "hsl(#{ hue(user) }, 70%, 70%)"
+			style =
+				"border-color"     : "hsl(#{ hue(user) }, #{ hslColorConfigs.borderSaturation }, #{ hslColorConfigs.borderLightness })"
+			console.log style
+			return style
 	]
\ No newline at end of file

From 36c79979bd2654315b224f0392c7f7c3caf0d8c2 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Wed, 13 Dec 2017 14:01:46 +0000
Subject: [PATCH 06/15] More color adjustments.

---
 .../web/app/coffee/infrastructure/ExpressLocals.coffee |  8 ++++----
 services/web/public/stylesheets/app/editor/chat.less   | 10 +++++++---
 .../web/public/stylesheets/core/_common-variables.less |  6 ++++--
 services/web/public/stylesheets/core/ol-variables.less |  8 +++++---
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/services/web/app/coffee/infrastructure/ExpressLocals.coffee b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
index 9b7e9197b4..6781aaffcd 100644
--- a/services/web/app/coffee/infrastructure/ExpressLocals.coffee
+++ b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
@@ -302,8 +302,8 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 			westResizerCursor          : if isOl then "ew-resize" else null
 			chatResizerSizeOpen        : if isOl then 2 else 12
 			chatResizerSizeClosed      : 0
-			chatMessageBorderSaturation: if isOl then "90%" else "70%"
-			chatMessageBorderLightness : if isOl then "50%" else "70%"
-			chatMessageBgSaturation    : if isOl then "90%" else "60%"
-			chatMessageBgLightness     : if isOl then "50%" else "97%"
+			chatMessageBorderSaturation: if isOl then "100%" else "70%"
+			chatMessageBorderLightness : if isOl then "45%" else "70%"
+			chatMessageBgSaturation    : if isOl then "100%" else "60%"
+			chatMessageBgLightness     : if isOl then "45%" else "97%"
 		next()
diff --git a/services/web/public/stylesheets/app/editor/chat.less b/services/web/public/stylesheets/app/editor/chat.less
index 9c1b2038ec..96603df237 100644
--- a/services/web/public/stylesheets/app/editor/chat.less
+++ b/services/web/public/stylesheets/app/editor/chat.less
@@ -37,9 +37,12 @@
 			margin: @line-height-computed / 2;
 			.date {
 				font-size: 12px;
-				color: @chat-color;
-				border-bottom: 1px solid @gray-lightest;
+				color: @chat-message-date-color;
 				margin-bottom: @line-height-computed / 2;
+				text-align: right;
+			}
+			.date when (@is-overleaf = false) {
+				border-bottom: 1px solid @gray-lightest;
 				text-align: center;
 			}
 			.avatar {
@@ -58,7 +61,7 @@
 
 				.name {
 					font-size: 12px;
-					color: @gray-light;
+					color: @chat-message-name-color;
 					margin-bottom: 4px;
 					min-height: 16px;
 				}
@@ -72,6 +75,7 @@
 					.message-content {
 						padding: @line-height-computed / 2;
 						overflow-x: auto;
+						color: @chat-message-color;
 					}
 
 					.arrow {
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 57833767be..126c1a04fb 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -928,10 +928,12 @@
 
 // Chat
 @chat-bg                          : transparent;
-@chat-color                       : @gray-light;
-@chat-new-message-bg              : @gray-lightest;
+@chat-message-color               : @text-color;
+@chat-message-date-color          : @gray-light;
+@chat-message-name-color          : @gray-light;
 @chat-message-box-shadow          : -1px 2px 3px #ddd;
 @chat-message-border-radius       : 0;
+@chat-new-message-bg              : @gray-light;
 
 // Tags
 @tag-border-radius  : 0.25em;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 72281ad48c..d705e3b00d 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -199,11 +199,13 @@
 @editor-border-color              : @ol-blue-gray-5;
 
 // Chat
-@chat-bg                          : @ol-blue-gray-2;
-@chat-color                       : #FFF;
-@chat-new-message-bg              : @ol-blue-gray-3;
+@chat-bg                          : @ol-blue-gray-6;
+@chat-message-color               : #FFF;
+@chat-message-name-color          : #FFF;
+@chat-message-date-color          : @ol-blue-gray-2;
 @chat-message-box-shadow          : none;
 @chat-message-border-radius       : @border-radius-base;
+@chat-new-message-bg              : @gray-light;
 
 //## Gray and brand colors for use across Bootstrap.
 @gray-darker:           #252525;

From 907654747ba5665652ff6c84a975dac38c6def0d Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Wed, 13 Dec 2017 14:18:25 +0000
Subject: [PATCH 07/15] Style the chat input box.

---
 services/web/public/stylesheets/app/editor/chat.less   |  3 ++-
 .../web/public/stylesheets/core/_common-variables.less | 10 ++++++++++
 services/web/public/stylesheets/core/ol-variables.less |  6 ++++--
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor/chat.less b/services/web/public/stylesheets/app/editor/chat.less
index 96603df237..1f24f2e4b0 100644
--- a/services/web/public/stylesheets/app/editor/chat.less
+++ b/services/web/public/stylesheets/app/editor/chat.less
@@ -140,9 +140,10 @@
 			border: 1px solid @editor-border-color;
 			height: 100%;
 			width: 100%;
-			color: @gray-dark;
+			color: @chat-new-message-textarea-color;
 			font-size: 14px;
 			padding: @line-height-computed / 4;
+			background-color: @chat-new-message-textarea-bg;
 		}
 	}
 }
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 126c1a04fb..a49a288088 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -934,6 +934,16 @@
 @chat-message-box-shadow          : -1px 2px 3px #ddd;
 @chat-message-border-radius       : 0;
 @chat-new-message-bg              : @gray-light;
+@chat-new-message-textarea-bg     : #FFF;
+@chat-new-message-textarea-color  : @gray-dark;
+
+// PDF
+@pdf-top-offset                  : @toolbar-tall-height;
+@pdf-bg                          : transparent;
+@pdfjs-bg                        : @gray-lighter;
+@pdf-page-shadow-color           : #000;
+@log-line-no-color               : @gray; 
+@log-hints-color                 : @gray-dark;
 
 // Tags
 @tag-border-radius  : 0.25em;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index d705e3b00d..370e47d8d6 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -202,10 +202,12 @@
 @chat-bg                          : @ol-blue-gray-6;
 @chat-message-color               : #FFF;
 @chat-message-name-color          : #FFF;
-@chat-message-date-color          : @ol-blue-gray-2;
+@chat-message-date-color          : @ol-blue-gray-3;
 @chat-message-box-shadow          : none;
 @chat-message-border-radius       : @border-radius-base;
-@chat-new-message-bg              : @gray-light;
+@chat-new-message-bg              : @ol-blue-gray-4;
+@chat-new-message-textarea-bg     : @ol-blue-gray-1;
+@chat-new-message-textarea-color  : @ol-blue-gray-6;
 
 //## Gray and brand colors for use across Bootstrap.
 @gray-darker:           #252525;

From d5c000d761931b2370ecadb3d88b3c318357c3ce Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Thu, 14 Dec 2017 10:37:11 +0000
Subject: [PATCH 08/15] Use correct SL color for the chat textarea.

---
 services/web/public/stylesheets/core/_common-variables.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index a49a288088..03f41e5c81 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -933,7 +933,7 @@
 @chat-message-name-color          : @gray-light;
 @chat-message-box-shadow          : -1px 2px 3px #ddd;
 @chat-message-border-radius       : 0;
-@chat-new-message-bg              : @gray-light;
+@chat-new-message-bg              : @gray-lightest;
 @chat-new-message-textarea-bg     : #FFF;
 @chat-new-message-textarea-color  : @gray-dark;
 

From df5254d6032de989e2e73262b86562f71f6c9ac3 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Thu, 14 Dec 2017 11:29:41 +0000
Subject: [PATCH 09/15] Remove LESS vars from other branch.

---
 .../web/public/stylesheets/core/_common-variables.less    | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 03f41e5c81..5ddac36738 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -937,14 +937,6 @@
 @chat-new-message-textarea-bg     : #FFF;
 @chat-new-message-textarea-color  : @gray-dark;
 
-// PDF
-@pdf-top-offset                  : @toolbar-tall-height;
-@pdf-bg                          : transparent;
-@pdfjs-bg                        : @gray-lighter;
-@pdf-page-shadow-color           : #000;
-@log-line-no-color               : @gray; 
-@log-hints-color                 : @gray-dark;
-
 // Tags
 @tag-border-radius  : 0.25em;
 @tag-bg-color       : @label-default-bg;

From 4e02033c82a1f993ff602d8ae5b17c18ce48873a Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Wed, 13 Dec 2017 16:23:50 +0000
Subject: [PATCH 10/15] Use Lato as the sans-serif font for v2.

---
 services/web/public/stylesheets/app/editor/toolbar.less   | 2 +-
 .../web/public/stylesheets/core/_common-variables.less    | 8 ++------
 services/web/public/stylesheets/core/ol-variables.less    | 5 +++++
 services/web/public/stylesheets/ol-style.less             | 3 +++
 services/web/public/stylesheets/style.less                | 3 +++
 5 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/services/web/public/stylesheets/app/editor/toolbar.less b/services/web/public/stylesheets/app/editor/toolbar.less
index 5c00f00567..e164f4fc02 100644
--- a/services/web/public/stylesheets/app/editor/toolbar.less
+++ b/services/web/public/stylesheets/app/editor/toolbar.less
@@ -143,7 +143,7 @@
 .toolbar-label {
 	display: none;
 	margin: 0 4px;
-	font-size: 12px;
+	font-size: @toolbar-font-size;
 	font-weight: 600;
 	margin-bottom: 2px;
 	vertical-align: middle;
diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 5ddac36738..177267779d 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -20,14 +20,9 @@
 //== Typography
 //
 //## Font, line-height, and color for body text, headings, and more.
-
-@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
-//@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,600,700);
-//@import url(https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i);
-@import url(https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i);
-
 @font-family-sans-serif:  "Open Sans", sans-serif;
 @font-family-serif:       "Merriweather", serif;
+
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
 @font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
 @font-family-base:        @font-family-sans-serif;
@@ -898,6 +893,7 @@
 @toolbar-btn-active-color       : white;
 @toolbar-btn-active-bg-color    : @link-color;
 @toolbar-btn-active-shadow      : inset 0 3px 5px rgba(0, 0, 0, 0.225);
+@toolbar-font-size              : 12px;
 @toolbar-alt-bg-color           : #fafafa;
 @toolbar-icon-btn-color         : @gray-light;
 @toolbar-icon-btn-hover-color   : @gray-dark;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 370e47d8d6..290628c976 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -1,6 +1,9 @@
 @import "./_common-variables.less";
 
 @is-overleaf: true;
+
+@font-family-sans-serif: "Lato", sans-serif;
+
 @header-height: 68px;
 @footer-height: 50px;
 
@@ -176,6 +179,8 @@
 @toolbar-icon-btn-hover-shadow    : none;
 @toolbar-border-bottom            : 1px solid @toolbar-border-color;
 @toolbar-icon-btn-hover-boxshadow : none;
+@toolbar-font-size                : 13px;
+
 // Editor file-tree
 @file-tree-bg                     : @ol-blue-gray-4;
 @file-tree-line-height            : 2.05;
diff --git a/services/web/public/stylesheets/ol-style.less b/services/web/public/stylesheets/ol-style.less
index 2a9a140611..540d106ab3 100644
--- a/services/web/public/stylesheets/ol-style.less
+++ b/services/web/public/stylesheets/ol-style.less
@@ -1,3 +1,6 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin-ext);
+@import url(https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i);
+
 // Core variables and mixins
 @import "core/ol-variables.less";
 @import "app/ol-style-guide.less";
diff --git a/services/web/public/stylesheets/style.less b/services/web/public/stylesheets/style.less
index 760f378719..ae5820453f 100755
--- a/services/web/public/stylesheets/style.less
+++ b/services/web/public/stylesheets/style.less
@@ -1,3 +1,6 @@
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
+@import url(https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i);
+
 // Core variables and mixins
 @import "core/variables.less";
 @import "_style_includes.less";
\ No newline at end of file

From 709a4bf4fb7464a3c13860d82e24d9ba077dd0e8 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Wed, 13 Dec 2017 16:23:50 +0000
Subject: [PATCH 11/15] Adjust padding values.

---
 .../web/public/stylesheets/core/_common-variables.less    | 2 ++
 services/web/public/stylesheets/core/ol-variables.less    | 8 +++++---
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less
index 177267779d..5885235ddc 100644
--- a/services/web/public/stylesheets/core/_common-variables.less
+++ b/services/web/public/stylesheets/core/_common-variables.less
@@ -929,6 +929,8 @@
 @chat-message-name-color          : @gray-light;
 @chat-message-box-shadow          : -1px 2px 3px #ddd;
 @chat-message-border-radius       : 0;
+@chat-message-padding             : @line-height-computed / 2;
+@chat-message-weight              : normal;
 @chat-new-message-bg              : @gray-lightest;
 @chat-new-message-textarea-bg     : #FFF;
 @chat-new-message-textarea-color  : @gray-dark;
diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 290628c976..def0e408f9 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -204,12 +204,14 @@
 @editor-border-color              : @ol-blue-gray-5;
 
 // Chat
-@chat-bg                          : @ol-blue-gray-6;
+@chat-bg                          : @ol-blue-gray-5;
 @chat-message-color               : #FFF;
 @chat-message-name-color          : #FFF;
-@chat-message-date-color          : @ol-blue-gray-3;
+@chat-message-date-color          : @ol-blue-gray-2;
 @chat-message-box-shadow          : none;
-@chat-message-border-radius       : @border-radius-base;
+@chat-message-padding             : 5px 10px;
+@chat-message-border-radius       : @border-radius-large;
+@chat-message-weight              : bold;
 @chat-new-message-bg              : @ol-blue-gray-4;
 @chat-new-message-textarea-bg     : @ol-blue-gray-1;
 @chat-new-message-textarea-color  : @ol-blue-gray-6;

From 91d479378b86e2bee8d353d295dcec007a85267e Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Tue, 19 Dec 2017 10:51:49 +0000
Subject: [PATCH 12/15] Apply padding and font-weight changes.

---
 services/web/public/stylesheets/app/editor/chat.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/services/web/public/stylesheets/app/editor/chat.less b/services/web/public/stylesheets/app/editor/chat.less
index 1f24f2e4b0..6a08cfc304 100644
--- a/services/web/public/stylesheets/app/editor/chat.less
+++ b/services/web/public/stylesheets/app/editor/chat.less
@@ -73,9 +73,10 @@
 					position: relative;
 					
 					.message-content {
-						padding: @line-height-computed / 2;
+						padding: @chat-message-padding;
 						overflow-x: auto;
 						color: @chat-message-color;
+						font-weight: @chat-message-weight;
 					}
 
 					.arrow {

From 88d669cbb5f44417afc5eedf45201f04d459224c Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Tue, 19 Dec 2017 10:52:17 +0000
Subject: [PATCH 13/15] Remove debugging statements.

---
 .../chat/controllers/ChatMessageController.coffee    | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/services/web/public/coffee/ide/chat/controllers/ChatMessageController.coffee b/services/web/public/coffee/ide/chat/controllers/ChatMessageController.coffee
index f69e04cad2..45e9821b96 100644
--- a/services/web/public/coffee/ide/chat/controllers/ChatMessageController.coffee
+++ b/services/web/public/coffee/ide/chat/controllers/ChatMessageController.coffee
@@ -16,15 +16,9 @@ define [
 				return ColorManager.getHueForUserId(user.id)
 
 		$scope.getMessageStyle = (user) ->
-			style =
-				"border-color"     : "hsl(#{ hue(user) }, #{ hslColorConfigs.borderSaturation }, #{ hslColorConfigs.borderLightness })"
-				"background-color" : "hsl(#{ hue(user) }, #{ hslColorConfigs.bgSaturation }, #{ hslColorConfigs.bgLightness })"
-			console.log style
-			return style
+			"border-color"     : "hsl(#{ hue(user) }, #{ hslColorConfigs.borderSaturation }, #{ hslColorConfigs.borderLightness })"
+			"background-color" : "hsl(#{ hue(user) }, #{ hslColorConfigs.bgSaturation }, #{ hslColorConfigs.bgLightness })"
 
 		$scope.getArrowStyle = (user) ->
-			style =
-				"border-color"     : "hsl(#{ hue(user) }, #{ hslColorConfigs.borderSaturation }, #{ hslColorConfigs.borderLightness })"
-			console.log style
-			return style
+			"border-color"     : "hsl(#{ hue(user) }, #{ hslColorConfigs.borderSaturation }, #{ hslColorConfigs.borderLightness })"
 	]
\ No newline at end of file

From cb83e2c1b2335f5b7f698fecb43a41a3dc4e5a82 Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Tue, 19 Dec 2017 10:52:23 +0000
Subject: [PATCH 14/15] Tone down chat colors.

---
 .../web/app/coffee/infrastructure/ExpressLocals.coffee    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/services/web/app/coffee/infrastructure/ExpressLocals.coffee b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
index 6781aaffcd..54e04f51e5 100644
--- a/services/web/app/coffee/infrastructure/ExpressLocals.coffee
+++ b/services/web/app/coffee/infrastructure/ExpressLocals.coffee
@@ -302,8 +302,8 @@ module.exports = (app, webRouter, privateApiRouter, publicApiRouter)->
 			westResizerCursor          : if isOl then "ew-resize" else null
 			chatResizerSizeOpen        : if isOl then 2 else 12
 			chatResizerSizeClosed      : 0
-			chatMessageBorderSaturation: if isOl then "100%" else "70%"
-			chatMessageBorderLightness : if isOl then "45%" else "70%"
-			chatMessageBgSaturation    : if isOl then "100%" else "60%"
-			chatMessageBgLightness     : if isOl then "45%" else "97%"
+			chatMessageBorderSaturation: if isOl then "85%" else "70%"
+			chatMessageBorderLightness : if isOl then "40%" else "70%"
+			chatMessageBgSaturation    : if isOl then "85%" else "60%"
+			chatMessageBgLightness     : if isOl then "40%" else "97%"
 		next()

From 8d1736af596990a194cd5dbed2272f1042fc97fc Mon Sep 17 00:00:00 2001
From: Paulo Reis <paulojreis@gmail.com>
Date: Wed, 20 Dec 2017 09:51:32 +0000
Subject: [PATCH 15/15] Fix forgotten conflict.

---
 services/web/public/stylesheets/core/ol-variables.less | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less
index 8433c374b8..7a19278500 100644
--- a/services/web/public/stylesheets/core/ol-variables.less
+++ b/services/web/public/stylesheets/core/ol-variables.less
@@ -201,10 +201,7 @@
 @toolbar-icon-btn-hover-shadow    : none;
 @toolbar-border-bottom            : 1px solid @toolbar-border-color;
 @toolbar-icon-btn-hover-boxshadow : none;
-<<<<<<< HEAD
 @toolbar-font-size                : 13px;
-=======
->>>>>>> master
 
 // Editor file-tree
 @file-tree-bg                   : @ol-blue-gray-4;