From 2ae129fd94f91845585b0b56026763c3b369be17 Mon Sep 17 00:00:00 2001
From: Darren Nelsen <darren@bitpay.com>
Date: Tue, 5 Sep 2017 17:22:53 -0400
Subject: [PATCH] styled the fee and confirmation row in the grid of the
 transaction component

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

diff --git a/app/src/components/transaction/transaction.html b/app/src/components/transaction/transaction.html
index 78b2ea6..724c379 100644
--- a/app/src/components/transaction/transaction.html
+++ b/app/src/components/transaction/transaction.html
@@ -85,15 +85,15 @@
     </ion-col>
   </ion-row>
 
-  <ion-row>
-    <ion-col col-3>
-      <span [hidden]="tx.isCoinBase">Fee {{ currency.getConversion(tx.fees) }}</span>
+  <ion-row align-items-center text-uppercase class="small">
+    <ion-col col-6>
+      <div [hidden]="tx.isCoinBase">
+        Fee <span text-nowrap>{{ currency.getConversion(tx.fees) }}</span>
+      </div>
     </ion-col>
-    <ion-col col-6 text-center>
-      {{ tx.confirmations }} Confirmations
-    </ion-col>
-    <ion-col col-3 text-right>
-      <span class="">{{ currency.getConversion(tx.valueOut) }}</span>
+    <ion-col col-6 text-right>
+      <span text-nowrap>{{ tx.confirmations }} Confirmation<span *ngIf="tx.confirmations !== 1">s</span></span>
+      <span text-nowrap>{{ currency.getConversion(tx.valueOut) }}</span>
     </ion-col>
   </ion-row>
 </ion-grid>
diff --git a/app/src/components/transaction/transaction.scss b/app/src/components/transaction/transaction.scss
index efecd52..af682a0 100644
--- a/app/src/components/transaction/transaction.scss
+++ b/app/src/components/transaction/transaction.scss
@@ -9,6 +9,10 @@ transaction {
 
     ion-row {
       border: 1px solid #eee;
+
+      &.small {
+        font-size: 1.1rem;
+      }
     }
   }