From c3d8ff65bdcf02a014aafab93628e0508509d25a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Nov 2018 03:52:12 +0300
Subject: [PATCH] fix notification unseen display rendering underneath the
 highlight

---
 src/components/notifications/notifications.scss | 17 +++++++++++++++--
 src/components/notifications/notifications.vue  |  1 +
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index fcc0c3d4..26455ffb 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -26,9 +26,22 @@
     color: var(--text, $fallback--text);
   }
 
-  .unseen {
+  .notification {
+    position: relative;
 
-    background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px)
+    .notification-overlay {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      bottom: 0;
+    }
+
+    &.unseen {
+      .notification-overlay {
+        background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px)
+      }
+    }
   }
 }
 
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 7a4322f9..eb6c4dd0 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -13,6 +13,7 @@
       </div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'>
+          <div class="notification-overlay"></div>
           <notification :notification="notification"></notification>
         </div>
       </div>