Update design of empty notification panel

web/css/styles.min.css

@@ -956,6 +956,16 @@ a {
   border-top: none;
 }
 
+.notification-container .empty {
+  text-align: center;
+  font-size: 1.2rem;
+  font-weight: normal;
+}
+
+.notification-container .empty .status-icon {
+  color: #54a6e5;
+}
+
 .notification-container .unseen {
   color: #6f6f6f;
 }

web/js/templates.js

@@ -9,13 +9,12 @@ App.Templates.html = {
                     '<li class="~!:UNSEEN~!"><span class="unselectable mark-seen" id="notification-~!:ID~!">&nbsp;</span>\
                         <span class="title"><span class="unselectable icon ~!:TYPE~!">&nbsp;</span>~!:TOPIC~!</span>\
                         ~!:NOTICE~!\
-                        <span class="time">~!:TIME~! ~!:DATE~!</span>\
+                        <b><span class="time">~!:TIME~! ~!:DATE~!</span></b>\
                     </li>'
         ],
         notification_empty: [
-                    '<li class="empty">\
-                        '+App.Constants.NOTIFICATIONS_EMPTY+'\
-                    </li>'
+                    '<li class="empty"><br><br><span><i class="fas fa-bell-slash status-icon" style="font-size: 4rem;"></i><br><br>\
+                    '+App.Constants.NOTIFICATIONS_EMPTY+'\</span></li>'
         ]
     },