UI styling. Improve error handle

www/views/mercadoLibreCards.html

@@ -12,19 +12,20 @@
            class="item item-avatar"
            ng-hide="hideCards">
         <img src="img/mercado-libre/icon-ml.svg" alt="{{id}}" width="40">
-        <ion-spinner class="spinner-dark recent right m10 size-16" icon="crescent" ng-show="updatingPending[item.invoiceId]">
-        </ion-spinner>
+
+        <span class="item-note">
+          <span class="assertive" ng-if="item.status == 'FAILURE'" translate>Error</span>
+          <span class="dark" ng-if="item.status == 'expired'" translate>Invoice expired</span>
+          <span class="calm" ng-if="item.status == 'invalid'" translate>Still pending</span>
+          <span class="positive" ng-if="item.status == 'PENDING'" translate>Pending</span>
+
+          <span class="assertive" ng-if="item.cardStatus == 'inactive'" translate>Inactive</span>
+          <span class="assertive" ng-if="item.cardStatus == 'expired'" translate>Expired</span>
+        </span>
         <h2 ng-if="item.amount">
-          {{item.amount | currency : '$ ' : 2}} {{item.currency}}
-        </h2> 
-        <p>
-          <span class="assertive" ng-if="item.status == 'FAILURE' || item.status == 'RESEND'">Error</span>
-          <span class="assertive" ng-if="item.status == 'expired'">Expired</span>
-          <span class="assertive" ng-if="item.status == 'invalid'">Still waiting confirmation<br> (Use higher fees setting to faster delivery)</span>
-          <span class="text-gray" ng-if="item.status == 'PENDING'">Pending to confirmation</span>
-          <span class="assertive" ng-if="item.status == 'SUCCESS' && item.cardStatus == 'Canceled'">Canceled</span>
-          <span class="text-gray">{{item.date | amTimeAgo}}</span>
-        </p>
+          {{item.amount | currency : '' : 2}} {{item.currency}}
+        </h2>
+        <p class="dark">{{item.date | amTimeAgo}}</p>
       </div>
     </div>
   </ion-content>

www/views/modals/mercadolibre-card-details.html

@@ -1,82 +1,75 @@
-<ion-modal-view ng-controller="mercadoLibreCardDetailsController">
+<ion-modal-view id="meli-card" ng-controller="mercadoLibreCardDetailsController">
   <ion-header-bar align-title="center" class="bar-royal">
-    <button class="button button-back button-clear" ng-click="cancel()">
+    <button class="button button-back button-clear" ng-click="cancel()" translate>
       Close
     </button>
-    <h1 class="title">Details</h1>
+    <h1 class="title" translate>Details</h1>
   </ion-header-bar>
 
   <ion-content>
 
-      <div class="header-modal text-center">
-        <img src="img/mercado-libre/giftcard-pt.svg" alt="Mercado Libre Gift Card" width="230" ng-click="refreshGiftCard()">
+    <div class="card-head">
+      <img src="img/mercado-libre/giftcard-pt.svg" alt="Mercado Libre Gift Card" width="230" ng-click="refreshGiftCard()">
 
-        <div class="m10t">
-          Gift Card Amount:
-          <span class="text-bold">
-            {{card.amount | currency : '$ ' : 2}}
-          </span>
-        </div>
+      <div class="amount">
+        {{card.amount | currency : '' : 2}} {{card.currency}}
+      </div>
+    </div>
 
+    <div class="card-status">
+      <div ng-show="card.cardStatus == 'active'">
+        <div class="redeem-pin" copy-to-clipboard="card.pin">{{card.pin}}</div>
+        <button class="button-redeem"
+                ng-click="openExternalLink('https://www.mercadolivre.com.br/redeem?pin=' + card.pin)" translate>
+          Redeem Now
+        </button>
+      </div>
 
-        <div class="m10t">
-          <span translate>Created</span>
+      <div ng-show="card.cardStatus == 'inactive'">
+        <span class="assertive" translate>Inactive</span>
+        <div class="card-status-desc" translate>Gift Card is not available to use anymore</div>
+      </div>
+
+      <div ng-show="card.cardStatus == 'expired'">
+        <span class="assertive" translate>Expired</span>
+        <div class="card-status-desc" translate>Gift Card is not available to use anymore</div>
+      </div>
+
+      <div ng-show="card.status">
+        <span class="positive" ng-show="card.status == 'PENDING'" translate>
+          Pending
+        </span>
+        <span class="calm" ng-show="card.status=='invalid'" translate>
+          Still pending
+        </span>
+        <span class="assertive" ng-show="card.status == 'FAILURE'" translate>
+          Error
+        </span>
+        <span class="dark" ng-show="card.status == 'expired'" translate>
+          Invoice expired
+        </span>
+      </div>
+    </div>
+
+    <div class="list">
+      <div class="item">
+        <span translate>Created</span>
+        <span class="item-note">
           {{card.date | amTimeAgo}}
-        </div>
-
-
-        <div ng-show="card.pin">
-          <div ng-show="card.cardStatus !== 'inactive' && card.cardStatus !== 'expired'">
-            Claim code: <span class="text-bold" copy-to-clipboard="card.pin">{{card.pin}}</span>
-          </div>
-          <div class="m10t" ng-show="card.status == 'active'">
-            <button class="button button-positive"
-                    ng-click="openExternalLink('https://www.mercadolivre.com.br/redeem?pin=' + card.pin)">
-              Redeem Now
-            </button>
-          </div>
-          <div class="m10t" ng-show="card.cardStatus == 'inactive'">
-            <div class="m10t">
-              Status:
-              <span class="text-bold">
-                Inactive
-              </span>
-            </div>
-          </div>
-        </div>
-        <div ng-show="!card.pin">
-          <div class="m10t">
-            Status:
-            <span class="text-bold" ng-show="card.status == 'PENDING'">
-              PENDING
-            </span>
-            <span class="text-bold" ng-show="card.status=='invalid'">
-              STILL PENDING
-            </span>
-
-            <span class="text-bold" ng-show="card.status == 'FAILURE' || card.status == 'RESEND'">
-              FAILURE
-            </span>
-            <span class="text-bold" ng-show="card.status == 'expired'">
-              EXPIRED
-            </span>
-          </div>
-        </div>
-        <div class="m10t text-center">
-          <a class="button button-clear button-calm" ng-click="openExternalLink(card.invoiceUrl)">See invoice</a>
-        </div>
+        </span>
       </div>
 
-      <div class="box-notification warning" ng-show="card.status == 'FAILURE' || card.status == 'RESEND'">
-          There was a failure to the create gift card. Please, contact BitPay support.
+      <div class="item item-icon-right" ng-click="openExternalLink(card.invoiceUrl)" translate>
+        <i class="icon bp-arrow-right"></i>
+        See invoice
       </div>
+    </div>
 
-      <div class="list text-center">
-        <a class="item" ng-show="card.status == 'FAILURE' || card.cardStatus == 'Canceled'
-          || card.cardStatus == 'Expired' || card.status == 'expired'" ng-click="remove()">
-          <span class="assertive">Remove</span>
-        </a>
-      </div>
+    <div class="card-remove" ng-show="card.status == 'FAILURE' || card.cardStatus == 'inactive' || card.cardStatus == 'expired' || card.status == 'expired'">
+      <button class="button-remove" ng-click="remove()" translate>
+        Remove
+      </button>
+    </div>
 
   </ion-content>
 </ion-modal-view>