From 22633dc16e38e6091665ae65a421de27826ce8b3 Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 7 Jul 2021 19:27:31 +0200
Subject: [PATCH] Give unread notifications a small left border

---
 src/theme.scss               | 8 ++++++++
 src/views/notifications.html | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/theme.scss b/src/theme.scss
index 3fbe2774c..02986decf 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -1519,6 +1519,14 @@ footer {
     &:hover {
         box-shadow: 0 2px 27px rgba(0,0,0,.1);
     }
+
+    &.notification-unread {
+        border-left: solid 3px #2196f3;
+
+        .notification-title {
+            font-weight: bold;
+        }
+    }
 }
 
 // ----------------------------
diff --git a/src/views/notifications.html b/src/views/notifications.html
index b039f504d..3d5cb6832 100644
--- a/src/views/notifications.html
+++ b/src/views/notifications.html
@@ -21,10 +21,10 @@
     </div>
   </div>
 
-  <div class="card notification-item" ng-repeat="notification in notifications">
+  <div class="card notification-item" ng-repeat="notification in notifications" ng-class="{'notification-unread': !notification.acknowledged }">
     <div class="row">
       <div class="col-xs-12" ng-click="notification.isCollapsed = !notification.isCollapsed" ng-class="{ 'notification-details': notification.detailsShown }">
-        <span ng-class="{'text-bold': !notification.acknowledged }">{{ notification.title }}</span> <small class="text-muted" uib-tooltip="{{ notification.creationTime | prettyLongDate }}">{{ notification.creationTime | prettyDate }}</small>
+        <span class="notification-title">{{ notification.title }}</span> <small class="text-muted" uib-tooltip="{{ notification.creationTime | prettyLongDate }}">{{ notification.creationTime | prettyDate }}</small>
         <div uib-collapse="notification.isCollapsed" expanding="ack(notification)">
           <br/>
           <p ng-hide="notification.messageJson" ng-click="$event.stopPropagation();" style="cursor: auto; overflow: auto;" ng-bind-html="notification.message | markdown2html"></p>