Merge branch 'ref/design' of https://github.com/bitpay/bitpay-wallet into feature/external_link_open_system_browser

# Conflicts:
#	www/views/tab-settings.html

.gitignore

@@ -84,6 +84,9 @@ Session.vim
 .netrwhist
 *~
 
+.tags
+.tags1
+
 # SASS
 src/sass/*.css
 .sass-cache

app-template/config-template.xml

@@ -16,18 +16,21 @@
     <preference name="iosPersistentFileLocation" value="Library" />
     <preference name="DisallowOverscroll" value="true"/>
     <preference name="HideKeyboardFormAccessoryBar" value="true"/>
-    <preference name="SplashScreen" value="copayscreen" />
-    <preference name="ShowSplashScreenSpinner" value="false" />
-    <preference name="AutoHideSplashScreen" value="false" />
-    <preference name="FadeSplashScreen" value="true" />
-    <preference name="FadeSplashScreenDuration" value="1" />
     <preference name="KeyboardDisplayRequiresUserAction" value="false" />
-    <preference name="StatusBarOverlaysWebView" value="true" />
     <preference name="StatusBarBackgroundColor" value="#1e3186" />
-    <preference name="StatusBarStyle" value="lightcontent" />
     <preference name="BackupWebStorage" value="none"/>
     <preference name="windows-target-version" value="8.1"/>
     <preference name="Orientation" value="default" />
+    <preference name="cordova-custom-config-stoponerror" value="true" />
+
+    <preference name="StatusBarOverlaysWebView" value="true" />
+    <preference name="StatusBarStyle" value="lightcontent" />
+
+    <preference name="ShowSplashScreenSpinner" value="false" />
+    <preference name="AutoHideSplashScreen" value="false" />
+    <preference name="FadeSplashScreen" value="true" />
+    <preference name="FadeSplashScreenDuration" value="100" />
+    <preference name="SplashMaintainAspectRatio" value="true" />
 
     <!-- Plugins -->
     <plugin name="cordova-plugin-device" spec="~1.1.3"/>
@@ -57,8 +60,9 @@
       <variable name="URL_SCHEME" value="UNUSED" />
     </plugin>
     <plugin name="phonegap-plugin-push" spec="~1.8.2">
-         <variable name="SENDER_ID" value="*PUSHSENDERID*"/>
+      <variable name="SENDER_ID" value="*PUSHSENDERID*"/>
-     </plugin>
+    </plugin>
+    <plugin name="cordova-custom-config" spec="~3.0.5" />
 
     <!-- Supported Platforms -->
     <engine name="ios" spec="~4.2.1" />
@@ -67,9 +71,8 @@
 
     <!-- Platform Specific Settings -->
     <platform name="ios">
-      <!-- <hook type="after_prepare" src="util/hooks/ios/add-custom-urls-to-plist.js" />
+      <config-file platform="ios" target="*-Info.plist" parent="UIStatusBarHidden"><true/></config-file>
-      <hook type="after_prepare" src="util/hooks/ios/add-uistatusbarhidden-to-plist.js" /> -->
+      <config-file platform="ios" target="*-Info.plist" parent="UIViewControllerBasedStatusBarAppearance"><false/></config-file>
-
       <icon src="resources/*PACKAGENAME*/ios/icon/icon-60@3x.png" width="180" height="180" />
       <icon src="resources/*PACKAGENAME*/ios/icon/icon-60.png" width="60" height="60" />
       <icon src="resources/*PACKAGENAME*/ios/icon/icon-60@2x.png" width="120" height="120" />
@@ -87,7 +90,6 @@
       <icon src="resources/*PACKAGENAME*/ios/icon/icon-50.png" width="50" height="50" />
       <icon src="resources/*PACKAGENAME*/ios/icon/icon-50@2x.png" width="100" height="100" />
 
-
       <splash src="resources/*PACKAGENAME*/ios/splash/Default~iphone.png" width="320" height="480"/>
       <splash src="resources/*PACKAGENAME*/ios/splash/Default@2x~iphone.png" width="640" height="960"/>
       <splash src="resources/*PACKAGENAME*/ios/splash/Default-Portrait~ipad.png" width="768" height="1024"/>
@@ -101,8 +103,7 @@
     </platform>
 
     <platform name="android">
-      <hook type="after_prepare" src="util/hooks/android/add-custom-urls-to-android-manifest.js" />
+      <preference name="android-manifest/application/@android:allowBackup" value="false" />
-      <hook type="after_prepare" src="util/hooks/android/prohibit-cloud-backups-in-android-manifest.js" />
 
       <icon src="resources/*PACKAGENAME*/android/icon/drawable-ldpi-icon.png" density="ldpi" />
       <icon src="resources/*PACKAGENAME*/android/icon/drawable-mdpi-icon.png" density="mdpi" />

package.json

@@ -27,8 +27,8 @@
     "bitcore-wallet-client": "4.3.1",
     "bower": "^1.7.9",
     "chai": "^3.5.0",
-    "cordova": "5.4.1",
     "cordova-android": "5.1.1",
+    "cordova-custom-config": "^3.0.5",
     "cordova-plugin-qrscanner": "^2.3.1",
     "coveralls": "^2.11.9",
     "express": "^4.11.2",
@@ -89,12 +89,10 @@
     "clean-all":              "git clean -dfx && npm install"
   },
   "devDependencies": {
-    "androidmanifest": "^2.0.0",
+    "cordova": "^6.3.1",
-    "cordova": "^5.4.1",
+    "grunt": "^1.0.1",
-    "globby": "^6.0.0",
     "ionic": "^2.1.0",
-    "plist": "^2.0.1",
     "trash-cli": "^1.4.0",
-    "xcode": "^0.8.2"
+    "lodash": "^4.3.0"
   }
 }

src/js/controllers/confirm.js

@@ -36,10 +36,12 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     $scope.data = {};
 
     var config = configService.getSync().wallet;
-    $scope.feeLevel = config.settings ? config.settings.feeLevel : '';
+    $scope.feeLevel = config.settings && config.settings.feeLevel ? config.settings.feeLevel : 'normal';
 
     $scope.toAmount = parseInt($scope.toAmount);
     $scope.amountStr = txFormatService.formatAmountStr($scope.toAmount);
+    $scope.displayAmount = getDisplayAmount($scope.amountStr);
+    $scope.displayUnit = getDisplayUnit($scope.amountStr);
 
     var networkName = (new bitcore.Address($scope.toAddress)).network.name;
     $scope.network = networkName;
@@ -65,6 +67,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
         if (err || !status) {
           $log.error(err);
         } else {
+          w.status = status;
           if (!status.availableBalanceSat) $log.debug('No balance available in: ' + w.name);
           if (status.availableBalanceSat > $scope.toAmount) {
             filteredWallets.push(w);
@@ -75,6 +78,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
         if (++index == wallets.length) {
           if (!lodash.isEmpty(filteredWallets)) {
             $scope.wallets = lodash.clone(filteredWallets);
+            setWallet($scope.wallets[0]);
           } else {
 
             if (!enoughFunds)
@@ -108,6 +112,14 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     setWallet(wallet, true);
   });
 
+  $scope.showWalletSelector = function() {
+    $scope.showWallets = true;
+  };
+
+  $scope.onWalletSelect = function(wallet) {
+    setWallet(wallet);
+  };
+
 
   $scope.showDescriptionPopup = function() {
     var message = gettextCatalog.getString('Add description');
@@ -123,6 +135,14 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     });
   };
 
+  function getDisplayAmount(amountStr) {
+    return amountStr.split(' ')[0];
+  }
+
+  function getDisplayUnit(amountStr) {
+    return amountStr.split(' ')[1];
+  }
+
   var setFromPayPro = function(uri, cb) {
     if (!cb) cb = function() {};
 
@@ -254,7 +274,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     txp.message = description;
     txp.payProUrl = paypro;
     txp.excludeUnconfirmedUtxos = config.spendUnconfirmed ? false : true;
-    txp.feeLevel = config.settings.feeLevel || 'normal';
+    txp.feeLevel = config.settings && config.settings.feeLevel ? config.settings.feeLevel : 'normal';
     txp.dryRun = dryRun;
 
     walletService.createTx(wallet, txp, function(err, ctxp) {

src/js/controllers/copayers.js

@@ -3,15 +3,11 @@
 angular.module('copayApp.controllers').controller('copayersController',
   function($scope, $log, $timeout, $stateParams, $state, $rootScope, $ionicHistory, lodash, profileService, walletService, popupService, platformInfo, gettextCatalog, ongoingProcess) {
 
+    $scope.isCordova = platformInfo.isCordova;
     $scope.$on("$ionicView.beforeEnter", function(event, data) {
-      init();
+      $scope.wallet = profileService.getWallet(data.stateParams.walletId);
-    });
-
-    var init = function() {
-      $scope.isCordova = platformInfo.isCordova;
-      $scope.wallet = profileService.getWallet($stateParams.walletId);
       updateWallet();
-    };
+    });
 
     $rootScope.$on('bwsEvent', function() {
       updateWallet();
@@ -40,7 +36,9 @@ angular.module('copayApp.controllers').controller('copayersController',
     };
 
     $scope.showDeletePopup = function() {
-      popupService.showConfirm(gettextCatalog.getString('Confirm'), gettextCatalog.getString('Are you sure you want to delete this wallet?'), null, null, function(res) {
+      var title = gettextCatalog.getString('Confirm');
+      var msg = gettextCatalog.getString('Are you sure you want to cancel and delete this wallet?');
+      popupService.showConfirm(title, msg, null, null, function(res) {
         if (res) deleteWallet();
       });
     };

src/js/controllers/import.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('importController',
-  function($scope, $timeout, $log, $state, $stateParams, $ionicHistory, profileService, configService, sjcl, ledger, trezor, derivationPathHelper, platformInfo, bwcService, ongoingProcess, walletService, popupService, gettextCatalog) {
+  function($scope, $timeout, $log, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, profileService, configService, sjcl, ledger, trezor, derivationPathHelper, platformInfo, bwcService, ongoingProcess, walletService, popupService, gettextCatalog) {
 
     var isChromeApp = platformInfo.isChromeApp;
     var isDevel = platformInfo.isDevel;
@@ -350,4 +350,16 @@ angular.module('copayApp.controllers').controller('importController',
         fromOnboarding: $stateParams.fromOnboarding
       });
     };
+
+    $scope.showAdvChange = function() {
+      $scope.showAdv = !$scope.showAdv;
+      $scope.resizeView();
+    };
+
+    $scope.resizeView = function() {
+      $timeout(function() {
+        $ionicScrollDelegate.resize();
+      });
+    };
+
   });

src/js/controllers/onboarding/disclaimer.js

@@ -1,6 +1,11 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('disclaimerController', function($scope, $timeout, $state, $log, $ionicModal, profileService, uxLanguage, externalLinkService, storageService, $stateParams) {
+angular.module('copayApp.controllers').controller('disclaimerController', function($scope, $timeout, $state, $log, $ionicModal, profileService, uxLanguage, externalLinkService, storageService, $stateParams, startupService) {
+
+  $scope.$on("$ionicView.afterEnter", function() {
+    startupService.ready();
+  });
+
   $scope.init = function() {
     $scope.lang = uxLanguage.currentLanguage;
     $scope.terms = {};

src/js/controllers/onboarding/tour.js

@@ -34,6 +34,9 @@ angular.module('copayApp.controllers').controller('tourController',
         var rate = rateService.toFiat(btcAmount * 1e8, localCurrency);
         $scope.localCurrencySymbol = '$';
         $scope.localCurrencyPerBtc = $filter('formatFiatAmount')(parseFloat(rate.toFixed(2), 10));
+        $timeout(function() {
+          $scope.$apply();
+        })
       });
     });
 
@@ -50,7 +53,7 @@ angular.module('copayApp.controllers').controller('tourController',
               ongoingProcess.set('creatingWallet', false);
               popupService.showAlert(
                 gettextCatalog.getString('Cannot Create Wallet'), err,
-                 function() {
+                function() {
                   retryCount = 0;
                   return $scope.createDefaultWallet();
                 }, gettextCatalog.getString('Retry'));

src/js/controllers/onboarding/welcomeController.js

@@ -1,9 +1,13 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('welcomeController', function($scope, $state, $timeout, $ionicConfig, $log, profileService) {
+angular.module('copayApp.controllers').controller('welcomeController', function($scope, $state, $timeout, $ionicConfig, $log, profileService, startupService) {
 
   $ionicConfig.views.swipeBackEnabled(false);
 
+  $scope.$parent.$on("$ionicView.afterEnter", function() {
+    startupService.ready();
+  });
+
   $scope.goImport = function(code) {
     $state.go('onboarding.import', {
       fromOnboarding: true,

src/js/controllers/tab-home.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('tabHomeController',
-  function($rootScope, $timeout, $scope, $state, $stateParams, $ionicModal, $ionicScrollDelegate, gettextCatalog, lodash, popupService, ongoingProcess, profileService, walletService, configService, $log, platformInfo, storageService, txpModalService, $window, bitpayCardService) {
+  function($rootScope, $timeout, $scope, $state, $stateParams, $ionicModal, $ionicScrollDelegate, gettextCatalog, lodash, popupService, ongoingProcess, profileService, walletService, configService, $log, platformInfo, storageService, txpModalService, $window, bitpayCardService, startupService) {
     var wallet;
     var listeners = [];
     var notifications = [];
@@ -13,6 +13,10 @@ angular.module('copayApp.controllers').controller('tabHomeController',
     $scope.homeTip = $stateParams.fromOnboarding;
     $scope.isCordova = platformInfo.isCordova;
 
+    $scope.$on("$ionicView.afterEnter", function() {
+      startupService.ready();
+    });
+
     if (!$scope.homeTip) {
       storageService.getHomeTipAccepted(function(error, value) {
         $scope.homeTip = (value == 'false') ? false : true;

src/js/controllers/tab-send.js

@@ -59,6 +59,10 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
     });
   };
 
+  $scope.openScanner = function() {
+    $state.go('tabs.scan');
+  }
+
   $scope.showMore = function() {
     currentContactsPage++;
     updateList();
@@ -106,7 +110,7 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
 
 
   var updateHasFunds = function() {
-    $scope.hasFunds = true;
+    $scope.hasFunds = null;
 
     var wallets = profileService.getWallets({
       onlyComplete: true,
@@ -127,16 +131,16 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
           $log.error(err);
           return;
         }
-        if (status.availableBalanceSat && status.availableBalanceSat > 0) {
+
+        if (status.availableBalanceSat) {
           $scope.hasFunds = true;
         }
-        else $scope.hasFunds = false;
         if (index == wallets.length) {
           $scope.hasFunds = $scope.hasFunds || false;
+          $timeout(function() {
+            $scope.$apply();
+          });
         }
-        $timeout(function() {
-          $scope.$apply();
-        })
       });
     });
   };

src/js/directives/actionSheet.js

@@ -0,0 +1,18 @@
+'use strict';
+
+angular.module('copayApp.directives')
+  .directive('actionSheet', function() {
+    return {
+      restrict: 'E',
+      templateUrl: 'views/includes/actionSheet.html',
+      transclude: true,
+      scope: {
+        show: '=actionSheetShow',
+      },
+      link: function(scope, element, attrs) {
+        scope.hide = function() {
+          scope.show = false;
+        };
+      }
+    };
+  });

src/js/directives/walletSelector.js

@@ -0,0 +1,27 @@
+'use strict';
+
+angular.module('copayApp.directives')
+  .directive('walletSelector', function($timeout) {
+    return {
+      restrict: 'E',
+      templateUrl: 'views/includes/walletSelector.html',
+      transclude: true,
+      scope: {
+        show: '=walletSelectorShow',
+        wallets: '=walletSelectorWallets',
+        selectedWallet: '=walletSelectorSelectedWallet',
+        onSelect: '=walletSelectorOnSelect'
+      },
+      link: function(scope, element, attrs) {
+        scope.hide = function() {
+          scope.show = false;
+        };
+        scope.selectWallet = function(wallet) {
+          $timeout(function() {
+            scope.hide();
+          }, 100);
+          scope.onSelect(wallet);
+        };
+      }
+    };
+  });

src/js/routes.js

@@ -947,22 +947,21 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         });
 
         $ionicPlatform.on('resume', function() {
-          // Nothing tot do
+          // Nothing to do
         });
 
         $ionicPlatform.on('menubutton', function() {
           window.location = '#/preferences';
         });
-
-        setTimeout(function() {
-          navigator.splashscreen.hide();
-        }, 500);
       }
 
 
       $log.info('Init profile...');
       // Try to open local profile
       profileService.loadAndBindProfile(function(err) {
+        $ionicHistory.nextViewOptions({
+          disableAnimate: true
+        });
         if (err) {
           if (err.message && err.message.match('NOPROFILE')) {
             $log.debug('No profile... redirecting');

src/js/services/platformInfo.js

@@ -41,7 +41,7 @@ angular.module('copayApp.services').factory('platformInfo', function($window) {
 
   ret.hasClick = false;
 
-  if($window.sessionStorage.getItem('hasClick')) {
+  if ($window.sessionStorage.getItem('hasClick')) {
     ret.hasClick = true;
   }
 

src/js/services/startupService.js

@@ -0,0 +1,28 @@
+'use strict';
+
+angular.module('copayApp.services').service('startupService', function($log, $timeout) {
+
+  var splashscreenVisible = true;
+  var statusBarVisible = false;
+
+  function _hideSplash(){
+    if(typeof navigator.splashscreen !== "undefined" && splashscreenVisible){
+      $log.debug('startupService is hiding the splashscreen...');
+      $timeout(function(){
+        navigator.splashscreen.hide();
+      }, 20);
+      splashscreenVisible = false;
+    }
+  }
+  function _showStatusBar(){
+    if(typeof StatusBar !== "undefined" && !statusBarVisible){
+      $log.debug('startupService is showing the StatusBar...');
+      StatusBar.show();
+      statusBarVisible = true;
+    }
+  }
+  this.ready = function() {
+    _showStatusBar();
+    _hideSplash();
+  };
+});

src/sass/buttons.scss

@@ -19,7 +19,8 @@ $button-secondary-border:          transparent;
 $button-secondary-active-bg:       darken($subtle-gray, 5%);
 $button-secondary-active-border:   transparent;
 
-%button-standard {
+%button-standard,
+click-to-accept {
   width: 85%;
   max-width: 300px;
   margin-left: auto;
@@ -35,7 +36,8 @@ $button-secondary-active-border:   transparent;
     @include button-outline($button-primary-bg);
   }
   &.button-primary,
-  &.button-secondary {
+  &.button-secondary,
+  &.button-assertive {
     &.button-standard {
       @extend %button-standard;
       & + .button-standard {

src/sass/directives/gravatar.scss

@@ -1,18 +1,4 @@
 .gravatar {
   border-radius: 50%;
-}
+  display: inline-block;
-
-.gravatar-content {
-  position: relative;
-  height: 70px;
-  border-color: #172565;
-  background-color: #1e3186;
-  background-image: linear-gradient(0deg, #172565, #172565 0%, transparent 0%);
-  color: #fff;
-  margin-bottom: 50px;
-  .gravatar {
-    position: absolute;
-    bottom: -30px;
-    left: 41%;
-  }
 }

src/sass/icons.scss

@@ -1,13 +1,20 @@
 .icon.bp-arrow-right {
   @extend .ion-ios-arrow-right;
+  @extend .just-a-hint;
 }
 
 .icon.bp-arrow-down {
   @extend .ion-ios-arrow-down;
+  @extend .just-a-hint;
 }
 
 .icon.bp-arrow-up {
   @extend .ion-ios-arrow-up;
+  @extend .just-a-hint;
+}
+
+.just-a-hint {
+  opacity: 0.2;
 }
 
 .item.item-big-icon-left {

src/sass/ionic.scss

@@ -15,19 +15,6 @@ ion-tabs.ion-tabs-transparent {
   background: none transparent;
 }
 
-// Some overrides for the card class which can't be set by variable
-.card, .list {
-  .icon {
-    color: $light-gray;
-  }
-  & > .item-heading {
-    font-weight: 700;
-    .icon {
-      color: $mid-gray;
-    }
-  }
-}
-
 // .placeholder-icon padding cannot be modified by a variable
 $placeholder-icon-padding: 10px;
 .placeholder-icon {
@@ -38,3 +25,8 @@ $placeholder-icon-padding: 10px;
     padding-left: $placeholder-icon-padding;
   }
 }
+
+// .item-input-wrapper background cannot be modified by a variable
+.item-input-wrapper {
+  background: none transparent;
+}

src/sass/variables.scss

@@ -2,7 +2,7 @@
 $royal: #1e3186;
 $soft-blue: #647ce8;
 $fill-blue: #D5DFFF;
-$subtle-gray: #f7f7f7;
+$subtle-gray: darken(#fff, 5%);
 $roboto: "Roboto", sans-serif;
 $roboto-light: "Roboto-Light", sans-serif-light;
 $success-green: #17ae8c;
@@ -10,7 +10,7 @@ $warning-orange: #ffa500;
 $dark-gray: #445;
 $mid-gray: #667;
 $light-gray: #9b9bab;
-$subtle-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+$subtle-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
 $hovering-box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.3);
 $subtle-radius: 3px;
 $visible-radius: 6px;
@@ -18,21 +18,34 @@ $unmistakable-radius: 12px;
 
 /* Set ionic variables */
 
-$positive: $soft-blue;
+$positive:                        $soft-blue;
 
-$font-size-base: 16px;
+$font-size-base:                  16px;
-$font-size-small: 12px;
+$font-size-small:                 12px;
-$font-family-sans-serif: $roboto;
+$font-family-sans-serif:          $roboto;
-$font-family-light-sans-serif: $roboto-light;
+$font-family-light-sans-serif:    $roboto-light;
 
-$button-border-radius: $visible-radius;
+$button-border-radius:            $visible-radius;
-$button-height: 52px;
+$button-height:                   52px;
-$button-padding: 16px;
+$button-padding:                  16px;
 
-$base-background-color: $subtle-gray;
+$base-background-color:           $subtle-gray;
 
-$item-default-active-bg: $subtle-gray;
+$item-default-active-bg:          $subtle-gray;
-$item-icon-font-size: 24px;
+$item-icon-font-size:             24px;
+
+$input-color:                     $dark-gray;
+$input-border:                    $light-gray;
+$input-label-color:               $mid-gray;
+$input-color-placeholder:         lighten($dark-gray, 40%);
+
+$item-default-bg:                 #ffffff;
+$item-default-border:             $subtle-gray;
+$item-default-text:               $dark-gray;
+$item-default-active-bg:          darken(#ffffff, 7%);
+$item-default-active-border:      darken($subtle-gray, 7%);
+
+$bar-default-border:              $subtle-gray;
 
 $tabs-icon-size: 22px;
 

src/sass/views/add.scss

@@ -12,6 +12,9 @@
       margin-top: 25px;
     }
   }
+  .add-type {
+    color: $dark-gray;
+  }
   .bg{
     background-color:rgb(100,124,232);
     height: 50px;

src/sass/views/address-book.scss

@@ -1,22 +1,15 @@
-#add-address{
+#add-address {
-  .list{
+  .zero-state-cta {
-    background: #ffffff;
+    padding-bottom: 3vh;
+  }
+  .list {
+    background-color: #fff;
   }
 }
 #view-address-book {
-  .scroll{
+  .scroll {
     height:100%;
   }
-  #add-contact{
-    min-width: 300px;
-    img{
-      width: 10rem;
-      display: inline-block;
-    }
-    a{
-      text-decoration: none;
-    }
-  }
   .list {
     .item {
       color: #444;
@@ -68,3 +61,25 @@
     }
   }
 }
+
+#address-book-view {
+  .bar.bar-royal {
+    border: 0 transparent;
+  }
+  .gravatar-content {
+    position: relative;
+    height: 70px;
+    border-color: $royal;
+    background-color: $royal;
+    padding-top: 20px;
+    margin-bottom: 50px;
+    text-align: center;
+  }
+  .address-book-field-label {
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 12px;
+    display: block;
+    color: $mid-gray;
+  }
+}

src/sass/views/advancedSettings.scss

@@ -1,17 +1,6 @@
-.settings {
-  .item {
-    color: #444;
-    border-color: rgba(221, 221, 221, 0.3);
-  }
-}
-
 #advanced-settings {
   .list {
     .item {
-      color: #444;
-      border-top: none;
-      padding-top: 1.5rem;
-      padding-bottom: 1.5rem;
       &:before {
         display: block;
         position: absolute;
@@ -23,31 +12,19 @@
         content: '';
       }
       &.item-divider {
-        color: rgba(74, 74, 74, .8);
+        color: $dark-gray;
-      }
-      &.item-heading {
-        &:before {
-          top: 99%
-        }
-      }
-      &:nth-child(2) {
-        &:before {
-          width: 0;
-        }
       }
       .item-note {
-        color: rgb(58, 58, 58);
+        color: $dark-gray;
       }
     }
+    .has-comment {
+      border-bottom: 0 none;
+    }
     .comment {
       padding: 15px;
       background-color: #fff;
-      color: rgba(74, 74, 74, 0.8);
+      color: $mid-gray;
-    }
-    .divider-comment {
-      padding: 15px;
-      color: rgba(74, 74, 74, 0.8);
-      font-size: 15px;
     }
   }
 }

src/sass/views/confirm.scss

@@ -1,30 +1,3 @@
 #view-confirm {
-  .icon-bitpay-card {
+
-    background-image: url("../img/icon-bitpay.svg");
-  }
-  .slide-to-pay{
-    bottom: 149px;
-  }
-  .send-gravatar {
-    left: 11px;
-    position: absolute;
-    top: 10px;
-  }
-  .accept-slide {
-     position: fixed;
-     bottom: 0;
-     width: 100%;
-     height: 100px;
-     background-color: #647CE8;
-     color: #ffffff;
-     font-size: 25px;
-     text-align: center;
-     padding-top: 34px;
-     line-height: 32px;
-  }
-  .accept-slide i {
-    float: right;
-    font-size: 32px;
-    margin-right: 20px;
-  }
 }

src/sass/views/copayers.scss

@@ -1,7 +1,13 @@
 .copayers-secret {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
   text-align: center;
-  font-size: 14px;
+  font-size: 12px;
   margin: 10px;
+  white-space: -moz-pre-wrap !important;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  white-space: -webkit-pre-wrap;
+  word-break: break-all;
+  white-space: normal;
 }

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/includes/actionSheet.scss

@@ -0,0 +1,58 @@
+action-sheet {
+  .bp-action-sheet {
+    $border-color: #EFEFEF;
+
+    &__sheet {
+      background: #fff;
+      width: calc(100% + 1px);
+      position: fixed;
+      bottom: 0;
+      left: 50%;
+      transform: translateY(100%) translateX(-50%);
+      transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
+      z-index: 100;
+      padding-top: 1.75rem;
+      padding-left: 2rem;
+      padding-right: .75rem;
+      color: #2f2f2f;
+      padding-bottom: 3.5rem;
+      max-width: 550px;
+      max-height: 100vh;
+      overflow: scroll;
+
+      &.slide-up {
+        transform: translateY(0) translateX(-50%);
+        box-shadow: 0px 2px 13px 3px rgba(0, 0, 0, .3);
+      }
+
+      .back-arrow {
+        padding-bottom: 1.25rem;
+        cursor: pointer;
+      }
+
+      .header {
+        font-weight: 600;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid $border-color;
+        margin-bottom: 1px;
+      }
+    }
+
+    &__backdrop {
+      height: 100%;
+      width: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      background: rgba(0, 0, 0, 0);
+      transition: background 250ms cubic-bezier(0.4, 0.0, 0.2, 1);;
+      pointer-events: none;
+      z-index: 99;
+
+      &.fade-in {
+        background: rgba(0, 0, 0, .4);
+        pointer-events: all;
+      }
+    }
+  }
+}

src/sass/views/includes/txp-details.scss

@@ -1,4 +1,5 @@
-#txp-details {
+#txp-details,
+#view-confirm {
   $item-lateral-padding: 20px;
   $item-vertical-padding: 10px;
   $item-border-color: #EFEFEF;
@@ -8,7 +9,7 @@
     background: #f5f5f5;
   }
   .slide-to-pay {
-    bottom: 100px;
+    bottom: 92px;
   }
   .head {
     padding: 30px $item-lateral-padding 4rem;
@@ -48,9 +49,19 @@
     span {
       display: block;
     }
+    .badge {
+      border-radius: 0;
+      padding: .5rem;
+    }
     .item {
       color: #4A4A4A;
-      padding: $item-vertical-padding $item-lateral-padding;
+      padding-top: $item-vertical-padding;
+      padding-bottom: $item-vertical-padding;
+      padding-left: $item-lateral-padding;
+
+      &:not(.item-icon-right) {
+        padding-right: $item-lateral-padding;
+      }
 
       .label {
         font-size: 14px;
@@ -61,7 +72,8 @@
       &.single-line {
         display: flex;
         align-items: center;
-        padding: 17px $item-lateral-padding;
+        padding-top: 17px;
+        padding-bottom: 17px;
 
         .label {
           margin: 0;
@@ -112,15 +124,23 @@
       display: flex;
       align-items: center;
       padding: .2rem 0;
-      i {
+      margin-bottom: 5px;
-        padding: 0;
+
+      ~ .bp-arrow-right {
+        top: 14px;
       }
-      img {
+
-        height: 24px;
+      > i {
-        width: 24px;
+        padding: 0;
-        padding: 2px;
+        position: static;
-        margin-right: .7rem;
+
-        box-shadow: none;
+        > img {
+          height: 24px;
+          width: 24px;
+          padding: 2px;
+          margin-right: .7rem;
+          box-shadow: none;
+        }
       }
     }
 

src/sass/views/includes/walletSelector.scss

@@ -0,0 +1,62 @@
+wallet-selector {
+  
+  $border-color: #EFEFEF;
+
+  .wallet-selector {
+    .wallet {
+      border: 0;
+      padding-right: 0;
+      padding-top: 0;
+      padding-left: 65px;
+      padding-bottom: 0;
+      margin-bottom: 1px;
+      overflow: visible;
+
+      > i {
+        padding: 0;
+        margin-left: -5px;
+
+        > img {
+          height: 39px;
+          width: 39px;
+          padding: 4px;
+        }
+      }
+    }
+    .wallet-inner {
+      display: flex;
+      position: relative;
+      padding-top: 16px;
+      padding-bottom: 16px;
+
+      &::after {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        background: $border-color;
+        bottom: 0;
+        right: 0;
+        content: '';
+      }
+
+      .check {
+        padding: 0 1.2rem;
+      }
+    }
+    .wallet-details {
+      flex-grow: 1;
+
+      .wallet-name {
+        padding-bottom: 5px;
+      }
+
+      .wallet-balance {
+        color: #3A3A3A;
+        font-family: "Roboto-Light";
+      }
+
+    }
+  }
+
+}

src/sass/views/onboarding/onboard-disclaimer.scss

@@ -66,7 +66,7 @@
     input:checked + .checkbox-icon:after {
       border-color: rgb(19, 229, 182);
       top: 4px;
-      left: 5px;
+      left: 3px;
     }
     .item-content {
       width: 90%;

src/sass/views/tab-home.scss

@@ -22,6 +22,18 @@
       border-top:none;
       padding-bottom: 1.5rem;
       padding-top:1.5rem;
+      &.wallet{
+        .big-icon-svg{
+          & > .bg{
+            padding: .25rem
+          }
+        }
+      }
+    }
+    .item-sub {
+      &:first-child:before {
+        width: 100%
+      }
       &:before {
         display: block;
         position: absolute;
@@ -37,29 +49,6 @@
           }
         }
       }
-      &.item-heading{
-        &:before{
-          width:100% !important;
-          top:99%
-        }
-      }
-      &:nth-child(1){
-        &:before{
-          width:0;
-        }
-      }
-      &:nth-child(2):last-child{
-        &:before{
-          width:0;
-        }
-      }
-      &.wallet{
-        .big-icon-svg{
-          & > .bg{
-            padding: .25rem
-          }
-        }
-      }
     }
   }
   .next-step.item {

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/tab-settings.scss

@@ -1,17 +1,60 @@
 .settings {
   .item {
-    color: #444;
+    color: $dark-gray;
     border-color: rgba(221, 221, 221, 0.3);
   }
+  &-explaination, &-button-group {
+    padding: 0 1rem;
+    margin: 1rem 0;
+  }
+  &-heading {
+    font-size: 17px;
+    color: $dark-gray;
+    margin: 1rem 0;
+  }
+  &-description {
+    font-size: 15px;
+    color: $mid-gray;
+    margin: 1rem 0;
+  }
+  .setting-title, .setting-value {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .setting-value {
+    color: $light-gray;
+    font-size: 14px;
+  }
+  .settings-input-group {
+    background-color: #fff;
+    .item-stacked-label {
+      padding: 1rem;
+    }
+    .input-label {
+      text-transform: uppercase;
+      font-size: 12px;
+      font-weight: bold;
+    }
+  }
+ .settings-list {
+    .item {
+      color: $dark-gray;
+      padding-top: 1.3rem;
+      padding-bottom: 1.3rem;
+      &.item-divider {
+        color: $mid-gray;
+        padding-bottom: .5rem;
+        font-size: .9rem;
+      }
+    }
+ }
 }
 
 #tab-settings {
   .list {
     .item {
-      color: #444;
-      border-top: none;
-      padding-top: 1.3rem;
-      padding-bottom: 1.3rem;
       .big-icon-svg {
        & > .bg{
         width:20px;
@@ -23,9 +66,10 @@
           left:8px;
           .bg {
             border-radius: 50%;
-            width:30px;
+            width: 25px;
-            height:30px;
+            height: 25px;
             padding:.1rem;
+            box-shadow: 0px 1px 5px rgba($mid-gray, .1);
           }
         }
       }
@@ -39,11 +83,6 @@
         right: 0;
         content: '';
       }
-      &.item-divider {
-        color: $mid-gray;
-        padding-bottom: .5rem;
-        font-size: .9rem;
-      }
       &.item-heading {
         &:before {
           top: 99%
@@ -54,12 +93,43 @@
           width: 0;
         }
       }
-      .item-note {
-        color: $light-gray;
-      }
     }
   }
   .item-radio .radio-icon {
     font-size: 18px;
   }
 }
+
+#settings-fee {
+  .estimates {
+    font-size: 15px;
+    color: $dark-gray;
+  }
+  .fee-minutes, .fee-rate {
+    font-weight: bold;
+    display: block;
+    margin-bottom: .5rem;
+  }
+  .fee-policies {
+    border-color: #fff;
+    border-width: 2px 0;
+    border-style: solid;
+  }
+}
+.settings-color-name {
+  margin-left: 1rem;
+}
+.settings-color-block {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  box-shadow: 0px 0px 10px;
+  float: left; // we don't want these indicators to affect their container's sizing
+}
+
+#settings-tos {
+  p {
+    margin-bottom: 1rem;
+  }
+}

src/sass/views/tabs.scss

@@ -35,3 +35,17 @@
     }
   }
 }
+
+#tab-home, #tab-send {
+  .card, .list {
+    .icon {
+      color: $light-gray;
+    }
+    & > .item-heading {
+      font-weight: 700;
+      .icon {
+        color: $mid-gray;
+      }
+    }
+  }
+}

src/sass/views/views.scss

@@ -14,9 +14,11 @@
 @import "bitpayCard";
 @import "address-book";
 @import "wallet-backup-phrase";
-@import "address-book";
 @import "zero-state";
 @import "onboarding/onboarding";
+@import "includes/actionSheet";
+@import "export";
+@import "import";
 @import "includes/walletActivity";
 @import "includes/wallets";
 @import "includes/modals/modals";
@@ -26,4 +28,5 @@
 @import "includes/tx-details";
 @import "includes/txp-details";
 @import "includes/tx-status";
+@import "includes/walletSelector";
 @import "integrations/coinbase.scss";

util/hooks/android/add-custom-urls-to-android-manifest.js

@@ -1,27 +0,0 @@
-'use strict';
-
-var AndroidManifest = require('androidmanifest');
-
-var FILEPATH = 'platforms/android/AndroidManifest.xml';
-var manifest = new AndroidManifest().readFile(FILEPATH);
-
-var mainActivity = manifest.activity('MainActivity');
-
-var customUrls = ['copay', 'bitcoin', 'bitauth'];
-
-customUrls.forEach(function(url){
-  var selector = 'intent-filter > data[android\\:scheme=' + url + ']';
-  if(mainActivity.find(selector).length > 0){
-    return;
-  }
-
-  var intentFilter = manifest.$('<intent-filter>');
-  intentFilter.append('<data android:scheme="' + url + '" />');
-  intentFilter.append('<action android:name="android.intent.action.VIEW" />');
-  intentFilter.append('<category android:name="android.intent.category.DEFAULT" />');
-  intentFilter.append('<category android:name="android.intent.category.BROWSABLE" />');
-  mainActivity.append(intentFilter);
-});
-
-manifest.writeFile(FILEPATH);
-console.log('custome uri schemes written to AndroidManifest');

util/hooks/android/prohibit-cloud-backups-in-android-manifest.js

@@ -1,18 +0,0 @@
-module.exports = function(ctx) {
-  var fs = ctx.requireCordovaModule('fs'),
-    path = ctx.requireCordovaModule('path'),
-    xml = ctx.requireCordovaModule('cordova-common').xmlHelpers;
-
-  var manifestPath = path.join(ctx.opts.projectRoot, '/platforms/android/AndroidManifest.xml');
-  var doc = xml.parseElementtreeSync(manifestPath);
-  if (doc.getroot().tag !== 'manifest') {
-    throw new Error(manifestPath + ' has incorrect root node name (expected "manifest")');
-  }
-
-  doc.getroot().find('./application').attrib['android:allowBackup'] = "false";
-
-  //write the manifest file
-  fs.writeFileSync(manifestPath, doc.write({
-    indent: 4
-  }), 'utf-8');
-};

www/img/address-book-add.svg

@@ -1,27 +1,13 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?xml version="1.0" encoding="utf-8"?>
-<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-    <!-- Generator: sketchtool 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
+<svg version="1.1" id="Add_Contact" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
-    <title>CF22B02A-463B-4798-B448-F6A878730EDC</title>
+	 y="0px" viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
-    <desc>Created with sketchtool.</desc>
+<style type="text/css">
-    <defs>
+	.st0{fill:none;stroke:#647CE8;stroke-width:2;}
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+</style>
-            <stop stop-color="#EFF2FF" offset="0%"></stop>
+<path class="st0" d="M53.3,67.7c-16.7,0-29.2,3.7-38.9,7c-7.2,2.4-12,9.1-12,16.7v23.3h59.2"/>
-            <stop stop-color="#F7F7F7" offset="100%"></stop>
+<path class="st0" d="M67.7,72.8L67.7,72.8c-16.4,0-29.6-19-29.6-35.2v-5.9c0-16.2,13.3-29.4,29.6-29.4l0,0
-        </linearGradient>
+	c16.4,0,29.6,13.1,29.6,29.4v5.9C97.4,53.8,84.1,72.8,67.7,72.8L67.7,72.8z"/>
-    </defs>
+<path class="st0" d="M106.3,90.4v35.2"/>
-    <g id="Settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<path class="st0" d="M90.1,106.3h35.5"/>
-        <g id="1.7.4---Address-book-(Empty)" transform="translate(-122.000000, -125.000000)">
-            <g id="Header/Jumbo-W-Text/Light" transform="translate(0.000000, 70.000000)">
-                <g id="users-24px-outline-2_a-add" transform="translate(64.000000, 41.000000)">
-                    <g id="Group" transform="translate(58.000000, 14.000000)">
-                        <circle id="Oval-2" fill="url(#linearGradient-1)" cx="64" cy="64" r="64"></circle>
-                        <path d="M59.8058824,65.8235294 C51.3947922,65.8235294 43.9338216,67.7071485 39.0313235,69.3457199 C35.4125294,70.5591485 33,73.9396246 33,77.7275294 L33,89.442577 L62.7843137,89.442577" id="Shape" stroke="#647CE8" stroke-width="2"></path>
-                        <path d="M65.8843137,68.4285714 L65.8843137,68.4285714 C57.6608647,68.4285714 50.9921569,58.8658095 50.9921569,50.7142857 L50.9921569,47.7619048 C50.9921569,39.610381 57.6608647,33 65.8843137,33 L65.8843137,33 C74.1077627,33 80.7764706,39.610381 80.7764706,47.7619048 L80.7764706,50.7142857 C80.7764706,58.8658095 74.1077627,68.4285714 65.8843137,68.4285714 L65.8843137,68.4285714 Z" id="Shape" stroke="#647CE8" stroke-width="2"></path>
-                        <path d="M85.2745098,77.2857143 L85.2745098,95" id="Shape" stroke="#647CE8" stroke-width="2"></path>
-                        <path d="M77.1294118,85.2745098 L95,85.2745098" id="Shape" stroke="#647CE8" stroke-width="2"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
 </svg>

www/img/icon-back-arrow.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="15px" viewBox="0 0 22 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
+    <title>controls-ico-back</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Header/Controls/Back-(Dark)" transform="translate(-20.000000, -35.000000)" stroke-width="2" stroke="#4D4D4D">
+            <g id="controls-ico-back" transform="translate(21.000000, 36.000000)">
+                <g id="Icons/Back-Arrow/Light">
+                    <g id="Back-arrow-(White)">
+                        <path d="M12.1129878,12.8087726 L19.6825617,6.27049696 M11.9604103,0.0270404646 L19.7044837,6.19072819 M0.25515308,6.21111111 L19.5439223,6.21111111" id="Line" transform="translate(9.979818, 6.417907) scale(-1, 1) translate(-9.979818, -6.417907) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

www/img/icon-check-selected.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="17px" viewBox="0 0 20 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 40.1 (33804) - http://www.bohemiancoding.com/sketch -->
+    <title>Icons/Check/Green</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Views/Select-Wallet" transform="translate(-325.000000, -344.000000)" stroke="#12E5B6">
+            <g id="Componets/Select-Wallet">
+                <g id="Items/Activity-Cards/Recent-Activity" transform="translate(15.000000, 256.000000)">
+                    <g id="Group-3" transform="translate(0.000000, 60.000000)">
+                        <g id="Icons/Check/Green" transform="translate(311.000000, 29.000000)">
+                            <g id="ui-24px-outline-1_check">
+                                <g id="Group" transform="translate(0.500000, 0.500000)" stroke-width="2">
+                                    <polyline id="Shape" points="0 7 7 14 17.5 0"></polyline>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

www/img/icon-link.svg

@@ -5,7 +5,7 @@
     <desc>Created with sketchtool.</desc>
     <defs></defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Icons" transform="translate(-712.000000, -769.000000)" stroke="#8F8F90">
+        <g id="Icons" transform="translate(-712.000000, -769.000000)" stroke="#666677">
             <g id="ui-24px-outline-2_link-69" transform="translate(713.384615, 770.000000)">
                 <g id="Group">
                     <path d="M8.1,3.6 L10.35,1.35 C12.06,-0.36 14.94,-0.36 16.65,1.35 L16.65,1.35 C18.36,3.06 18.36,5.94 16.65,7.65 L14.4,9.9" id="Shape"></path>

www/views/add.html

@@ -11,7 +11,7 @@
        <i class="icon big-icon-svg">
           <img src="img/icon-wallet.svg" class="bg"/>
         </i>
-        <h2 translate>New Personal Wallet</h2>
+        <span class="add-type" translate>New Personal Wallet</h2>
         <i class="icon bp-arrow-right"></i>
       </a>
 
@@ -19,7 +19,7 @@
         <i class="icon big-icon-svg">
           <img src="img/icon-wallet.svg" class="bg"/>
         </i>
-        <h2 translate>Create Shared Wallet</h2>
+        <span class="add-type" translate>Create Shared Wallet</h2>
         <i class="icon bp-arrow-right"></i>
       </a>
 
@@ -27,7 +27,7 @@
         <i class="icon big-icon-svg">
           <img src="img/item-ico-addwallet.svg" class="bg join"/>
         </i>
-        <h2 translate>Join shared wallet</h2>
+        <span class="add-type" translate>Join shared wallet</h2>
         <i class="icon bp-arrow-right"></i>
       </a>
 
@@ -35,7 +35,7 @@
         <i class="icon big-icon-svg">
           <img src="img/item-ico-import.svg" class="bg"/>
         </i>
-        <h2 translate>Import wallet</h2>
+        <span class="add-type" translate>Import wallet</h2>
         <i class="icon bp-arrow-right"></i>
       </a>
     </ion-list>

www/views/addressbook.html

@@ -3,7 +3,7 @@
     <ion-nav-back-button>
     </ion-nav-back-button>
     <ion-nav-title>
-      <span translate>Addressbook</span>
+      <span translate>Address Book</span>
     </ion-nav-title>
     <ion-nav-buttons side="secondary">
       <button class="button button-back button-clear" ng-show="!isEmptyList" ui-sref="tabs.addressbook.add">
@@ -11,9 +11,19 @@
       </button>
     </ion-nav-buttons>
   </ion-nav-bar>
-
+  <ion-content scroll="false" id="add-address" class="ng-hide" ng-show="isEmptyList">
-  <ion-content>
+    <div class="zero-state">
-
+      <i class="icon zero-state-icon">
+        <img src="img/address-book-add.svg"/>
+      </i>
+      <div class="zero-state-heading" translate>No contacts yet</div>
+      <div class="zero-state-description" translate>You haven’t added any contacts to your address book yet. Get started by adding your first one.</div>
+      <div class="zero-state-cta">
+        <button class="button button-standard button-primary" ui-sref="tabs.addressbook.add" translate>Add Contact</button>
+      </div>
+    </div>
+  </ion-content>
+  <ion-content class="ng-hide" ng-show="!isEmptyList">
     <div class="bar bar-header item-input-inset" ng-show="!isEmptyList">
       <label class="item-input-wrapper">
         <i class="icon ion-ios-search placeholder-icon"></i>
@@ -23,7 +33,6 @@
                ng-change="findAddressbook(addrSearch)" ng-model-onblur>
       </label>
     </div>
-
     <ion-list>
       <ion-item ng-repeat="addrEntry in addressbook"
                 class="item-icon-right item-avatar"
@@ -32,28 +41,10 @@
         <h2>{{addrEntry.name}}</h2>
         <p>{{addrEntry.address}}</p>
         <i class="icon bp-arrow-right"></i>
-
         <ion-option-button class="button-assertive" ng-click="remove(addrEntry.address)">
           <i class="icon ion-minus-circled"></i>
         </ion-option-button>
-
       </ion-item>
     </ion-list>
-    <div class="text-center absolute-center" ng-show="isEmptyList">
-      <div id="add-contact" class="col col-80 center-block">
-        <div class="row">
-          <img class="col col-60 center-block" src="img/address-book-add.svg">
-        </div>
-        <div class="row text-center">
-          <h2 class="col" translate>No contacts yet</h2>
-        </div>
-        <div class="row">
-          <p class="text-center" translate>
-            You haven’t added any contacts to your address book yet. Get started by adding your first one.
-          </p>
-        </div>
-        <button class="button button-standard button-primary" ui-sref="tabs.addressbook.add" translate>Add Contact</button>
-      </div>
-    </div>
   </ion-content>
 </ion-view>

www/views/addressbook.view.html

@@ -1,37 +1,31 @@
-<ion-view>
+<ion-view id="address-book-view">
   <ion-nav-bar class="bar-royal">
     <ion-nav-back-button>
     </ion-nav-back-button>
     <ion-nav-title>
-      <span translate>Addressbook</span>
+      <span>{{addressbookEntry.name}}</span>
     </ion-nav-title>
   </ion-nav-bar>
-
+  <ion-content scroll="false">
-  <ion-content>
-
     <div class="gravatar-content">
       <gravatar name="{{addressbookEntry.name}}" width="80" email="{{addressbookEntry.email}}"></gravatar>
     </div>
-
+    <div class="list">
-    <div class="card">
       <div class="item item-text-wrap">
-        <h3 translate>Name</h3>
+        <span class="address-book-field-label" translate>Name</span>
-        <strong>{{addressbookEntry.name}}</strong>
+        <span>{{addressbookEntry.name}}</span>
       </div>
       <div class="item item-text-wrap" ng-show="addressbookEntry.email">
-        <h3 translate>Email</h3>
+        <span class="address-book-field-label" translate>Email</span>
-        <strong>{{addressbookEntry.email}}</strong>
+        <span>{{addressbookEntry.email}}</span>
       </div>
       <div class="item item-text-wrap">
-        <h3 translate>Address</h3>
+        <span class="address-book-field-label" translate>Address</span>
-        <strong>{{addressbookEntry.address}}</strong>
+        <span>{{addressbookEntry.address}}</span>
       </div>
     </div>
-
+    <button class="button button-standard button-primary" ng-click="sendTo()" translate>
-    <button class="button button-standard button-primary"
-            ng-click="sendTo()" translate>
       Send Money
     </button>
-
   </ion-content>
 </ion-view>

www/views/advancedSettings.html

@@ -6,7 +6,7 @@
   </ion-nav-bar>
 
   <ion-content>
-    <div class="list">
+    <div class="settings-list list">
       <div class="item item-divider" translate>Enabled Integrations</div>
 
       <ion-toggle ng-show="!isWP" ng-model="bitpayCardEnabled.value" toggle-class="toggle-balanced" ng-change="bitpayCardChange()">
@@ -30,7 +30,7 @@
 
       <div class="item item-divider" translate>Wallet Operation</div>
 
-      <ion-toggle ng-model="spendUnconfirmed.value" toggle-class="toggle-balanced" ng-change="spendUnconfirmedChange()">
+      <ion-toggle class="has-comment" ng-model="spendUnconfirmed.value" toggle-class="toggle-balanced" ng-change="spendUnconfirmedChange()">
         <span class="toggle-label" translate>Use Unconfirmed Funds</span>
       </ion-toggle>
       <div class="comment">
@@ -38,11 +38,13 @@
       </div>
 
       <div class="item item-divider" translate>Experimental Features</div>
-      <div class="divider-comment">
+      <div class="settings-explaination">
-        <span translate>These features aren't quite ready for primetime. They may change, stop working, or disappear at any time.</span>
+        <div class="settings-description" translate>
+          These features aren't quite ready for primetime. They may change, stop working, or disappear at any time.
+        </div>
       </div>
 
-      <ion-toggle ng-show="!isWP" ng-model="recentTransactionsEnabled.value" toggle-class="toggle-balanced" ng-change="recentTransactionsChange()">
+      <ion-toggle class="has-comment" ng-show="!isWP" ng-model="recentTransactionsEnabled.value" toggle-class="toggle-balanced" ng-change="recentTransactionsChange()">
         <span class="toggle-label" translate>Recent Transaction Card</span>
       </ion-toggle>
       <div class="comment">

www/views/confirm.html

@@ -7,62 +7,54 @@
     </ion-nav-back-button>
   </ion-nav-bar>
 
-  <ion-content ng-class="{'slide-to-pay': isCordova}">
+  <ion-content ng-class="{'slide-to-pay': !hasClick && !insuffientFunds}">
-
+    <div class="list">
-    <div class="list card">
+      <div class="item head">
-      <div class="item item-text-wrap">
+        <div class="sending-label">
-        <i class="icon ion-arrow-up-c"></i> <span class="text-bold size-16">Sending</span>
+          <img src="img/sending-icon.svg">
-        <div class="text-bold size-28 m15t">{{amountStr}} </div>
+          <span translate>Sending</span>
-        <div class="text-light size-20 m5t">{{alternativeAmountStr}} </div>
-      </div>
-    </div>
-
-    <div class="list card">
-      <div class="item">Fee: {{feeLevel}}
-        <span class="item-note">
-          {{fee || '...'}}
-        </span>
-      </div>
-
-      <div class="item item-icon-left">
-        <i ng-if="isWallet" class="icon ion-briefcase size-21"></i>
-        <div ng-if="!isWallet">
-          <gravatar ng-if="!isCard" class="send-gravatar" name="{{toName}}" width="30" email="{{toEmail}}"></gravatar>
-          <i ng-if="isCard" class="icon big-icon-svg">
-            <div class="bg icon-bitpay-card"></div>
-          </i>
         </div>
-        <div ng-class="{'m10l':isCard}">
+        <div class="amount-label">
-          <span translate>To</span>: {{toAddress}}
+          <div class="amount">{{displayAmount}} <span class="unit">{{displayUnit}}</span></div>
-          <p ng-show="toName">{{toName}}</p>
+          <div class="alternative">{{alternativeAmountStr}}</div>
-
+        </div>
-          <div ng-show="_paypro" ng-click="openPPModal(_paypro)">
+      </div>
-              <i ng-show="_paypro.verified && _paypro.caTrusted" class="ion-locked" style="color:green"></i>
+      <div class="info">
-              <i ng-show="!_paypro.caTrusted" class="ion-unlocked" style="color:red"></i>
+        <div class="item">
-                {{_paypro.domain}}
+          <span class="label" translate>To</span>
+          <span class="payment-proposal-to" copy-to-clipboard="toAddress">
+            <img src="img/icon-bitcoin-small.svg">
+            <contact class="ellipsis" address="{{toAddress}}">{{toAddress}}</contact>
+            <!-- <contact ng-if="!tx.hasMultiplesOutputs" class="ellipsis" address="{{toAddress}}"></contact>
+            <span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span> -->
+          </span>
+        </div>
+        <div class="text-center" ng-show="insuffientFunds">
+          <span class="badge badge-energized" translate>Insufficient funds</span>
+        </div>
+        <a class="item item-icon-right" ng-hide="insuffientFunds" ng-click="showWalletSelector()">
+          <span class="label" translate>From</span>
+          <div class="wallet">
+            <i class="icon big-icon-svg">
+              <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
+            </i>
+            <div>{{wallet.name}}</div>
           </div>
-        </div>
+          <i class="icon bp-arrow-right"></i>
-      </div>
+        </a>
-    </div>
+        <a class="item single-line item-icon-right" ng-hide="insuffientFunds" ng-click="showDescriptionPopup()">
-
+          <span class="label" translate>Add Memo</span>
-    <div class="text-center" ng-show="noMatchingWallet">
+          <span class="item-note m10l">
-      <span class="badge badge-assertive" translate>No appropiate wallet to make this payment</span>
+            {{description}}
-    </div>
+          </span>
-
+          <i class="icon bp-arrow-right"></i>
-
+        </a>
-
+        <a class="item single-line" ng-hide="insuffientFunds">
-    <div class="text-center" ng-show="insuffientFunds">
+          <span class="label" translate>Fee: {{feeLevel}}</span>
-      <span class="badge badge-assertive" translate>Insufficient funds</span>
+          <span class="item-note">
-    </div>
+            {{fee || '...'}}
-
+          </span>
-    <wallets ng-if="wallets[0]" wallets="wallets"></wallets>
+        </a>
-
-    <div ng-show="wallets[0]" class="list card">
-      <div class="item item-icon-left item-icon-right" ng-click="showDescriptionPopup()">
-        <i class="icon ion-ios-chatbubble-outline size-21"></i>
-        <span ng-show="!description" translate>Add description</span>
-        <span ng-show="description">{{description}}</span>
-        <i ng-show="!description" class="icon ion-ios-plus-empty size-21"></i>
       </div>
     </div>
     <click-to-accept
@@ -86,4 +78,13 @@
     <span ng-hide="wallet.m > 1">Payment Sent</span>
     <span ng-show="wallet.m > 1">Proposal Created</span>
   </slide-to-accept-success>
+
+  <wallet-selector
+    wallet-selector-wallets="wallets"
+    wallet-selector-selected-wallet="wallet"
+    wallet-selector-show="showWallets"
+    wallet-selector-on-select="onWalletSelect"
+  >
+  </wallet-selector>
+
 </ion-view>

www/views/copayers.html

@@ -4,26 +4,29 @@
     <ion-nav-back-button>
     </ion-nav-back-button>
     <ion-nav-title>{{wallet.name}}</ion-nav-title>
+    <ion-nav-buttons side="secondary">
+      <button class="button button-clear" ng-click="showDeletePopup()">
+        Cancel
+      </button>
+    </ion-nav-buttons>
   </ion-nav-bar>
 
   <ion-content>
     <div ng-show="!wallet.notAuthorized">
       <div class="list card text-center">
-        <a class="item item-heading" ng-style="{'border-width': 0}" translate>
+        <div class="item item-heading item-text-wrap" translate>
           Share this invitation with your copayers
-        </a>
+        </div>
-        <div ng-click="copySecret()" ng-class="{'enable_text_select': !isCordova}">
+        <div class="item text-center" copy-to-clipboard="secret" ng-click="copySecret()">
-          <div class="text-center" copy-to-clipboard="secret">
+          <qrcode size="220" error-correction-level="L" data="{{secret}}"></qrcode>
-            <qrcode size="220" error-correction-level="L" data="{{secret}}"></qrcode>
+          <div ng-show="!secret" style="position:relative; top:-226px; height:0px">
-            <div ng-show="!secret" style="position:relative; top:-226px; height:0px">
+            <div style="height:220px; width:220px; margin:auto; background: white">
-              <div style="height:220px; width:220px; margin:auto; background: white">
+              <ion-spinner class="spinner-dark" icon="lines"></ion-spinner>
-                <ion-spinner class="spinner-dark" icon="lines"></ion-spinner>
-              </div>
-            </div>
-            <div class="copayers-secret">
-              {{secret || ('Loading...'|translate)}}
             </div>
           </div>
+          <div class="copayers-secret">
+            {{secret || ('Loading...'|translate)}}
+          </div>
         </div>
       </div>
 
@@ -36,30 +39,24 @@
           </button>
         </div>
 
-        <div class="m30v line-t">
+        <div class="list">
-          <h4 class="size-14 p10h m10t">
+          <div class="item item-heading">
-            <span translate>Waiting for copayers</span>
             <span class="text-gray right">
               [ <span translate>{{wallet.m}}-of-{{wallet.n}}</span> ]
             </span>
-          </h4>
+            <span translate>Waiting for copayers</span>
+          </div>
           <div ng-include="'views/includes/copayers.html'"></div>
-          <div ng-if="!wallet.isComplete()" class="line-b p10 white size-12">
+          <div ng-if="!wallet.isComplete()" class="item item-icon-left">
             <i class="icon ion-loop"></i>
-            <span translate>Waiting...</span>
+            {{'Waiting...'|translate}}
           </div>
         </div>
 
-        <div class="m20b text-center" ng-show="wallet.notAuthorized">
+        <div class="m30v text-center" ng-show="wallet.notAuthorized">
           <h1 translate>Wallet incomplete and broken</h1>
           <h4 translate>Delete it and create a new one</h4>
         </div>
-
-        <div class="text-center">
-          <button class="button button-block button-assertive" ng-click="showDeletePopup()">
-            <i class="fi-trash"></i> <span translate>Cancel and delete the wallet</span>
-          </button>
-        </div>
       </div>
     </div>
   </ion-content>

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()">
+<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" 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" 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" 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/includes/actionSheet.html

@@ -0,0 +1,10 @@
+<div
+  class="bp-action-sheet__backdrop"
+  ng-class="{'fade-in': show}"
+  ng-click="hide()">
+</div>
+<div class="bp-action-sheet__sheet" ng-class="{'slide-up': show}">
+  <img class="back-arrow" src="img/icon-back-arrow.svg" ng-click="hide()">
+  <div class="header">Send from</div>
+  <ng-transclude></ng-transclude>
+</div>

www/views/includes/copayers.html

@@ -1,8 +1,10 @@
-<div ng-repeat="copayer in copayers">
+<div class="item item-icon-left" ng-repeat="copayer in copayers">
-  <span class="item size-12" ng-show="copayer.id == wallet.copayerId">
+  <span ng-show="copayer.id == wallet.copayerId">
-    <i class="icon ion-checkmark"></i> {{'Me'|translate}}
+    <i class="icon ion-checkmark"></i>
+    {{'Me'|translate}}
   </span>
-  <span class="item size-12 text-gray" ng-show="copayer.id != wallet.copayerId">
+  <span ng-show="copayer.id != wallet.copayerId">
-    <i class="icon ion-checkmark"></i> {{copayer.name}}
+    <i class="icon ion-checkmark"></i>
+    {{copayer.name}}
   </span>
 </div>

www/views/includes/terms.html

@@ -1,11 +1,11 @@
 <p translate>
-  The software you are about to use functions as a free, open source, and multi-signature digital wallet. The software does not constitute an account where BitPay or other third parties serve as financial intermediaries or custodians of your bitcoin.
+  This software functions as a free, open source, and multi-signature digital wallet. The software does not constitute an account where BitPay or other third parties serve as financial intermediaries or custodians of your bitcoin.
 </p>
 <p translate>
-  While the software has undergone beta testing and continues to be improved by feedback from the open-source user and developer community, we cannot guarantee that there will be no bugs in the software. You acknowledge that your use of this software is at your own discretion and in compliance with all applicable laws. You are responsible for safekeeping your passwords, private key pairs, PINs and any other codes you use to access the software.
+  While the software has undergone beta testing and continues to be improved by feedback from the open-source user and developer community, we cannot guarantee that there will be no bugs in the software. You acknowledge that your use of this software is at your own discretion and in compliance with all applicable laws. You are responsible for safekeeping your passwords, private key pairs, PINs, and any other codes you use to access the software.
 </p>
 <p translate>
-  IF YOU LOSE ACCESS TO YOUR BITCOIN WALLET OR YOUR ENCRYPTED PRIVATE KEYS AND YOU HAVE NOT SEPARATELY STORED A BACKUP OF YOUR WALLET AND CORRESPONDING PASSWORD, YOU ACKNOWLEDGE AND AGREE THAT ANY BITCOIN YOU HAVE ASSOCIATED WITH THAT WALLET WILL BECOME INACCESSIBLE. All transaction requests are irreversible. The authors of the software, employees and affiliates of Bitpay, copyright holders, and BitPay, Inc. cannot retrieve your private keys or passwords if you lose or forget them and cannot guarantee transaction confirmation as they do not have control over the Bitcoin network.
+  IF YOU LOSE ACCESS TO YOUR BITCOIN WALLET OR YOUR ENCRYPTED PRIVATE KEYS AND YOU HAVE NOT SEPARATELY STORED A BACKUP OF YOUR WALLET AND CORRESPONDING PASSWORD, YOU ACKNOWLEDGE AND AGREE THAT ANY BITCOIN YOU HAVE ASSOCIATED WITH THAT WALLET WILL BECOME INACCESSIBLE. All transaction requests are irreversible. The authors of the software, employees and affiliates of BitPay, copyright holders, and BitPay, Inc. cannot retrieve your private keys or passwords if you lose or forget them and cannot guarantee transaction confirmation as they do not have control over the Bitcoin network.
 </p>
 <p translate>
   To the fullest extent permitted by law, this software is provided “as is” and no representations or warranties can be made of any kind, express or implied, including but not limited to the warranties of merchantability, fitness or a particular purpose and noninfringement. You assume any and all risks associated with the use of the software. In no event shall the authors of the software, employees and affiliates of Bitpay, copyright holders, or BitPay, Inc. be held liable for any claim, damages or other liability, whether in an action of contract, tort, or otherwise, arising from, out of or in connection with the software. We reserve the right to modify this disclaimer from time to time.

www/views/includes/walletSelector.html

@@ -0,0 +1,30 @@
+<action-sheet action-sheet-show="show" class="wallet-selector">
+  <a
+    ng-repeat="w in wallets track by $index"
+    class="item item-icon-left item-big-icon-left item-icon-right wallet"
+    ng-click="selectWallet(w)"
+  >
+      <i class="icon big-icon-svg">
+        <img src="img/icon-wallet.svg" ng-style="{'background-color': w.color}" class="bg">
+      </i>
+      <div class="wallet-inner">
+        <div class="wallet-details">
+          <div class="wallet-name">
+            {{w.name}}
+          </div>
+          <p class="wallet-balance">
+            <span ng-if="!w.isComplete()" class="assertive" translate>
+              Incomplete
+            </span>
+            <span ng-if="w.isComplete()">
+              <span ng-if="!w.balanceHidden">{{w.status.availableBalanceStr}}</span>
+              <span ng-if="w.balanceHidden" translate>[Balance Hidden]</span>
+            </span>
+          </span>
+          &nbsp;
+          </p>
+        </div>
+        <img class="check" src="img/icon-check-selected.svg" ng-show="selectedWallet === w">
+      </div>
+    </a>
+</action-sheet>

www/views/join.html

@@ -1,4 +1,4 @@
-<ion-view>
+<ion-view class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-back-button>
     </ion-nav-back-button>
@@ -10,7 +10,7 @@
 
     <form name="joinForm" ng-submit="join.join(joinForm)" novalidate>
 
-      <div class="card list">
+      <div class="list settings-list settings-input-group">
 
         <label class="item item-input item-stacked-label no-border">
           <span class="input-label" translate>Your nickname</span>

www/views/paperWallet.html

@@ -6,21 +6,13 @@
   </ion-nav-bar>
 
   <ion-content>
-    <div class="row" ng-show="needsBackup">
+    <div class="settings" class="row" ng-show="needsBackup">
-      <div class="columns">
+      <div class="settings-explaination">
-        <h4></h4>
+        <div class="settings-heading" translate>Backup Needed</div>
-        <div class="size-14 text-warning m20b">
+        <div class="settings-description" translate>
-          <i class="fi-alert size-12"></i>
+          Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup.
-          <span class="text-warning" translate>Backup Needed</span>.
-          <span translate>
-            Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup.
-          </span>
-        </div>
-        <div class="text-center m20t">
-          <a class="button outline round dark-gray" href ui-sref="tabs.preferences.preferencesAdvanced">
-            <span translate>Preferences</span>
-          </a>
         </div>
+        <a class="button button-standard button-primary" href ui-sref="tabs.preferences.preferencesAdvanced" translate>Preferences</a>
       </div>
     </div>
 

www/views/preferences.html

@@ -1,13 +1,13 @@
 <ion-view class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>
-      {{'Wallet Preferences'|translate}}
+      {{'Wallet Settings'|translate}}
     </ion-nav-title>
     <ion-nav-back-button>
     </ion-nav-back-button>
   </ion-nav-bar>
   <ion-content>
-    <div class="list">
+    <div class="list settings-list">
       <div class="item item-divider"></div>
       <a class="item item-icon-right" ui-sref="tabs.preferences.preferencesAlias">
         <span translate>Name</span>
@@ -21,17 +21,17 @@
         <span class="item-note">
           {{externalSource}}
         </span>
-      </div>
+      </a>
       <a class="item item-icon-right" ui-sref="tabs.preferences.preferencesColor">
         <span translate>Color</span>
-        <span class="item-note" ng-style="{'color': wallet.color}">
+        <span class="item-note">
-          &block;
+          <span class="settings-color-block" ng-style="{'background-color': wallet.color, 'color': wallet.color}"></span>
         </span>
         <i class="icon bp-arrow-right"></i>
       </a>
       <a class="item item-icon-right" ui-sref="tabs.preferences.preferencesEmail">
-        <span translate>Email Notifications</span>
+        <span class="setting-title" translate>Email Notifications</span>
-        <span class="item-note">
+        <span class="setting-value">
           <span ng-if="!wallet.email" translate>Disabled</span>
           <span ng-if="wallet.email">{{wallet.email}}</span>
         </span>
@@ -56,7 +56,7 @@
       </div>
       <div class="item item-divider"></div>
       <a class="item item-icon-right" ui-sref="tabs.preferences.preferencesAdvanced">
-        <span translate>Advanced</span>
+        <span translate>More Options</span>
         <i class="icon bp-arrow-right"></i>
       </a>
     </div>

www/views/preferencesAbout.html

@@ -1,11 +1,11 @@
-<ion-view>
+<ion-view class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>{{title}}</ion-nav-title>
     <ion-nav-back-button>
     </ion-nav-back-button>
   </ion-nav-bar>
   <ion-content>
-    <div class="list">
+    <div class="list settings-list">
       <div class="item item-divider" translate>
         Release information
       </div>

www/views/preferencesAdvanced.html

@@ -1,6 +1,6 @@
 <ion-view class="settings">
   <ion-nav-bar class="bar-royal">
-    <ion-nav-title>{{'Advanced Preferences' | translate}}</ion-nav-title>
+    <ion-nav-title>{{'More Options' | translate}}</ion-nav-title>
     <ion-nav-back-button>
     </ion-nav-back-button>
   </ion-nav-bar>

www/views/preferencesAlias.html

@@ -1,17 +1,21 @@
-<ion-view>
+<ion-view class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>
-      {{'Alias'|translate}}
+      {{'Wallet Name'|translate}}
     </ion-nav-title>
     <ion-nav-back-button>
     </ion-nav-back-button>
   </ion-nav-bar>
   <ion-content>
+    <div class="settings-explaination">
+      <div class="settings-heading" translate>What do you call this wallet?</div>
+      <div class="settings-description" translate>When this wallet was created, it was called &ldquo;{{walletName}}&rdquo;. You can change the name displayed on this device below.</div>
+    </div>
     <form name="aliasForm" ng-submit="save(aliasForm)" novalidate>
-      <div class="card list">
+      <div class="list settings-input-group">
         <label class="item item-input item-stacked-label">
-          <span class="input-label" transalate>Alias for {{walletName}}</span>
+          <span class="input-label" translate>Name</span>
-          <input type="text" id="alias" name="alias" ng-model="alias.value" placeholder="John" required>
+          <input type="text" id="alias" name="alias" ng-model="alias.value" placeholder="Personal Wallet" required>
         </label>
       </div>
       <button type="submit"
@@ -20,6 +24,5 @@
         Save
       </button>
     </form>
-    <div class="text-center" translate>Changing wallet alias only affects the local wallet name.</div>
   </ion-content>
 </ion-view>

www/views/preferencesColor.html

@@ -1,15 +1,15 @@
-<ion-view>
+<ion-view id="settings-color" class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>
-      {{'Color'|translate}}
+      {{'Wallet Color'|translate}}
     </ion-nav-title>
     <ion-nav-back-button>
     </ion-nav-back-button>
   </ion-nav-bar>
   <ion-content>
-    <ion-radio ng-repeat="c in colorList" ng-value="c" ng-model="currentColor" ng-click="save(c.color)">
+    <ion-radio ng-repeat="c in colorList" ng-value="c.color" ng-model="currentColor" ng-click="save(c.color)">
-      <span ng-style="{'color': c.color}">&block;</span>
+      <span ng-style="{'background-color': c.color, 'color' : c.color}" class="settings-color-block"></span>
-      <span> {{c.name}}</span>
+      <span class="settings-color-name"> {{c.name}}</span>
     </ion-radio>
   </ion-content>
 </ion-view>

www/views/preferencesDeleteWallet.html

@@ -16,6 +16,10 @@
         </p>
       </div>
     </div>
-    <button class="button button-block button-assertive" ng-click="showDeletePopup()"translate>Delete <span ng-show="alias">{{alias}}</span>{{walletName}}</button>
+    <div class="padding">
+      <button class="button button-standard button-assertive" ng-click="showDeletePopup()">
+        {{'Delete'|translate}} <span ng-show="alias">{{alias}}</span>{{walletName}}
+      </button>
+    </div>
   </ion-content>
 </ion-view>

www/views/preferencesEmail.html

@@ -1,4 +1,4 @@
-<ion-view>
+<ion-view class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>
       {{'Email Notifications'|translate}}
@@ -7,10 +7,15 @@
     </ion-nav-back-button>
   </ion-nav-bar>
   <ion-content>
+    <div class="settings-explaination">
+      <div class="settings-description" translate>
+        You'll receive email notifications about payments sent and received from this wallet.
+      </div>
+    </div>
     <form name="emailForm" ng-submit="save(emailForm)" novalidate>
-      <div class="card list">
+      <div class="list settings-input-group">
         <label class="item item-input item-stacked-label">
-          <span class="input-label" transalate>Email for wallet notifications</span>
+          <span class="input-label" translate>Email Address</span>
           <input type="email" id="email" name="email" ng-model="email.value" required></input>
         </label>
       </div>

www/views/preferencesFee.html

@@ -1,4 +1,4 @@
-<ion-view class="settings">
+<ion-view id="settings-fee" class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>
       {{'Bitcoin Network Fee Policy'|translate}}
@@ -6,19 +6,21 @@
     <ion-nav-back-button>
     </ion-nav-back-button>
   </ion-nav-bar>
-
   <ion-content>
-    <ion-radio ng-repeat="fee in feeLevels.livenet" ng-value="fee.level" ng-model="currentFeeLevel" ng-click="save(fee)">
+    <div class="settings-explaination">
-      {{feeOpts[fee.level]|translate}}
+      <div class="settings-heading" translate>Bitcoin transactions include a fee collected by miners on the network.</div>
-    </ion-radio>
+      <div class="settings-description" translate>The higher the fee, the greater the incentive a miner has to include that transaction in a block. Current fees are determined based on network load and the selected policy.</div>
-    <div class="padding text-center positive" ng-repeat="fee in feeLevels.livenet" ng-if="fee.level == currentFeeLevel">
+      <div class="estimates" ng-repeat="fee in feeLevels.livenet" ng-if="fee.level == currentFeeLevel">
-      <div ng-show="fee.nbBlocks">
+        <div ng-show="fee.nbBlocks">
-        <span translate>Average confirmation time: {{fee.nbBlocks * 10}} minutes</span>.
+          <span translate>Average confirmation time: <span class="fee-minutes">{{fee.nbBlocks * 10}} minutes</span></span>
+        </div>
+        <span translate>Current fee rate for this policy: <span class="fee-rate">{{fee.feePerKBUnit}}/kiB</span></span>
       </div>
-      <span translate>Current fee rate for this policy: {{fee.feePerKBUnit}}/kiB</span>
     </div>
-    <div class="padding" translate>
+    <div class="fee-policies">
-      Bitcoin transactions may include a fee collected by miners on the network. The higher the fee, the greater the incentive a miner has to include that transaction in a block. Current fees are determined based on network load and the selected policy.
+      <ion-radio ng-repeat="fee in feeLevels.livenet" ng-value="fee.level" ng-model="currentFeeLevel" ng-click="save(fee)">
+        {{feeOpts[fee.level]|translate}}
+      </ion-radio>
     </div>
   </ion-content>
 </ion-view>

www/views/preferencesInformation.html

@@ -88,15 +88,21 @@
 
       <div ng-show="addrs">
         <div class="item item-divider" translate>
-          Last Wallet Addresses
+          Latest Wallet Addresses
+        </div>
+        <div class="settings-explaination">
+          <div class="settings-description" translate>
+            Only &ldquo;main&rdquo; addresses are shown below. This excludes &ldquo;change&rdquo; address.
+          </div>
         </div>
-
         <div class="item" ng-repeat="a in addrs" class="oh" copy-to-clipboard="a.address">
           <span>{{a.address}}</span>
           <span class="item-note">{{a.path}} &middot;  {{a.createdOn *1000  | amDateFormat:'MMMM Do YYYY, h:mm a' }}</span>
         </div>
-        <div class="padding text-center" translate>
+        <div class="settings-explaination">
-          Only Main (not change) addresses are shown. The addresses on this list were not verified locally at this time.
+          <div class="settings-description" translate>
+            Please note: due to resource constraints, this list of addresses is not verified locally. A compromised BWS node could return addresses which are not controlled by this wallet.
+          </div>
         </div>
         <button class="button button-standard button-primary" ng-click="scan()" translate>
           Scan addresses for funds

www/views/preferencesLogs.html

@@ -1,19 +1,21 @@
-<ion-view>
+<ion-view class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>{{'Session Log' | translate}}</ion-nav-title>
     <ion-nav-back-button>
     </ion-nav-back-button>
   </ion-nav-bar>
   <ion-content>
-    <button class="button button-standard button-primary" style="margin-top: 1rem" copy-to-clipboard="prepare()">
+    <div class="settings-button-group">
-      <i class="icon ion-clipboard"></i>
+      <button class="button button-standard button-primary" style="margin-top: 1rem" copy-to-clipboard="prepare()">
-      <span translate>Copy to clipboard</span>
+        <i class="icon ion-clipboard"></i>
-    </button>
+        <span translate>Copy to clipboard</span>
-    <button class="button button-standard button-secondary" ng-show="isCordova" ng-click="sendLogs()">
+      </button>
-      <i class="icon ion-ios-email-outline"></i>
+      <button class="button button-standard button-secondary" ng-show="isCordova" ng-click="sendLogs()">
-      <span translate>Send by email</span>
+        <i class="icon ion-ios-email-outline"></i>
-    </button>
+        <span translate>Send by email</span>
-    <div class="card">
+      </button>
+    </div>
+    <div class="list">
       <div class="item item-text-wrap">
         <ul>
           <li ng-repeat="l in logs">

www/views/tab-create-personal.html

@@ -1,4 +1,4 @@
-<ion-view>
+<ion-view class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>{{'Create Personal Wallet' | translate}}</ion-nav-title>
     <ion-nav-back-button>
@@ -7,7 +7,7 @@
 
   <ion-content ng-controller="createController" ng-init="init(1);">
     <form name="setupForm" ng-submit="create(setupForm)" novalidate>
-      <div class="card list">
+      <div class="list settings-list settings-input-group">
         <label class="item item-input item-stacked-label">
           <span class="input-label" translate>Wallet name</span>
           <input type="text"

www/views/tab-create-shared.html

@@ -1,4 +1,4 @@
-<ion-view>
+<ion-view class="settings">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>{{'Create Shared Wallet' | translate}}</ion-nav-title>
     <ion-nav-back-button>
@@ -7,7 +7,7 @@
 
   <ion-content ng-controller="createController" ng-init="init(3);">
     <form name="setupForm" ng-submit="create(setupForm)" novalidate>
-      <div class="card list">
+      <div class="list settings-list settings-input-group">
         <label class="item item-input item-stacked-label">
           <span class="input-label" translate>Wallet name</span>
           <input type="text"
@@ -19,9 +19,9 @@
         </label>
 
         <label class="item item-input item-stacked-label">
-          <span class="input-label" translate>Your nickname</span>
+          <span class="input-label" translate>Your name</span>
           <input type="text"
-            placeholder="{{'John'|translate}}"
+            placeholder="{{'Satoshi'|translate}}"
             ng-model="formData.myName"
             ng-required="formData.totalCopayers != 1"
             ng-disabled="formData.totalCopayers == 1"

www/views/tab-export-file.html

@@ -5,85 +5,87 @@
   </div>
 
   <form name="exportForm" novalidate>
-    <div class="card">
+    <div class="list">
       <label class="item item-input item-stacked-label">
-        <span class="input-label" transalate>Set up a password</span>
+        <span class="input-label" translate>Set up a password</span>
         <input type="password" placeholder="{{'Your password'|translate}}" ng-model="formData.password">
       </label>
 
       <label class="item item-input item-stacked-label">
-        <span class="input-label" transalate>Repeat the password</span>
+        <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-home.html

@@ -34,7 +34,7 @@
         <span class="badge badge-assertive m5t m10r" ng-show="txpsN>3"> {{txpsN}}</span>
       </a>
 
-      <a ng-repeat="tx in txps" class="item" ng-click="openTxpModal(tx)">
+      <a ng-repeat="tx in txps" class="item item-sub" ng-click="openTxpModal(tx)">
         <span ng-include="'views/includes/txp.html'"></span>
       </a>
     </div>
@@ -48,7 +48,7 @@
         <ion-spinner icon="lines"></ion-spinner>
         <div translate>Updating activity...</div>
       </span>
-      <a class="item activity" ng-repeat="notification in notifications" ng-click="openNotificationModal(notification)">
+      <a class="item item-sub activity" ng-repeat="notification in notifications" ng-click="openNotificationModal(notification)">
         <span ng-include="'views/includes/walletActivity.html'"></span>
       </a>
     </div>
@@ -58,57 +58,59 @@
         <span translate>Wallets</span>
         <a ui-sref="tabs.add" ng-if="wallets[0]"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
       </div>
-      <a ng-hide="wallets[0]" ui-sref="tabs.add" class="item item-icon-left item-big-icon-left item-icon-right next-step ng-hide">
+      <div>
-       <i class="icon big-icon-svg">
+        <a ng-if="!wallets[0]" ui-sref="tabs.add" class="item item-icon-left item-big-icon-left item-icon-right next-step ng-hide">
-         <div class="bg icon-create-wallet"></div>
+         <i class="icon big-icon-svg">
-       </i>
+           <div class="bg icon-create-wallet"></div>
-        <span translate>Create a bitcoin wallet</span>
+         </i>
-        <i class="icon bp-arrow-right"></i>
+          <span translate>Create a bitcoin wallet</span>
-      </a>
+          <i class="icon bp-arrow-right"></i>
-      <a ng-repeat="wallet in wallets track by $index"
+        </a>
-         class="item item-icon-left item-big-icon-left item-icon-right wallet"
+        <a ng-repeat="wallet in wallets track by $index"
-         ng-click="openWallet(wallet)">
+           class="item item-sub item-icon-left item-big-icon-left item-icon-right wallet"
-        <i class="icon big-icon-svg">
+           ng-click="openWallet(wallet)">
-          <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
+          <i class="icon big-icon-svg">
-        </i>
+            <img src="img/icon-wallet.svg" ng-style="{'background-color': wallet.color}" class="bg"/>
-        <span>
+          </i>
-          {{wallet.name || wallet.id}}
+          <span>
-          <span class="size-12 text-light" ng-if="wallet.n > 1">
+            {{wallet.name || wallet.id}}
-            {{wallet.m}}-of-{{wallet.n}}
+            <span class="size-12 text-light" ng-if="wallet.n > 1">
+              {{wallet.m}}-of-{{wallet.n}}
+            </span>
           </span>
-        </span>
 
-        <p>
+          <p>
-        <span ng-if="!wallet.isComplete()" class="assertive" translate>
+          <span ng-if="!wallet.isComplete()" class="assertive" translate>
-          Incomplete
+            Incomplete
-        </span>
+          </span>
-        <span ng-if="wallet.isComplete()">
+          <span ng-if="wallet.isComplete()">
-          <span ng-if="!wallet.balanceHidden">{{wallet.status.availableBalanceStr}}</span>
+            <span ng-if="!wallet.balanceHidden">{{wallet.status.availableBalanceStr}}</span>
-          <span ng-if="wallet.balanceHidden" translate>[Balance Hidden]</span>
+            <span ng-if="wallet.balanceHidden" translate>[Balance Hidden]</span>
-        </span>
+          </span>
-        &nbsp;
+          &nbsp;
-        </p>
+          </p>
-        <i class="icon bp-arrow-right"></i>
+          <i class="icon bp-arrow-right"></i>
-      </a>
+        </a>
-      <a ui-sref="tabs.bitpayCard"
+        <a ui-sref="tabs.bitpayCard"
-         ng-if="wallets[0] && externalServices.BitpayCard && bitpayCardEnabled"
+           ng-if="wallets[0] && externalServices.BitpayCard && bitpayCardEnabled"
-         class="item item-icon-left item-big-icon-left item-icon-right">
+           class="item item-sub item-icon-left item-big-icon-left item-icon-right">
-        <i class="icon big-icon-svg">
+          <i class="icon big-icon-svg">
-          <div class="bg icon-bitpay-card"></div>
+            <div class="bg icon-bitpay-card"></div>
-        </i>
+          </i>
-        <h2>BitPay Card</h2>
+          <h2>BitPay Card</h2>
-        <p ng-if="!bitpayCard" translate>Add funds to get started</p>
+          <p ng-if="!bitpayCard" translate>Add funds to get started</p>
-        <span ng-if="bitpayCard">${{bitpayCard.balance}}</span>
+          <span ng-if="bitpayCard">${{bitpayCard.balance}}</span>
-        <i class="icon bp-arrow-right"></i>
+          <i class="icon bp-arrow-right"></i>
-      </a>
+        </a>
+      </div>
     </div>
 
     <div class="list card" ng-if="wallets[0] && externalServices.BuyAndSell && (glideraEnabled || coinbaseEnabled)">
-      <div class="item item-icon-right item-heading" translate>
+      <div class="item item-sub item-icon-right item-heading" translate>
         Buy &amp; Sell Bitcoin
         <a ui-sref="tabs.buyandsell"><i class="icon ion-ios-plus-empty list-add-button"></i></a>
       </div>
-      <a ng-if="glideraEnabled" ui-sref="tabs.buyandsell.glidera" class="item item-icon-right">
+      <a ng-if="glideraEnabled" ui-sref="tabs.buyandsell.glidera" class="item item-sub item-icon-right">
         <img src="img/glidera-logo.png" width="90"/>
         <i class="icon bp-arrow-right"></i>
       </a>
@@ -119,7 +121,7 @@
     </div>
 
     <div class="list card" ng-if="wallets[0] && externalServices.AmazonGiftCards && amazonEnabled">
-      <a class="item item-icon-left item-icon-right item-big-icon-left" ui-sref="tabs.giftcards.amazon">
+      <a class="item item-sub item-icon-left item-icon-right item-big-icon-left" ui-sref="tabs.giftcards.amazon">
         <i class="icon big-icon-svg">
           <div class="bg icon-amazon"></div>
         </i>
@@ -136,21 +138,21 @@
         <i class="icon bp-arrow-down" ng-show="hideNextSteps"></i>
       </div>
       <div ng-show="!hideNextSteps">
-        <a ui-sref="tabs.bitpayCard" ng-show="!externalServices.BitpayCard && bitpayCardEnabled" class="item item-icon-left item-big-icon-left item-icon-right next-step">
+        <a ui-sref="tabs.bitpayCard" ng-if="!externalServices.BitpayCard && bitpayCardEnabled" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
          <i class="icon big-icon-svg">
            <div class="bg icon-bitpay-card"></div>
          </i>
           <span translate>Add BitPay Visa&reg; Card</span>
           <i class="icon bp-arrow-right"></i>
         </a>
-        <a ng-show="!externalServices.BuyAndSell && (coinbaseEnabled || glideraEnabled)" ui-sref="tabs.buyandsell.glidera" class="item item-icon-left item-big-icon-left item-icon-right next-step">
+        <a ng-if="!externalServices.BuyAndSell && (coinbaseEnabled || glideraEnabled)" ui-sref="tabs.buyandsell.glidera" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
          <i class="icon big-icon-svg">
            <div class="bg icon-buy-bitcoin"></div>
          </i>
           <span translate>Buy or Sell Bitcoin</span>
           <i class="icon bp-arrow-right"></i>
         </a>
-        <a ui-sref="tabs.giftcards.amazon" ng-show="!externalServices.AmazonGiftCards && amazonEnabled" class="item item-icon-left item-big-icon-left item-icon-right next-step">
+        <a ui-sref="tabs.giftcards.amazon" ng-if="!externalServices.AmazonGiftCards && amazonEnabled" class="item item-sub item-icon-left item-big-icon-left item-icon-right next-step">
           <i class="icon big-icon-svg">
             <div class="bg icon-amazon"></div>
           </i>

www/views/tab-import-file.html

@@ -1,5 +1,5 @@
 <form name="importForm" ng-submit="importBlob(importForm)" novalidate>
-  <div class="list card">
+  <div class="list settings-list settings-input-group">
     <label class="item item-input item-stacked-label no-border" ng-show="!isSafari && !isCordova">
       <div class="input-label" translate>Choose a backup file from your computer</div>
       <div>
@@ -21,10 +21,12 @@
         ng-model="formData.password">
     </label>
 
-    <ion-toggle ng-model="showAdv" toggle-class="toggle-stable">
+    <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>
-    </ion-toggle>
+    </a>
 
     <div ng-show="showAdv">
       <label class="item item-input item-stacked-label">

www/views/tab-import-hardware.html

@@ -6,7 +6,7 @@
   </div>
 
   <div ng-show="seedOptions[0]">
-    <div class="card list">
+    <div class="list settings-list settings-input-group">
       <label class="item item-input item-select">
         <div class="input-label" translate>
           Wallet Type
@@ -24,10 +24,12 @@
         <span translate>Shared Wallet</span>
       </ion-toggle>
 
-      <ion-toggle ng-model="showAdv" toggle-class="toggle-stable">
+      <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>
-      </ion-toggle>
+      </a>
 
       <div ng-show="showAdv">
         <label class="item item-input item-stacked-label">

www/views/tab-import-phrase.html

@@ -11,26 +11,24 @@
 </div>
 
 <form name="importForm12" ng-submit="importMnemonic(importForm12)" novalidate>
-  <div class="list card">
+  <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>
 
-    <ion-toggle ng-model="showAdv" toggle-class="toggle-stable">
+    <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>
-    </ion-toggle>
+    </a>
 
     <div ng-show="showAdv">
       <label class="item item-input item-stacked-label">

www/views/tab-send.html

@@ -2,8 +2,8 @@
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>{{'Send' | translate}}</ion-nav-title>
   </ion-nav-bar>
-  <ion-content scroll="false">
+  <ion-content scroll="false" class="ng-hide" ng-show="!hasFunds">
-    <div class="ng-hide zero-state" ng-show="!hasFunds">
+    <div class="zero-state">
       <i class="icon zero-state-icon">
         <img src="img/tab-icons/ico-send-selected.svg"/>
       </i>
@@ -11,9 +11,9 @@
       <div class="zero-state-description" ng-show="hasWallets" translate>To get started, buy bitcoin or share your address. You can receive bitcoin from any wallet or service.</div>
       <div class="zero-state-description" ng-show="!hasWallets" translate>To get started, you'll need to create a bitcoin wallet and get some bitcoin.</div>
       <div class="zero-state-cta">
-        <button class="button button-standard button-primary" ng-click="buyBitcoin()" ng-show="hasWallets">Buy Bitcoin</button>
+        <button class="button button-standard button-primary" ng-click="buyBitcoin()" ng-show="hasWallets" translate>Buy Bitcoin</button>
-        <button class="button button-standard button-primary" ng-click="createWallet()" ng-show="!hasWallets">Create bitcoin wallet</button>
+        <button class="button button-standard button-primary" ng-click="createWallet()" ng-show="!hasWallets" translate>Create bitcoin wallet</button>
-        <button class="button button-standard button-secondary" ui-sref="tabs.receive" ng-show="hasWallets">Show bitcoin address</button>
+        <button class="button button-standard button-secondary" ui-sref="tabs.receive" ng-show="hasWallets" translate>Show bitcoin address</button>
       </div>
     </div>
   </ion-content>
@@ -22,7 +22,7 @@
     <label class="item item-input bitcoin-address">
       <i class="icon icon-svg placeholder-icon"><img src="img/icon-bitcoin-symbol.svg"></i>
       <div class="qr-scan-icon" ng-style="{'width': '100%'}">
-        <a ui-sref="tabs.scan" ng-style="{'top': '6px'}">
+        <a on-tap="openScanner()" ng-style="{'top': '6px'}">
           <i class="icon ion-qr-scanner"></i>
         </a>
         <input type="text" placeholder="{{'Search or enter bitcoin address' | translate}}" ng-model="formData.search" ng-change="findContact(formData.search)" ng-model-onblur>

www/views/tab-settings.html

@@ -1,12 +1,12 @@
 <ion-view id="tab-settings" class="settings">
   <ion-nav-bar class="bar-royal">
-    <ion-nav-title>{{'Global Settings' | translate}}</ion-nav-title>
+    <ion-nav-title>{{'Settings' | translate}}</ion-nav-title>
   </ion-nav-bar>
 
   <ion-content>
-    <div class="list">
+    <div class="settings-list list">
       <div class="item item-divider"></div>
-      <a class="item item-icon-left item-icon-right" ng-hide="true">
+      <a class="ng-hide item item-icon-left item-icon-right" ng-hide="true">
         <i class="icon big-icon-svg">
           <img src="img/icon-exchange.svg" class="bg"/>
         </i>
@@ -20,7 +20,16 @@
         <span translate>Address Book</span>
         <i class="icon bp-arrow-right"></i>
       </a>
-      <a class="item item-icon-left item-icon-right" ng-hide="true">
+      <a class="item item-icon-left item-icon-right" ng-click=openExternalLink("https://help.bitpay.com")>
+        <i class="icon big-icon-svg">
+          <img src="img/icon-help-support.svg" class="bg"/>
+        </i>
+        <span translate>Help &amp; Support</span>
+        <i class="icon big-icon-svg">
+          <img src="img/icon-link.svg" class="bg just-a-hint"/>
+        </i>
+      </a>
+      <a class="ng-hide item item-icon-left item-icon-right" ng-hide="true">
         <i class="icon big-icon-svg">
           <img src="img/icon-send-feedback.svg" class="bg"/>
         </i>
@@ -53,8 +62,8 @@
         <i class="icon big-icon-svg">
           <img src="img/icon-unit.svg" class="bg"/>
         </i>
-        <span translate>Unit</span>
+        <span class="setting-title" translate>Bitcoin Unit</span>
-        <span class="item-note">
+        <span class="setting-value">
           {{unitName}}
         </span>
         <i class="icon bp-arrow-right"></i>
@@ -64,8 +73,8 @@
         <i class="icon big-icon-svg">
           <img src="img/icon-alternative-currency.svg" class="bg"/>
         </i>
-        <span translate>Alternative Currency</span>
+        <span class="setting-title" translate>Alternative Currency</span>
-        <span class="item-note">
+        <span class="setting-value">
           {{selectedAlternative.name}}
         </span>
         <i class="icon bp-arrow-right"></i>
@@ -75,21 +84,15 @@
         <i class="icon big-icon-svg">
           <img src="img/icon-network.svg" class="bg"/>
         </i>
-        <span translate>Bitcoin Network Fee Policy</span>
+        <span class="setting-title" translate>Bitcoin Network Fee Policy</span>
-        <span class="item-note">
+        <span class="setting-value">
           {{feeOpts[currentFeeLevel]|translate}}
         </span>
         <i class="icon bp-arrow-right"></i>
       </a>
-      <a class="item item-icon-right item-icon-left" href ui-sref="tabs.advanced">
-        <i class="icon big-icon-svg">
-          <img src="img/icon-advanced.svg" class="bg"/>
-        </i>
-        <span translate>Advanced</span>
-        <i class="icon bp-arrow-right"></i>
-      </a>
 
       <div class="item item-divider" ng-show="wallets[0]" translate>Wallets &amp; Integrations</div>
+
       <a class="item item-icon-left item-icon-right" href
            ui-sref="tabs.preferences({'walletId': item.id})"
            ng-repeat="item in wallets track by $index">
@@ -107,6 +110,24 @@
       </a>
 
       <div class="item item-divider"></div>
+
+      <a class="ng-hide item item-icon-left item-icon-right" href ng-hide="true">
+        <i class="icon big-icon-svg">
+          <img src="img/icon-heart.svg" class="bg"/>
+        </i>
+        <span translate>Tell a friend</span>
+        <i class="icon bp-arrow-right"></i>
+      </a>
+
+      <div class="ng-hide item item-divider" ng-hide="true"></div>
+
+      <a class="item item-icon-right item-icon-left" href ui-sref="tabs.advanced">
+        <i class="icon big-icon-svg">
+          <img src="img/icon-advanced.svg" class="bg"/>
+        </i>
+        <span translate>Advanced</span>
+        <i class="icon bp-arrow-right"></i>
+      </a>
       <a class="item item-icon-left item-icon-right" href ui-sref="tabs.about">
         <i class="icon big-icon-svg">
           <img src="img/icon-about.svg" class="bg"/>
@@ -114,13 +135,6 @@
         <span translate>About</span> {{appName}}
         <i class="icon bp-arrow-right"></i>
       </a>
-      <a class="item item-icon-left item-icon-right" href ng-hide="true">
-        <i class="icon big-icon-svg">
-          <img src="img/icon-heart.svg" class="bg"/>
-        </i>
-        <span translate>Tell a friend</span>
-        <i class="icon bp-arrow-right"></i>
-      </a>
 
       <div class="item item-divider"></div>
       <a class="item item-icon-left item-icon-right" ng-click="openExternalLink('https://help.bitpay.com', true, 'BitPay Help Center', 'Help and support information is available at the BitPay Help Center website. Would you like to go there now?', 'Open Help Center', 'Go Back')">

www/views/termsOfUse.html

@@ -5,9 +5,9 @@
     </ion-nav-back-button>
   </ion-nav-bar>
 
-  <ion-content class="padding">
+  <ion-content>
-    <div class="card">
+    <div class="list">
-      <div class="item item-text-wrap" ng-include="'views/includes/terms.html'"></div>
+      <div class="item item-text-wrap" id="settings-tos" ng-include="'views/includes/terms.html'"></div>
     </div>
     <button class="button button-standard button-primary"
             ng-show="lang != 'en'"