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

src/js/controllers/confirm.js

@@ -40,6 +40,8 @@ angular.module('copayApp.controllers').controller('confirmController', function(
 
     $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() {};
 

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

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/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-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,9 @@
 @import "bitpayCard";
 @import "address-book";
 @import "wallet-backup-phrase";
-@import "address-book";
 @import "zero-state";
 @import "onboarding/onboarding";
+@import "includes/actionSheet";
 @import "includes/walletActivity";
 @import "includes/wallets";
 @import "includes/modals/modals";
@@ -26,4 +26,5 @@
 @import "includes/tx-details";
 @import "includes/txp-details";
 @import "includes/tx-status";
+@import "includes/walletSelector";
 @import "integrations/coinbase.scss";

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,55 @@
     </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">
-
+          <span class="label" translate>{{'Add Memo'|translate}}</span>
-    <div class="text-center" ng-show="noMatchingWallet">
+          <span class="item-note">
-      <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 item-icon-right" ng-hide="insuffientFunds">
-    <div class="text-center" ng-show="insuffientFunds">
+          <span class="label" translate>Fee</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>
+          <i class="icon bp-arrow-right"></i>
-
+        </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 +79,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/import.html

@@ -1,4 +1,4 @@
-<ion-view ng-controller="tabsController" ng-init="importInit()">
+<ion-view 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>
@@ -7,13 +7,13 @@
 
   <ion-content ng-controller="importController" ng-init="phrase = true; init()">
     <div class="row text-center">
-      <div class="col" ng-click="phrase = true; file = hardware = false" ng-style="phrase && {'border-bottom': '2px solid'}">
+      <div class="col" ng-click="phrase = true; file = hardware = false; showAdv = false" ng-style="phrase && {'border-bottom': '2px 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': '2px 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': '2px 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/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)">
-      <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/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

@@ -7,12 +7,12 @@
   <form name="exportForm" novalidate>
     <div class="card">
       <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>

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,7 +11,7 @@
 </div>
 
 <form name="importForm12" ng-submit="importMnemonic(importForm12)" novalidate>
-  <div class="list card">
+  <div class="list settings-list settings-input-group">
     <div class="row">
       <div class="col col-90">
         <label class="item item-input item-stacked-label no-border">
@@ -27,10 +27,12 @@
       </div>
     </div>
 
-    <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

@@ -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>

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,14 +110,8 @@
       </a>
 
       <div class="item item-divider"></div>
-      <a class="item item-icon-left item-icon-right" href ui-sref="tabs.about">
+
-        <i class="icon big-icon-svg">
+      <a class="ng-hide item item-icon-left item-icon-right" href ng-hide="true">
-          <img src="img/icon-about.svg" class="bg"/>
-        </i>
-        <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>
@@ -122,16 +119,23 @@
         <i class="icon bp-arrow-right"></i>
       </a>
 
-      <div class="item item-divider"></div>
+      <div class="ng-hide item item-divider" ng-hide="true"></div>
-      <a class="item item-icon-left item-icon-right" ng-click=openExternalLink("https://help.bitpay.com")>
+
+      <a class="item item-icon-right item-icon-left" href ui-sref="tabs.advanced">
         <i class="icon big-icon-svg">
-          <img src="img/icon-help-support.svg" class="bg"/>
+          <img src="img/icon-advanced.svg" class="bg"/>
-        </i>
-        <span translate>Help &amp; Support</span>
-        <i class="icon big-icon-svg">
-          <img src="img/icon-link.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"/>
+        </i>
+        <span translate>About</span> {{appName}}
+        <i class="icon bp-arrow-right"></i>
+      </a>
+
       <div class="item item-divider"></div>
     </div>
   </ion-content>

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