Merge pull request #65 from cmgustavo/ref/design-20

Fix bitpay card. Replaces the app-name in desktop

app-template/package.json

@@ -13,14 +13,14 @@
   ],
   "main": "public/index.html",
   "window": {
-    "title": "Copay - A multisignature bitcoin wallet",
+    "title": "*NAMECASE* - *DESCRIPTION*",
     "icon": "./public/img/icons/icon-256.png",
     "toolbar": false,
     "show": true,
     "visible": true,
     "resizable": true,
     "frame": true,
-    "width": 800,
+    "width": 400,
     "height": 600,
     "position": "center",
     "fullscreen": false

public/views/bitpayCard.html

@@ -1,13 +1,13 @@
 <ion-view>
   <ion-nav-bar class="bar-royal">
     <ion-nav-buttons side="primary">
-      <button class="button back-button" ui-sref="tabs.home">
-        <i class="icon ion-ios-arrow-thin-left"></i>
+      <button class="button button-clear" ui-sref="tabs.home">
+        Close
       </button>
     </ion-nav-buttons>
     <ion-nav-title>BitPay Card</ion-nav-title>
     <ion-nav-buttons side="secondary">
-      <button class="button no-border" ui-sref="bitpayCard.preferences">
+      <button class="button button-clear" ui-sref="bitpayCard.preferences">
         <i class="icon ion-gear-b"></i>
       </button>
     </ion-nav-buttons>
@@ -93,8 +93,8 @@
     </div>
 
     <div ng-show="bitpayCard.bitpayCardAuthenticated && !bitpayCard.visaCardActivated && !addFunds">
-      <div class="oh pr">
-        <div class="amount" ng-style="{'background-color': '#293C92'}">
+      <div id="bitpayCard" class="oh pr">
+        <div class="amount">
           <div ng-show="!loadingHistory && bitpayCard.bitpayCardCurrentBalance" ng-click="bitpayCard.update()">
             <strong class="size-36">${{bitpayCard.bitpayCardCurrentBalance}}</strong>
             <div class="size-12">Available balance</div>
@@ -110,7 +110,7 @@
         </div>
       </div>
 
-      <select ng-model="dateRange" ng-change="bitpayCard.update(dateRange)">
+      <select class="m10" ng-model="dateRange" ng-change="bitpayCard.update(dateRange)">
         <option value="last30Days">Recent Activity</option>
         <option value="lastMonth">Last Month</option>
         <option value="all">All Activity</option>
@@ -127,40 +127,41 @@
         <i class="icon ion-android-sync"></i>
       </div>
 
-      <div
-        ng-show="!loadingHistory"
-        ng-repeat="tx in bitpayCard.bitpayCardTransactionHistory | orderBy: ['pending','-timestamp']"
-        class="row"
-        ng-init="bitpayCard.getMerchantInfo(tx)">
-        <div class="col" ng-init="icon = bitpayCard.getIconName(tx)">
-          <img class="m5t" ng-src="img/mcc-icons/{{icon}}.svg" width="22">
-        </div>
-
-        <div class="col">
-          <div class="size-12 text-bold">
-            {{tx.merchant.name}}
-          </div>
-          <div class="size-12">
-            {{tx.merchant.city}}, {{tx.merchant.state}}
-          </div>
-        </div>
+      <div class="card list" ng-show="!loadingHistory">
         <div
-          ng-init="desc = bitpayCard.processDescription(tx)"
-          class="col">
-          {{desc}}
-        </div>
-        <div class="col">
-          <img ng-show="!tx.pending" ng-src="img/check.svg" width="14">
-          <img ng-show="tx.pending" ng-src="img/sync.svg" width="14">
-        </div>
-        <div class="col text-right size-12 text-gray">
-          <div class="size-14"
-               ng-class="{
-               'text-success': tx.amount.indexOf('-') == -1 && !tx.pending,
-               'text-gray': tx.amount.indexOf('-') == -1 && tx.pending}">
-            {{tx.amount | currency:'$':2 }}
+          ng-repeat="tx in bitpayCard.bitpayCardTransactionHistory | orderBy: ['pending','-timestamp']"
+          class="item row"
+          ng-init="bitpayCard.getMerchantInfo(tx)">
+          <div class="col" ng-init="icon = bitpayCard.getIconName(tx)">
+            <img class="m5t" ng-src="img/mcc-icons/{{icon}}.svg" width="22">
+          </div>
+
+          <div class="col">
+            <div class="size-12 text-bold">
+              {{tx.merchant.name}}
+            </div>
+            <div class="size-12">
+              {{tx.merchant.city}}, {{tx.merchant.state}}
+            </div>
+          </div>
+          <div
+            ng-init="desc = bitpayCard.processDescription(tx)"
+            class="col">
+            {{desc}}
+          </div>
+          <div class="col">
+            <img ng-show="!tx.pending" ng-src="img/check.svg" width="14">
+            <img ng-show="tx.pending" ng-src="img/sync.svg" width="14">
+          </div>
+          <div class="col text-right size-12 text-gray">
+            <div class="size-14"
+                 ng-class="{
+                 'text-success': tx.amount.indexOf('-') == -1 && !tx.pending,
+                 'text-gray': tx.amount.indexOf('-') == -1 && tx.pending}">
+              {{tx.amount | currency:'$':2 }}
+            </div>
+            <time>{{tx.timestamp | amTimeAgo}}</time>
           </div>
-          <time>{{tx.timestamp | amTimeAgo}}</time>
         </div>
       </div>
     </div>
@@ -171,7 +172,7 @@
            ng-submit="bitpayCard.sendFunds()"
            novalidate>
 
-          <div class="list">
+          <div class="card list">
             <label class="item item-input item-stacked-label">
               <span class="input-label">Amount</span>
               <input
@@ -198,14 +199,14 @@
 
           <div class="row">
             <div class="col">
-              <button class="button button-block button-stable"
+              <button class="button button-block button-light"
                       type="button"
-                      ng-click="addFunds = false">
+                      ng-click="addFunds = false; fiat = null">
                 Cancel
               </button>
             </div>
             <div class="col">
-              <button class="button button-block"
+              <button class="button button-block button-positive"
                       ng-disabled="!fiat"
                       type="submit">
                 Send

public/views/modals/tx-status.html

@@ -8,7 +8,7 @@
       <span translate>Sent</span>
     </div>
     <div class="text-center m20t">
-      <a class="button" ng-click="cancel()" translate>OKAY</a>
+      <a class="button button-positive" ng-click="cancel()" translate>OKAY</a>
     </div>
   </div>
 
@@ -19,7 +19,7 @@
       <span translate>Payment Proposal Created</span>
     </div>
     <div class="text-center">
-      <a class="button" ng-click="cancel()" translate>OKAY</a>
+      <a class="button button-positive" ng-click="cancel()" translate>OKAY</a>
     </div>
   </div>
 
@@ -31,7 +31,7 @@
       <span translate>Payment Accepted</span>
     </div>
     <div class="text-center">
-      <a class="button" ng-click="cancel()" translate>OKAY</a>
+      <a class="button button-positive" ng-click="cancel()" translate>OKAY</a>
     </div>
   </div>
 
@@ -41,7 +41,7 @@
       <span translate>Payment Rejected</span>
     </div>
     <div class="text-center">
-      <a class="button" ng-click="cancel()" translate>OKAY</a>
+      <a class="button button-positive" ng-click="cancel()" translate>OKAY</a>
     </div>
   </div>
 </ion-modal-view>

public/views/preferencesBitpayCard.html

@@ -8,9 +8,9 @@
     <ion-nav-title>Preferences</ion-nav-title>
   </ion-nav-bar>
 
-  <ion-content ng-controller="preferencesBitpayCardController as bitpay">
+  <ion-content ng-controller="preferencesBitpayCardController">
     <ul class="list">
-      <li class="item assertive" ng-click="bitpay.logout()">
+      <li class="item assertive" ng-click="logout()">
         Log out
       </li>
     </ul>

src/js/controllers/bitpayCard.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('bitpayCardController', function($scope, $timeout, $log, lodash, bitpayCardService, configService, profileService, walletService, ongoingProcess, pbkdf2Service, moment, popupService) {
+angular.module('copayApp.controllers').controller('bitpayCardController', function($scope, $timeout, $log, lodash, bitpayCardService, configService, profileService, walletService, ongoingProcess, pbkdf2Service, moment, popupService, gettextCatalog, bwcError) {
 
   var self = this;
   var wallet;
@@ -168,6 +168,7 @@ angular.module('copayApp.controllers').controller('bitpayCardController', functi
           };
 
           walletService.createTx(wallet, txp, function(err, createdTxp) {
+            ongoingProcess.set('Processing Transaction...', false);
             if (err) {
               popupService.showAlert(gettextCatalog.getString('Error'), bwcError.msg(err));
               return;

src/js/controllers/preferencesBitpayCard.js

@@ -1,15 +1,20 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('preferencesBitpayCardController',
-  function($scope, $ionicModal, bitpayCardService) {
+  function($scope, $state, $timeout, bitpayCardService, popupService) {
 
-    this.logout = function() {
-      $ionicModal.fromTemplateUrl('views/modals/bitpay-card-confirmation.html', {
-        scope: $scope,
-        animation: 'slide-in-up'
-      }).then(function(modal) {
-        $scope.bitpayCardConfirmationModal = modal;
-        $scope.bitpayCardConfirmationModal.show();
+    $scope.logout = function() {
+      var title = 'Are you sure you would like to log out of your Bitpay Card account?';
+      popupService.showConfirm(title, null, function(res) {
+        if (res) logout();
+      });
+    };
+
+    var logout = function() {
+      bitpayCardService.logout(function() {
+        $timeout(function() {
+          $state.go('bitpayCard.main');
+        }, 100);
       });
     };
 

src/sass/main.scss

@@ -996,5 +996,6 @@ input[type=number] {
 @import "views/add";
 @import "views/tab-home";
 @import "views/walletDetails";
+@import "views/bitpayCard";
 @import 'views/onboarding/onboarding';
 @import "views/includes/walletActivity";

src/sass/views/bitpayCard.scss

@@ -0,0 +1,16 @@
+#bitpayCard {
+  .amount {
+    width: 100%;
+    text-align: center;
+    padding: 2rem 1rem 1.5rem 1rem;
+    min-height: 115px;
+    margin-bottom: 25px;
+    border-color: #172565;
+    background-color: #1e3186;
+    background-image: linear-gradient(0deg, #172565, #172565 0%, transparent 0%);
+    color: #fff;
+  }
+  strong {
+    line-height: 100%;
+  }
+}

src/sass/views/walletDetails.scss

@@ -1,6 +1,7 @@
 #walletDetails {
   .bar-header {
     border: 0;
+    background: none;
     .title, .button {
       color: #fff;
     }