Update style and copy on key changes

// FREEBIE

_locales/en/messages.json

@@ -33,7 +33,7 @@
       "description": "Header for a key change dialog"
     },
     "identityChanged": {
-      "message": "This contact is using a new Signal identity. This could either mean that someone is trying to intercept your communication, or this contact simply re-installed Signal. You may wish to verify their new identity."
+      "message": "This contact is using a new Signal identity. This could either mean that someone is trying to intercept your communication, or this contact simply re-installed Signal. You may wish to verify their new identity key below."
     },
     "outgoingKeyConflict": {
       "message": "This contact's identity key has changed. Click to process and display."
@@ -118,11 +118,12 @@
         "message": "Verify Identity"
     },
     "theirIdentity": {
-        "message": "Their identity (they read):",
-        "description": "They is used here as a gender-neutral third-person singular"
+        "message": "Their identity",
+        "description": "Label for someone else's identity key. They is used here as a gender-neutral third-person singular."
     },
     "yourIdentity": {
-        "message": "Your identity (you read):"
+        "message": "Your identity",
+        "description": "Label for the user's own identity key."
     },
     "theirIdentityUnknown": {
         "message": "You haven't exchanged any messages with this contact yet. Their identity will be available after the first message."
@@ -252,5 +253,9 @@
     "showLess": {
         "message": "Hide details",
         "description": "Hides the details of a key change"
+    },
+    "learnMore": {
+        "message": "Learn more about verifying keys.",
+        "description": "Text that links to a support article on verifying identity keys"
     }
 }

background.html

@@ -238,10 +238,11 @@
   <script type='text/x-tmpl-mustache' id='key_verification_panel'>
     <div class='container'>
       {{> key_verification }}
+      <p> {{> link_to_support }} </p>
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='key_verification'>
-      <p> {{theirIdentity}} </p>
+      <label> {{theirIdentity}} </label>
       {{ ^their_key }}
         <div class='placeholder'>{{ their_key_unknown }}</div>
       {{ /their_key }}
@@ -250,7 +251,7 @@
           {{ #their_key }} <span>{{ . }}</span> {{ /their_key }}
         </div>
       {{ /has_their_key }}
-      <p> {{yourIdentity}} </p>
+      <label> {{yourIdentity}} </label>
       <div class='key'>
         {{ #your_key  }} <span>{{ . }}</span> {{ /your_key  }}
       </div>
@@ -304,17 +305,25 @@
         </span>
       </div>
   </script>
+  <script type='text/x-tmpl-mustache' id='link_to_support'>
+    <a href='http://support.whispersystems.org/hc/articles/213134107' target='_blank'>
+      {{ learnMore }}
+    </a>
+  </script>
   <script type='text/x-tmpl-mustache' id='key-conflict-dialogue'>
-    <div class='clearfix'>
-      <h3>{{ newIdentity }}</h3>
+    <h3 class='header'>{{ newIdentity }}</h3>
+    <div class='content clearfix'>
       {{> avatar }}
       <span class='name'>{{ name }}</span>
       <button class='resolve'>{{ resolve }}</button>
-      <span class='hideKeys hide'> {{ hideKeys }} </span>
-      <span class='showKeys'> {{ showKeys }} </span>
-    </div>
-    <div class='keys hide'>
-      <p> {{ message }} </p>
+      <a href='#' class='hideKeys hide'> {{ hideKeys }} </a>
+      <a href='#' class='showKeys'> {{ showKeys }} </a>
+      <div class='keys hide'>
+        <p>
+          {{ message }}
+          {{> link_to_support }}
+        </p>
+      </div>
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='window-controls'>

js/views/key_conflict_dialogue_view.js

@@ -52,7 +52,8 @@
                 message      : i18n('identityChanged'),
                 resolve      : i18n('acceptNewKey'),
                 showKeys     : i18n('showMore'),
-                hideKeys     : i18n('showLess')
+                hideKeys     : i18n('showLess'),
+                learnMore    : i18n('learnMore')
             };
         }
     });

js/views/key_verification_view.js

@@ -20,6 +20,7 @@
         },
         render_attributes: function() {
             return {
+                learnMore    : i18n('learnMore'),
                 verifyIdentity: i18n('verifyIdentity'),
                 yourIdentity: i18n('yourIdentity'),
                 theirIdentity: i18n('theirIdentity'),

stylesheets/_conversation.scss

@@ -25,7 +25,7 @@
 
     .container {
       padding-top: 20px;
-      max-width: 910px;
+      max-width: 950px;
       margin: 0 auto;
       padding: 20px;
     }
@@ -59,6 +59,11 @@
 }
 
 .key-verification {
+  label {
+    display: block;
+    margin-bottom: 10px;
+    font-size: small;
+  }
 
   .key, .placeholder {
     padding: 0 1em;
@@ -68,7 +73,7 @@
     display: inline-block;
     font-family: monospace;
     padding: 10px;
-    margin: 10px;
+    margin-bottom: 20px;
     background: $grey_l;
     border: solid 1px $grey_l2;
     border-radius: 5px;
@@ -80,10 +85,19 @@
 
 .message-detail {
   .key-conflict-dialogue {
-    background: #F3F3A7;
     border-radius: 5px;
-    padding: 20px;
-    margin: 20px;
+    margin: 20px 0;
+
+    .header {
+      border-radius: 5px 5px 0 0;
+      background: #F3F3A7;
+      margin: 0;
+      padding: 10px 20px
+    }
+    .content {
+      padding: 20px;
+      border: 2px solid #F3F3A7;
+    }
 
     button.resolve {
       outline: none;
@@ -99,9 +113,6 @@
     }
 
     .hideKeys, .showKeys {
-      color: $blue;
-      text-decoration: underline;
-      cursor: pointer;
       float: right;
       line-height: 36px;
     }

stylesheets/_global.scss

@@ -58,6 +58,7 @@ body {
 }
 
 button { cursor: pointer; }
+a { color: $blue; }
 
 .inactive button.back {
   background: url('/images/back.png') no-repeat center center;

stylesheets/_index.scss

@@ -86,6 +86,7 @@ input.search {
   outline: 0;
   &::-webkit-search-cancel-button {
     -webkit-appearance: none;
+    display: block;
     width: 16px;
     height: 16px;
     background: url('/images/x.png') no-repeat center;

stylesheets/manifest.css

@@ -63,6 +63,9 @@ body {
 button {
   cursor: pointer; }
 
+a {
+  color: #2090ea; }
+
 .inactive button.back {
   background: url("/images/back.png") no-repeat center center; }
 
@@ -497,6 +500,7 @@ input.search {
   outline: 0; }
   input.search::-webkit-search-cancel-button {
     -webkit-appearance: none;
+    display: block;
     width: 16px;
     height: 16px;
     background: url("/images/x.png") no-repeat center;
@@ -645,7 +649,7 @@ input.search {
     overflow-y: scroll; }
     .conversation .panel .container {
       padding-top: 20px;
-      max-width: 910px;
+      max-width: 950px;
       margin: 0 auto;
       padding: 20px; }
   .conversation .main.panel {
@@ -668,6 +672,10 @@ input.search {
         padding: 2em 20px 0;
         overflow-y: auto; }
 
+.key-verification label {
+  display: block;
+  margin-bottom: 10px;
+  font-size: small; }
 .key-verification .key, .key-verification .placeholder {
   padding: 0 1em;
   -webkit-user-select: text; }
@@ -675,7 +683,7 @@ input.search {
   display: inline-block;
   font-family: monospace;
   padding: 10px;
-  margin: 10px;
+  margin-bottom: 20px;
   background: #f3f3f3;
   border: solid 1px #d9d9d9;
   border-radius: 5px; }
@@ -683,10 +691,16 @@ input.search {
   font-weight: bold; }
 
 .message-detail .key-conflict-dialogue {
-  background: #F3F3A7;
   border-radius: 5px;
-  padding: 20px;
-  margin: 20px; }
+  margin: 20px 0; }
+  .message-detail .key-conflict-dialogue .header {
+    border-radius: 5px 5px 0 0;
+    background: #F3F3A7;
+    margin: 0;
+    padding: 10px 20px; }
+  .message-detail .key-conflict-dialogue .content {
+    padding: 20px;
+    border: 2px solid #F3F3A7; }
   .message-detail .key-conflict-dialogue button.resolve {
     outline: none;
     border: none;
@@ -699,9 +713,6 @@ input.search {
     background: #2090ea;
     margin-left: 20px; }
   .message-detail .key-conflict-dialogue .hideKeys, .message-detail .key-conflict-dialogue .showKeys {
-    color: #2090ea;
-    text-decoration: underline;
-    cursor: pointer;
     float: right;
     line-height: 36px; }
 .message-detail .message-container {