From d294cc96a59070fe6b8a544c1e1ce003c5b19515 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@nonnenberg.com>
Date: Tue, 23 May 2017 15:22:02 -0700
Subject: [PATCH] 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      | 4 ++--
 stylesheets/_conversation.scss | 5 +++--
 stylesheets/manifest.css       | 5 +++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index 31f331b27..ac51afeee 100644
--- a/_locales/en/messages.json
+++ b/_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": {
diff --git a/stylesheets/_conversation.scss b/stylesheets/_conversation.scss
index b1a8b31fa..c18050791 100644
--- a/stylesheets/_conversation.scss
+++ b/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;
diff --git a/stylesheets/manifest.css b/stylesheets/manifest.css
index 9e829bb93..554e48a7d 100644
--- a/stylesheets/manifest.css
+++ b/stylesheets/manifest.css
@@ -1009,10 +1009,10 @@ input.search {
   padding: 0 1em;
   -webkit-user-select: text; }
 .key-verification .key {
-  display: inline-block;
   font-family: monospace;
   padding: 10px;
-  margin-bottom: 20px;
+  margin: 20px auto 20px auto;
+  width: 16em;
   background: #f3f3f3;
   border: solid 1px #d9d9d9;
   border-radius: 5px; }
@@ -1488,6 +1488,7 @@ li.entry .error-icon-container {
 .message-list li.keychange {
   text-align: center; }
   .message-list li.keychange .content {
+    cursor: pointer;
     display: inline-block;
     padding: 5px 10px;
     background: #fff5c4;