From f00574140a63784956db13094f47fb4148301dbf Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Thu, 13 Oct 2016 11:45:45 -0300
Subject: [PATCH] Fix styling for import/export views

---
 src/sass/views/export.scss       |  15 ++++
 src/sass/views/import.scss       |  12 +++
 src/sass/views/tab-receive.scss  |   2 +-
 src/sass/views/views.scss        |   2 +
 www/views/export.html            |   8 +-
 www/views/import.html            |  13 ++--
 www/views/tab-export-file.html   | 126 ++++++++++++++++---------------
 www/views/tab-export-qrCode.html |  10 +--
 www/views/tab-import-phrase.html |  20 ++---
 9 files changed, 119 insertions(+), 89 deletions(-)
 create mode 100644 src/sass/views/export.scss
 create mode 100644 src/sass/views/import.scss

diff --git a/src/sass/views/export.scss b/src/sass/views/export.scss
new file mode 100644
index 000000000..61ecfd63d
--- /dev/null
+++ b/src/sass/views/export.scss
@@ -0,0 +1,15 @@
+#export {
+  .list {
+    background-color: #fff;
+  }
+  .top-tabs.row {
+    padding: 0;
+  }
+  .top-tabs .col {
+    font-size: 14px;
+    cursor: pointer;
+    padding: 10px 5px;
+    border-bottom-width: 2px;
+    border-bottom-color: #172565;
+  }
+}
diff --git a/src/sass/views/import.scss b/src/sass/views/import.scss
new file mode 100644
index 000000000..1edb3406c
--- /dev/null
+++ b/src/sass/views/import.scss
@@ -0,0 +1,12 @@
+#import {
+  .top-tabs.row {
+    padding: 0;
+  }
+  .top-tabs .col {
+    font-size: 14px;
+    cursor: pointer;
+    padding: 10px 5px;
+    border-bottom-width: 2px;
+    border-bottom-color: #172565;
+  }
+}
diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss
index 0192e213f..e38b8be30 100644
--- a/src/sass/views/tab-receive.scss
+++ b/src/sass/views/tab-receive.scss
@@ -14,7 +14,7 @@
     background: #fff;
     .incomplete {
       padding: 50px;
-      height: 350px;
+      height: 352px;
       .title {
         padding: 20px;
         font-size: 25px;
diff --git a/src/sass/views/views.scss b/src/sass/views/views.scss
index 7ecf39b7a..0112476f3 100644
--- a/src/sass/views/views.scss
+++ b/src/sass/views/views.scss
@@ -17,6 +17,8 @@
 @import "zero-state";
 @import "onboarding/onboarding";
 @import "includes/actionSheet";
+@import "export";
+@import "import";
 @import "includes/walletActivity";
 @import "includes/wallets";
 @import "includes/modals/modals";
diff --git a/www/views/export.html b/www/views/export.html
index bdec27e4a..b6117ced1 100644
--- a/www/views/export.html
+++ b/www/views/export.html
@@ -1,4 +1,4 @@
-<ion-view>
+<ion-view id="export">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>{{'Export wallet' | translate}}</ion-nav-title>
     <ion-nav-back-button>
@@ -6,11 +6,11 @@
   </ion-nav-bar>
 
   <ion-content ng-init="file = true">
-    <div class="row text-center">
-      <div class="col" ng-click="file = true" ng-style="file && {'border-bottom': '2px solid'}">
+    <div class="row text-center top-tabs">
+      <div class="col" ng-click="file = true" ng-style="file && {'border-bottom-style': 'solid'}">
         <span class="" translate>File/Text</span>
       </div>
-      <div class="col" ng-click="file = false" ng-style="!file && {'border-bottom': '2px solid'}">
+      <div class="col" ng-click="file = false" ng-style="!file && {'border-bottom-style': 'solid'}">
         <span class="" translate>QR Code</span>
       </div>
     </div>
diff --git a/www/views/import.html b/www/views/import.html
index 45bda015e..b5ce0d8fb 100644
--- a/www/views/import.html
+++ b/www/views/import.html
@@ -1,4 +1,4 @@
-<ion-view ng-controller="tabsController" ng-init="importInit()" class="settings">
+<ion-view id="import" ng-controller="tabsController" ng-init="importInit()" class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>{{'Import Wallet' | translate}}</ion-nav-title>
     <ion-nav-back-button>
@@ -6,14 +6,17 @@
   </ion-nav-bar>
 
   <ion-content ng-controller="importController" ng-init="phrase = true; init()">
-    <div class="row text-center">
-      <div class="col" ng-click="phrase = true; file = hardware = false; showAdv = false" ng-style="phrase && {'border-bottom': '2px solid'}">
+    <div class="row text-center top-tabs">
+      <div class="col" ng-click="phrase = true; file = hardware = false; showAdv = false" ng-style="phrase &&
+        {'border-bottom-style': 'solid'}">
         <span translate>Recovery phrase</span>
       </div>
-      <div class="col" ng-click="file = true; phrase = hardware = false; showAdv = false" ng-style="file && {'border-bottom': '2px solid'}">
+      <div class="col" ng-click="file = true; phrase = hardware = false; showAdv = false" ng-style="file &&
+        {'border-bottom-style': 'solid'}">
         <span translate>File/Text</span>
       </div>
-      <div class="col" ng-click="hardware = true; phrase = file = false; showAdv = false" ng-style="hardware && {'border-bottom': '2px solid'}">
+      <div class="col" ng-click="hardware = true; phrase = file = false; showAdv = false" ng-style="hardware &&
+        {'border-bottom-style': 'solid'}">
         <span translate>Hardware wallet</span>
       </div>
     </div>
diff --git a/www/views/tab-export-file.html b/www/views/tab-export-file.html
index f9a67b08a..8198f5cec 100644
--- a/www/views/tab-export-file.html
+++ b/www/views/tab-export-file.html
@@ -5,7 +5,7 @@
   </div>
 
   <form name="exportForm" novalidate>
-    <div class="card">
+    <div class="list">
       <label class="item item-input item-stacked-label">
         <span class="input-label" translate>Set up a password</span>
         <input type="password" placeholder="{{'Your password'|translate}}" ng-model="formData.password">
@@ -15,75 +15,77 @@
         <span class="input-label" translate>Repeat the password</span>
         <input type="password" placeholder="{{'Repeat password'|translate}}" ng-model="formData.repeatpassword">
       </label>
+
+      <div ng-show="canSign">
+        <div class="item item-divider"></div>
+        <a class="item" ng-click="showAdvChange()">
+          <span translate ng-show="!showAdv">Show advanced options</span>
+          <span translate ng-show="showAdv">Hide advanced options</span>
+        </a>
+
+        <ion-checkbox ng-show="showAdv" ng-model="formData.noSignEnabled" class="checkbox-balanced" ng-change="noSignEnabledChange(); resizeView()">
+          <span class="toggle-label" translate>Do not include private key</span>
+        </ion-checkbox>
+      </div>
+
+      <div class="box-notification warning ng-hide" ng-show="!canSign">
+        <span class="size-14">
+          <i class="ion-alert-circled"></i>
+          <span translate>
+            WARNING: The private key of this wallet is not available. The export allows to check the wallet balance, transaction history, and create spend proposals from the export. However, does not allow to approve (sign) proposals, so <b>funds will not be accessible from the export</b>.
+          </span>
+        </span>
+      </div>
+
+      <div class="box-notification warning ng-hide" ng-show="formData.noSignEnabled">
+        <span class="size-14">
+          <i class="ion-alert-circled"></i>
+          <span translate>
+          WARNING: Not including the private key allows to check the wallet balance, transaction history, and create spend proposals from the export. However, does not allow to approve (sign) proposals, so <b>funds will not be accessible from the export</b>.
+          </span>
+        </span>
+      </div>
     </div>
-  </form>
 
-  <div class="list card" ng-show="canSign">
-    <a class="item" ng-click="showAdvChange()">
-      <span translate ng-show="!showAdv">Show advanced options</span>
-      <span translate ng-show="showAdv">Hide advanced options</span>
-    </a>
-
-    <ion-checkbox ng-show="showAdv" ng-model="formData.noSignEnabled" class="checkbox-balanced" ng-change="noSignEnabledChange(); resizeView()">
-      <span class="toggle-label" translate>Do not include private key</span>
-    </ion-checkbox>
-  </div>
-
-  <div class="box-notification error ng-hide" ng-show="!canSign">
-    <span class="size-14">
-      <i class="ion-alert-circled"></i>
-      <span translate>
-        WARNING: The private key of this wallet is not available. The export allows to check the wallet balance, transaction history, and create spend proposals from the export. However, does not allow to approve (sign) proposals, so <b>funds will not be accessible from the export</b>.
-      </span>
-    </span>
-  </div>
-
-  <div class="box-notification error ng-hide" ng-show="formData.noSignEnabled">
-    <span class="size-14">
-      <i class="ion-alert-circled"></i>
-      <span translate>
-      WARNING: Not including the private key allows to check the wallet balance, transaction history, and create spend proposals from the export. However, does not allow to approve (sign) proposals, so <b>funds will not be accessible from the export</b>.
-      </span>
-    </span>
-  </div>
-
-  <button
-    ng-click="downloadWalletBackup()"
-    class="button button-standard button-primary"
-    ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
-    ng-style="{'background-color':wallet.color}"
-    ng-show="!isSafari && !isCordova">
-    <i class="fi-download"></i>
-    <span translate>Download</span>
-  </button>
-
-  <button
-    ng-click="viewWalletBackup()"
-    class="button button-standard button-primary"
-    ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
-    ng-style="{'background-color':wallet.color}"
-    ng-show="isSafari && !isCordova">
-    <i class="fi-eye"></i>
-    <span translate>View</span>
-  </button>
-
-  <div ng-show="isCordova">
-    <h4 translate>Export options</h4>
-    <button class="button button-standard button-primary"
+    <button
+      ng-click="downloadWalletBackup()"
+      class="button button-standard button-primary"
       ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
       ng-style="{'background-color':wallet.color}"
-      ng-click="copyWalletBackup()">
-      <i class="fi-clipboard-pencil"></i>
-      <span translate>Copy to clipboard</span></button>
-    <button class="button button-standard button-primary" ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
+      ng-show="!isSafari && !isCordova">
+      <i class="fi-download"></i>
+      <span translate>Download</span>
+    </button>
+
+    <button
+      ng-click="viewWalletBackup()"
+      class="button button-standard button-primary"
+      ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
       ng-style="{'background-color':wallet.color}"
-      ng-click="sendWalletBackup()"><i class="fi-mail"></i>
-      <span translate>Send by email</span></button>
-  </div>
+      ng-show="isSafari && !isCordova">
+      <i class="fi-eye"></i>
+      <span translate>View</span>
+    </button>
+
+    <div ng-show="isCordova">
+      <h4 translate>Export options</h4>
+      <button class="button button-standard button-primary"
+        ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
+        ng-style="{'background-color':wallet.color}"
+        ng-click="copyWalletBackup()">
+        <i class="fi-clipboard-pencil"></i>
+        <span translate>Copy to clipboard</span></button>
+      <button class="button button-standard button-primary" ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
+        ng-style="{'background-color':wallet.color}"
+        ng-click="sendWalletBackup()"><i class="fi-mail"></i>
+        <span translate>Send by email</span></button>
+    </div>
+  </form>
 </div>
 
-<div ng-show="backupWalletPlainText" class="text-center card">
+<div ng-show="backupWalletPlainText" class="text-center list">
   <label class="item item-input item-stacked-label">
+    <span class="input-label" translate>Backup wallet</span>
     <textarea rows="12">{{backupWalletPlainText}}</textarea>
   </label>
   <div class="item text-gray item-icon-left">
diff --git a/www/views/tab-export-qrCode.html b/www/views/tab-export-qrCode.html
index 18ca08122..8cb3ec127 100644
--- a/www/views/tab-export-qrCode.html
+++ b/www/views/tab-export-qrCode.html
@@ -1,10 +1,10 @@
-<div class="m20t text-gray" ng-show="formData.supported">
-  <div class="text-center m20b">
+<div class="list" ng-show="formData.supported">
+  <div class="text-center m20t">
     <qrcode size="220" version="8" error-correction-level="M" data="{{formData.exportWalletInfo}}"></qrcode>
   </div>
-  <div class="text-center size-12 m10" translate>From the destination device, go to Add wallet &gt; Import wallet and scan this QR code</div>
+  <div class="text-center size-12 m20v" translate>From the destination device, go to Add wallet &gt; Import wallet and scan this QR code</div>
 </div>
 
-<div class="m20t text-gray" ng-show="!formData.supported">
-  <div class="text-center size-12 m10" translate>Exporting via QR not supported for this wallet</div>
+<div class="list" ng-show="!formData.supported">
+  <div class="text-center size-12 m20v" translate>Exporting via QR not supported for this wallet</div>
 </div>
diff --git a/www/views/tab-import-phrase.html b/www/views/tab-import-phrase.html
index 12f272821..494eca1ca 100644
--- a/www/views/tab-import-phrase.html
+++ b/www/views/tab-import-phrase.html
@@ -12,20 +12,16 @@
 
 <form name="importForm12" ng-submit="importMnemonic(importForm12)" novalidate>
   <div class="list settings-list settings-input-group">
-    <div class="row">
-      <div class="col col-90">
-        <label class="item item-input item-stacked-label no-border">
-          <span class="input-label" translate>Type the Recovery Phrase (usually 12 words)</span>
-          <textarea ng-model="formData.words"
-                    rows="3"
-                    autocapitalize="off"
-                    spellcheck="false"></textarea>
-        </label>
-      </div>
-      <div class="col text-center">
+    <label class="item item-input item-stacked-label no-border">
+      <span class="input-label" translate>Type the Recovery Phrase (usually 12 words)</span>
+      <div class="qr-scan-icon">
         <qr-scanner class="qr-icon size-24" on-scan="processWalletInfo(data)"></qr-scanner>
+        <textarea ng-model="formData.words"
+                  rows="3"
+                  autocapitalize="off"
+                  spellcheck="false"></textarea>
       </div>
-    </div>
+    </label>
 
     <div class="item item-divider"></div>