Tweak conflict style

// FREEBIE

background.html

@@ -179,7 +179,6 @@
       {{ /hasRetry }}
       {{ #hasConflict }}
         <div class='hasConflict clearfix'>
-          <h3>{{ hasConflict }}</h3>
           <div class='conflicts'>
           </div>
         </div>
@@ -277,6 +276,9 @@
   </script>
   <script type='text/x-tmpl-mustache' id='contact-detail'>
       <div class='clearfix'>
+        {{ #conflict }}
+          <h3>{{ newIdentity }}</h3>
+        {{ /conflict }}
         {{ #errors }}
             <span class='error-icon'>
               <span class='error-message'>{{message}}</span>

js/views/message_detail_view.js

@@ -37,7 +37,8 @@
                 conflict : this.conflict,
                 errors   : this.errors,
                 verify   : i18n('verify'),
-                cancel   : i18n('cancel')
+                cancel   : i18n('cancel'),
+                newIdentity: i18n('newIdentity')
             };
         }
     });
@@ -140,7 +141,7 @@
                 failedToSend: i18n('failedToSend'),
                 errorLabel  : i18n('error'),
                 hasRetry    : hasRetry,
-                hasConflict : hasConflict
+                hasConflict : this.model.hasKeyConflicts()
             }));
             this.view.$el.prependTo(this.$('.message-container'));
 

stylesheets/_conversation.scss

@@ -96,11 +96,6 @@
 
   .hasConflict,
   .hasRetry {
-    background: #F3F3A7;
-    padding: 10px 20px;
-    margin: 0 5px;
-    border-radius: 5px;
-
     button {
       outline: none;
       border: none;
@@ -115,7 +110,15 @@
       }
     }
   }
+  .conflicts .contact-detail,
   .hasRetry {
+    background: #F3F3A7;
+    border-radius: 5px;
+    padding: 1em;
+    margin: 1em;
+  }
+  .hasRetry {
+    padding: 10px 20px;
     button {
       margin: 5px;
       background: $blue;
@@ -174,8 +177,8 @@
   }
 
   .conflicts .contact-detail {
+    background: #F3F3A7;
     padding: 1em;
-    border: 1px solid #ccc;
     border-radius: 10px;
   }
   .contacts .contact-detail {

stylesheets/manifest.css

@@ -649,14 +649,8 @@ input.search {
 
 .message-detail .container {
   height: calc(100% - (36px + 4px)); }
-.message-detail .hasConflict,
-.message-detail .hasRetry {
-  background: #F3F3A7;
-  padding: 10px 20px;
-  margin: 0 5px;
-  border-radius: 5px; }
-  .message-detail .hasConflict button,
-  .message-detail .hasRetry button {
+.message-detail .hasConflict button,
+.message-detail .hasRetry button {
   outline: none;
   border: none;
   border-radius: 5px;
@@ -667,7 +661,15 @@ input.search {
   .message-detail .hasConflict button span,
   .message-detail .hasRetry button span {
     vertical-align: middle; }
-.message-detail .hasRetry button {
+.message-detail .conflicts .contact-detail,
+.message-detail .hasRetry {
+  background: #F3F3A7;
+  border-radius: 5px;
+  padding: 1em;
+  margin: 1em; }
+.message-detail .hasRetry {
+  padding: 10px 20px; }
+  .message-detail .hasRetry button {
     margin: 5px;
     background: #2090ea; }
     .message-detail .hasRetry button:before {
@@ -706,8 +708,8 @@ input.search {
       background: url("/images/refresh.png") no-repeat center center;
       background-size: 100%; }
 .message-detail .conflicts .contact-detail {
+  background: #F3F3A7;
   padding: 1em;
-  border: 1px solid #ccc;
   border-radius: 10px; }
 .message-detail .contacts .contact-detail {
   padding: 0 36px; }