From 7fef8d340ff23228bf7b52ee432bb27f3f9279d0 Mon Sep 17 00:00:00 2001
From: Darren Nelsen <darren@bitpay.com>
Date: Thu, 1 Feb 2018 15:19:04 -0500
Subject: [PATCH] added chips on transaction component

---
 app/src/components/transaction/transaction.html | 12 +++++++++---
 app/src/components/transaction/transaction.scss |  8 ++++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/app/src/components/transaction/transaction.html b/app/src/components/transaction/transaction.html
index cc3528f..85e8844 100644
--- a/app/src/components/transaction/transaction.html
+++ b/app/src/components/transaction/transaction.html
@@ -88,12 +88,18 @@
   <ion-row align-items-center text-uppercase class="small">
     <ion-col col-6>
       <div [hidden]="tx.isCoinBase">
-        Fee <span text-nowrap>{{ currency.getConvertedNumber(tx.fees) | number:'1.0-8' }} {{ currency.currencySymbol }}</span>
+        <ion-chip>
+          <ion-label>Fee <span text-nowrap>{{ currency.getConvertedNumber(tx.fees) | number:'1.0-8' }} {{ currency.currencySymbol }}</span></ion-label>
+        </ion-chip>
       </div>
     </ion-col>
     <ion-col col-6 text-right>
-      <span text-nowrap>{{ tx.confirmations }} Confirmation<span *ngIf="tx.confirmations !== 1">s</span></span>
-      <span text-nowrap>{{ currency.getConvertedNumber(tx.valueOut) | number:'1.0-8' }} {{ currency.currencySymbol }}</span>
+      <ion-chip color="primary">
+        <ion-label>{{ tx.confirmations | number }} Confirmation<span *ngIf="tx.confirmations !== 1">s</span></ion-label>
+      </ion-chip>
+      <ion-chip color="secondary">
+        <ion-label>{{ currency.getConvertedNumber(tx.valueOut) | number:'1.0-8' }} {{ currency.currencySymbol }}</ion-label>
+      </ion-chip>
     </ion-col>
   </ion-row>
 </ion-grid>
diff --git a/app/src/components/transaction/transaction.scss b/app/src/components/transaction/transaction.scss
index 631a436..2081f9f 100644
--- a/app/src/components/transaction/transaction.scss
+++ b/app/src/components/transaction/transaction.scss
@@ -29,4 +29,12 @@ transaction {
   .list {
     margin-bottom: 5px
   }
+
+  .chip {
+    //background-color: red;
+
+    &.chip-md-primary {
+      //background-color: blue;
+    }
+  }
 }