Merge pull request #463 from cmgustavo/bug/amount-confirm-paypro-icons

Fix bitpay card history. Fix icons for paypro on amount/confirm views

src/sass/shame.scss

@@ -408,6 +408,14 @@ input[type=file] {
   line-height: 0px;
 }
 
+.w100p {
+  width: 100%;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
 .text-right {
   text-align: right;
 }

src/sass/views/amount.scss

@@ -11,6 +11,14 @@
         left: 8px;
         font-size: 24px;
       }
+      .big-icon-svg {
+        left:5px;
+        & > .bg{
+          width:30px;
+          height:30px;
+          box-shadow: none;
+        }
+      }
       font-size: 11px;
       padding-left: 48px;
     }

src/sass/views/bitpayCard.scss

@@ -1,4 +1,14 @@
 #bitpayCard {
+  .bar-header {
+    border: 0;
+    background: #1e3186;
+    .title, .button {
+      color: #fff;
+    }
+    .button {
+      background-color: transparent;
+    }
+  }
   .amount {
     width: 100%;
     text-align: center;

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

@@ -107,12 +107,8 @@
       i {
         color: grey;
         position: inherit;
-        left: 25px;
-        vertical-align: super;
-        padding-right: 10px;
-        border-right: 1px solid;
-        border-color: grey;
-        font-size: 20px;
+        padding: 0 10px;
+        float: right;
       }
       contact {
         margin-left: 15px;

www/views/bitpayCard.html

@@ -20,8 +20,9 @@
       <div class="amount">
         <div ng-if="bitpayCard.bitpayCardCurrentBalance" ng-click="bitpayCard.update()">
           <div class="size-36 m20b">${{bitpayCard.bitpayCardCurrentBalance}}</div>
-          <a class="button button-positive button-small" ui-sref="tabs.bitpayCard.amount({'cardId': cardId, 'toName': 'BitPay Card'})">
-            {{'Add Funds'|translate}}
+          <a class="button button-positive button-small"
+             ui-sref="tabs.bitpayCard.amount({'cardId': cardId, 'toName': 'BitPay Card'})" translate>
+            Add Funds
           </a>
         </div>
         <div ng-if="!bitpayCard.bitpayCardCurrentBalance" class="m10t">
@@ -60,7 +61,7 @@
           <img class="m5t" ng-src="img/mcc-icons/{{tx.icon}}.svg" width="22">
         </div>
 
-        <div class="col">
+        <div class="col col-50">
           <div class="size-12 text-bold">
             {{tx.merchant.name}}
           </div>
@@ -68,14 +69,16 @@
             {{tx.merchant.city}}, {{tx.merchant.state}}
           </div>
         </div>
+        <!--
         <div class="col size-12">
           {{tx.desc}}
         </div>
-        <div class="col">
+        -->
+        <div class="col col-20 text-center p10t">
           <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="col col-20 text-right size-12 text-gray">
           <div class="size-14"
                ng-class="{
                'text-success': tx.amount.indexOf('-') == -1 && !tx.pending,

www/views/confirm.html

@@ -22,15 +22,21 @@
       <div class="info">
         <div class="item">
           <span class="label" translate>To</span>
-          <span class="payment-proposal-to" copy-to-clipboard="toAddress">
+          <span class="payment-proposal-to">
             <img ng-if="!cardId" src="img/icon-bitcoin-small.svg">
             <img ng-if="cardId" src="img/icon-card.svg" width="34">
-            <span ng-if="toName">{{toName}}</span>
-            <contact ng-if="!toName" class="ellipsis" address="{{toAddress}}">{{toAddress}}</contact>
-            <div ng-show="_paypro" ng-click="openPPModal(_paypro)">
+
+            <contact ng-if="!toName && !_paypro" class="ellipsis" address="{{toAddress}}" copy-to-clipboard="toAddress">
+            {{toAddress}}
+            </contact>
+
+            <span class="m15l size-14" ng-if="toName && !_paypro" copy-to-clipboard="toAddress">{{toName}}</span>
+
+            <div ng-if="_paypro" ng-click="openPPModal(_paypro)" class="m15l size-14 w100p pointer">
               <i ng-show="_paypro.verified && _paypro.caTrusted" class="ion-locked" style="color:green"></i>
               <i ng-show="!_paypro.caTrusted" class="ion-unlocked" style="color:red"></i>
-              {{_paypro.domain}}
+              <span class="ellipsis" ng-show="!toName">{{_paypro.domain || _paypro.toAddress}}</span>
+              <span ng-show="toName">{{toName}}</span>
             </div>
             <!-- <contact ng-if="!tx.hasMultiplesOutputs" class="ellipsis" address="{{toAddress}}"></contact>
             <span ng-if="tx.hasMultiplesOutputs" translate>Multiple recipients</span> -->
@@ -56,12 +62,12 @@
           </span>
           <i class="icon bp-arrow-right"></i>
         </a>
-        <a class="item single-line" ng-hide="insuffientFunds">
+        <div class="item single-line" ng-hide="insuffientFunds">
           <span class="label" translate>Fee: {{feeLevel}}</span>
           <span class="item-note">
             {{fee || '...'}}
           </span>
-        </a>
+        </div>
       </div>
     </div>
     <click-to-accept