UX: use down chevron button instead of "show more" text to link to full list of notifications

app/assets/javascripts/discourse/widgets/user-notifications.js.es6

@@ -1,6 +1,7 @@
 import { createWidget } from 'discourse/widgets/widget';
 import { headerHeight } from 'discourse/components/site-header';
 import { h } from 'virtual-dom';
+import DiscourseURL from 'discourse/lib/url';
 
 export default createWidget('user-notifications', {
   tagName: 'div.notifications',
@@ -74,11 +75,14 @@ export default createWidget('user-notifications', {
       const items = [notificationItems];
 
       if (notificationItems.length > 5) {
-        const href = `${attrs.path}/notifications`;
-
         items.push(
-          h('li.read.last.heading',
-            h('a', { attributes: { href } }, [I18n.t('notifications.more'), '...'])),
+          h('li.read.last.heading.show-all',
+            this.attach('button', {
+              title: 'notifications.more',
+              icon: 'chevron-down',
+              action: 'showAllNotifications',
+              className: 'btn'
+            })),
           h('hr')
         );
       }
@@ -87,5 +91,9 @@ export default createWidget('user-notifications', {
     }
 
     return result;
+  },
+
+  showAllNotifications() {
+    DiscourseURL.routeTo(`${this.attrs.path}/notifications`);
   }
 });

app/assets/stylesheets/common/base/menu-panel.scss

@@ -210,12 +210,6 @@
     .icon { color: dark-light-choose($primary-high, $secondary-low); }
     li {
       background-color: $tertiary-low;
-      padding: 0.25em 0.5em;
-      i {
-        float: left;
-        margin-right: 5px;
-        padding-top: 2px;
-      }
 
       // This is until other languages remove the HTML from within
       // notifications. It can then be removed
@@ -231,6 +225,14 @@
         overflow: hidden;
       }
     }
+    li:not(.show-all) {
+      padding: 0.25em 0.5em;
+      i {
+        float: left;
+        margin-right: 5px;
+        padding-top: 2px;
+      }
+    }
     .is-warning {
       .d-icon-envelope-o {
         &:before {
@@ -254,6 +256,16 @@
       border-width: 2px;
       margin: 0 auto;
     }
+    .show-all .btn {
+      width: 100%;
+      padding: 2px 0;
+      color: dark-light-choose($primary-medium, $secondary-high);
+      background: blend-primary-secondary(5%);
+      &:hover {
+        color: $primary;
+        background: dark-light-diff($primary, $secondary, 90%, -80%);
+      }
+    }
     /* as a big ol' click target, don't let text inside be selected */
     @include unselectable;
   }