basic unread/read states

public/javascripts/widgets/notifications-badge.js

@@ -52,7 +52,9 @@
 
       $.each(self.notifications.notifications, function(index, notifications) {
         $.each(notifications, function(index, notification) {
-          $("<div/>", { "class": "notification_element" })
+          $("<div/>")
+            .addClass("notification_element")
+            .addClass((notification.unread) ? "unread" : "read" )
             .html(notification.translation)
             .prepend($("<img/>", { src: notification.actors[0].avatar }))
             .prependTo(self.dropdownNotifications);

public/stylesheets/sass/application.sass

@@ -3082,6 +3082,10 @@ ul.left_nav
   .notification_element
     :padding 10px 20px
     :min-height 30px
+    .unread
+      :background #CCC
+    .read
+      :background white
 
     img
       :height 30px