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

# Conflicts:
#	www/views/glidera.html

src/js/controllers/confirm.js

@@ -116,7 +116,7 @@ angular.module('copayApp.controllers').controller('confirmController', function(
     };
 
     popupService.showPrompt(null, message, opts, function(res) {
-      if (res) $scope.description = res;
+      if (typeof res != 'undefined') $scope.description = res;
       $timeout(function() {
         $scope.$apply();
       }, 100);

src/js/controllers/modals/txpDetails.js

@@ -18,10 +18,20 @@ angular.module('copayApp.controllers').controller('txpDetailsController', functi
     $scope.color = $scope.wallet.color;
     $scope.data = {};
     $scope.hasClick = platformInfo.hasClick;
+    $scope.displayAmount = getDisplayAmount(tx.amountStr);
+    $scope.displayUnit = getDisplayUnit(tx.amountStr);
     initActionList();
     checkPaypro();
   }
 
+  function getDisplayAmount(amountStr) {
+    return amountStr.split(' ')[0];
+  }
+
+  function getDisplayUnit(amountStr) {
+    return amountStr.split(' ')[1];
+  }
+
   function initActionList() {
     $scope.actionList = [];
 

src/js/controllers/onboarding/backupWarning.js

@@ -3,8 +3,8 @@
 angular.module('copayApp.controllers').controller('backupWarningController', function($scope, $state, $timeout, $stateParams, $ionicModal) {
 
   $scope.walletId = $stateParams.walletId;
-  $scope.fromState = $stateParams.from;
-  $scope.toState = $scope.fromState + ".backup";
+  $scope.fromState = $stateParams.from == 'onboarding' ? $stateParams.from + '.backupRequest' : $stateParams.from;
+  $scope.toState = $stateParams.from + '.backup';
 
   $scope.openPopup = function() {
     $ionicModal.fromTemplateUrl('views/includes/screenshotWarningModal.html', {

src/js/controllers/tab-home.js

@@ -173,6 +173,9 @@ angular.module('copayApp.controllers').controller('tabHomeController',
     $scope.hideHomeTip = function() {
       storageService.setHomeTipAccepted(false, function(error, value) {
         $scope.homeTip = false;
+        $timeout(function() {
+          $scope.$apply();
+        })
       });
     };
 

src/js/controllers/tab-send.js

@@ -6,6 +6,7 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
   var CONTACTS_SHOW_LIMIT;
   var currentContactsPage;
 
+
   var updateList = function() {
     CONTACTS_SHOW_LIMIT = 10;
     currentContactsPage = 0;
@@ -103,11 +104,56 @@ angular.module('copayApp.controllers').controller('tabSendController', function(
     });
   };
 
+
+  var updateHasFunds = function() {
+    $scope.hasFunds = null;
+
+    var wallets = profileService.getWallets({
+      onlyComplete: true,
+    });
+
+    if (!wallets || !wallets.length) {
+      $scope.hasFunds = false;
+    }
+
+    var index = 0;
+    lodash.each(wallets, function(w) {
+      walletService.getStatus(w, {}, function(err, status) {
+        ++index;
+        if (err || !status) {
+          $log.error(err);
+          return;
+        }
+
+        if (status.availableBalanceSat) {
+          $scope.hasFunds = true;
+        }
+        if (index == wallets.length) {
+          $scope.hasFunds = $scope.hasFunds || false;
+        }
+      });
+    });
+  };
+
   $scope.$on("$ionicView.beforeEnter", function(event, data) {
     $scope.formData = {
       search: null
     };
     updateList();
+    updateHasFunds();
   });
 
+  // This could probably be enhanced refactoring the routes abstract states
+  $scope.createWallet = function() {
+    $state.go('tabs.home').then(function() {
+      $state.go('tabs.add.create-personal');
+    });
+  };
+
+  $scope.buyBitcoin = function() {
+    $state.go('tabs.home').then(function() {
+      $state.go('tabs.buyandsell.glidera');
+    });
+  };
+
 });

src/sass/buttons.scss

@@ -38,6 +38,9 @@ $button-secondary-active-border:   transparent;
   &.button-secondary {
     &.button-standard {
       @extend %button-standard;
+      & + .button-standard {
+        margin-top: 1rem;
+      }
     }
   }
 }

src/sass/icons.scss

@@ -14,6 +14,19 @@
   padding-left: 74px;
 }
 
+
+.icon-svg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  > img {
+    background-repeat:no-repeat;
+    background-clip: padding-box;
+    background-size: contain;
+    height: 18px;
+  }
+}
+
 .big-icon-svg {
   padding: 0 7px;
   > .bg {

src/sass/ionic.scss

@@ -27,3 +27,14 @@ ion-tabs.ion-tabs-transparent {
     }
   }
 }
+
+// .placeholder-icon padding cannot be modified by a variable
+$placeholder-icon-padding: 10px;
+.placeholder-icon {
+  &:first-child {
+    padding-right: $placeholder-icon-padding;
+  }
+  &:last-child {
+    padding-left: $placeholder-icon-padding;
+  }
+}

src/sass/views/includes/modals/backup-confirm-modal.scss

@@ -1,3 +0,0 @@
-#backup-confirm-modal{
-  
-}

src/sass/views/includes/modals/backup-needed-modal.scss

@@ -0,0 +1,12 @@
+#backup-needed-modal{
+  .button.button-secondary {
+    font-size: 14px;
+    margin-top: 0;
+  }
+  .button {
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+    margin-top: 1rem;
+  }
+}

src/sass/views/includes/modals/modals.scss

@@ -73,5 +73,5 @@
   background: rgba(0, 0, 0, .8);
 }
 
-@import "backup-confirm-modal";
+@import "backup-needed-modal";
 @import "screenshot-warning-model";

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

@@ -1,42 +1,97 @@
-#txp-details{
+#txp-details {
+  $item-lateral-padding: 20px;
+  $item-vertical-padding: 10px;
+  $item-border-color: #EFEFEF;
+  $item-label-color: #6C6C6E;
+
+  .list {
+    background: #f5f5f5;
+  }
   .slide-to-pay {
     bottom: 100px;
   }
   .head {
-    padding-bottom: 30px;
-    .sending-label{
-      line-height: 70px;
-      font-size: 25px;
-      i {
-        margin-left: 20px;
-      }
-      span {
-        margin-left: 15px;
+    padding: 30px $item-lateral-padding 4rem;
+    border-top: 0;
+
+    .sending-label {
+      display: flex;
+      font-size: 18px;
+      align-items: center;
+      margin-bottom: 1.5rem;
+
+      img {
+        margin-right: 1rem;
       }
     }
     .amount-label{
-      margin-left: 20px;
       line-height: 30px;
       .amount{
-        font-size: 36px;
+        font-size: 38px;
+        margin-bottom: .5rem;
+
+        > .unit {
+          font-family: "Roboto-Light";
+        }
       }
-      .alternative{
-        font-size: 18px;
-        font-weight: 200;
-        color: grey;
+      .alternative {
+        font-size: 16px;
+        font-family: "Roboto-Light";
+        color: #9B9B9B;
       }
     }
   }
-  .info{
+  .item {
+    border-color: $item-border-color;
+  }
+  .info {
     span {
       display: block;
     }
+    .item {
+      color: #4A4A4A;
+      padding: $item-vertical-padding $item-lateral-padding;
+
+      .label {
+        font-size: 14px;
+        color: $item-label-color;
+        margin-bottom: 8px;
+      }
+
+      &.single-line {
+        display: flex;
+        align-items: center;
+        padding: 17px $item-lateral-padding;
+
+        .label {
+          margin: 0;
+          flex-grow: 1;
+        }
+      }
+    }
+    .item-divider {
+      padding-top: 1.2rem;
+      color: $item-label-color;
+      font-size: 15px;
+    }
     .payment-proposal-to {
       width: 100%;
       display: inline-block;
-      padding: 5px 15px;
-      background-color: #f5f5f5;
+      padding: 8px 13px;
+      background-color: rgba(203, 203, 203, .13);
       margin-top: 10px;
+      margin-bottom: 5px;
+      display: flex;
+      align-items: center;
+      border-radius: 4px;
+
+      img {
+        padding: .2rem;
+        padding-left: 0;
+        border-right: 1px solid #e4e4e4;
+        padding-right: 12px;
+      }
+
       i {
         color: grey;
         position: inherit;
@@ -49,18 +104,115 @@
       }
       contact {
         margin-left: 15px;
-        margin-bottom: 3px;
-        margin-top: 5px;
         font-size: 14px;
         display: inline-block;
       }
     }
+    .wallet {
+      display: flex;
+      align-items: center;
+      padding: .2rem 0;
+      i {
+        padding: 0;
+      }
+      img {
+        height: 24px;
+        width: 24px;
+        padding: 2px;
+        margin-right: .7rem;
+        box-shadow: none;
+      }
+    }
+
+    .timeline-item {
+      border: 0;
+      &:nth-child(2) {
+        border-top: 1px solid $item-border-color;
+      }
+      &:last-child {
+        border-bottom: 1px solid $item-border-color;
+      }
+      padding: 17px $item-lateral-padding;
+
+      > * {
+        padding-right: 0;
+      }
+    }
+
+    .timeline-content {
+      display: flex;
+      align-items: center;
+
+      &__icon {
+        display: flex;
+        align-items: center;
+        min-width: 40px;
+        padding-right: 1rem;
+        padding-left: 1rem;
+        margin-right: .5rem;
+        position: relative;
+
+        &::before {
+          content: '';
+          background: #e8e8e8;
+          height: 100px;
+          width: 1px;
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%) translateY(-100%);
+          top: 0;
+        }
+
+        &::after {
+          content: '';
+          background: #e8e8e8;
+          height: 100px;
+          width: 1px;
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%) translateY(100%);
+          bottom: 0;
+        }
+
+        > div {
+          border: 3px solid #09C286;
+          border-radius: 50%;
+          display: flex;
+          height: 26px;
+          width: 26px;
+          font-size: 13px;
+          align-items: center;
+          justify-content: center;
+          font-weight: 600;
+          vertical-align: middle;
+          color: #09C286;
+
+          &.rejected {
+            background: #E15061;
+            border-color: #E15061;
+            color: #FFFFFF;
+            font-family: "Roboto-Bold";
+            font-size: 19px;
+          }
+        }
+      }
+
+      &__label {
+        flex-grow: 1;
+
+        > .action {
+          font-size: 16px;
+        }
+
+        > .name {
+          color: #aaa;
+          font-size: 14px;
+        }
+      }
+    }
   }
-  .accept-slide {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    height: 100px;
-    background-color: #f5f5f5;
+  .proposal-deletion-help {
+    color: $item-label-color;
+    padding: 1rem 2rem;
   }
 }

src/sass/views/tab-receive.scss

@@ -32,9 +32,6 @@
       font-size: .8rem;
       i {
         font-size: 1.3rem;
-        &.ion-social-bitcoin-outline {
-          border-right: 1px solid rgb(228, 228, 228);
-        }
       }
     }
     .bit-address {
@@ -111,6 +108,10 @@
       margin-bottom:1rem;
     }
   }
+  .receive-tab-bitcoin-icon {
+    border-right: 1px solid rgb(228, 228, 228);
+    padding-right: 10px;
+  }
 }
 
 @keyframes fadeIn {

src/sass/views/tab-scan.scss

@@ -7,51 +7,13 @@ $scannerBackgroundColor: #060d2d;
   .bar-header {
     opacity: .9;
   }
+  .zero-state-cta {
+    padding-bottom: 6vh;
+  }
   &-has-problems,
   &-loading-camera {
     background-color: $scannerBackgroundColor;
   }
-  &-has-problems {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    .zero-state {
-      &-icon {
-        display: inline-block;
-        width: 50px;
-        height: 50px;
-        border-radius: 50%;
-        padding: 13px;
-        box-shadow: $subtle-box-shadow;
-        background-color: #fff;
-      }
-      &-heading {
-        font-size: 20px;
-        margin: 1rem;
-      }
-      &-description {
-        margin: 0 2rem 120px;
-        opacity: .6;
-        max-width: 300px;
-      }
-      &-tldr {
-        margin: 1rem auto;
-      }
-      &-description,
-      &-tldr {
-        max-width: 300px;
-      }
-      &-cta {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        padding-bottom: 6vh;
-      }
-    }
-  }
   &-loading-camera {
     height: 100%;
     width: 100%

src/sass/views/tab-send.scss

@@ -1,5 +1,15 @@
 #tab-send {
+  .zero-state-cta {
+    padding-bottom: 3vh;
+  }
+  .send-heading {
+    font-size: 14px;
+    font-weight: bold;
+    padding-bottom: 0;
+  }
   .bitcoin-address {
+    border-top: none;
+    padding-bottom: .5rem;
     @media(max-width: 480px) {
       input {
         font-size: 12px;

src/sass/views/views.scss

@@ -15,6 +15,7 @@
 @import "address-book";
 @import "wallet-backup-phrase";
 @import "address-book";
+@import "zero-state";
 @import "onboarding/onboarding";
 @import "includes/walletActivity";
 @import "includes/wallets";

src/sass/views/zero-state.scss

@@ -0,0 +1,45 @@
+.zero-state {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  &-icon {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    padding: 13px;
+    box-shadow: $subtle-box-shadow;
+    background-color: #fff;
+    img {
+      height: 100%;
+      width: 100%;
+    }
+  }
+  &-heading {
+    font-size: 20px;
+    margin: 1rem;
+  }
+  &-description {
+    margin-top: 0;
+    margin-left: 2rem;
+    margin-right: 2rem;
+    margin-bottom: 120px;
+    opacity: .6;
+    max-width: 300px;
+  }
+  &-tldr {
+    margin: 1rem auto;
+  }
+  &-description,
+  &-tldr {
+    max-width: 300px;
+  }
+  &-cta {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+  }
+}