From d8ed0e5277a44901b431cad4ce61001893bd212f Mon Sep 17 00:00:00 2001
From: James Allen <james@sharelatex.com>
Date: Tue, 20 Mar 2018 10:27:45 +0000
Subject: [PATCH] Allow v2 notification banner to be dismissed

---
 .../app/views/project/list/notifications.pug  | 22 ++++++++++++++-----
 .../public/coffee/main/announcements.coffee   |  1 -
 .../notifications-controller.coffee           |  9 +++++++-
 .../public/stylesheets/app/project-list.less  |  4 ----
 .../public/stylesheets/components/close.less  |  2 +-
 5 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/services/web/app/views/project/list/notifications.pug b/services/web/app/views/project/list/notifications.pug
index 69fc1806a0..5afbff6db5 100644
--- a/services/web/app/views/project/list/notifications.pug
+++ b/services/web/app/views/project/list/notifications.pug
@@ -1,10 +1,20 @@
 if (user.awareOfV2 && !settings.overleaf)
-	.alert.alert-info.small
-		a.pull-right.btn.btn-info.btn-sm(href="/user/login_to_ol_v2" style="margin-left: 12px") Click here to try Overleaf v2
-		p
-			| ShareLaTeX is joining Overleaf and will become <em>Overleaf v2</em> in late 2018 (<a href="https://www.overleaf.com/help/342-overleaf-v2-faq">read more</a>).
-			<br/>
-			| We’re beta testing Overleaf v2 now and you can try it out with your ShareLaTeX account.
+	.userNotifications
+		ul.list-unstyled.notifications-list(ng-controller="OverleafNotificationController", ng-show="visible")
+			li.notification_entry
+				.row
+					.col-xs-12
+						.alert.alert-info
+							.notification_inner
+								.notification_body
+									a.btn.btn-info.btn-sm.pull-right(href="/user/login_to_ol_v2") Try Overleaf v2
+									| ShareLaTeX is joining Overleaf and will become <em>Overleaf v2</em> in late 2018 (<a href="https://www.overleaf.com/help/342-overleaf-v2-faq">read more</a>).
+									<br/>
+									| We’re beta testing Overleaf v2 now and you can try it out with your ShareLaTeX account.
+								.notification_close
+									button(ng-click="dismiss()").close.pull-right
+										span(aria-hidden="true") &times;
+										span.sr-only #{translate("close")}
 
 span(ng-controller="NotificationsController").userNotifications
 	ul.list-unstyled.notifications-list(
diff --git a/services/web/public/coffee/main/announcements.coffee b/services/web/public/coffee/main/announcements.coffee
index 5663be9ca6..92c0cb4f4a 100644
--- a/services/web/public/coffee/main/announcements.coffee
+++ b/services/web/public/coffee/main/announcements.coffee
@@ -29,4 +29,3 @@ define [
 
 		$scope.showAll = -> 
 			$scope.ui.newItems = 0
-
diff --git a/services/web/public/coffee/main/project-list/notifications-controller.coffee b/services/web/public/coffee/main/project-list/notifications-controller.coffee
index 21476f4f04..498a4c5328 100644
--- a/services/web/public/coffee/main/project-list/notifications-controller.coffee
+++ b/services/web/public/coffee/main/project-list/notifications-controller.coffee
@@ -35,4 +35,11 @@ define [
 					$scope.notification.accepted = true
 				.catch () ->
 					$scope.notification.inflight = false
-					$scope.notification.error = true
\ No newline at end of file
+					$scope.notification.error = true
+
+	App.controller "OverleafNotificationController", ($scope, localStorage) ->
+		$scope.visible = !localStorage('overleaf_notification_hidden_at')
+
+		$scope.dismiss = () ->
+			$scope.visible = false
+			localStorage('overleaf_notification_hidden_at', Date.now())
diff --git a/services/web/public/stylesheets/app/project-list.less b/services/web/public/stylesheets/app/project-list.less
index 99506f7c93..982086a262 100644
--- a/services/web/public/stylesheets/app/project-list.less
+++ b/services/web/public/stylesheets/app/project-list.less
@@ -130,10 +130,6 @@
 					padding-right: 15px;
 					vertical-align: middle;
 				}
-				.notification_close {
-					display: table-cell;
-					vertical-align: middle;
-				}
 			}
 		}
 	}
diff --git a/services/web/public/stylesheets/components/close.less b/services/web/public/stylesheets/components/close.less
index 9b4e74f2b8..0bb09033ef 100755
--- a/services/web/public/stylesheets/components/close.less
+++ b/services/web/public/stylesheets/components/close.less
@@ -10,7 +10,7 @@
   line-height: 1;
   color: @close-color;
   text-shadow: @close-text-shadow;
-  .opacity(.2);
+  .opacity(.4);
 
   &:hover,
   &:focus {