improve notificationbox readability

app/assets/stylesheets/notifications.scss.erb

@@ -149,7 +149,7 @@ $unread_notifications_dot_size: 8px;
 ul.notifications {
   list-style: none;
 
-  li:last-child {
+  li:nth-last-child(2) {
     .notification-body {
       border-bottom: none !important;
     }

frontend/src/Metamaps/GlobalUI/Notifications.js

@@ -30,7 +30,7 @@ const Notifications = {
       method: 'PUT',
       success: function(r) {
         if (n) {
-
+          Notifications.unreadNotificationsCount--
           n.is_read = true
           render()
         }

frontend/src/components/App/NotificationBox.js

@@ -26,29 +26,48 @@ class NotificationBox extends Component {
     this.props.toggleNotificationsBox()
   }
 
-  render = () => {
+  hasSomeNotifications = () => {
-    const { notifications, markAsRead, markAsUnread } = this.props
+    const { notifications } = this.props
-    const empty = notifications && notifications.length === 0
+    return notifications && notifications.length > 0
-    return <div className='notificationsBox'>
+  }
-      <div className='notificationsBoxTriangle' />
+
-      <ul className='notifications'>
+  showLoading = () => {
-        {!notifications && <li><Loading margin='30px auto' /></li>}
+    return <li><Loading margin='30px auto' /></li>
-        {empty ? (
+  }
-          <li className='notificationsEmpty'>
+
+  showEmpty = () => {
+    return <li className='notificationsEmpty'>
       You have no notifications. <br />
       More time for dancing.
     </li>
-        ) : (
+  }
-          notifications.slice(0, 10).map(n => <Notification notification={n}
+
+  showNotifications = () => {
+    const { notifications, markAsRead, markAsUnread } = this.props
+    if (!this.hasSomeNotifications()) {
+      return this.showEmpty()
+    }
+    return notifications.slice(0, 10).map(
+      n => <Notification notification={n}
         markAsRead={markAsRead}
         markAsUnread={markAsUnread}
-              key={`notification-${n.id}`} />)
+        key={`notification-${n.id}`} />
-        )}
+    ).concat([
-      </ul>
+      <li key='notification-see-all'>
-      {notifications && !empty && <a href='/notifications'
+        <a href='/notifications' className='notificationsBoxSeeAll'>
-        className='notificationsBoxSeeAll'>
           See all
-      </a>}
+        </a>
+      </li>
+    ])
+  }
+
+  render = () => {
+    const { notifications } = this.props
+    return <div className='notificationsBox'>
+      <div className='notificationsBoxTriangle' />
+      <ul className='notifications'>
+        {notifications ? this.showNotifications() : this.showLoading()}
+      </ul>
     </div>
   }
 }