improve tx details ui

public/views/modals/glidera-tx-details.html

@@ -7,30 +7,33 @@
   </section>
   <section class="middle tab-bar-section">
     <h1 class="title ellipsis" ng-style="{'color':color}">
-      Transaction
+      Details
     </h1>
   </section>
 </nav>
 
 <div class="modal-content fix-modals-touch">
-  <div class="header-modal text-center">
-    <span class="label tu radius" ng-show="tx.type == 'BUY'"
-      ng-style="{'background-color':color}">Bought</span>
-    <span class="label tu gray radius" ng-show="tx.type == 'SELL'">Sold</span>
-    <div class="size-42">
-      {{tx.subtotal|currency:'':2}} {{tx.currency}}
+  <div class="header-modal bg-gray text-center">
+    <div class="p20">
+      <i class="icon-buy-btc size-60" ng-show="tx.type == 'BUY'"></i>
+      <i class="icon-sell-btc size-60" ng-show="tx.type == 'SELL'"></i>
     </div>
-    <div class="size-12 text-gray">
-      <span class="text-success" ng-if="tx.status == 'COMPLETE'">Completed</span>
-      <span class="text-info" ng-if="tx.status == 'PROCESSING'">Processing</span>
-      <span class="text-warning" ng-if="tx.status == 'ERROR'">Error</span>
+    <span ng-show="tx.type == 'BUY'">Bought</span>
+    <span ng-show="tx.type == 'SELL'">Sold</span>
+    <div class="size-36 m20b">
+      {{tx.subtotal|currency:'':2}} {{tx.currency}}
     </div>
   </div>
 
-  <h4 class="title m0">Details</h4>
-
   <ul class="no-bullet size-14 m0"> 
 
+    <li class="line-b p10 oh">
+      <span class="text-gray">Status</span>
+      <span class="text-success right" ng-if="tx.status == 'COMPLETE'">Completed</span>
+      <span class="text-info right" ng-if="tx.status == 'PROCESSING'">Processing</span>
+      <span class="text-warning right" ng-if="tx.status == 'ERROR'">Error</span>
+    </li>
+
     <li ng-show="tx.transactionDate" class="line-b p10 oh">
       <span class="text-gray">Date</span>
       <span class="right">{{tx.transactionDate | amCalendar}}</span>
@@ -39,10 +42,8 @@
     <li ng-show="tx.price" class="line-b p10 oh">
       <span class="text-gray">Exchange rate</span>
       <span class="right">{{tx.price|currency:'':2}} {{tx.currency}}/BTC</span>
-    </li>
-  </ul>
-  <h4 class="title m0">&nbsp;</h4>
-  <ul class="no-bullet size-14 m0"> 
+    </li> 
+
     <li ng-show="tx.subtotal" class="line-b p10 oh">
       <span class="text-gray">Subtotal</span>
       <span class="right">{{tx.subtotal|currency:'':2}} {{tx.currency}}</span>

src/css/main.css

@@ -1040,6 +1040,10 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
   font-size: 14px;
 }
 
+.bg-gray {
+  background-color: #F1F3F5;
+}
+
 .bg-circle {
   background: #253547;
   border-radius: 100%;