Update verification-related strings to better match mobile app

FREEBIE

_locales/en/messages.json

@@ -34,7 +34,7 @@
       }
     },
     "youMarkedAsVerified": {
-      "message": "You marked $name$ as verified.",
+      "message": "You marked your safety number with $name$ as verified.",
       "description": "Shown in the conversation history when the user marks a contact as verified.",
       "placeholders": {
         "name": {
@@ -44,7 +44,7 @@
       }
     },
     "youMarkedAsNotVerified": {
-      "message": "You marked $name$ as not verified.",
+      "message": "You marked your safety number with $name$ as unverified.",
       "description": "Shown in the conversation history when the user marks a contact as not verified, whether on the safety number screen or by dismissing a banner or dialog.",
       "placeholders": {
         "name": {
@@ -54,7 +54,7 @@
       }
     },
     "youMarkedAsVerifiedOtherDevice": {
-      "message": "You marked $name$ as verified on another device.",
+      "message": "You marked your safety number with $name$ as verified from another device.",
       "description": "Shown in the conversation history when we discover that the user marked a contact as verified on another device.",
       "placeholders": {
         "name": {
@@ -64,7 +64,7 @@
       }
     },
     "youMarkedAsNotVerifiedOtherDevice": {
-      "message": "You marked $name$ as not verified on anther device.",
+      "message": "You marked your safety number with $name$ as not verified from another device.",
       "description": "Shown in the conversation history when we discover that the user marked a contact as not verified on another device.",
       "placeholders": {
         "name": {
@@ -158,10 +158,13 @@
       "description": "Label for a button to accept a new safety number"
     },
     "verify": {
-      "message": "Verify"
+      "message": "Mark as verified"
+    },
+    "unverify": {
+      "message": "Clear verification"
     },
     "isVerified": {
-      "message": "$name$ is verified.",
+      "message": "You have verified your safety number with $name$.",
       "description": "Summary state shown at top of the safety number screen if user has verified contact.",
       "placeholders": {
         "name": {
@@ -171,7 +174,7 @@
       }
     },
     "isNotVerified": {
-      "message": "$name$ is not verified.",
+      "message": "You have not verified your safety number with $name$.",
       "description": "Summary state shown at top of the safety number screen if user has not verified contact.",
       "placeholders": {
         "name": {
@@ -306,9 +309,6 @@
     "showSafetyNumber": {
       "message": "Show safety number"
     },
-    "markAsNotVerified": {
-      "message": "Mark as not verified"
-    },
     "verifyHelp": {
       "message": "If you wish to verify the security of your end-to-end encryption with $name$, compare the numbers above with the numbers on their device.",
       "placeholders": {

background.html

@@ -337,15 +337,6 @@
   </script>
   <script type='text/x-tmpl-mustache' id='key-verification'>
     <div class='container'>
-      <div class='summary'>
-        {{ #isVerified }}
-          <span class='icon verified'></span>
-        {{ /isVerified }}
-        {{ ^isVerified }}
-          <span class='icon shield'></span>
-        {{ /isVerified }}
-        {{ verifiedStatus }}
-      </div>
       {{ ^has_their_key }}
         <div class='placeholder'>{{ their_key_unknown }}</div>
       {{ /has_their_key }}
@@ -358,6 +349,15 @@
       {{ /has_their_key }}
       {{ verifyHelp }}
       <p> {{> link_to_support }} </p>
+      <div class='summary'>
+        {{ #isVerified }}
+          <span class='icon verified'></span>
+        {{ /isVerified }}
+        {{ ^isVerified }}
+          <span class='icon shield'></span>
+        {{ /isVerified }}
+        {{ verifiedStatus }}
+      </div>
       <div class='verify'>
         <button class='verify grey'>
           {{ verifyButton }}

js/models/conversations.js

@@ -142,8 +142,7 @@
                 || (beginningVerified !== verified && verified !== UNVERIFIED)
                 || (keychange && verified === VERIFIED)) {
 
-                var local = !options.viaSyncMessage && !options.viaContactSync;
+                this.addVerifiedChange(this.id, verified === VERIFIED, {local: !options.viaSyncMessage});
-                this.addVerifiedChange(this.id, verified === VERIFIED, {local: local});
             }
             if (!options.viaSyncMessage) {
                 return this.sendVerifySyncMessage(this.id, verified);
@@ -302,7 +301,7 @@
         if (this.isPrivate()) {
             var groups = ConversationController.getAllGroupsInvolvingId(id);
             _.forEach(groups, function(group) {
-                group.addVerifiedChange(id, verified);
+                group.addVerifiedChange(id, verified, options);
             });
         }
     },

js/views/key_verification_view.js

@@ -75,7 +75,7 @@
             var name = this.model.getTitle();
             var yourSafetyNumberWith = i18n('yourSafetyNumberWith', name);
             var isVerified = this.model.isVerified();
-            var verifyButton = isVerified ? i18n('markAsNotVerified') : i18n('verify');
+            var verifyButton = isVerified ? i18n('unverify') : i18n('verify');
             var verifiedStatus = isVerified ? i18n('isVerified', name) : i18n('isNotVerified', name);
 
             return {

stylesheets/_conversation.scss

@@ -77,17 +77,16 @@
 }
 
 .key-verification {
+  .container {
+    max-width: 750px;
+  }
+
   label {
     display: block;
     margin: 10px 0;
     font-size: $font-size-small;
   }
 
-  .summary {
-    margin: 10px 0;
-    text-align: center;
-  }
-
   .icon {
     height: 1.25em;
     width: 1.25em;
@@ -135,6 +134,11 @@
     }
   }
 
+  .summary {
+    margin: 30px 0 10px;
+    text-align: center;
+  }
+
   div.verify {
     text-align: center;
   }
@@ -142,9 +146,8 @@
     border-radius: 5px;
     font-weight: bold;
     padding: 10px;
+    margin: 0;
   }
-
-
 }
 
 .message-detail {

stylesheets/manifest.css

@@ -1083,13 +1083,12 @@ input.search {
 .discussion-container {
   background-color: #eee; }
 
+.key-verification .container {
+  max-width: 750px; }
 .key-verification label {
   display: block;
   margin: 10px 0;
   font-size: 0.92857em; }
-.key-verification .summary {
-  margin: 10px 0;
-  text-align: center; }
 .key-verification .icon {
   height: 1.25em;
   width: 1.25em;
@@ -1129,12 +1128,16 @@ input.search {
   .key-verification .qr img {
     display: inline-block;
     max-width: 100%; }
+.key-verification .summary {
+  margin: 30px 0 10px;
+  text-align: center; }
 .key-verification div.verify {
   text-align: center; }
 .key-verification button.verify {
   border-radius: 5px;
   font-weight: bold;
-  padding: 10px; }
+  padding: 10px;
+  margin: 0; }
 
 .message-detail {
   background-color: #eee; }

test/index.html

@@ -323,15 +323,6 @@
   </script>
   <script type='text/x-tmpl-mustache' id='key-verification'>
     <div class='container'>
-      <div class='summary'>
-        {{ #isVerified }}
-          <span class='icon verified'></span>
-        {{ /isVerified }}
-        {{ ^isVerified }}
-          <span class='icon shield'></span>
-        {{ /isVerified }}
-        {{ verifiedStatus }}
-      </div>
       {{ ^has_their_key }}
         <div class='placeholder'>{{ their_key_unknown }}</div>
       {{ /has_their_key }}
@@ -343,6 +334,20 @@
         </div>
       {{ /has_their_key }}
       <p> {{> link_to_support }} </p>
+      <div class='summary'>
+        {{ #isVerified }}
+          <span class='icon verified'></span>
+        {{ /isVerified }}
+        {{ ^isVerified }}
+          <span class='icon shield'></span>
+        {{ /isVerified }}
+        {{ verifiedStatus }}
+      </div>
+      <div class='verify'>
+        <button class='verify grey'>
+          {{ verifyButton }}
+        </button>
+      </div>
     </div>
   </script>
   <!-- index -->