Merge pull request #466 from sharelatex/pr-v2-system-messages

v2 system messages

services/web/app/views/layout.pug

@@ -111,22 +111,6 @@ html(itemscope, itemtype='http://schema.org/Product')
 				data-badge="inline"
 			)
 
-		- if(typeof(suppressSystemMessages) == "undefined")
-			.system-messages(
-				ng-cloak
-				ng-controller="SystemMessagesController"
-			)
-				.system-message(
-					ng-repeat="message in messages"
-					ng-controller="SystemMessageController"
-					ng-hide="hidden"
-				)
-					a(href, ng-click="hide()").pull-right ×
-					.system-message-content(ng-bind-html="htmlContent")
-	
-			include translations/translation_message
-
-
 		- if(typeof(suppressNavbar) == "undefined")
 			include layout/navbar
 

services/web/app/views/project/list.pug

@@ -57,8 +57,24 @@ block content
 							ng-click="showAll();"
 						) Show all
 	.content.content-alt.project-list-page(ng-controller="ProjectPageController")
-		.project-list-content
+		- if(typeof(suppressSystemMessages) == "undefined")
+			.system-messages(
+				ng-cloak
+				ng-controller="SystemMessagesController"
+			)
+				.system-message(
+					ng-repeat="message in messages"
+					ng-controller="SystemMessageController"
+					ng-hide="hidden"
+				)
+					button(ng-click="hide()").close.pull-right
+						span(aria-hidden="true") ×
+						span.sr-only #{translate("close")}
+					.system-message-content(ng-bind-html="htmlContent")
+			
+			include ../translations/translation_message
 
+		.project-list-content
 			.row.project-list-row(ng-cloak)
 				.project-list-container(ng-if="projects.length > 0")
 					.project-list-sidebar-wrapper.col-md-2.col-xs-3

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

@@ -1,8 +1,14 @@
 .system-message {
-    padding: (@line-height-computed / 4) (@line-height-computed / 2);
+  padding: (@line-height-computed / 4) (@line-height-computed / 2);
-    background-color: @state-warning-bg;
+  background-color: @sys-msg-background;
-    color: #333;
+  color: @sys-msg-color;
-    border-bottom: 1px solid @common-border-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);
+    .system-message;
-    background-color: @state-warning-bg;
-    color: #333;
-    border-bottom: 1px solid @common-border-color;
 	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/components/navbar.less

@@ -576,10 +576,3 @@
     padding: @navbar-default-padding-v 0;
   }
 }
-
-.system-messages {
-  padding-top: @header-height;
-  position: absolute;
-  width: 100%;
-  z-index: 1;
-}

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.