A few tweaks to safety number-related UI

* Show a pointer cursor on safety number change notification
* Add 'click to verify' to the text shown there
* Add ':' to the text shown on the safety number screen
* Limit the width of the safety number box, to force 3x4 layout
* Center the safety number box

FREEBIE

_locales/en/messages.json

@@ -530,7 +530,7 @@
       "description": "Description for safety numbers setting"
     },
     "keychanged": {
-      "message": "Your safety number with $name$ has changed.",
+      "message": "Your safety number with $name$ has changed. Click to verify.",
       "description": "",
       "placeholders": {
         "name": {
@@ -540,7 +540,7 @@
       }
     },
     "yourSafetyNumberWith": {
-      "message": "Your safety number with $name$",
+      "message": "Your safety number with $name$:",
       "description": "Heading for safety number view",
       "placeholders": {
         "name": {

stylesheets/_conversation.scss

@@ -70,10 +70,10 @@
     -webkit-user-select: text;
   }
   .key {
-    display: inline-block;
     font-family: monospace;
     padding: 10px;
-    margin-bottom: 20px;
+    margin: 20px auto 20px auto;
+    width: 16em;
     background: $grey_l;
     border: solid 1px $grey_l2;
     border-radius: $border-radius;
@@ -675,6 +675,7 @@ li.entry .error-icon-container {
 .message-list li.keychange {
   text-align: center;
   .content {
+    cursor: pointer;
     display: inline-block;
     padding: 5px 10px;
     background: #fff5c4;