touched up notifications page

app/views/notifications/index.html.haml

@@ -1,24 +1,28 @@
 - content_for :head do
   = include_javascripts :notifications
-.span-1
-  = image_tag 'icons/mail_big.png', :height => 30, :width => 30, :style=>"margin-top:3px;"
-.span-10
+.span-13
   %h2
+    %span.notification_count{:class => ('unread' if @notification_count > 0)}
+      = @notification_count
     = t('.notifications')
-.span-13.last.left
+.span-8.last.left
   = link_to t('.mark_all_as_read'), read_all_notifications_path, :class => 'button'
 
 .span-24.last
-  %ul.stream.notifications
+  .stream.notifications
     - @group_days.each do |day, notes|
-      %li
-        %h4= day
-        %ul.notifications_for_day
-          - notes.each do |note|
-            .stream_element{:data=>{:guid => note.id}, :class => "#{note.unread ? 'unread' : ''}"}
-              %span.from
-                = notification_people_link(note)
-                = object_link(note)
+      .span-3
+        .date
+          .day= day.split(' ').last
+          .month= day.split(' ').first
 
-              %span.time= timeago(note.created_at)
+      .span-8.notifications_for_day
+        - notes.each do |note|
+          .stream_element{:data=>{:guid => note.id}, :class => "#{note.unread ? 'unread' : ''}"}
+            %span.from
+              = notification_people_link(note)
+              = object_link(note)
+
+            %br
+            %time= timeago(note.created_at)
     = will_paginate @notifications

public/stylesheets/sass/application.sass

@@ -236,7 +236,10 @@ header
       :display block
 
 .unread
-  :background-color #eee
+  :font-weight bold
+  :color #333 !important
+  time
+    :color #333 !important
 
 .diaspora_header_logo
   :position relative
@@ -267,8 +270,6 @@ header
       :font
         :weight normal
         :size smaller
-      :position absolute
-      :right 20px
 
 .from
   a
@@ -2821,3 +2822,41 @@ h1.tag
       :bottom 4px
   .see_all
     :text-align center
+
+.date
+  :background
+    :color #e6e6e6
+  :border-radius 8px
+  :padding 5px
+  :color #999
+
+  :text-align center
+  .day
+    :font-size 50px
+    :font-weight 200
+    :margin-bottom -15px
+    :margin-top -10px
+
+  .month
+    :font-size 14px
+
+.notification_count
+  :background
+    :color #f0f0f0
+  :color #999
+  :font
+    :weight normal
+
+  :padding 0 5px
+    :left 11px
+  :margin
+    :right 5px
+  :border
+    :radius 5px
+
+  &.unread
+    :background
+      :color lighten(#A40802, 5%)
+    :color #eee !important
+    :font
+      :weight bold