Make network errors & resend button more prominent

// FREEBIE

_locales/en/messages.json

@@ -57,7 +57,7 @@
       "message": "Cancel"
     },
     "failedToSend": {
-      "message": "Failed to send to some recipients."
+      "message": "Failed to send to some recipients. Check your network connection."
     },
     "error": {
       "message": "Error"

background.html

@@ -171,14 +171,14 @@
         <span class='conversation-title'>{{ title }}</span>
     </div>
     <div class='container'>
+      {{ #hasRetry }}
+        <div class='hasRetry clearfix'>
+          <div class='retryMessage'>{{ failedToSend }}</div>
+          <button class='retry'>{{ resend }}</button>
+        </div>
+      {{ /hasRetry }}
       <div class='message-container'></div>
       <div class='info'>
-        {{ #hasRetry }}
-          <h3 class='hasRetry clearfix'>
-            <button class='retry'>{{ resend }}</button>
-            <span>{{ failedToSend }}</span>
-          </h3>
-        {{ /hasRetry }}
         <table>
           <tr>
             <td class='label'>{{ sent }}</td>

stylesheets/_conversation.scss

@@ -94,6 +94,42 @@
     height: calc(100% - (#{$header-height} + 4px));
   }
 
+  .hasRetry {
+    background: #F3F3A7;
+    padding: 10px 20px;
+    margin: 0 5px;
+    border-radius: 5px;
+
+    .retryMessage {
+      font-weight: bold;
+    }
+
+    button {
+      margin: 5px;
+      background: $blue;
+      outline: none;
+      border: none;
+      border-radius: 5px;
+      color: white;
+      padding: 0.5em;
+      font-weight: bold;
+
+      span {
+        vertical-align: middle;
+      }
+
+      &:before {
+        content: '';
+        display: inline-block;
+        vertical-align: middle;
+        width: 18px;
+        height: 18px;
+        background: url('/images/refresh.png') no-repeat center center;
+        background-size: 100%;
+      }
+    }
+  }
+
   .message-container {
     background: white;
     padding: 1em 0;
@@ -118,7 +154,6 @@
       color: white;
       padding: 0.5em;
       font-weight: bold;
-      background: $blue;
 
       span {
         vertical-align: middle;
@@ -144,10 +179,6 @@
   h3 {
     font-size: 1em;
     padding: 5px;
-
-    button {
-      float: right;
-    }
   }
 
   .error-icon {

stylesheets/manifest.css

@@ -649,6 +649,32 @@ input.search {
 
 .message-detail .container {
   height: calc(100% - (36px + 4px)); }
+.message-detail .hasRetry {
+  background: #F3F3A7;
+  padding: 10px 20px;
+  margin: 0 5px;
+  border-radius: 5px; }
+  .message-detail .hasRetry .retryMessage {
+    font-weight: bold; }
+  .message-detail .hasRetry button {
+    margin: 5px;
+    background: #2090ea;
+    outline: none;
+    border: none;
+    border-radius: 5px;
+    color: white;
+    padding: 0.5em;
+    font-weight: bold; }
+    .message-detail .hasRetry button span {
+      vertical-align: middle; }
+    .message-detail .hasRetry button:before {
+      content: '';
+      display: inline-block;
+      vertical-align: middle;
+      width: 18px;
+      height: 18px;
+      background: url("/images/refresh.png") no-repeat center center;
+      background-size: 100%; }
 .message-detail .message-container {
   background: white;
   padding: 1em 0; }
@@ -665,8 +691,7 @@ input.search {
     border-radius: 5px;
     color: white;
     padding: 0.5em;
-    font-weight: bold;
+    font-weight: bold; }
-    background: #2090ea; }
     .message-detail .info button span {
       vertical-align: middle; }
     .message-detail .info button:before {
@@ -683,8 +708,6 @@ input.search {
 .message-detail h3 {
   font-size: 1em;
   padding: 5px; }
-  .message-detail h3 button {
-    float: right; }
 .message-detail .error-icon {
   display: inline-block;
   width: 18px;