More color adjustments.

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()

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 {

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;

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;