From 48ad93b8aea86ee124d0a757ee1ed4492cb29f81 Mon Sep 17 00:00:00 2001
From: Javier <javier@bitpay.com>
Date: Thu, 18 Aug 2016 13:15:25 -0300
Subject: [PATCH] fix UI

---
 public/views/join.html | 56 ++++++++++++++++++++++++------------------
 src/sass/main.scss     |  8 ++++++
 2 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/public/views/join.html b/public/views/join.html
index 8088f78ea..f362e0c90 100644
--- a/public/views/join.html
+++ b/public/views/join.html
@@ -16,31 +16,39 @@
 
       <div class="list">
 
-        <label class="item item-input item-stacked-label">
-          <span class="input-label" translate>Your nickname</span>
-          <input type="text"
-                 placeholder="{{'John'|translate}}"
-                 name="myName"
-                 ng-model="myName"
-                 ng-required="true">
-        </label>
+        <div class="row">
+          <div class="col">
+            <label class="item item-input item-stacked-label item-border-off">
+              <span class="input-label" translate>Your nickname</span>
+              <input type="text"
+              placeholder="{{'John'|translate}}"
+              name="myName"
+              ng-model="myName"
+              ng-required="true">
+            </label>
+          </div>
+        </div>
 
-        <qr-scanner class="button button-clear button-positive" on-scan="join.onQrCodeScanned(data)"></qr-scanner>
-        <label class="item item-input item-stacked-label">
-          <span class="input-label">
-            Wallet Invitation
-          </span>
-          <i class="icon ion-checkmark-circled balanced" ng-show="joinForm.secret.$valid &&
-          !joinForm.secret.$pristine && secret"></i>
-          <i class="icon ion-close-circled assertive" ng-show="joinForm.secret.$invalid &&
-          !joinForm.secret.$pristine && secret"></i>
-          <input id="secret"
-                 type="text"
-                 placeholder="{{'Paste invitation here'|translate}}"
-                 name="secret"
-                 ng-model="secret"
-                 wallet-secret required>
-        </label>
+        <div class="row">
+          <div class="col col-90">
+            <label class="item item-input item-stacked-label item-border-off">
+              <span class="input-label" translate>Wallet Invitation</span>
+              <i class="icon ion-checkmark-circled balanced" ng-show="joinForm.secret.$valid &&
+              !joinForm.secret.$pristine && secret"></i>
+              <i class="icon ion-close-circled assertive" ng-show="joinForm.secret.$invalid &&
+              !joinForm.secret.$pristine && secret"></i>
+              <input id="secret"
+                     type="text"
+                     placeholder="{{'Paste invitation here'|translate}}"
+                     name="secret"
+                     ng-model="secret"
+                     wallet-secret required>
+            </label>
+          </div>
+          <div class="col text-center">
+            <qr-scanner class="qr-icon size-24" on-scan="join.onQrCodeScanned(data)"></qr-scanner>
+          </div>
+        </div>
 
         <ion-toggle ng-model="showAdv" toggle-class="toggle-stable">
           <span translate ng-show="!showAdv">Show advanced options</span>
diff --git a/src/sass/main.scss b/src/sass/main.scss
index eab415287..2e53a22ae 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -930,6 +930,14 @@ ul.wallet-selection.wallets {
   font-weight: 700;
 }
 
+.qr-icon {
+  line-height: 45px;
+}
+
+.item-border-off {
+  border-style: none;
+}
+
 /*
  * Calculator
  */