From d3796aff35365bc0a4279553a184448c3f8e68d4 Mon Sep 17 00:00:00 2001
From: Aleh Zasypkin <azasypkin@mozilla.com>
Date: Mon, 18 Aug 2014 12:14:46 +0200
Subject: [PATCH] Bug 1041765 - [Messages] Thread view redesign. r=schung

---
 apps/sms/index.html                           |  23 +-
 apps/sms/js/thread_ui.js                      | 135 +++++-----
 apps/sms/locales/sms.en-US.properties         |   6 +
 apps/sms/style/attachment.css                 |  29 +-
 apps/sms/style/composer.css                   |   2 -
 apps/sms/style/images/icons/deliveredtick.png | Bin 365 -> 411 bytes
 .../style/images/icons/deliveredtick@1.5x.png | Bin 536 -> 575 bytes
 .../images/icons/deliveredtick@2.25x.png      | Bin 778 -> 778 bytes
 .../style/images/icons/deliveredtick@2x.png   | Bin 695 -> 695 bytes
 apps/sms/style/images/icons/exclamation.png   | Bin 318 -> 354 bytes
 .../style/images/icons/exclamation@1.5x.png   | Bin 445 -> 499 bytes
 .../style/images/icons/exclamation@2.25x.png  | Bin 667 -> 705 bytes
 .../sms/style/images/icons/exclamation@2x.png | Bin 546 -> 601 bytes
 apps/sms/style/images/icons/message_read.png  | Bin 336 -> 398 bytes
 .../style/images/icons/message_read@1.5x.png  | Bin 485 -> 560 bytes
 .../style/images/icons/message_read@2.25x.png | Bin 736 -> 793 bytes
 .../style/images/icons/message_read@2x.png    | Bin 621 -> 666 bytes
 apps/sms/style/message.css                    | 160 +++++------
 apps/sms/style/sms.css                        |  39 +--
 apps/sms/test/unit/mock_messages.js           |   1 +
 apps/sms/test/unit/thread_ui_test.js          | 248 ++++++++++--------
 21 files changed, 330 insertions(+), 313 deletions(-)

diff --git a/apps/sms/index.html b/apps/sms/index.html
index d9121a656acf..9c8229612a25 100644
--- a/apps/sms/index.html
+++ b/apps/sms/index.html
@@ -446,15 +446,11 @@ <h1 class="message-subject">
           ${subject}
         </h1>
         <div class="message-content">
-          <aside class="message-status">
-            <progress class="${progressIndicatorClassName}"></progress>
-          </aside>
-          <div class="message-body">
-            <p>${bodyHTML}</p>
-            <div class="message-details">
-              ${simInformationHTML}
-              <time data-time-update="true" data-time-only="true" data-time="${timestamp}"></time>
-            </div>
+          <p>${bodyHTML}</p>
+          <div class="message-details">
+            ${simInformationHTML}
+            <time data-time-update="true" data-time-only="true" data-time="${timestamp}"></time>
+            ${messageStatusHTML}
           </div>
         </div>
       </section>
@@ -470,6 +466,15 @@ <h1 class="message-subject">
       -->
     </div>
 
+    <div id="messages-message-status-tmpl" class="hide">
+      <!--
+      <div class="message-status" data-l10n-id="${statusL10nId}"
+           aria-label="Message status"
+           role="status">
+      </div>
+      -->
+    </div>
+
     <div id="messages-thread-tmpl" class="hide">
       <!--
       <label class="pack-checkbox negative">
diff --git a/apps/sms/js/thread_ui.js b/apps/sms/js/thread_ui.js
index 07d711a58cf8..5bf9e3813fe3 100755
--- a/apps/sms/js/thread_ui.js
+++ b/apps/sms/js/thread_ui.js
@@ -86,6 +86,7 @@ var ThreadUI = {
     var templateIds = [
       'message',
       'message-sim-information',
+      'message-status',
       'not-downloaded',
       'recipient',
       'date-group'
@@ -1532,18 +1533,12 @@ var ThreadUI = {
   },
 
   buildMessageDOM: function thui_buildMessageDOM(message, hidden) {
-    var bodyHTML = '';
-    var delivery = message.delivery;
+    var messageDOM = document.createElement('li'),
+        bodyHTML = '';
 
-    var isDelivered = this.shouldShowDeliveryStatus(message);
-    var isRead = this.shouldShowReadStatus(message);
-    var isNotDownloaded = delivery === 'not-downloaded';
-    var isIncoming = delivery === 'received' || isNotDownloaded;
-
-    var messageDOM = document.createElement('li');
-
-    var classNames = ['message', message.type, delivery];
-    var attachments = message.attachments;
+    var messageStatus = message.delivery,
+        isNotDownloaded = messageStatus === 'not-downloaded',
+        isIncoming = messageStatus === 'received' || isNotDownloaded;
 
     // If the MMS has invalid empty content(message without attachment and
     // subject) or contains only subject, we will display corresponding message
@@ -1552,17 +1547,20 @@ var ThreadUI = {
     // Returning attachments would be different based on gecko version:
     // null in b2g18 / empty array in master.
     var noAttachment = (message.type === 'mms' && !isNotDownloaded &&
-      (attachments === null || attachments.length === 0));
+      (message.attachments === null || message.attachments.length === 0));
     var invalidEmptyContent = (noAttachment && !message.subject);
 
-    classNames.push(isIncoming ? 'incoming' : 'outgoing');
-
-    if (isRead) {
-      classNames.push('read');
-    } else if (isDelivered) {
-      classNames.push('delivered');
+    if (this.shouldShowReadStatus(message)) {
+      messageStatus = 'read';
+    } else if (this.shouldShowDeliveryStatus(message)) {
+      messageStatus = 'delivered';
     }
 
+    var classNames = [
+      'message', message.type, messageStatus,
+      isIncoming ? 'incoming' : 'outgoing'
+    ];
+
     if (hidden) {
       classNames.push('hidden');
     }
@@ -1586,6 +1584,12 @@ var ThreadUI = {
       classNames.push('no-attachment');
     }
 
+    if (classNames.indexOf('error') >= 0) {
+      messageStatus = 'error';
+    } else if (classNames.indexOf('pending') >= 0) {
+      messageStatus = 'pending';
+    }
+
     messageDOM.className = classNames.join(' ');
     messageDOM.id = 'message-' + message.id;
     messageDOM.dataset.messageId = message.id;
@@ -1604,12 +1608,10 @@ var ThreadUI = {
       bodyHTML: bodyHTML,
       timestamp: String(message.timestamp),
       subject: String(message.subject),
-      // Incoming and outgoing messages are displayed using different
-      // backgrounds, therefore progress indicator should be styled differently.
-      progressIndicatorClassName: isIncoming ? 'light' : '',
-      simInformationHTML: simInformationHTML
+      simInformationHTML: simInformationHTML,
+      messageStatusHTML: this.getMessageStatusMarkup(messageStatus)
     }, {
-      safe: ['bodyHTML', 'simInformationHTML']
+      safe: ['bodyHTML', 'simInformationHTML', 'messageStatusHTML']
     });
 
     TimeHeaders.update(messageDOM.querySelector('time'));
@@ -1628,6 +1630,13 @@ var ThreadUI = {
     return messageDOM;
   },
 
+  getMessageStatusMarkup: function(status) {
+    return ['read', 'delivered', 'sending', 'error'].indexOf(status) >= 0 ?
+      this.tmpl.messageStatus.interpolate({
+        statusL10nId: 'message-delivery-status-' + status
+      }) : '';
+  },
+
   appendMessage: function thui_appendMessage(message, hidden) {
     var timestamp = +message.timestamp;
 
@@ -2218,16 +2227,7 @@ var ThreadUI = {
   },
 
   onMessageSent: function thui_onMessageSent(e) {
-    var message = e.message;
-    var messageDOM = document.getElementById('message-' + message.id);
-
-    if (!messageDOM) {
-      return;
-    }
-
-    // Update class names to reflect message state
-    messageDOM.classList.remove('sending');
-    messageDOM.classList.add('sent');
+    this.setMessageStatus(e.message.id, 'sent');
   },
 
   /**
@@ -2243,22 +2243,12 @@ var ThreadUI = {
 
   onMessageFailed: function thui_onMessageFailed(e) {
     var message = e.message;
-    var messageDOM = document.getElementById('message-' + message.id);
     var serviceId = Settings.getServiceIdByIccId(message.iccId);
+
     // When this is the first message in a thread, we haven't displayed
     // the new thread yet. The error flag will be shown when the thread
     // will be rendered. See Bug 874043
-    if (messageDOM) {
-
-      // Check if it was painted as 'error' before
-      if (messageDOM.classList.contains('error')) {
-        return;
-      }
-
-      // Update class names to reflect message state
-      messageDOM.classList.remove('sending');
-      messageDOM.classList.add('error');
-    }
+    this.setMessageStatus(message.id, 'error');
 
     if (this.showErrorInFailedEvent === 'NonActiveSimCardError') {
       this.showErrorInFailedEvent = '';
@@ -2267,8 +2257,7 @@ var ThreadUI = {
         {
           confirmHandler: function() {
             // Update messageDOM state to 'sending' while sim switching
-            messageDOM.classList.remove('error');
-            messageDOM.classList.add('sending');
+            this.setMessageStatus(message.id, 'sending');
 
             Settings.switchMmsSimHandler(serviceId).then(
               this.resendMessage.bind(this, message.id))
@@ -2289,13 +2278,7 @@ var ThreadUI = {
       return;
     }
 
-    var messageDOM = document.getElementById('message-' + message.id);
-
-    if (!messageDOM) {
-      return;
-    }
-    // Update class names to reflect message state
-    messageDOM.classList.add('delivered');
+    this.setMessageStatus(message.id, 'delivered');
   },
 
   onReadSuccess: function thui_onReadSuccess(e) {
@@ -2305,14 +2288,7 @@ var ThreadUI = {
       return;
     }
 
-    var messageDOM = document.getElementById('message-' + message.id);
-
-    if (!messageDOM) {
-      return;
-    }
-    // Update class names to reflect message state
-    messageDOM.classList.remove('delivered');
-    messageDOM.classList.add('read');
+    this.setMessageStatus(message.id, 'read');
   },
 
   // Some error return from sending error need some specific action instead of
@@ -2349,6 +2325,32 @@ var ThreadUI = {
     }
   },
 
+  setMessageStatus: function(id, status) {
+    var messageDOM = document.getElementById('message-' + id);
+
+    if (!messageDOM || messageDOM.classList.contains(status)) {
+      return;
+    }
+
+    var newStatusMarkup = this.getMessageStatusMarkup(status),
+        oldStatusNode = messageDOM.querySelector('.message-status');
+
+    messageDOM.classList.remove(
+      'sending', 'pending', 'sent', 'received', 'delivered', 'read', 'error'
+    );
+    messageDOM.classList.add(status);
+
+    if (oldStatusNode) {
+      oldStatusNode.remove();
+    }
+
+    if (newStatusMarkup) {
+      messageDOM.querySelector('.message-details').appendChild(
+        this._htmlStringToDomNode(newStatusMarkup)
+      );
+    }
+  },
+
   retrieveMMS: function thui_retrieveMMS(messageDOM) {
     // force a number
     var id = +messageDOM.dataset.messageId;
@@ -2358,8 +2360,7 @@ var ThreadUI = {
 
     var button = messageDOM.querySelector('button');
 
-    messageDOM.classList.add('pending');
-    messageDOM.classList.remove('error');
+    this.setMessageStatus(id, 'pending');
     button.setAttribute('data-l10n-id', 'downloading-attachment');
 
     request.onsuccess = (function retrieveMMSSuccess() {
@@ -2367,8 +2368,7 @@ var ThreadUI = {
     }).bind(this);
 
     request.onerror = (function retrieveMMSError() {
-      messageDOM.classList.remove('pending');
-      messageDOM.classList.add('error');
+      this.setMessageStatus(id, 'error');
       button.setAttribute('data-l10n-id', 'download-attachment');
 
       // Show NonActiveSimCard/Other error dialog while retrieving MMS
@@ -2398,8 +2398,7 @@ var ThreadUI = {
             // TODO move this before trying to call retrieveMMS in Bug 981077
             // Avoid user to click the download button while sim state is not
             // ready yet.
-            messageDOM.classList.add('pending');
-            messageDOM.classList.remove('error');
+            this.setMessageStatus(id, 'pending');
             button.setAttribute('data-l10n-id', 'downloading-attachment');
             Settings.switchMmsSimHandler(serviceId).then(
               this.retrieveMMS.bind(this, messageDOM))
diff --git a/apps/sms/locales/sms.en-US.properties b/apps/sms/locales/sms.en-US.properties
index 0948d2ec9551..62870dfe103d 100755
--- a/apps/sms/locales/sms.en-US.properties
+++ b/apps/sms/locales/sms.en-US.properties
@@ -273,3 +273,9 @@ contact-photo.ariaLabel = Contact photo
 unread-thread.ariaLabel = Unread
 has-draft.ariaLabel = Has draft
 is-draft.ariaLabel = Draft
+
+# Message statuses
+message-delivery-status-sending                      = Sending…
+message-delivery-status-delivered.ariaLabel          = Delivered
+message-delivery-status-read.ariaLabel               = Read
+message-delivery-status-error.ariaLabel              = Error
diff --git a/apps/sms/style/attachment.css b/apps/sms/style/attachment.css
index 4af784d368ee..d70553438388 100644
--- a/apps/sms/style/attachment.css
+++ b/apps/sms/style/attachment.css
@@ -120,6 +120,9 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+}
+
+.attachment-draft .file-name {
   color: #4a4a4a;
 }
 
@@ -144,10 +147,7 @@
   width: 100%;
   height: 100%;
 
-  background-image: url('images/attachments.png');
-  background-repeat: no-repeat;
-  background-position: left top;
-  background-size: 12rem;
+  background: url('images/attachments.png') no-repeat left top / 12rem;
 }
 
 .attachment-container .thumbnail,
@@ -168,35 +168,14 @@
   background-position: left -8rem;
 }
 
-.attachment-draft:hover .img-placeholder,
-.attachment-draft:active .img-placeholder,
-.attachment-container:hover .img-placeholder,
-.attachment-container:active .img-placeholder {
-  background-position: right -8rem;
-}
-
 .audio-placeholder {
   background-position: left -16rem;
 }
 
-.attachment-draft:hover .audio-placeholder,
-.attachment-draft:active .audio-placeholder,
-.attachment-container:hover .audio-placeholder,
-.attachment-container:active .audio-placeholder {
-  background-position: right -16rem;
-}
-
 .video-placeholder {
   background-position: left -24rem;
 }
 
-.attachment-draft:hover .video-placeholder,
-.attachment-draft:active .video-placeholder,
-.attachment-container:hover .video-placeholder,
-.attachment-container:active .video-placeholder  {
-  background-position: right -24rem;
-}
-
 .attachment.corrupted .thumbnail-placeholder:after {
   display: block;
 
diff --git a/apps/sms/style/composer.css b/apps/sms/style/composer.css
index c70454aa4970..ded2c27aa906 100644
--- a/apps/sms/style/composer.css
+++ b/apps/sms/style/composer.css
@@ -1,9 +1,7 @@
 
 #composer-container {
   position: relative;
-}
 
-.new #composer-container {
   background: #e1f0ec;
 }
 
diff --git a/apps/sms/style/images/icons/deliveredtick.png b/apps/sms/style/images/icons/deliveredtick.png
index 5475fc2478d5b48a0626e66f763275701f143e00..225d3827c2f3d45cd9eb81c916f406265d69e3ef 100644
GIT binary patch
literal 411
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbMfq5z)|SB6~^DMyUECNl4y#JYPj
z*WRh32WCkhoU49xk;c(Q2FI6~o><{@X06}(%@LQj$6nr9e(Om4{nI@U&Q5%IVdmq@
zbDmsT_Wb7I_fJoJcz)s2>&M?ezx(y$<L{qe|NQ>>_s`#d|Nj5~&;3VE1L#_@k|4ie
z1_2RKE$yJ-kkG=SvhwLO=FWTY@X@amcUiv!RZQ}9aSV}=WIf0jbjUz};lN&RE+ysA
zfB)S#EK=U+d52fP`|9l$2TOV8&9+vKdqWQFd)rmBzM<!-<>jReuU4(g(rfs^k@d`w
z;q_~UzDUODU%&TFV!kf^eCyq^Ggc9P?YVQmv+eB(=E;A)=kI|(=Qe)+`r#)-HGie=
zQai`}y-ELMi^?u+UuO`d*?4o?T!uo8s@Wg-`=xE7&lO160bR%7>FVdQ&MBb@0F@TP
ALjV8(

literal 365
zcmV-z0h0cSP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I0003rNkl<ZcmZP=
zSzr{5f>EG!%8dz#BY}7m5WfQA|4@1pRGf(xmMQ`98IWbTFjQWN+Lpcq8BPd8)hSUc
zcuy0uQ2%V;f13+2U^Y}e6QveM5wcYEw8#G=AJ6>{yH<oO9!06e+X-2`<mKl7AP{=3
z5LtXXr53-&XKDMRSzt?#eLN5JxhJyRGYTz6SfX;u{lEL=R5(BFR{j4!|Nj2J_x&*_
zj?o?UlWIQheKP<5%U^H*o1PE*?|(Jt|F^$C{=fbG;lJa>1Z<)4j9PIFN<2Ux{`r6L
z%gz5Ue!l+y>)-GH(KpI)MZ<Qgrt0p;^Zvs?`Mq9zi7tw&`B)hk&vTxy`QPwxDjrJ_
z`Iu76l}RkQl&M*4Dic{&E7Q7mdJ4)ipwtWHM}dQv-e44rf>8hf1bV^>Sk#3600000
LNkvXXu0mjf$r`Hd

diff --git a/apps/sms/style/images/icons/deliveredtick@1.5x.png b/apps/sms/style/images/icons/deliveredtick@1.5x.png
index 5b381cd6122f456ea5ce53bb7d195d00c42f0a37..fa1b51e409bc26a2599544f89e20801f55fe39ee 100644
GIT binary patch
literal 575
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM3?#3wJbMaA-3#yuab?&wkw%Dd*F@&sleqRy
z<=#7uf8TV${WFC3&y+YYTk7B(nL~4B56x3Lyg>Wd65V4<%ulYgIJwg1)M~raYdp_w
z@IJRO`tpv<Yx_!X9WJ|dr0Vvurn@KG@1LIZ=)$zemzF=jx$)KAt*`H&`0)JF=Qj_&
ze|q%&)8p@-U;X^{;rGw)fB*dY_xI1gfB*i20MD<)4xmqEOM?7@85o(BlvNB2jVvs!
zynTE_!(tQGt~+)5%*Rh(fBZYS;K+2K!q1*Ajv*3~u?IVynjAz}FIX$9b$MwiGKFuh
zy&tZ9cFmi=|M^X&F1)bR$XFg#YI1EwmHHyV(pOw!<=w3pTo+EgFloz#kHPCaYISmt
zY~ekzgUPvdi>%!Q9?=H2+`}h3+?X94PCp2BGhuRY-(u5kbFst3Ys;N3pRyeRO~>o6
z7tfR}JlTA_^>p>5<?}z49<!J8GU-eI%q>@Q;ykZ0Ux`c6_t<6X$rIhvlz3T8&h0;1
z@zPkBA*1M_pUbh^XG|GaOmO?}yX^OwQqdkSpX7?I$79|ko%G+Sbk}9sT%gMW3wG<2
r#72ZDzqt5<)wk7jSIp|ErbYV`?wab}``TLt^ge^9tDnm{r-UW|_`MZ8

literal 536
zcmV+z0_XjSP)<h;3K|Lk000e1NJLTq001oj001or1^@s6IvV1d0005sNkl<ZcmZP=
zYG4$Mf>AIEM!_f;1*1Uelp6~W`vUQ7AifC1AA$Hkh=%fKL*-cpgJT(iI2?#?fE`H~
z-+-!T94H6#1MwD+V@SnNeFF4$urLr`06BnM4An18F9$ON@jh}Lt9;5GnSTIe9z7gg
zNUnp^Zq@$}zLt+JUQBBT^8oQ%avU6VHShnozd!zmT`NMDdj~R?mX3}j$H9&l6aK&b
z{oy|lz#NT^BWdaA)ucMu<Xq_g2S1+vhXLO!S=iLArlq4FlHy?fvw{Dwe!UHM@bqUZ
zaH)MrOGp18*1_thz5XBjcpmQH4R7`$N)Al?la`MDgl?hs8Q=fwUhn>|d)6PhSOYr}
z3P6qrc>*d=e@9<Ow{Z9SV_=7EeR~il22KVraO2xOP%?qZ4M_4>k8a_NXDi_j?0qu-
zf7_#(aQ^e3um4+Jh$1FAZJ?#2Q_w9`J?-)T_{R(X(ZQ!bU;cYuPA4|grqI1|F+Cp!
z4pkWV_3!up=o@AD9g11G(7zfFxmEyn?4N&s{ukVBC#5VerdNaM05%60p9=+5CWIV`
z(O?>CO;Ztix2Xkycq=&$hUya>=<e1{A{~1Z*4-L>9a}`r`3a+AJCeaD7zLwX6pVsV
aFbV+cSmb8AOeE6)0000<MNUMnLSTXhAM2z5

diff --git a/apps/sms/style/images/icons/deliveredtick@2.25x.png b/apps/sms/style/images/icons/deliveredtick@2.25x.png
index b929fb79f60699a18e911c179a04e37668c85c2f..e6eef3c901cc707c4f6a16650ad249efd027b689 100644
GIT binary patch
literal 778
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k3?#4J%UH$0z$g{q6XMFSYvMp5#$6MccTZy5
zGlgsKRM7*oBoEG!IW$-9&^+~{i!_cd(mu9C=hzb6V@nK=FEcu^+~v$Vx3lX#&TjBJ
zx6$wX=70-ZqA%}AzPcyv+TP4-`*N=zsJL~s?cVA3`=>kZpPBgZ!rUiU7d^Ya=H=}T
zukLPqb@$M_r-$D^J@MiBsgEx%eSUNG%iG&u-#`BT`OUBIAAbM*{O8x#Kfize{qyJF
zzrX+f{re9B*G0H?0s~8<B*-tAft8m}PF}&>!rs9tBrH54vc93Of5NKOCr_QZdHde|
z2M=Gqdi~?)uRnsG`OAPITkh%N7*fGF_44nq%MJp^KXNX-P!!k^$;2C=sq*K5#y!#Z
z9ToedH+nt)8-KXdbMoCc-(-IO{9S!c#X3DB>t51^ZF0w7XCGYTp0_!ReX6Xf_qLe^
zjf%YKD-!Ftr>!-Uoc8U(hV3r1rq)`#U7xX8$Y;Wt;FI^;yxBIs4SvWKGjETBp3eQ_
zmT&%jSR!#_(VV8k7aO`cx>~Nc>;69Wc*T3qD~)eID2EGL39UW!&2832L$1|At{diT
zuyEF#w4!_2@%kl|^$kJcizIlzpIiEKR-(?e#n;Uz?lzo|R?uQ~>Db&)&z%`=if6X*
z2fV%}|L;Z9Ptk%2|Np$uGzt96vc1kQ-sXs8ckm0Qw}$f#KcDB<xp(lw#p|D@anE1p
zc>Vhq*7W<9-yd7?bQP^-X|;CFJoo<4gl#Y83oLzpW`BPo*UAUqSGDfh!yA15f4}nu
zzxSV(Oy1=(EA@M!-sFXMo1bRQmilARsu*f_^Vt<Wt=(CDclNX@+`4h+PDc}K|FW;*
ZZ*R>zy;@9cGcej1JYD@<);T3K0RUs=nJ54N

literal 778
zcmV+l1NHogP)<h;3K|Lk000e1NJLTq002Y)002Y?1^@s6I1`hy0008fNkl<ZcmeI2
z&1=(O9LM)pY<k>=Cl7)L6<K%mMHHNhy5eE;;1Hdn;6>d$$nZr$5J5y|>p}3MpzS=U
z2N|faRyT0ne9<DS(`mYH>*i>hv|oP@q>$B`c1>EIl;3B3V5A9z4@sV<d0NLX48t%C
z!!QiPFbu;mRi$ZYQ$5*1`p6KekgB0#Z1WlWtf=J>9x^~`BuZ2_j`7q|h$b>f!lps8
z$?Y-P$vF}ZIY)Zk8l#s)h3s`(jMF44>{&P6Ca99_vd3s7lO&vW&D*v@+mmFY%t3;c
zh;iuCIb4{y{om0?))+07h_QY2Fcvc@T#ofy?dOp($P=eyY#j08r>cM`7UZ#v({ato
z7^}lOF#abBqLd&SSuazN4ku%*3T?sjnb#mn4I=E2DTvR>Aik+b$mhuC^Tm$y%M>K!
zRE(Z)*O5>E)WcGa4apQlaUw?N$1~8g8JKx7^G4i4r5qoZDM-q0jIHmxkkl7o=EGvt
zJRvKlDpL^E>SUXTHbY$Y>xTCg{Cqua7sIQWX>ArQBL~Fit_%{lI@y~)9zZZS8y0c?
z8D57M#$hIvQL!s>Y`Iri+!YVi?k|1F(qE2Cu{%qyoM(wwFeCOo@%3Ukw_RAKAbt{s
zY>RXwoz;*-qyKl09ba<gn7J`|zuf1L-!&7nzKL5f^E;iu)5IY12~NMv-BRV)DN~RJ
zQnPxfis91=@f@M&Nx3mJvO%`*GXblUUi)qjCe>dkgcxBq4DYuyYzJgrW`LD@$4)}e
z>M$d|+HV`}vOB5sxb_9nmDpVvP@If-`C~W6fb459$zqeVQ_-uq_Wd4qMvmHzk(7R|
zMy#8VsFGf{ym{{-VaRJUyijF*`^-BSVxIK6eSNptq2-AIvbmOi1<*<cNPQU*GR85j
zwf=*dPSQ_?Nrg-sD#kWHd5~OL$1n`TFbu;m48t%C!!Xt4FI5Yw>hxo&@Bjb+07*qo
IM6N<$g4iK)vj6}9

diff --git a/apps/sms/style/images/icons/deliveredtick@2x.png b/apps/sms/style/images/icons/deliveredtick@2x.png
index 665401693a095437227e83bedbec27d5ff3f214a..90145fba598c914ad182b41ab44510450f17c44a 100644
GIT binary patch
literal 695
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabRA=0U}OsL32|lEHIY7uao0rV-IG{%
zPiEUQg>%nTuDw(F_D$#CH(hZ54B`DVWe&}iKQvF}$U^gzD=kj0v^urQ`qV0?Giw7b
zYze-wHT2@Pu#4NGFYk!IvMcS{-lCg_N^c#mxOKGt&WYX!=O#V6F#YkRnU62ed2(gR
zvl|;<-QD@-;oi58kAHZ6_T$S-pWod0^6vK6_pg3_d-v<dhu=TH{`vjw@9&>~|NQ$8
z0!Orz7XkxCsU*lRn1Pv<jh#cl+sD^0Jfgm#apI)OQ>Lvwa`f2o7cXDEe)Hq!FH7rN
z7lC2t<muuVQo%TN^7Eii0Rj%1_r(_<xxiYa-zqA~-LyAZuzOKL;{E@jcXk*)DKZwe
zt>0w){7g#Orp~{OEi*N(zwQb?H=|P^_l8i-s%?g^b=gH^yf1!a$`E<P7~dk$by<mh
z;gk9ru9900OKwQ_y(>T0D6r@BqIbI&+wHiq&fnu~{vHK(BhQ0#o`uU_<UX)OVKpnW
z%bo{@?guZec|W=S?vtG^jVx0Sb3WR^-LquD!e95SA3e9LFj?kUy@Aaoy`>{vfaizk
z>GF!ldKN16ta5+4gm%bGv}n7=Z2K<yLGY*RF_lg=xA&^r$D}`BZ+ZUlH;Mg{r3wd_
zSpToGk@uPK;{|K&*ZQ6fjXTxsEgKcg>hm7fHl-i&KI-jkJ7eu-+kg-J=JJI_6Wyh2
zzqP1_=<2+^?tOjPu4!gY_4jgIO=d5eWIB1{{m-md?Q@k3a*`r|Vb9>{>gTe~DWM4f
DPJ>nO

literal 695
zcmeAS@N?(olHy`uVBq!ia0vp^HXzKw3=&b&bO2I+0(?ST|NsB5bjpoJ2x7SUX|I3(
z{{>ym>v}v_^|Z&0Z}%K8CTO4W{r2~V{@K8{zds!Nc)tD7>{YLKtbDay>x{3>g_x@Q
z{lVArH@?}o^yQY;M>A(VUmbm;EcZ^!gC9?id_1@N{jr=oEua2;3At9V{MA<7v;M#S
z{kFRp`{DQJH^1InU5L8-{ju^X_l(<(3twy~xZ8f^>+Sw03ysc&l-%nMy;higyZPMb
zYwv%5I`%g2E-)PAOM?7@85jg!F~9U_h?w-^=d`uqlcyYIWqUJ`<F((hAC13`AGz@9
z$t4B`MsH6S$B+ufw^y(B9SRU>O<d+z`28lg__4cpWAFWseHOrxxm+dvd(-Z^@Aa3K
zSZ2FBofhR<>tXPCP2h?fS69VqO5AMNn6zq!_Drt{H#R*?jD8c*eOP_n$0XfGRv{^E
zzr=+m>VAjv85A}9MP==FvkR2CO3nW8vfp}!L29Aj*R6})XC2G(6O!JyZKvC2i8htK
zUypc|qS}>JJHtQvyKhlfwlJC$(R#hS`^ENt%}}A^4=&0H-IYmHJJ!uUJ6d4dahEO3
zd25m$W%hq#?5SF0+j8Ld8y>ZDt|dM1GzI6D8ct9AyXqPL#iLKBW>jA<*iaWL*>~Hz
z=#Kq?r8=G6l@{}&Rd{X}Xo~LSf9$$tZTOCvZ`5zrC|9-5UiIPlgU6q_<;2q4F8z^w
z#Q)&a^6(8M6)(aT6bGM9){75jlHZl#y#D%Ew<{+K`RBT%taMs<L0(HQCT-=m*T9fx
OVDNPHb6Mw<&;$SmTv@CD

diff --git a/apps/sms/style/images/icons/exclamation.png b/apps/sms/style/images/icons/exclamation.png
index 9748d7ffe0105bb455aae2693c70ba45d6e160de..a3320b50ac807cf8abebfbecdd856960476217b3 100644
GIT binary patch
literal 354
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbK}b%0NZ>mwH{%F&ZRk7tPyuN$l0
zG}XNAZGYF_`F`5O_tPi-xP0-)m5V=b-S~Cy&hICW{=9tg=he$U@816X^7;S2e-SZT
zje*V(D+%%oW)Kh&)zS_M4hbzRDl4BpWA3~M4<G$HahLTwP(_2Mi(`m{B<sOQKW9T8
zh69Cf@|e8d*L#J0bi6!$#!QAnt!y)vPmhIO{M^m)Dz4#irN`sI9nX^H#M#~v&NE+;
zZ|av|z9Mis!*0hIH^#dT*VxLKW2JvEulblYf%TW|H^z@&B@5P=tZ%e5zvjQZZa(|o
pjq|)WrKc@;{#n6c&gEIW|07B*?Y1UfTn}^$gQu&X%Q~loCIGDup=|&F

literal 318
zcmV-E0m1%>P)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00036Nkl<ZcmZP=
zFfa;6!6?|l!Xf~~K|ovx#lavkT3RRy#M6QJ7ZCqP#!#^tAT`vsR11h7fGoj>p=z|K
zWvK`dKSa0WdU5gp>qSMlEEl1M#dERw?)Qfe|9`%Cfy?LfsNvgR*bM*v=+Xc04<CZr
zIO1G{5{pA|#pl=CxBq{-d>LPShf-p3ISxa?mVP{Y7N5mslvrGZ%i#A%kN$sm<On{C
zi)a$mhqbgo7@x%<G)Y`n($fB4$;iN$xI`&U+4Im1-YX{d|Np;#APi#T%}$j1`VqR}
z=flGOUx<jnX6ZvjR-)W;Z7ii1E=#p(QAx}oR7udfS`5ah76%H9f>AIE001Xw)ZE3e
QI{*Lx07*qoM6N<$f>!;HEdT%j

diff --git a/apps/sms/style/images/icons/exclamation@1.5x.png b/apps/sms/style/images/icons/exclamation@1.5x.png
index 2a0fb0382f531d885e932f55724bef8cb591b4b1..2268496e896f0c3ffb7899b40ff4f3b5242d0943 100644
GIT binary patch
literal 499
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM3?#3wJbMaAtqAZ5aed@s_5c5WAV~}KG|cyD
zxZl$V|7VF2&r@Sx<fObT$aq<p`LZbcRY~sa>XO$rrEi+5-!#{}X{mkN(e!R&_xl->
z-p`uyW!vU2JGXt^v*Y{OQ$KIr0J@O-b_mGLawS22!3+$H%u32C28Ko!mR8<AzM)~U
z32WD#I(_Ejr>{T$dCFXK2dcc|>Eak7A<261cF=7D5rzY{?w4+8o}2LLzx)YqUgxL|
z{Y|^18NAGX-((hW*ypo0@&5ICW|kc>=?t&03p3rTQ)M{!-kK}Vo5^8Igr?7Smh1Pu
za|B9X2i@ZeFxC!;bB<Cwkif9abrypkUxVi~t_zY3rp8hSJlQiQ8aJHdOz>l1V{Z7x
zQotvBAnN!%hQG26f6vr0%t&WA9+@kC;C9MyhMY^utSX#0<hm|CXE}fRhq1$d8<xE5
z3=EIotFxXDV`g}MUY51)TNp#mcXpNur>|)B)mHNeFnDEtyT|-NzUyF+SMo=;8lXQJ
NJYD@<);T3K0RYpE*xCR9

literal 445
zcmV;u0Yd(XP)<h;3K|Lk000e1NJLTq001oj001or1^@s6IvV1d0004mNkl<ZcmeI0
zyKBNw6o(u1&kzN5a<Wcs7DaIKfr}Ldsk^J-e<KL4&D=q-P)hL;DuqHj7q>1E1Sd~_
zgj^`4Hm8qxGn@~;Da$w9$GJHX1VIo4;lH_#Mk6o<&pcBw62?#imf;n2AbryDzLlX7
zhTt5WLt?ssIi0~BxP$aVcd(-)xB>T&e(4@Ijv1VV+e1MQ%_hA~Ca!k9{$2PMo*rw{
zEg&88sn;XLW4Fs$<3`ZY6`u$<RIzHeIZLGybhPCcv1+wQVb^M$Xe;Q8!|@4lLlyH<
zi4*O>NKny9NPf<XMN-W2dG2YF3@X~>1l*e@DekgaZnUX0+6`6QW->aX`OD)bks!ym
zU8k`aH#((ZBQj)dL=8uta#kp~GNY}a&*`dP#B;w-ikHEF6J6DQjlT|uq*#wee!)v<
zXdjrS@i?u=V^?g-00t(#qv?f?nfme%kASZ3=hhMu(<RJ><zZWa7TkOhy79hMp%K<!
n2x)lknf`Eb2!bF8f*`yDYDpevkX<XS00000NkvXXu0mjfi1fmg

diff --git a/apps/sms/style/images/icons/exclamation@2.25x.png b/apps/sms/style/images/icons/exclamation@2.25x.png
index cba0130d6be6383e1f98ecdd00201a4c59c3fb69..c160915269b1e2d00304bb1db98f7ddcc4faf94f 100644
GIT binary patch
literal 705
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k3?#4J%UA`Z-Uj%DxIS{R`v3nwkQ^A~Zu{87
z?y-mcV=sp%ey&ga-JS$`JPG!C8X533D)3os$g{Z6=P5C7d)wajw!fb`;r+CUALdN|
zuweGry*t0|+x_+6-ft(4em`^S`?=FUE?@k0_x7(x4}L#-_~+$|zaKyR{ru_g=g<GX
ze*O33$Nzu-fZp^l^%DbnT(cy|FPMRWm6uOWUcubL-oYs(EIcBzzM-#w!m8CLPo24W
z``-Nr4`04|{p07aKL^wjW-~A_MtQn8hEy=NPN@w3Wgy`2b83;i{X#Pljdqzv4XvgX
z8eLpni{5<yZ?Udj<@L71zxDI)@knl)eM0Y_qDw^N@{n(Ti%y=5QVjIja%I}I4px`I
za4o0vz5jYAl^$KOJY&l1RSdf<jkUgnD*SEgoAk@7x%f#z^^}wMPvou86>sSIvNQ3&
z%Wp4ZwkKBv-j$0?ZnI{7aznuApD1T)0aJ&O;QWbK)%a$cE8P-v%XF<^uUM$o8#r;5
z>4C0UN^WwY+70SiHa)9CY?*adu1tCoyp<&);PK}S#t$bJYlZSNeE;*@W>wy^&zk!y
z0^c5ZSg)pj_PEikxc;9JFB;U>GrZ=ME>O|qHDyjo)AN;4K4N-DRU!P(;_e&1Z~OAh
zXYX#bGtb?}aiU;_iP6&VEd89N|7M?_$sc#lCiZj4WOMeCvx2wZUR<L7reV3dqLtOl
s4woCs(+c-^tquD)ho|<)p^F#UADPW)6kMuY28<d8Pgg&ebxsLQ0D?GJ2LJ#7

literal 667
zcmV;M0%ZM(P)<h;3K|Lk000e1NJLTq002Y)002Y?1^@s6I1`hy0007FNkl<ZcmeI2
zze*!f6vnqOprR=h1RE0tZ7od~*=G=UeE{vXw3&H=oxFqyJGHR>$&y{tC{`lqAgF0v
zj3Gi0*Tmr2Z^9keooeQc$=<n~AN-n&Q=AX)_1ts)AP9mW2!bF8f*=TjAP58H+t5%3
zeuOss3Xh?uJXUMA`k9Q$LCnAsyoVIgd-ctXNkNQ52eu(G?LY^Pr#*}%cn#^DyoQCe
zhOq))Aic9Ma3yVFtidj%KG}t9so5q`&x?c6QTj1I|Bw5_!%;(N!zJCr$if>)QLHX5
zQkcr@Y@FYe8<^EOkS~y;TA7=pFh`S<akr17ZJ!bMPwV&TX$o^NHWoLKHq7Z5NC{FL
zk0vH44Awc8bZp1#oMQgwwbkMVQimCx0x3e`*nNJcfKH>K)>#&H3dG_T^7{Bl0l#at
zB!O5u1>$lG@k0oBy1Yyhh^tc|r`$rGJdXleXJ<(QIn^l;k6VZzLO`=xO%jM_L?C_$
z0gZCmltB1frg3;k0rkB-Q??BMQ1!OA>6h#Fyx80{=1{dD{bz0c8?(V$G@^B{<nz6)
za<R4L-+oPK-T9Zhp9>4rX*Maq?^>~z{>z;TBp3Jke`Q$|25X#&d`{Pyh!dxn^YwKK
zbH1^`9}sCeLcEPy%>Kv--R<lUy}k9k+uil&tZ~A)g;`^U%z@>pDPPW{tdN$;`{w~X
zLwrix+stYoAF5W<`g&IgpD78g@wbUy2dx7;2_L&lj005bVDhS{hZsRTsBiM7|HI5O
zw4n=6;Fa=3t=VvS;O)2|2!bF8f*=TjAP9mW`~f2J+hr1pVgmpG002ovPDHLkV1h#R
BIDr5F

diff --git a/apps/sms/style/images/icons/exclamation@2x.png b/apps/sms/style/images/icons/exclamation@2x.png
index c8bf3ad33568bef47e5d2a81c84c424abe4c6bf7..57e06026e46560ef6953994c26f2377bceb96d65 100644
GIT binary patch
literal 601
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dy=L38~Tpzhu(FZ*V^mr2F`7AE%
zc}mRl)Y#|g@h`HI-}QICo7DS$`oxcm=Y3qh=+o+DpEs`gylLH+ZJWMq+x&I!&Tq#K
ze>;BU`>EsK&z$^m`Qp!8H-6o{{p<eSUymOAdHLec`*(jofBOIT@Be>5^zZ-w|LqAk
zrGZ{kDhcunW?*JzW9Ja?_VM)#kEm~GoH%Lnlxb^^96fgY#miT(-~9Ob%hLMRMFs{&
zaZeY=kcwMVC%+6jWFXQSxg~66>!yf|plKS5R&;c6>va^}`#<x{0yFj8xqbKdZ$4vU
zzE|^abJy(`Zq1HYa(7IfbK~PuuZ~*vxz!Ulb=YX@Z4YfLoB65l)WT#b->KfO&DTrj
z^RDSx^>@zvbK9BXdWG(9meD#a{lVwb{d@f?&sifTO$m*?5qw0bBIWHXrvt}?3(oIa
z$?cwF!@zxQp`M4C*a6w>mE6u|d5zN74woeIow>w%@)*w!uX?4F$2C^A$+Dkj@bvFo
zKjX2mx7>?Eem=*(K2P&Ax~H32lRU@Ccw^nPV}hNA{}{}YjhiP&&glO7duiawN8A2I
z>^!toH>UcSaGB1YGnZF?_r0^;dS}1+i_VK4UzoOgl?leDNF|>=Vd%647@!QEu6{1-
HoD!M<oOUr3

literal 546
zcmV+-0^R+IP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk0005$Nkl<Zc-rlm
zJ!`^17{>))=1lb?I4ZdKA?$2Ef{T-1AjQc=@P*)_qnnE^BDfS&H$jlrp|n_`m?%PD
zpj9+ak8szalTT2SE6)%9OUS|V<Bq$_lK?>w1VIo4K@bE%T!3CE6lO`Ylv(armMq^q
zOa83P-wDess<3D*77HAi6(6I>Cadz<12^GgRT)HsEIJFEC^}2f&$4Y6IC0us+IPZL
zgakG<zsY8fEq=GzfZ%IB$4F=Vv>Tg87VSt1KBiNQu*stML0H2q&(GNm1aIRpc4=!~
z%SMprEWA%9AlM9tSYeAL;-zpJS+FB1SoL~tHn6mp!WC@6>wX^uW~bvuxay_w5L>X-
z?SkO7)p8?jcqwcli*+Ogi)Pb}u;r!j7F+P5(E!0qz3xVME0yqE*Fo@9EJ`MfU($}G
z;IUAUZb=*1f=8(oOtV=hMlvbarX`N03#Tg0#Y1Fpbp?ZH)UEKf*H_Cmrr_sN3GBlG
zz_y(YOronL{^Ma7kHcS#L;@qMN%eVn8;gOx-@`Aq?L0%wt|DCn;69ggngCnVgok_{
zGrOwax*oN2ws@$CM{Qc~8}X)FQ9f3c@mI?Y@|<4tG0K1VnO0#L@!8w)nEY9VzY_@%
k1VIo4K@bE%5XAZU0p@&d=|^mb+W-In07*qoM6N<$f<IjNkN^Mx

diff --git a/apps/sms/style/images/icons/message_read.png b/apps/sms/style/images/icons/message_read.png
index 0f064541ba018622d4863565fda3603fa65974d5..c7443af0b38611e7dd3d731a84f233bd28b41a83 100644
GIT binary patch
literal 398
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbK}dw@@f>;M1%8Fo#i5V7o@EOThC
z?4fz`hvq39p09Lxf%4%6y2qB3+&o-*>+s}97p6SAIP>x4Sx+u6d3Iyz^Bb>!eS81=
z$A{lPfBpOW``=%n8;+Fj*$Z@%SV@pyFoS@IsFrq6a7bujQCa!)8FS}7c=+hoiMy=d
zfhrbwx;TbZ+zRb~E!Jef(|nvkFhKAbQ^mtYO?<!polj>!VOjHk);ez`wK=gOtbIQo
z&ohyjyW{hl)QA%{*50fN`dxRlCbb#|l(wBH5uNafxwlH;bB(lAR)(h2l|6fzxAO-!
z2gs~v4&+{@DkaA*nBO|XUux0&s!j9lWKV9<cTQ$LdoyU;+qJp&x49}e9z1o4EjY+v
n-=U^Y(~C}SlX=XN{a1dekchwm>FN%kTNylE{an^LB{Ts5r<$`3

literal 336
zcmV-W0k8gvP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I0003ONkl<ZcmZP=
zSzr{5f>B_(Y#9>}M*{ICAbthJ|Dp6Is5lcXEL8&HGa$=wVW_+kwJm)KGMo^Gs#Bs?
z@ScVlY`0>?|H{LM|F5`l<NuEP_dzs>4;F{1fvRVs)Z!?Zfi*{t{D1ZB+kY$oBo2~C
zwmgbbi?@RensezA+>#exzy8nPx9`8xs#PEw%!h$_moLLC-cG5-ugeY{Lh)T5&@$wB
z&EB&IMINXgB>s$2i~pZ^_6*rvuunna$nlO0&b)X568||QeT<0X%a>8&I1duXVEXx&
zFL1f}SFXV0m@cXMHI`IOvwXbk!2=rQV}#|(B$iyt)GRiYi7cy?X<a)#1!Wmf>V@*7
iz`;vzFbYP&C;$Kh95bAfx0Qte0000<MNUMnLSTXb%ajfP

diff --git a/apps/sms/style/images/icons/message_read@1.5x.png b/apps/sms/style/images/icons/message_read@1.5x.png
index 4e96dcf9bad7e1a55d8dce4e95a3b61fde509331..91dd4dcec30ed268663fbe7d95ba490af216494e 100644
GIT binary patch
literal 560
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM3?#3wJbMaA9SHCVab?&w@&Et-K$1p?ao0qi
zz0)KP%$7VjNBZDgnL~3`jx1C?vQX{FLY-qvj7}^!KC#^7#B$fO>)p<-_dCDY|NQ1D
zk1kGqbaC3_OVb};n(_GZzPFF}zk7V^>-*bZ-{1fC@$vW1KmY#u_3!WBfB%3km-)0=
z1n3v}k|4ie1_nlEC1n)@Ln8}ID{mj)(6HF}gthBVoj&vN)7KyWHeX_A1u9|iba4!+
zxK%poW!NDHp4Q`%UDKAjPVqWj)V-josa5OurSJ9HlQ-%H_y4WCd(u|@q>A7pHP^_k
zvzBg}?!kNW4U0mPU+}E9zb$jt)tcU7mf*QH^P<$E0~@|(-}$z%vhKfx^X2`?&SjD3
z!`fRc)}-y~Q#q_?7!^Nh%IPYW1B!>4<H|)W>-DF{rwi>iKOpSHIzz^CAHznAi8g)$
z8i9^G9*P*67{2!H=*m#=n!(}o>xawYD-S|$?_ar1am}6|CpG>ZI=b`j%XzoE7Hd2!
z`yPCEUBUm~3!;sL;%7O_oPYjP!24L;eBD<IcdT$v-fCA=v%7$&?>h6v&oQ4ROjbp$
e4`2WMGxNlCj;Sm6AG`<*HU>{uKbLh*2~7Y777u3t

literal 485
zcmV<B0UG{^P)<h;3K|Lk000e1NJLTq001oj001or1^@s6IvV1d00053Nkl<ZcmeH~
zPix{p7{<lJey6>!3(LA+U_Zegw)A_nchlCMJybo41se|@6`CGuKx_~GDO3<*5vc{?
z>HEM4I>ZpHNfhS?KSE~Sk%vLvnWPK`gTY`h95vqyg|zrX%!!WZiBM06<7z&=FM+dS
zTSN$1mrXM4H}OKm7G83F5`n8CzF;-Z;0%2wVh85q3jEtIz^`%{XU!(=dOftqW4uhK
z;M10Oj&puP@N67i;!(uXOtFZYP6r>01p?qa>sYUcb|dX7s%>HEzgi8ivl(=rJP(b*
zfKO<!p6m4BnJ7c&M9|ZE9q-!idh<C>Y<n#b-#NYl*Kz%7T`tPd4<i0nDtcgo|0=L9
z$91@#zoTlLC_{T9?nfi&bUiPyQ#?;5(Bbc>`AKx4RhRIiF&qYl=DZ)vu5vIt?QGs@
z^PjdN>K@kK^yzN+KK(Q56VY8e5lbZ$L!OANV|`2~qJDq&zk8gwTCladN4?+Yc+lPB
zPh6L#yoeomeQ5XT+oV1O^4sn(*C+jr=!OjIvVNbw#xtU&4xl#?>dALY&8JhxjKN?q
b7z~C_A!ZN~td0?i00000NkvXXu0mjfzZl^b

diff --git a/apps/sms/style/images/icons/message_read@2.25x.png b/apps/sms/style/images/icons/message_read@2.25x.png
index bd71d50b12883fcbec701dc612a0510291a9927c..cab8a3333f24478638a1f1f32636dfcdac87efa9 100644
GIT binary patch
literal 793
zcmeAS@N?(olHy`uVBq!ia0vp^Dj>|k3?#4J%UA`Z{s;JkxH9aT`2YWZAW0v@xN9QQ
z?nyj*r}6KbF0gNg;Qkpx`)3O8pDB58j`YE~%7+)I99d|4dbQo@HJ;}-c%9qmeQu-A
z`Ay-Mwntpr9(ied%;lZ2mv`n~KQQId#Tkz;&wPA&)|1P#pIlk^?AoGd*OxrIvHR_#
zL+_p*e*g6L*Y|h7eR%rg%d;O}Uj6*``q#HNzrMfy_5H)|pFjWp`StJb?|*-R9#2<a
z_XQL#B|(0{3=FKid~)*U7WPgdVUhI>ef<+wtv-3`%+1^P?mu|=^3{)@zy3s@pYF!M
zz_`@Y#WAGf*3>EK<xK%RZL%G^#qKOVXA!O5w=3#(#@x^=|Nlo<eRK<$u()>rgqG)X
zo~Z0Jl;AmLt#m>)rKn=hzkn0(zgqZMO=#_JUSpBJlX2!wkr>UhGp|lCWs-8uxjw;|
z(|k%voYOm=J0Zu`I$RTZp^<9q>=VM5w%TdAa>(W)g;NS&dKzQ0ciGL`GH+Xv#1oB_
zg(o-d{rS=9bKEqw6n}yGqOAMwQ|q!6I;TqnI~ldg{@pCg%eGi|YdMpEst?O1@33_L
z$CDR55mmo(yIkeG-vaedYr9V{Wck!?^n0Vu^pnBM`%EZ92&1u{H-jA$D`Q*4EAbOj
zi5VOMDghj)l-$_3Ob$$lXuIHip>)?ov%Bn`?%egUnOy&uPP{6uDHDC+KudBdx73ku
zC(ha^Or5^R#_aQlzOzR*nrt+bHkx*xH!c5B#1qEwH20}#qB0v)#KM>E-{B%wyGtu`
znx1TV+^%h#N^-AWlAJkX(>~LMw?(r~{W>;-U9QQuGDvT)`qN*}AFFISy5&r_Z>@oZ
z-dZaOo8re`He6rce$_r{pM!<Whs^#Pe~W*xPrI=>G3G#>Dlmc>JYD@<);T3K0RZHR
Bg6IGM

literal 736
zcmV<60w4W}P)<h;3K|Lk000e1NJLTq002Y)002Y?1^@s6I1`hy0007~Nkl<ZcmeI2
z&2AD=6vz7%tuBjCVIo+c!Bt5#(8o}$CVp&O=?l<R1L{VwA6t{Q&`jHP+l8AZY=&t4
zC<O$M=bzjrMCV=x3d5Pn`6a)knK^TB^Us|-ckVE!D2k#eilQirq9}@@D3Nk|eSMzI
zu|?KneYRut&9S1Xxsl``(rlIe%~D8v=9+Ypf=IESSh}WYBNg{Bmf7ztO-QtrjcXXI
zEKSMPxP|eEr72s8(``Z#xhy@5MfL|v!_1UQw6eWTPj`3ewdX<njbk_$HW2i+C^!)J
z)8uZsOwVgIsx=za?)At9&Y=dixMtYXM`{>%T%+O5;URs!yrfb2)^6k4VWTE3F_22o
zKbz-U;LG_rT^F>0wk&~s6t^4?T7kaW-=}WBPd1u7V&0vc(2IJVVEOo%aLfkUddYPG
zfuQesNrB{88Wh9)57~LoLEH<NA8-ukY@p4zM@K=S<Rk@B9Q@}BJ3G!WKAfJS&M9hK
zp*-e3{<&sNQXn2n@P4I2zq(zr(QLJ@Mut<=pw<TZKwksbc#;C~S%RO>&d3Gk3DkuV
zwGPnNV0}|kAZ?Z&Y;IyWJ28`DC{gPIeW6cN-;oqZXI6nc+}aWuNOKyuOet2kjAK&0
za7?Oxs}*KBjvCaGjf?*$)dNX^tVR9UEr@*VIu>SFJOS6jY$;%*ERDY~%S#GmVa%mF
z=9Eb--4~?2&s1mla#xl5nZfz`k5_qlum1uzi0X|7bsQT+I9Ct9L9`+L8_Y;sh|l)+
zuC@^I_c&XKDe3#FS(YL)8<(B;CoCED+l+pwa^F5bCm00U%EtZs?yU)Z?A}0IN%|E)
z#w^}?BZSa5*JP6ZgPFW}Av|Dxwrlip%$!?cZ_Y)Dq9}@@D2k#eilQirqWlG{SlEHA
S&Axm90000<MNUMnLSTYtwqch5

diff --git a/apps/sms/style/images/icons/message_read@2x.png b/apps/sms/style/images/icons/message_read@2x.png
index 49da26424c5952a2b84e957440d5614cfd8d5827..661b1f8eb3ca26fc2a4bba92cf470fc6546cb3b3 100644
GIT binary patch
literal 666
zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE3?yBabR7dyHv)V@Tp4yv{Qv(ykfa@A+%=JV
z?=+sh(|Gqy=ifJ7VBZYE{WFC3&y+kkN9y1l>4S4+4$aj&w$$p>D#tTxJ<n|jxUePY
z!j|9*TSG2xEx2*8`u4G!JI9*to@~B*s{Q`yj{9e3J-Iyl$(4<-?rwT@Z}Y2rS3bXa
z`SaVWpWoj6`u_9ppMOCA{QrO5Ib0Cr;gTS~U<L+eRyF}|AK&nZ`i91dlO|7@w)V);
zW5-{-eD(UxkDtFb{c4%Yz`z*j>EaktajSLm%d#c|0XM;=Azjs>3-snk-*wgAx~_Ek
z_xi=hToxtx?W`}^SA1U5Xr@QdllUd<imTMP-FD`POv(yT(AdR#u6-Q~>)8f==g*u)
zV*V*lcPl(sP*5*c<W-dP@A$mJR;Ir_H}2TX1rlrCoc}I9z2N5g-#Uh(T6-=o+HJRc
z&gWg;&VRLBUjAIJe*JhRSCgpnA?}7-T}PvLU))gs=Km@-2UVx8KYEd7%&Es#sWzAh
z-fPsK_NE~Dbk-$Re-`ew%-lKt8zO5n4k|gZ-q&0FlJjizhvu$`j61B?9%<wi{#l~?
zsiD|9<$<!Sf_&AP0}JZjR^7d4$Mb3`hoM!Lx<yudzty70UiqIZB4^+GyGf~w^HjpY
zb+_;8v*~P{^59U3+vJlg4tt-C-syAVRI5(zk6Xbe!gfAyU%piJdN4((>%+%oU1?jh
i#DcSYzU(^cQNL|#4PSupr4(R9FnGH9xvX<aXaWGe9zqoW

literal 621
zcmV-z0+RiSP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk0006sNkl<Zc-rlm
zJ4*vW6omybb^eZ)O2lHLrD<$!>}<qT`VTaQfQ^Deiabyo3n2uuJ}L{*bivBPXwY<S
z0`Yo}j1V@Nbv21QEBAu~%gmkGIm}~cX2%3U5ClOG1VIo4;SZS1W+zw{Ynye+dSp3D
zk1B0j#Y}|RXq2_VdSa1JJ*zU&u$fJ$-lJa%WfNgAI?l?lXh_PSPLs_RSu|u7O*9R|
zJ1iQJ(x#bR^waR!LV=b}PieJWhVYCuzor*WT8-<vhRz=y(cbMX-8Y-`PCXzEd5A%*
zm*Kh*tGD`$kXsfv{-jo;cBeyrK`hExdgB{Gn~n7Q&aT@wH64e33Cg05eunX`NRWoD
z?gmY<4y#qtVLv?3N~uKCxg7NQe9mb)P}fwiX)8#>sqV%cc$nS2xzWx~<Y_>i?)aS`
z4WD-pV-4s<#CQt5ufaXMFM>0y=5H*Yr<b=k(tx4+tzpFIK;3x9*E|l=aEnD-*Vp95
zjB2cx5CeQniPnEGj77{u!}=lp>Nq1C(x^LDC>SxMFIWU6Jr*r{z(p(RTD0V|Wa`GF
z(r4pg|9s;S4|;3aaQ9ep2wTgf$JWxw!$W+4!$aKT@L>G$aN+ov_V4br$3uWT#2{9c
z)AepNR2Kkq#Ud@AozYsQ0^u2H$n&FwX}2EfQC{)LC7xW<27eJ>AHXQeCc^luWs}wT
zfzgI46a5cA(^9M})q8EFx=Kr_n8=tQ2!bF8f*=TjAdH?5#PWvqR&xnW00000NkvXX
Hu0mjft<WR{

diff --git a/apps/sms/style/message.css b/apps/sms/style/message.css
index aaf729d858b9..7c44f4bf163a 100644
--- a/apps/sms/style/message.css
+++ b/apps/sms/style/message.css
@@ -1,127 +1,152 @@
+.message.incoming {
+  padding-left: 1.5rem;
+  padding-right: 4rem;
+}
+
+.message.outgoing {
+  padding-left: 4rem;
+  padding-right: 1.5rem;
+}
+
 .message .bubble {
   box-sizing: border-box;
   height: 100%;
-  max-width: calc(100% - 4rem);
+  max-width: 100%;
+  padding: 1rem 1.5rem;
   overflow: visible;
 }
 
 .message.outgoing .bubble {
   float: right;
 
-  border-radius: 0.3rem 0 0 0.3rem;
+  border-radius: 1.5rem 0 1.5rem 1.5rem;
 
   background: #f5f5f5;
+  color: #333;
 }
 
 .message.incoming .bubble {
   float: left;
 
-  border-radius: 0 0.3rem 0.3rem 0;
+  border-radius: 0 1.5rem 1.5rem 1.5rem;
 
-  background: #9ef2e7;
+  background: #39c3c2;
+  color: #fff;
 }
 
-.message.error .bubble {
-  background: #fedcdc;
+/* BB overrides */
+
+.message.outgoing p:first-of-type:last-of-type,
+.message.incoming p:first-of-type:last-of-type {
+  padding-top: 0.5rem;
+
+  line-height: 2rem;
+  white-space: pre-wrap;
 }
 
-.message.sending .bubble {
-  color: #5f5f5f;
+.message.incoming p:first-of-type {
+  color: #fff;
+}
+
+.message.sending p:first-of-type {
+  color: #bfbfbf;
 }
 
-/* Message content */
-.message .message-content {
-  display: flex;
-  align-items: center;
+/* End of BB overrides */
+
+.outgoing.error .bubble {
+  background: #fae1df;
 }
 
-.message.outgoing .message-content {
-  flex-direction: row-reverse;
+.incoming.error .bubble {
+  background: #ff9898;
 }
 
 
+.message.sending .bubble {
+  color: #bfbfbf;
+}
+
+.message.sending .attachment-container {
+  opacity: 0.5;
+}
+
 /* Message Subject */
 .message .message-subject {
   display: none;
 
-  padding: 0.65rem 0;
+  margin-bottom: 1rem;
 
   font-size: 1.4rem;
   font-style: italic;
   line-height: 1.7rem;
+}
 
-  background: rgba(51, 51, 51, 0.05);
+.message.has-subject .message-subject {
+  display: block;
 }
 
-.message.incoming .message-subject {
-  padding-left: 4rem;
-  padding-right: 1.5rem;
+/* Message content styles */
+.message .message-content a {
+  color: #333;
+  text-decoration: underline;
+}
 
-  border-top-right-radius: 0.3rem;
+.message .message-content a:active {
+  color: #ff4e00;
 }
 
-.message.outgoing .message-subject {
-  padding-left: 1.5rem;
-  padding-right: 4rem;
+.message-details {
+  margin-top: 0.5rem;
 
-  border-top-left-radius: 0.3rem;
+  font-size: 1.4rem;
+  line-height: 2rem;
 }
 
-.message.has-subject .message-subject {
-  display: block;
+.message-details > * {
+  float: left;
 }
 
-
-/* Message Body styles */
-.message .message-body {
-  flex: 1;
-  padding: 1.5rem 1.5rem 1rem;
-  min-width: 0;
+.message-details time {
+  display: unset;
 }
 
-.message.incoming .message-body {
-  padding-left: 0;
+.message.sending time,
+.message.sending .message-sim-information {
+  display: none;
 }
 
-.message.outgoing .message-body {
-  padding-right: 0;
+.message.outgoing .message-details {
+  color: #858585;
 }
 
-.message .message-body a {
-  color: #333;
-  text-decoration: underline;
+.message.outgoing.error .message-details {
+  color: #e97f79;
 }
 
-.message .message-body a:active {
-  color: #ff4e00;
+.message.incoming .message-details {
+  color: #d1eeee;
 }
 
-.message-details {
-  color: #000;
-  font-size: 1.4rem;
-  line-height: 2.3rem;
-  opacity: 0.7;
+.message.incoming.error .message-details {
+  color: #ffe0dc;
 }
 
-.message-details time {
-  display: unset;
+.message-sim-information {
+  margin-right: 0.4rem;
 }
 
 .message-sim-information::after {
-  content: ' ‧ '
+  content: ' ‧ ';
 }
 
 /* Message status aside panel */
 .message .message-status {
-  float: none;
-
-  /* We need to have height to show background */
-  min-height: 3rem;
-  width: 4rem;
-  margin: 0;
+  height: 2rem;
+  min-width: 3rem;
 
-  background: no-repeat center center / 3rem;
-  z-index: auto;
+  background: no-repeat center center / 1.6rem;
+  font-size: 1.4rem;
 }
 
 .message.error .message-status {
@@ -136,17 +161,6 @@
   background-image: url('images/icons/message_read.png');
 }
 
-.message .message-status progress {
-  display: none;
-
-  margin: 0 auto;
-}
-
-.message.pending .message-status progress,
-.message.sending .message-status progress {
-  display: block;
-}
-
 .message.pending .message-status,
 .message.sending .message-status {
   background: none;
@@ -161,19 +175,18 @@
   width: auto;
   padding: 0;
   /* Eliminating container paragraph line-height */
-  margin-top: -1rem;
+  margin: -1.5rem 0 0;
 
   background: none;
+  color: #fff;
   border: none;
   /* We're using border-bottom instead of just underline style as line is too
      close to the text and doesn't look similar to visual spec. */
-  border-bottom: 1px solid #333;
-  font-size: 1.8rem;
+  border-bottom: 1px solid #fff;
 }
 
 .message .download:active {
-  border-color: #038282;
-  color: #038282;
+  opacity: 0.85;
 }
 
 /* hide download button via css on expired messages */
@@ -183,4 +196,5 @@
 
 .message.pending .download {
   border-color: transparent;
+  opacity: 0.8;
 }
diff --git a/apps/sms/style/sms.css b/apps/sms/style/sms.css
index 8a3231d55f76..269b03ceb42d 100755
--- a/apps/sms/style/sms.css
+++ b/apps/sms/style/sms.css
@@ -376,14 +376,13 @@ section[role="region"].new > header:first-child form {
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
-  border-bottom: 0.1rem solid #ebebeb;
 
   background: rgba(255, 255, 255, 0.95);
-  color: #575757;
+  color: #333;
 }
 
 .carrier-wrapper .phone-carrier {
-  color: #237171;
+  color: #008787;
 }
 
 .has-carrier .carrier-wrapper {
@@ -396,14 +395,15 @@ section[role="region"].new > header:first-child form {
   z-index: 1;
 
   height: 2.2rem;
-  margin: 0 0 0.6rem;
+  margin: 0;
+  padding: 0.6rem 3rem;
 
   font-size: 1.4rem;
   line-height: 2.2rem;
   text-transform: uppercase;
 
-  background: rgba(255, 255, 255, 0.85);
-  color: #575757;
+  background: rgba(225, 240, 236, 0.85);
+  color: #008787;
 }
 
 /* If has carrier change top position */
@@ -411,7 +411,7 @@ section[role="region"].new > header:first-child form {
   top: 2.2rem;
 }
 
-.has-carrier #messages-container .messages-date-group-header:first-child {
+.has-carrier #messages-container > .messages-date-group:first-child > .messages-date-group-header {
   margin-top: 2.2rem;
 }
 
@@ -438,20 +438,6 @@ section[role="region"].new > header:first-child form {
   display: none;
 }
 
-.article-list[data-type="list"] .message .bubble p {
-  padding: 0;
-
-  line-height: 2rem;
-  font-size: 1.8rem;
-  text-align: left;
-  white-space: pre-wrap;
-  color: #333;
-}
-
-.article-list[data-type="list"] .message.no-attachment .bubble p {
-  height: 2.3rem;
-}
-
 /* remove margin for notice-button class of button */
 .notice-button {
   margin: 0;
@@ -478,14 +464,13 @@ section[role="region"].new > header:first-child form {
   pointer-events: none;
 }
 
-/* In edit mode we hide progress bar for all message types and hide background
-   for the incoming messages as checkbox should appear at the same place */
-.edit .message .bubble .message-status progress {
-  display: none;
+.edit .message .bubble {
+  pointer-events: none;
 }
 
-.edit .message.incoming .bubble .message-status {
-  background: none;
+.edit .message.incoming .bubble {
+  transition: transform 0.4s ease 0s;
+  transform: translateX(2.5rem);
 }
 
 .edit-button {
diff --git a/apps/sms/test/unit/mock_messages.js b/apps/sms/test/unit/mock_messages.js
index 71a17c318294..398548162524 100644
--- a/apps/sms/test/unit/mock_messages.js
+++ b/apps/sms/test/unit/mock_messages.js
@@ -54,6 +54,7 @@ var MockMessages = {
       deliveryInfo: [{
         receiver: 'receiver',
         deliveryStatus: 'success',
+        readStatus: 'success',
         deliveryTimestamp: +now
       }],
       type: 'mms',
diff --git a/apps/sms/test/unit/thread_ui_test.js b/apps/sms/test/unit/thread_ui_test.js
index 9cd55d17e2fe..a7a6f5f1c152 100755
--- a/apps/sms/test/unit/thread_ui_test.js
+++ b/apps/sms/test/unit/thread_ui_test.js
@@ -1708,70 +1708,75 @@ suite('thread_ui.js >', function() {
   });
 
   suite('message status update handlers >', function() {
-    teardown(function() {
-      document.body.removeChild(this.container);
-    });
+    var statuses = [
+      'sending', 'pending', 'sent', 'received', 'delivered', 'read', 'error'
+    ];
+
+    var statusesWithIndicator = ['sending', 'delivered', 'read', 'error'];
+
+    var fakeMessage,
+        container;
+
+    function assertMessageStatus(statusToAssert) {
+      assert.isTrue(container.classList.contains(statusToAssert));
+
+      if (statusesWithIndicator.indexOf(statusToAssert) >= 0) {
+        assert.isNotNull(container.querySelector('.message-status'));
+      } else {
+        assert.isNull(container.querySelector('.message-status'));
+      }
+
+      statuses.filter((s) => s !== statusToAssert).forEach(
+        (status) => assert.isFalse(container.classList.contains(status))
+      );
+    }
+
     setup(function() {
-      this.fakeMessage = {
+      fakeMessage = MockMessages.sms({
         id: 24601,
-        type: null,
-        delivery: null,
-        deliveryStatus: null,
-        deliveryInfo: null
-      };
+        delivery: 'sending'
+      });
+
+      this.sinon.stub(Navigation, 'isCurrentPanel').
+        withArgs('thread', { id: fakeMessage.threadId }).
+        returns(true);
 
-      this.container = document.createElement('div');
-      this.container.id = 'message-' + this.fakeMessage.id;
-      this.container.className = 'sending';
-      this.container.innerHTML = ThreadUI.tmpl.message.interpolate({});
-      document.body.appendChild(this.container);
+      MessageManager.on.withArgs('message-sending').yield({
+        message: fakeMessage
+      });
+
+      container = document.getElementById('message-' + fakeMessage.id);
     });
 
-    suite('onMessageSent >', function() {
-      test('removes the "sending" class from the message element', function() {
-        MessageManager.on.withArgs('message-sent').yield({
-          message: this.fakeMessage
-        });
-        assert.isFalse(this.container.classList.contains('sending'));
+    teardown(function() {
+      container.remove();
+    });
+
+    suite('onMessageSending >', function() {
+      test('sets correct status for message element', function() {
+        assertMessageStatus('sending');
       });
-      test('adds the "sent" class to the message element', function() {
+    });
+
+    suite('onMessageSent >', function() {
+      test('sets correct status for message element', function() {
         MessageManager.on.withArgs('message-sent').yield({
-          message: this.fakeMessage
+          message: fakeMessage
         });
-        assert.isTrue(this.container.classList.contains('sent'));
+
+        assertMessageStatus('sent');
       });
     });
 
     suite('onMessageFailed >', function() {
-      suite('messages that were *not* previously in the "error" state >',
-        function() {
-        test('removes the "sending" class from the message element',
-          function() {
-          MessageManager.on.withArgs('message-failed-to-send').yield({
-            message: this.fakeMessage
-          });
-          assert.isFalse(this.container.classList.contains('sending'));
-        });
-        test('adds the "error" class to the message element', function() {
-          MessageManager.on.withArgs('message-failed-to-send').yield({
-            message: this.fakeMessage
-          });
-          assert.isTrue(this.container.classList.contains('error'));
-        });
-      });
-      suite('messages that were previously in the "error" state >',
-        function() {
-        setup(function() {
-          this.container.classList.add('error');
-        });
-        test('does not remove the "sending" class to the message element',
-          function() {
-          MessageManager.on.withArgs('message-failed-to-send').yield({
-            message: this.fakeMessage
-          });
-          assert.isTrue(this.container.classList.contains('sending'));
+      test('sets correct status for message element', function() {
+        MessageManager.on.withArgs('message-failed-to-send').yield({
+          message: fakeMessage
         });
+
+        assertMessageStatus('error');
       });
+
       suite('Show error dialog while sending failed',
         function() {
         setup(function() {
@@ -1782,7 +1787,7 @@ suite('thread_ui.js >', function() {
         test('does not show dialog if error is not NonActiveSimCardError',
           function() {
           MessageManager.on.withArgs('message-failed-to-send').yield({
-            message: this.fakeMessage
+            message: fakeMessage
           });
           sinon.assert.notCalled(ThreadUI.showMessageError);
         });
@@ -1790,13 +1795,13 @@ suite('thread_ui.js >', function() {
           function() {
           ThreadUI.showErrorInFailedEvent = 'NonActiveSimCardError';
           MessageManager.on.withArgs('message-failed-to-send').yield({
-            message: this.fakeMessage
+            message: fakeMessage
           });
           sinon.assert.called(ThreadUI.showMessageError);
           assert.equal(ThreadUI.showErrorInFailedEvent, '');
           MockErrorDialog.calls[0][1].confirmHandler();
-          assert.isTrue(this.container.classList.contains('sending'));
-          assert.isFalse(this.container.classList.contains('error'));
+
+          assertMessageStatus('sending');
           sinon.assert.called(Settings.switchMmsSimHandler);
         });
       });
@@ -1804,94 +1809,101 @@ suite('thread_ui.js >', function() {
 
     suite('onDeliverySuccess >', function() {
       test('sms delivery success', function() {
-        this.fakeMessage.type = 'sms';
-        this.fakeMessage.delivery = 'sent';
-        this.fakeMessage.deliveryStatus = 'success';
+        fakeMessage.type = 'sms';
+        fakeMessage.delivery = 'sent';
+        fakeMessage.deliveryStatus = 'success';
         MessageManager.on.withArgs('message-delivered').yield({
-          message: this.fakeMessage
+          message: fakeMessage
         });
-        assert.isTrue(this.container.classList.contains('delivered'));
+
+        assertMessageStatus('delivered');
       });
       test('mms delivery success', function() {
-        this.fakeMessage.type = 'mms';
-        this.fakeMessage.delivery = 'sent';
-        this.fakeMessage.deliveryInfo = [{
+        fakeMessage.type = 'mms';
+        fakeMessage.delivery = 'sent';
+        fakeMessage.deliveryInfo = [{
           receiver: null, deliveryStatus: 'success'}];
         MessageManager.on.withArgs('message-delivered').yield({
-          message: this.fakeMessage
+          message: fakeMessage
         });
-        assert.isTrue(this.container.classList.contains('delivered'));
+
+        assertMessageStatus('delivered');
       });
       test('multiple recipients mms delivery success', function() {
-        this.fakeMessage.type = 'mms';
-        this.fakeMessage.delivery = 'sent';
-        this.fakeMessage.deliveryInfo = [
+        fakeMessage.type = 'mms';
+        fakeMessage.delivery = 'sent';
+        fakeMessage.deliveryInfo = [
           {receiver: null, deliveryStatus: 'success'},
           {receiver: null, deliveryStatus: 'success'}];
         MessageManager.on.withArgs('message-delivered').yield({
-          message: this.fakeMessage
+          message: fakeMessage
         });
-        assert.isTrue(this.container.classList.contains('delivered'));
+
+        assertMessageStatus('delivered');
       });
       test('not all recipients return mms delivery success', function() {
-        this.fakeMessage.type = 'mms';
-        this.fakeMessage.delivery = 'sent';
-        this.fakeMessage.deliveryInfo = [
+        fakeMessage.type = 'mms';
+        fakeMessage.delivery = 'sent';
+        fakeMessage.deliveryInfo = [
           {receiver: null, deliveryStatus: 'success'},
           {receiver: null, deliveryStatus: 'pending'}];
         MessageManager.on.withArgs('message-delivered').yield({
-          message: this.fakeMessage
+          message: fakeMessage
         });
-        assert.isFalse(this.container.classList.contains('delivered'));
+
+        assertMessageStatus('sending');
       });
     });
 
     suite('onReadSuccess >', function() {
       test('mms read success', function() {
-        this.fakeMessage.type = 'mms';
-        this.fakeMessage.delivery = 'sent';
-        this.fakeMessage.deliveryInfo = [{
+        fakeMessage.type = 'mms';
+        fakeMessage.delivery = 'sent';
+        fakeMessage.deliveryInfo = [{
           receiver: null, readStatus: 'success'}];
         MessageManager.on.withArgs('message-read').yield({
-          message: this.fakeMessage
+          message: fakeMessage
         });
-        assert.isTrue(this.container.classList.contains('read'));
+
+        assertMessageStatus('read');
       });
       test('display read icon when both delivery/read success', function() {
-        this.fakeMessage.type = 'mms';
-        this.fakeMessage.delivery = 'sent';
-        this.fakeMessage.deliveryInfo = [{
+        fakeMessage.type = 'mms';
+        fakeMessage.delivery = 'sent';
+        fakeMessage.deliveryInfo = [{
           receiver: null, deliveryStatus: 'success', readStatus: 'success'}];
         MessageManager.on.withArgs('message-delivered').yield({
-          message: this.fakeMessage
+          message: fakeMessage
         });
         MessageManager.on.withArgs('message-read').yield({
-          message: this.fakeMessage
+          message: fakeMessage
         });
-        assert.isFalse(this.container.classList.contains('delivered'));
-        assert.isTrue(this.container.classList.contains('read'));
+
+        assertMessageStatus('read');
       });
       test('multiple recipients mms read success', function() {
-        this.fakeMessage.type = 'mms';
-        this.fakeMessage.delivery = 'sent';
-        this.fakeMessage.deliveryInfo = [
+        fakeMessage.type = 'mms';
+        fakeMessage.delivery = 'sent';
+        fakeMessage.deliveryInfo = [
           {receiver: null, readStatus: 'success'},
           {receiver: null, readStatus: 'success'}];
         MessageManager.on.withArgs('message-read').yield({
-          message: this.fakeMessage
+          message: fakeMessage
         });
-        assert.isTrue(this.container.classList.contains('read'));
+
+        assertMessageStatus('read');
       });
       test('not all recipients return mms read success', function() {
-        this.fakeMessage.type = 'mms';
-        this.fakeMessage.delivery = 'sent';
-        this.fakeMessage.deliveryInfo = [
+        fakeMessage.type = 'mms';
+        fakeMessage.delivery = 'sent';
+        fakeMessage.deliveryInfo = [
           {receiver: null, readStatus: 'success'},
           {receiver: null, readStatus: 'pending'}];
         MessageManager.on.withArgs('message-read').yield({
-          message: this.fakeMessage
+          message: fakeMessage
         });
-        assert.isFalse(this.container.classList.contains('read'));
+
+        assertMessageStatus('sending');
       });
     });
   });
@@ -2261,8 +2273,7 @@ suite('thread_ui.js >', function() {
         id: '1',
         bodyHTML: '',
         timestamp: '' + now,
-        subject: 'subject',
-        progressIndicatorClassName: ''
+        subject: 'subject'
       });
     });
 
@@ -2315,19 +2326,38 @@ suite('thread_ui.js >', function() {
       });
     });
 
-    test('correctly sets progress indicator class name', function() {
-      var incomingMessage = MockMessages.sms({ delivery: 'received'}),
-          outgoingMessage = MockMessages.sms({ delivery: 'sent'});
+    test('add message status only when needed', function() {
+      var receivedMessage = MockMessages.sms({ delivery: 'received'}),
+          sentMessage = MockMessages.sms({
+            delivery: 'sent',
+            deliveryStatus: 'pending'
+          }),
+          deliveredMessage = MockMessages.sms({ delivery: 'sent' }),
+          readMessage = MockMessages.mms({ delivery: 'sent' }),
+          failedMessage = MockMessages.sms({ delivery: 'error' }),
+          sendingMessage = MockMessages.sms({ delivery: 'sending' });
 
-      var node = ThreadUI.buildMessageDOM(incomingMessage);
-      assert.isTrue(
-        node.querySelector('progress').classList.contains('light')
-      );
+      var node = ThreadUI.buildMessageDOM(receivedMessage);
+      assert.isNull(node.querySelector('.message-status'));
 
-      node = ThreadUI.buildMessageDOM(outgoingMessage);
-      assert.isFalse(
-        node.querySelector('progress').classList.contains('light')
-      );
+      node = ThreadUI.buildMessageDOM(sentMessage);
+      assert.isNull(node.querySelector('.message-status'));
+
+      node = ThreadUI.buildMessageDOM(deliveredMessage);
+      assert.isNotNull(node.querySelector('.message-status'));
+      assert.isTrue(node.classList.contains('delivered'));
+
+      node = ThreadUI.buildMessageDOM(readMessage);
+      assert.isNotNull(node.querySelector('.message-status'));
+      assert.isTrue(node.classList.contains('read'));
+
+      node = ThreadUI.buildMessageDOM(failedMessage);
+      assert.isNotNull(node.querySelector('.message-status'));
+      assert.isTrue(node.classList.contains('error'));
+
+      node = ThreadUI.buildMessageDOM(sendingMessage);
+      assert.isNotNull(node.querySelector('.message-status'));
+      assert.isTrue(node.classList.contains('sending'));
     });
 
     test('sets delivery class when delivery status is success', function() {