Add dummy dismiss-all button

www/notifications/app-notifications.less

@@ -13,6 +13,12 @@
     display: flex;
     flex-flow: column;
 
+    .cp-clickable {
+        cursor: pointer;
+        &:hover {
+            background-color: rgba(0,0,0,0.1);
+        }
+    }
 
     .cp-app-notifications-panel {
         display: flex;
@@ -22,10 +28,37 @@
         width: 100%;
 
         .cp-app-notifications-panel-titlebar {
-            padding: 1rem 1rem;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
             border-radius: 5px 5px 0 0;
             background-color: #777;
             color: white;
+
+            .cp-app-notifications-panel-title {
+                flex-grow: 1;
+                margin: 1rem 1rem;
+            }
+
+            .cp-app-notifications-panel-titlebar-buttons {
+                align-self: stretch;
+                flex-shrink: 0;
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-end;
+                align-items: stretch;
+
+                .cp-app-notifications-dismissall {
+                    align-self: stretch;
+                    flex-shrink: 0;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: center;
+                    width: 3rem;
+                }
+            }
         }
 
         .cp-app-notifications-panel-list {
@@ -50,10 +83,6 @@
 
                 .cp-notification-content {
                     flex-grow: 1;
-                    cursor: pointer;
-                    &:hover {
-                        background-color: #eee;
-                    }
                     p {
                         margin: 1rem 1rem;
                     }
@@ -67,12 +96,7 @@
                     justify-content: center;
                     align-items: center;
                     border-left: 1px solid #ccc;
-                    background-color: white;
-                    cursor: pointer;
                     width: 3rem;
-                    &:hover {
-                        background-color: rgba(0, 0, 0, 0.1);
-                    }
                 }
             }
         }

www/notifications/inner.js

@@ -63,9 +63,11 @@ define([
     create['all'] = function () {
         var key = 'all';
         var $div = makeBlock(key);
+        var dismissAll = h("div.cp-app-notifications-dismissall.cp-clickable", { title: Messages.dismissAll || "Dismiss All" }, h("span.fa.fa-trash"));
+        var titleButtons = h("div.cp-app-notifications-panel-titlebar-buttons", dismissAll);
         var notifsTitlebar = h('div.cp-app-notifications-panel-titlebar', [
             h("span.cp-app-notifications-panel-title", (Messages.notifications || "Notifications") + " - " + key),
-            h("div.cp-app-notifications-panel-titlebar-buttons")
+            titleButtons
         ]);
         var notifsList = h("div.cp-app-notifications-panel-list");
         var notifsPanel = h("div.cp-app-notifications-panel", [
@@ -107,7 +109,7 @@ define([
         Object.keys(categories).forEach(function (key) {
             var $category = $('<div>', {'class': 'cp-sidebarlayout-category'}).appendTo($categories);
             if (key === 'all') { $category.append($('<span>', {'class': 'fa fa-bars'})); }
-            if (key === 'friends') { $category.append($('<span>', {'class': 'fa fa-user-plus'})); }
+            if (key === 'friends') { $category.append($('<span>', {'class': 'fa fa-user'})); }
             if (key === 'pads') { $category.append($('<span>', {'class': 'cptools cptools-pad'})); }
 
             if (key === active) {