From 38a5730f1466ebdc0219649911989c25f7ced748 Mon Sep 17 00:00:00 2001
From: Veiko Aasa <veiko17@disroot.org>
Date: Thu, 8 Oct 2020 11:20:14 +0300
Subject: [PATCH] notifications: Show severity level on every notification

Left side border of the notification is the color of the severity
level. Helps when there are multiple notifications with different
severity levels.

Signed-off-by: Veiko Aasa <veiko17@disroot.org>
[sunil: Drop styling for unused 'notification-light' class]
Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Sunil Mohan Adapa <sunil@medhas.org>
---
 plinth/templates/notifications.html |  2 +-
 static/themes/default/css/main.css  | 15 ++++++++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/plinth/templates/notifications.html b/plinth/templates/notifications.html
index db6e75cf7..56169f3b8 100644
--- a/plinth/templates/notifications.html
+++ b/plinth/templates/notifications.html
@@ -11,7 +11,7 @@
   <div class="notifications dropdown">
     <ul class="dropdown-menu" role="menu">
       {% for note in notifications %}
-        <li class="notification">
+        <li class="notification notification-{{ note.severity }}">
           {% if note.data.app_name %}
             <div class="app-name">
               {% if note.data.app_icon %}
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index be8db5614..6808adec3 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -660,6 +660,7 @@ input[type='submit'].running-status-button {
 .notification {
     padding: 1rem 1.5rem;
     font-size: 15px;
+    border-left: 5px solid;
 }
 
 .notification:not(:first-child) {
@@ -692,10 +693,22 @@ img.notification-icon {
     background-color: #ec971f;
 }
 
-.badge-info, badge-debug {
+.badge-info, .badge-debug {
     background-color: #5bc0de;
 }
 
+.notification-exception, .notification-error {
+    border-left-color: #d9534f;
+}
+
+.notification-warning {
+    border-left-color: #ec971f;
+}
+
+.notification-info, .notification-debug {
+    border-left-color: #5bc0de;
+}
+
 /* Don't collapse notifications on small screens */
 .collapsing .notifications-dropdown,
 .collapse.in .notifications-dropdown {