Added mnemonic warning.

background.html

@@ -603,6 +603,7 @@
         <div class='step-body'>
           <div class='header'>Create your Loki Messenger Account</div>
 
+          <div class='display-name-header'>Enter a name that will be shown to all your contacts</div>
           <input class='form-control' type='text' id='display-name' placeholder='Display Name (optional)' autocomplete='off' spellcheck='false' maxlength='25'>
 
           <h4 class='section-toggle'>Register using mnenomic</h4>
@@ -617,6 +618,11 @@
           </div>
           <h4 class='section-toggle section-toggle-visible'>Register a new account</h4>
           <div class='standalone-register section-content'>
+            <div class='standalone-register-warning'>
+              Please save the mnemonic words below in a safe location.
+              </br>
+              They can be used to restore your account if you lose access or migrate to a new device.
+            </div>
             <div id='mnemonic-display' />
             <div class='standalone-register-buttons'>
               <a class='button' id='generate-mnemonic'>Generate Mnemonic</a>

stylesheets/_global.scss

@@ -802,11 +802,13 @@ textarea {
 
 .standalone-fullscreen {
   background: $color-dark-85;
+  overflow-y: auto;
 }
 
 #standalone {
   color: $color-dark-05;
   height: auto;
+  padding: 0;
 
   ::-webkit-scrollbar-track {
     background: $color-dark-85;
@@ -860,11 +862,39 @@ textarea {
   }
 
   #mnemonic-display {
-    margin: 8px;
-    margin-top: 0;
+    margin: 2em 8px;
     font-size: 16px;
     font-style: italic;
   }
+
+  .standalone-register-warning {
+    font-weight: bold;
+    font-size: 16px;
+    margin: 0px 8px;
+  }
+
+  .display-name-header {
+    margin-bottom: 8px;
+    font-size: 14px;
+  }
+
+  #generate-mnemonic, #copy-mnemonic {
+    background: $grey;
+  }
+
+  @media (min-height: 750px) and (min-width: 700px) {
+    .display-name-header {
+      font-size: 18px;
+    }
+
+    .standalone-register-warning {
+      font-size: 20px;
+    }
+
+    #mnemonic-display {
+      font-size: 20px;
+    }
+  }
 }
 
 //yellow border fix