Use check/double check for sent/delivered

// FREEBIE

background.html

@@ -78,7 +78,8 @@
           <p class="content">{{ message }}</p>
           <div class='meta'>
             <span class='timestamp'>{{ timestamp }}</span>
-            <span class='checkmark hide'>✓</span>
+            <span class='checkmark hide'></span>
+            <span class='double-checkmark hide'></span>
           </div>
       </div>
   </script>

stylesheets/_conversation.scss

@@ -189,8 +189,20 @@
   margin-right: 3px;
 }
 
-.entry.delivered .checkmark {
-  display: inline;
+.entry.sent .checkmark {
+  display: inline-block;
+  width: 18px;
+  height: 1em;
+  background: url('/images/check-white.png');
+}
+.entry.delivered {
+  .checkmark { display: none; }
+  .double-checkmark {
+    display: inline-block;
+    background: url('/images/double-check-white.png');
+    width: 18px;
+    height: 1em;
+  }
 }
 
 .message-list {
@@ -255,11 +267,7 @@
     }
   }
 
-  .outgoing .bubble {
-    opacity: 0.7;
-  }
   .outgoing.sent .bubble {
-    opacity: 1.0;
   }
 
   .error.bubble {

stylesheets/manifest.css

@@ -673,8 +673,19 @@ input.search {
   font-size: smaller;
   margin-right: 3px; }
 
+.entry.sent .checkmark {
+  display: inline-block;
+  width: 18px;
+  height: 1em;
+  background: url("/images/check-white.png"); }
+
 .entry.delivered .checkmark {
-  display: inline; }
+  display: none; }
+.entry.delivered .double-checkmark {
+  display: inline-block;
+  background: url("/images/double-check-white.png");
+  width: 18px;
+  height: 1em; }
 
 .message-list {
   margin: 0;
@@ -723,12 +734,6 @@ input.search {
     .message-detail .bubble p,
     .message-list .bubble p {
       margin: 0; }
-  .message-detail .outgoing .bubble,
-  .message-list .outgoing .bubble {
-    opacity: 0.7; }
-  .message-detail .outgoing.sent .bubble,
-  .message-list .outgoing.sent .bubble {
-    opacity: 1.0; }
   .message-detail .error.bubble,
   .message-list .error.bubble {
     cursor: pointer;