Basic transaction table styling

Breeze.UI/src/app/wallet/dashboard/dashboard.component.css

@@ -12,11 +12,6 @@
   width:100%;
 }
 
-#transactions {
-  padding-left: 100px !important;
-  margin-top: 10px;
-}
-
 #sendButton {
   width: 100px;
   font-family: "Lato Black";
@@ -32,3 +27,29 @@
   background-color: #20B9FF;
   border-radius: 25px;
 }
+
+#transactions {
+  padding-left: 100px !important;
+  margin-top: 10px;
+}
+
+.transactionsTable {
+  border-collapse: separate;
+  border-spacing: 10px;
+}
+
+.transactionsTable tr {
+  border: 1px solid #D5E3F0;
+  text-align: left;
+  border-spacing: 10px;
+}
+
+.transactionsTable th {
+  text-align: left;
+  border-spacing: 10px;
+}
+
+.transactionsTable td {
+  height: 50px;
+  vertical-align: center;
+}

Breeze.UI/src/app/wallet/dashboard/dashboard.component.html

@@ -19,19 +19,19 @@
   <div class="row" id="transactions">
     <div class="col">
       <div>Transactions</div>
-      <table *ngIf="transactions; else noTransactions">
+      <table cellspacing="5px" cellpadding="5px" class="transactionsTable" *ngIf="transactions; else noTransactions">
         <thead>
-          <th>Timestamp</th>
           <th>Amount</th>
           <th>Confirmed</th>
+          <th>Timestamp</th>
           <th>Transaction ID</th>
         </thead>
         <tr *ngFor="let transaction of transactions; let i=index">
             <!--<td *ngIf="{{ transaction.amount }} < 0">SENT</td>
             <td *ngIf="{{ transaction.amount }} > 0">RECEIVED</td>-->
-            <td *ngIf="i<5">{{ transaction.timestamp }}</td>
             <td *ngIf="i<5">{{ transaction.amount | coinNotation | coinAbbreviation }}</td>
             <td *ngIf="i<5">{{ transaction.confirmed }}</td>
+            <td *ngIf="i<5">{{ transaction.timestamp * 1000 | date:'medium' }}</td>
             <td *ngIf="i<5">{{ transaction.txId }}</td>
         </tr>
       </table>