Move error indicators on message bubbles

// FREEBIE

background.html

@@ -187,6 +187,12 @@
       <div class='message-container'></div>
       <div class='info'>
         <table>
+          {{ #errors }}
+            <tr>
+              <td class='label'>{{ errorLabel }}</td>
+              <td> <span class='error-message'>{{message}}</span> </td>
+            </tr>
+          {{ /errors }}
           <tr>
             <td class='label'>{{ sent }}</td>
             <td> {{ sent_at }}</td>
@@ -197,12 +203,6 @@
               <td> {{ received_at }}</td>
             </tr>
           {{ /received_at }}
-          {{ #errors }}
-            <tr>
-              <td class='label'>{{ errorLabel }}</td>
-              <td> <span class='error-message'>{{message}}</span> </td>
-            </tr>
-          {{ /errors }}
             <tr> <td class='tofrom label'>{{tofrom}}</td> </tr>
         </table>
         <div class='contacts'>

js/views/message_view.js

@@ -56,12 +56,12 @@
         renderErrors: function() {
             var errors = this.model.get('errors');
             if (_.size(errors) > 0) {
-                this.$('.bubble').addClass('error');
+                this.$el.addClass('error');
                 if (this.model.isIncoming()) {
                     this.$('.content').text(this.model.getDescription()).addClass('error-message');
                 }
             } else {
-                this.$('.bubble').removeClass('error');
+                this.$el.removeClass('error');
             }
         },
         renderControl: function() {

stylesheets/_conversation.scss

@@ -257,7 +257,6 @@
     border: solid 1px #ccc;
   }
 }
-
 .group-update {
   font-size: smaller;
 }
@@ -288,34 +287,12 @@
 .timestamp {
   font-size: smaller;
   margin-right: 3px;
-  &:hover {
-      text-decoration: underline;
-  }
-}
-
-.outgoing.entry {
-  .status {
-    display: inline-block;
-    width: 18px;
-    height: 1em;
-  }
-  &.sent .status {
-    background: url('/images/check-white.png');
-  }
-  &.delivered .status {
-    background: url('/images/double-check-white.png');
-  }
-  &.pending .status {
-    background: none;
-    &:before { content: '...'; }
-  }
 }
 
 .message-detail,
 .message-list {
   list-style: none;
 
-
   li {
     max-width: 800px;
     margin: 0 8px 16px;
@@ -358,29 +335,53 @@
     p {
       margin: 0;
     }
-    .meta {
+  }
-      margin-top: 3px;
-      float: right;
-      cursor: pointer;
-      opacity: 0.5;
 
-      &:hover {
+  .meta {
+    margin-top: 3px;
+    float: right;
+    cursor: pointer;
+
+    .timestamp, .status {
+      opacity: 0.5;
+    }
+
+    &:hover {
+      .timestamp, .status {
         opacity: 1.0;
       }
+      .timestamp {
+        text-decoration: underline;
+      }
     }
   }
 
-  .error.bubble {
+  .status {
-    cursor: pointer;
+    float: right;
+    width: 18px;
+    height: 1em;
+  }
+  .sent .status {
+    display: inline-block;
+    background: url('/images/check-white.png');
+  }
+  .delivered .status {
+    display: inline-block;
+    background: url('/images/double-check-white.png');
+  }
+  .pending .status {
+    display: inline-block;
+    background: none;
+    &:before { content: '...'; }
+  }
+  .error .status {
+    position: relative;
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    opacity: 1 !important;
     background: url('/images/error_red.png') no-repeat;
-  }
+    cursor: pointer;
-  .incoming .error.bubble {
-    padding-right: 40px;
-    background-position: calc(100% - 12px) 9px;
-  }
-  .outgoing .error.bubble {
-    padding-left: 40px;
-    background-position: 12px 9px;
   }
 
   .incoming {

stylesheets/manifest.css

@@ -791,21 +791,6 @@ input.search {
 .timestamp {
   font-size: smaller;
   margin-right: 3px; }
-  .timestamp:hover {
-    text-decoration: underline; }
-
-.outgoing.entry .status {
-  display: inline-block;
-  width: 18px;
-  height: 1em; }
-.outgoing.entry.sent .status {
-  background: url("/images/check-white.png"); }
-.outgoing.entry.delivered .status {
-  background: url("/images/double-check-white.png"); }
-.outgoing.entry.pending .status {
-  background: none; }
-  .outgoing.entry.pending .status:before {
-    content: '...'; }
 
 .message-detail,
 .message-list {
@@ -848,27 +833,51 @@ input.search {
     .message-detail .bubble p,
     .message-list .bubble p {
       margin: 0; }
-    .message-detail .bubble .meta,
+  .message-detail .meta,
-    .message-list .bubble .meta {
+  .message-list .meta {
-      margin-top: 3px;
+    margin-top: 3px;
-      float: right;
+    float: right;
-      cursor: pointer;
+    cursor: pointer; }
+    .message-detail .meta .timestamp, .message-detail .meta .status,
+    .message-list .meta .timestamp,
+    .message-list .meta .status {
       opacity: 0.5; }
-      .message-detail .bubble .meta:hover,
+    .message-detail .meta:hover .timestamp, .message-detail .meta:hover .status,
-      .message-list .bubble .meta:hover {
+    .message-list .meta:hover .timestamp,
-        opacity: 1.0; }
+    .message-list .meta:hover .status {
-  .message-detail .error.bubble,
+      opacity: 1.0; }
-  .message-list .error.bubble {
+    .message-detail .meta:hover .timestamp,
-    cursor: pointer;
+    .message-list .meta:hover .timestamp {
-    background: url("/images/error_red.png") no-repeat; }
+      text-decoration: underline; }
-  .message-detail .incoming .error.bubble,
+  .message-detail .status,
-  .message-list .incoming .error.bubble {
+  .message-list .status {
-    padding-right: 40px;
+    float: right;
-    background-position: calc(100% - 12px) 9px; }
+    width: 18px;
-  .message-detail .outgoing .error.bubble,
+    height: 1em; }
-  .message-list .outgoing .error.bubble {
+  .message-detail .sent .status,
-    padding-left: 40px;
+  .message-list .sent .status {
-    background-position: 12px 9px; }
+    display: inline-block;
+    background: url("/images/check-white.png"); }
+  .message-detail .delivered .status,
+  .message-list .delivered .status {
+    display: inline-block;
+    background: url("/images/double-check-white.png"); }
+  .message-detail .pending .status,
+  .message-list .pending .status {
+    display: inline-block;
+    background: none; }
+    .message-detail .pending .status:before,
+    .message-list .pending .status:before {
+      content: '...'; }
+  .message-detail .error .status,
+  .message-list .error .status {
+    position: relative;
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    opacity: 1 !important;
+    background: url("/images/error_red.png") no-repeat;
+    cursor: pointer; }
   .message-detail .incoming .avatar, .message-detail .incoming .bubble,
   .message-list .incoming .avatar,
   .message-list .incoming .bubble {