V2 styling for system messages.

services/web/public/stylesheets/app/base.less

@@ -1,8 +1,14 @@
 .system-message {
   padding: (@line-height-computed / 4) (@line-height-computed / 2);
-  background-color: @state-warning-bg;
-  color: #333;
-  border-bottom: 1px solid @common-border-color;
+  background-color: @sys-msg-background;
+  color: @sys-msg-color;
+  border-bottom: @sys-msg-border;
+}
+
+.system-message .close when (@is-overleaf = true) {
+  color: #FFF;
+  opacity: 1;
+  text-shadow: none;
 }
 
 .clickable {

services/web/public/stylesheets/app/translations.less

@@ -1,14 +1,23 @@
-
 .translations-message {
-    padding: (@line-height-computed / 4) (@line-height-computed / 2);
-    background-color: @state-warning-bg;
-    color: #333;
-    border-bottom: 1px solid @common-border-color;
+    .system-message;
 	text-align:center;
-    
     img {
     	vertical-align: text-bottom;
         margin-bottom: -1px;
     }
+}
 
-}
+.translations-message when (@is-overleaf = true) {
+	.close {
+		color: #FFF;
+		opacity: 1;
+		text-shadow: none;
+	}
+	a {
+		color: #FFF;
+		&:hover,
+		&:focus {
+			color: #FFF;
+		}
+	}
+}

services/web/public/stylesheets/core/_common-variables.less

@@ -959,4 +959,9 @@
 @tag-max-width      : 150px;
 @tag-bg-hover-color : darken(@label-default-bg, 10%);
 @tag-top-adjustment : -2px;
-@labels-font-size   : 75%;
+@labels-font-size   : 75%;
+
+// System messages
+@sys-msg-background : @state-warning-bg;
+@sys-msg-color      : #333;
+@sys-msg-border     : 1px solid @common-border-color;

services/web/public/stylesheets/core/ol-variables.less

@@ -256,6 +256,11 @@
 @log-line-no-color              : #FFF;
 @log-hints-color                : @ol-blue-gray-4;
 
+// System messages
+@sys-msg-background             : @ol-blue;
+@sys-msg-color                  : #FFF;
+@sys-msg-border                 : solid 1px lighten(@ol-blue, 10%);
+
 //== Colors
 //
 //## Gray and brand colors for use across Bootstrap.