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,35 +649,37 @@ input.search {
 
 .message-detail .container {
   height: calc(100% - (36px + 4px)); }
-.message-detail .hasConflict,
+.message-detail .hasConflict button,
+.message-detail .hasRetry button {
+  outline: none;
+  border: none;
+  border-radius: 5px;
+  color: white;
+  padding: 0.5em 1em;
+  font-weight: bold;
+  line-height: 18px; }
+  .message-detail .hasConflict button span,
+  .message-detail .hasRetry button span {
+    vertical-align: middle; }
+.message-detail .conflicts .contact-detail,
 .message-detail .hasRetry {
   background: #F3F3A7;
-  padding: 10px 20px;
-  margin: 0 5px;
-  border-radius: 5px; }
-  .message-detail .hasConflict button,
+  border-radius: 5px;
+  padding: 1em;
+  margin: 1em; }
+.message-detail .hasRetry {
+  padding: 10px 20px; }
   .message-detail .hasRetry button {
-    outline: none;
-    border: none;
-    border-radius: 5px;
-    color: white;
-    padding: 0.5em 1em;
-    font-weight: bold;
-    line-height: 18px; }
-    .message-detail .hasConflict button span,
-    .message-detail .hasRetry button span {
-      vertical-align: middle; }
-.message-detail .hasRetry button {
-  margin: 5px;
-  background: #2090ea; }
-  .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%; }
+    margin: 5px;
+    background: #2090ea; }
+    .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; }
@@ -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; }