Updated styling.

Reworded descriptions and titles.

background.html

@@ -606,27 +606,29 @@
           <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>
+          <h4 class='section-toggle'>Restore using seed</h4>
           <div class='standalone-mnemonic section-content'>
             <div class='standalone-mnemonic-inputs'>
-              <input class='form-control' type='text' id='mnemonic' placeholder='Mnemonic' autocomplete='off' spellcheck='false' />
-              <select id='mnemonic-language'></select>
+              <input class='form-control' type='text' id='mnemonic' placeholder='Mnemonic Seed' autocomplete='off' spellcheck='false' />
+              <div class='select-container'>
+                <select id='mnemonic-language'></select>
+              </div>
             </div>
-            <a class='button' id='register-mnemonic'>Register</a>
+            <a class='button' id='register-mnemonic'>Restore</a>
             <div id='error' class='collapse'></div>
             <div id=status></div>
           </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.
+              Please save the seed 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>
-              <a class='button' id='copy-mnemonic'>Copy Mnemonic</a>
+              <a class='button' id='generate-mnemonic'>Generate Seed</a>
+              <a class='button' id='copy-mnemonic'>Copy Seed</a>
               <a class='button' id='register' data-loading-text='Please wait...'>Register</a>
             </div>
           </div>

stylesheets/_conversation.scss

@@ -276,7 +276,7 @@
     display: block;
     max-height: 100px;
     padding: 10px;
-    border-radius: 2px;
+    border-radius: 4px;
     background-color: $color-loki-light-gray;
     color: $color-light-90;
     border: 1px solid rgba(0, 0, 0, 0.2);
@@ -392,7 +392,7 @@
       margin-bottom: 15px;
       border: 0;
       outline: none;
-      border-radius: 100px;
+      border-radius: 4px;
       background-color: $color-loki-light-gray;
     }
 

stylesheets/_global.scss

@@ -826,11 +826,38 @@ textarea {
 
   .section-toggle {
     background: $color-dark-75;
+
+    &:first-of-type {
+      border-radius: 8px 8px 0 0;
+    }
+
+    &:last-of-type {
+      border-radius: 0 0 8px 8px;
+    }
+  }
+
+  .section-toggle-visible:last-of-type {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
   .section-content {
     padding: 1em 0;
     background-color: $color-dark-72;
+
+    &:last-of-type {
+      border-radius: 0 0 8px 8px;
+    }
+  }
+
+  #display-name {
+    font-weight: bold;
+    font-size: 25px;
+    border-radius: 100px;
+
+    &:focus {
+      outline: none;
+    }
   }
 
   #status {
@@ -853,14 +880,18 @@ textarea {
 
   input {
     border: 1px solid $color-light-60;
-    color: $color-dark-05;
-    background-color: $color-gray-95;
+    border-radius: 4px;
 
     &:focus {
       outline: solid 1px $blue;
     }
   }
 
+  .button {
+    background: $color-loki-green-gradient;
+    border-radius: 100px;
+  }
+
   #mnemonic-display {
     margin: 2em 8px;
     font-size: 16px;
@@ -882,6 +913,55 @@ textarea {
     background: $grey;
   }
 
+  .select-container {
+    position: relative;
+    display: block;
+    width: 10em;
+    line-height: 2.8;
+    background: white;
+    overflow: hidden;
+    border-radius: .25em;
+
+    select {
+      // Reset select
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      -ms-appearance: none;
+      appearance: none;
+      outline: 0;
+      box-shadow: none;
+      border: 0 !important;
+      background: white;
+      background-image: none;
+
+      // Our own stlying
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0 0 0 .5em;
+      color: black;
+      cursor: pointer;
+
+      ::-ms-expand {
+        display: none;
+      }
+    }
+
+    &:after {
+      content: '\25BC';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      padding: 0 1em;
+      background: $color-dark-85;
+      pointer-events: none;
+      -webkit-transition: .25s all ease;
+      -o-transition: .25s all ease;
+      transition: .25s all ease;
+    }
+  }
+
   @media (min-height: 750px) and (min-width: 700px) {
     .display-name-header {
       font-size: 18px;

stylesheets/_variables.scss

@@ -31,6 +31,7 @@ $color-loki-dark-gray: #323232;
 $color-loki-extra-dark-gray: #101010;
 $color-loki-green: #3bd110;
 $color-loki-green-dark: #32b10e;
+$color-loki-green-gradient: linear-gradient(to right, rgb(120, 190, 32) 0%, rgb(0, 133, 34) 100%);
 
 // New colors