Tweak styles on key verification view

// FREEBIE

background.html

@@ -239,9 +239,11 @@
       {{ ^their_key }}
         <div class='placeholder'>{{ their_key_unknown }}</div>
       {{ /their_key }}
-      <div class='key'>
+      {{ #has_their_key }}
-        {{ #their_key }} <span>{{ . }}</span> {{ /their_key }}
+        <div class='key'>
-      </div>
+          {{ #their_key }} <span>{{ . }}</span> {{ /their_key }}
+        </div>
+      {{ /has_their_key }}
       <p> {{yourIdentity}} </p>
       <div class='key'>
         {{ #your_key  }} <span>{{ . }}</span> {{ /your_key  }}

js/views/key_verification_view.js

@@ -31,7 +31,8 @@
                 theirIdentity: i18n('theirIdentity'),
                 their_key_unknown: i18n('theirIdentityUnknown'),
                 your_key: this.splitKey(this.model.your_key),
-                their_key: this.splitKey(this.model.their_key)
+                their_key: this.splitKey(this.model.their_key),
+                has_their_key: this.model.their_key !== undefined
             };
         }
     });

stylesheets/_conversation.scss

@@ -47,6 +47,7 @@
 
 .key-verification {
   background: white;
+  padding: 20px 10px;
 
   p {
     padding: 1em;
@@ -57,6 +58,11 @@
   }
   .key {
     font-family: monospace;
+    padding: 10px;
+    margin: 10px;
+    background: $grey_l;
+    border: solid 1px $grey_l2;
+    border-radius: 5px;
   }
   .placeholder {
     font-weight: bold;

stylesheets/manifest.css

@@ -653,14 +653,20 @@ input.search {
         overflow-y: auto; }
 
 .key-verification {
-  background: white; }
+  background: white;
+  padding: 20px 10px; }
   .key-verification p {
     padding: 1em; }
   .key-verification .key, .key-verification .placeholder {
     padding: 0 1em;
     -webkit-user-select: text; }
   .key-verification .key {
-    font-family: monospace; }
+    font-family: monospace;
+    padding: 10px;
+    margin: 10px;
+    background: #f3f3f3;
+    border: solid 1px #d9d9d9;
+    border-radius: 5px; }
   .key-verification .placeholder {
     font-weight: bold; }