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
This commit is contained in:
Scott Nonnenberg 2017-05-23 15:22:02 -07:00
parent 931441a057
commit d294cc96a5
3 changed files with 8 additions and 6 deletions

View file

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

View file

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

View file

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