Merge pull request #438 from cmgustavo/bug/import-export-styling

Fix styling for import/export views

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;
+  }
+}

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;
+  }
+}

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;

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";

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="row text-center top-tabs">
-      <div class="col" ng-click="file = true" ng-style="file && {'border-bottom': '2px solid'}">
+      <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>

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="row text-center top-tabs">
-      <div class="col" ng-click="phrase = true; file = hardware = false; showAdv = false" ng-style="phrase && {'border-bottom': '2px solid'}">
+      <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>

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">
+    <button
-    <a class="item" ng-click="showAdvChange()">
+      ng-click="downloadWalletBackup()"
-      <span translate ng-show="!showAdv">Show advanced options</span>
+      class="button button-standard button-primary"
-      <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"
       ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
       ng-style="{'background-color':wallet.color}"
-      ng-click="copyWalletBackup()">
+      ng-show="!isSafari && !isCordova">
-      <i class="fi-clipboard-pencil"></i>
+      <i class="fi-download"></i>
-      <span translate>Copy to clipboard</span></button>
+      <span translate>Download</span>
-    <button class="button button-standard button-primary" ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
+    </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>
+      ng-show="isSafari && !isCordova">
-      <span translate>Send by email</span></button>
+      <i class="fi-eye"></i>
-  </div>
+      <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">

www/views/tab-export-qrCode.html

@@ -1,10 +1,10 @@
-<div class="m20t text-gray" ng-show="formData.supported">
+<div class="list" ng-show="formData.supported">
-  <div class="text-center m20b">
+  <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="list" ng-show="!formData.supported">
-  <div class="text-center size-12 m10" translate>Exporting via QR not supported for this wallet</div>
+  <div class="text-center size-12 m20v" translate>Exporting via QR not supported for this wallet</div>
 </div>

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">
+    <label class="item item-input item-stacked-label no-border">
-      <div class="col col-90">
+      <span class="input-label" translate>Type the Recovery Phrase (usually 12 words)</span>
-        <label class="item item-input item-stacked-label no-border">
+      <div class="qr-scan-icon">
-          <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">
         <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>