From 5613c5f81abb179be1f3ae36b5284af147ec3577 Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Tue, 15 Nov 2016 10:56:34 +0800
Subject: [PATCH] UX: Add "spotlight" on first notification.

---
 app/assets/javascripts/discourse/widgets/header.js.es6 |  5 ++++-
 app/assets/stylesheets/common/base/discourse.scss      | 10 ++++++++++
 app/assets/stylesheets/common/base/header.scss         |  4 ++--
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/discourse/widgets/header.js.es6 b/app/assets/javascripts/discourse/widgets/header.js.es6
index 1e01d0263de..9445e8fb906 100644
--- a/app/assets/javascripts/discourse/widgets/header.js.es6
+++ b/app/assets/javascripts/discourse/widgets/header.js.es6
@@ -42,7 +42,10 @@ createWidget('header-notifications', {
 
     const unreadPMs = currentUser.get('unread_private_messages');
     if (!!unreadPMs) {
-      if (!currentUser.get('read_first_notification')) contents.push(h('span.ring'));
+      if (!currentUser.get('read_first_notification')) {
+        contents.push(h('span.ring'));
+        contents.push(h('span.ring-backdrop'));
+      };
 
       contents.push(this.attach('link', { action: attrs.action,
                                           className: 'badge-notification unread-private-messages',
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index f6795dd00ee..1684695bdc8 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -166,6 +166,16 @@ body {
   &.badge-notification[href] {color: $secondary;}
 }
 
+.ring-backdrop {
+  width: 80px;
+  height: 80px;
+  top: -18px !important;
+  right: -18px !important;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8);
+  border-radius: 100%;
+  z-index: 1040;
+}
+
 .ring {
   $gradient-start: transparent;
   $gradient-end: #090;
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 19917997670..196b5d9dce8 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -123,7 +123,7 @@
       .notifications {
         position: relative;
       }
-      .badge-notification, .ring {
+      .badge-notification, .ring, .ring-backdrop {
         position: absolute;
         top: -9px;
         z-index: 1;
@@ -133,7 +133,7 @@
         right: 0;
         background-color: scale-color($tertiary, $lightness: 50%);
       }
-      .unread-private-messages, .ring {
+      .unread-private-messages, .ring, .ring-backdrop {
         right: 25px;
       }
       .flagged-posts {