Refactor content message class names

conversation.html

@@ -48,7 +48,7 @@
         <script type='text/x-tmpl-mustache' id='message'>
             <div class='sender'>{{ sender }}</div>
             <img class='avatar' src='{{ contact_avatar }}'>
-            <div class="bubble {{ bubble_class }}">
+            <div class="bubble">
                 <p class="content">{{ message }}</p>
                 <div class='attachments'></div>
                 <p class="timestamp">{{ timestamp }}</p>

js/views/message_view.js

@@ -39,12 +39,14 @@
         this.template = $('#message').html();
         Mustache.parse(this.template);
       },
+      className: function() {
+        if (this.model.get('delivered')) { return 'delivered'; }
+      },
       render: function() {
             this.$el.html(
                 Mustache.render(this.template, {
                     message: this.model.get('body'),
                     timestamp: moment(this.model.get('received_at')).fromNow(),
-                    bubble_class: this.model.get('type') === 'outgoing' ? 'sent' : 'incoming',
                     sender: this.model.get('source')
                 })
             );
@@ -55,10 +57,6 @@
                 })
             );
 
-            if (this.model.get('delivered')) {
-                this.$el.addClass('delivered');
-            }
-
             var errors = this.model.get('errors');
             if (errors && errors.length) {
                 this.$el.find('.bubble').append(

stylesheets/_conversation.scss

@@ -33,7 +33,7 @@ button {
   font-size: smaller;
 }
 
-.entry.delivered .timestamp::after {
+.entry .delivered .timestamp::after {
     margin-left: 4px;
     content: "✓";
 }

stylesheets/manifest.css

@@ -277,7 +277,7 @@ button {
 .timestamp {
   font-size: smaller; }
 
-.entry.delivered .timestamp::after {
+.entry .delivered .timestamp::after {
   margin-left: 4px;
   content: "✓"; }