[WO-524] Cleanup login ui

* Make design more mobile friendly
* Make label for terms agreement clickable (easier for touch)
* Button width is 100% for mobile
* Let user import key file as alternative to sync
* Make key import option more clear login-initial
* Make whiteout logo smaller in mobile mode

src/sass/views/_login.scss

@@ -9,20 +9,15 @@
 
     .logo {
         max-width: 700px;
-        margin: 75px auto;
+        margin: 45px auto;
         img {
             display: block;
-            max-width: 100%;
+            max-width: 50%;
             width: 320px;
-            margin-left: auto;
-            margin-right: auto;
         }
 
         @include respond-to(desktop) {
-            margin-top: 135px;
+            margin: 135px auto 75px;
-            img {
-                margin-left: 0;
-            }
         }
     }
 
@@ -39,6 +34,16 @@
             color: $color-blue;
         }
 
+        button, a.btn {
+            color: $btn-color;
+            margin-right: 10px;
+            margin-bottom: 10px;
+
+            @include respond-to(mobile) {
+                width: 100%;
+            }
+        }
+
         p, label {
             line-height: 150%;
         }
@@ -90,13 +95,6 @@
             color: green;
         }
 
-        .opt-in-terms {
-            .checkbox-wrapper {
-                margin-top: 0;
-                float: left;
-            }
-        }
-
         .popover-info {
             display: none; // hide on mobile
         }
@@ -119,9 +117,6 @@
 
 .view-login-initial {
     .content {
-        button {
-            margin-right: 10px;
-        }
     }
 }
 

src/tpl/login-initial.html

@@ -6,7 +6,8 @@
   <div class="content" ng-switch on="state.ui">
 
     <div ng-switch-when="1">
-      <p><b>Generate PGP key.</b> You can set a passphrase to protect your key on disk. This must be entered everytime you start the app. For no passphrase just press continue.</p><p>Alternatively you can also <a href="#" wo-touch="$event.preventDefault(); importKey()">import an existing PGP key</a>.</p>
+      <p><b>PGP key.</b> You can either import an existing PGP key or generate a new one.</p>
+      <p>If you want to generate a new key, you can set a passphrase to protect your key on disk.</p>
       <form>
         <div>
           <label class="input-error-message" ng-class="{'passphrase-label-ok': passphraseRating >= 2}">{{passphraseMsg}}</label><br>
@@ -15,13 +16,14 @@
           <span class="popover-info" data-icon-append="&#xe010;" popover="#passphrase-info"></span>
         </div>
 
-        <div class="opt-in-terms">
+        <div>
-          <div class="checkbox-wrapper"><input type="checkbox" ng-model="state.agree"></div>
+          <input type="checkbox" ng-model="state.agree" name="checkbox" id="checkbox_id">
-          <div>I agree to the Whiteout Networks <a href="https://whiteout.io/terms.html" target="_blank">Terms of Service</a> and have read the <a href="https://whiteout.io/privacy-service.html" target="_blank">Privacy Policy</a>.</div>
+          <label for="checkbox_id">I agree to the Whiteout Networks <a href="https://whiteout.io/terms.html" target="_blank">Terms of Service</a> and have read the <a href="https://whiteout.io/privacy-service.html" target="_blank">Privacy Policy</a>.</label>
         </div>
 
         <div>
-          <button type="submit" wo-touch="confirmPassphrase()" class="btn" ng-disabled="(state.confirmation || state.passphrase) && state.confirmation !== state.passphrase" tabindex="3">Continue</button>
+          <button wo-touch="importKey()" class="btn btn-alt">Import existing key</button>
+          <button type="submit" wo-touch="confirmPassphrase()" class="btn" ng-disabled="(state.confirmation || state.passphrase) && state.confirmation !== state.passphrase" tabindex="3">Generate new key</button>
         </div>
       </form>
     </div>

src/tpl/login-privatekey-download.html

@@ -6,13 +6,20 @@
   <div class="content">
 
     <div class="step" ng-show="step === 1">
-      <p><b>Key sync.</b> We have sent you an email containing a recovery token. Please copy and paste the identifier below.</p>
+      <p><b>Key sync.</b> We have sent you an email containing a recovery token. Please copy and paste the token below to download your key.</p>
+      <p>You can also just import the key file manually e.g. if you're on a device with USB access.</p>
 
       <input type="text" class="input-text" size="42" ng-model="recoveryToken" placeholder="Recovery token" focus-me="step === 1">
+
+      <div>
+        <a class="btn btn-alt" href="#login-new-device">Import key file</a>
+        <button class="btn" wo-touch="goForward()">Confirm token</button>
+      </div>
     </div>
 
     <div class="step" ng-show="step === 2">
       <p><b>Key sync.</b> Please enter the keychain code you wrote down during sync setup.</p>
+
       <input type="text" class="input-text code" size="4" maxlength="4" ng-model="code0" focus-me="step === 2" focus-next ng-paste="handlePaste($event)"> -
       <input type="text" class="input-text code" size="4" maxlength="4" ng-model="code1" focus-next> -
       <input type="text" class="input-text code" size="4" maxlength="4" ng-model="code2" focus-next> -
@@ -20,10 +27,10 @@
       <input type="text" class="input-text code" size="4" maxlength="4" ng-model="code4" focus-next> -
       <input type="text" class="input-text code" size="4" maxlength="4" ng-model="code5">
       <!--<a href="https://whiteout.io/revocation.html" title="Click here to reset your account." target="_blank">Lost your keychain code?</a>-->
-    </div>
 
       <div>
-      <button class="btn" wo-touch="goForward()">Continue</button>
+        <button class="btn" wo-touch="goForward()">Complete sync</button>
+      </div>
     </div>
 
   </div><!--/content-->