Differentiate system notes

app/assets/stylesheets/generic/timeline.scss

@@ -74,6 +74,42 @@
       }
     }
   }
+
+  .system-note .timeline-entry-inner {
+    .timeline-icon {
+      background: none;
+      margin-left: 12px;
+      margin-top: 0;
+      @include box-shadow(none);
+
+      span {
+        margin: 0 2px;
+        font-size: 16px;
+        color: #eeeeee;
+      }
+    }
+
+    .timeline-content {
+      background: none;
+      margin-left: 45px;
+      padding: 0px 15px;
+
+      &:after { border: 0; }
+
+      .note-header {
+        span { font-size: 12px; }
+
+        .avatar {
+          margin-right: 5px;
+        }
+      }
+
+      .note-text {
+        font-size: 12px;
+        margin-left: 20px;
+      }
+    }
+  }
 }
 
 @media (max-width: $screen-xs-max) {

app/views/projects/notes/_note.html.haml

-%li.timeline-entry{ id: dom_id(note), class: dom_class(note), data: { discussion: note.discussion_id } }
+%li.timeline-entry{ id: dom_id(note), class: [dom_class(note), ('system-note' if note.system)], data: { discussion: note.discussion_id } }
   .timeline-entry-inner
     .timeline-icon
-      = image_tag avatar_icon(note.author_email), class: "avatar s40"
+      - if note.system
+        %span.fa.fa-circle
+      - else
+        = image_tag avatar_icon(note.author_email), class: "avatar s40"
     .timeline-content
       .note-header
         .note-actions
@@ -17,6 +20,8 @@
             = link_to project_note_path(@project, note), title: "Remove comment", method: :delete, data: { confirm: 'Are you sure you want to remove this comment?' }, remote: true, class: "danger js-note-delete" do
               %i.fa.fa-trash-o.cred
               Remove
+        - if note.system
+          = image_tag avatar_icon(note.author_email), class: "avatar s16"
         = link_to_member(@project, note.author, avatar: false)
         %span.author-username
           = '@' + note.author.username