From 69d83ec5278ae8be5643520c20e64f15a4a8d517 Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Thu, 3 Dec 2015 15:11:23 -0300
Subject: [PATCH] New design for transaction info

---
 public/views/modals/tx-details.html  | 33 ++++++++++++++--------------
 public/views/modals/txp-details.html |  8 +++----
 src/css/main.css                     |  4 ++--
 3 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/public/views/modals/tx-details.html b/public/views/modals/tx-details.html
index 1e1294504..8b1673cb4 100644
--- a/public/views/modals/tx-details.html
+++ b/public/views/modals/tx-details.html
@@ -15,11 +15,11 @@
 <div class="modal-content fix-modals-touch"
      ng-swipe-disable-mouse
      ng-swipe-right="cancel()">
-  <div class="header-modal text-center">
-    <div class="size-42" ng-show="btx.action != 'invalid'">
+  <div class="header-modal size-36 text-center">
+    <div ng-show="btx.action != 'invalid'">
       <span ng-if="btx.action == 'received'">+</span><span ng-if="btx.action == 'sent'">-</span>{{btx.amountStr}}
     </div>
-    <div class="size-42" ng-show="btx.action == 'invalid'">
+    <div ng-show="btx.action == 'invalid'">
       -
     </div>
   </div>
@@ -29,7 +29,7 @@
   <ul class="no-bullet size-14 m0"> 
 
     <li ng-if="!btx.hasMultiplesOutputs && btx.addressTo && btx.addressTo != 'N/A'" class="line-b p10 oh" ng-click="copyAddress(btx.addressTo)">
-    <span class="text-gray" translate>To</span>:
+    <span class="text-gray" translate>To</span>
     <span class="right">
       <span ng-if="btx.merchant">
         <span ng-show="btx.merchant.pr.ca"><i class="fi-lock color-greeni"></i> {{btx.merchant.domain}}</span>
@@ -44,7 +44,7 @@
 
     <li ng-show="btx.hasMultiplesOutputs" class="line-b p10 oh" 
       ng-click="showMultiplesOutputs = !showMultiplesOutputs">
-      <span class="text-gray" translate>Recipients</span>:
+      <span class="text-gray" translate>Recipients</span>
       <span class="right">{{btx.recipientCount}}
         <i ng-show="showMultiplesOutputs" class="icon-arrow-up3 size-24"></i>
         <i ng-show="!showMultiplesOutputs" class="icon-arrow-down3 size-24"></i>
@@ -57,7 +57,7 @@
     </div>
 
     <li ng-show="btc.message" class="line-b p10 oh">
-      <span class="text-gray" translate>Note</span>:
+      <span class="text-gray" translate>Note</span>
       <span class="right">{{btx.message}}</span>
     </li>
     
@@ -66,28 +66,28 @@
       This transaction has become invalid; possibly due to a double spend attempt.
     </span>
     <li ng-if="btx.time" class="line-b p10 oh">
-    <span class="text-gray" translate>Date</span>:
+    <span class="text-gray" translate>Date</span>
     <span class="right">
       <time>{{ btx.time * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
       <time>({{ btx.time * 1000 | amTimeAgo}})</time>
     </span>
     </li>
     <li class="line-b p10" ng-show="btx.action != 'received'">
-      <span class="text-gray" translate>Fee</span>:
+      <span class="text-gray" translate>Fee</span>
       <span class="right">{{btx.feeStr}}</span>
     </li>
     <li class="line-b p10 oh" ng-if="btx.message && btx.action != 'received'">
-      <span class="text-gray" translate>Note</span>:
+      <span class="text-gray" translate>Note</span>
       <span class="right">{{btx.message}}</span>
     </li>
     <li ng-if="btx.merchant" class="line-b p10 oh">
-    <span class="text-gray" translate>Merchant message</span>:
+    <span class="text-gray" translate>Merchant message</span>
     <span class="right">
       {{btx.merchant.pr.pd.memo}}
     </span>
     </li>
     <li ng-if="btx.time" class="line-b p10 oh">
-    <span class="text-gray" translate>Confirmations</span>:
+    <span class="text-gray" translate>Confirmations</span>
     <span class="right" >
       <span class="text-warning" ng-show="!btx.confirmations || btx.confirmations == 0" translate>
         Unconfirmed
@@ -107,11 +107,12 @@
     <h4 class="title m0" translate>Participants</h4>
     <ul class="no-bullet size-14 m0">
       <li class="line-b p10 text-gray" ng-repeat="c in btx.actions">
-      <span class="right">
-        <i ng-if="c.type == 'reject'" class="fi-x icon-sign x db"></i>
-        <i ng-if="c.type == 'accept'" class="fi-check icon-sign check db"></i>
-      </span>
-      {{c.copayerName}} <span ng-if="c.copayerId == copayerId">({{'Me'|translate}})</span>
+        <i class="icon-contact size-24"></i>
+        <span class="right">
+          <i ng-if="c.type == 'reject'" class="fi-x icon-sign x db"></i>
+          <i ng-if="c.type == 'accept'" class="fi-check icon-sign check db"></i>
+        </span>
+        {{c.copayerName}} <span ng-if="c.copayerId == copayerId">({{'Me'|translate}})</span>
       </li>
     </ul>
   </div>
diff --git a/public/views/modals/txp-details.html b/public/views/modals/txp-details.html
index c79149cd4..ae30f4e4c 100644
--- a/public/views/modals/txp-details.html
+++ b/public/views/modals/txp-details.html
@@ -161,11 +161,11 @@
     <ul class="no-bullet size-14 m0">
       <li class="line-b p10 text-gray" ng-repeat="ac in tx.actions">
         <i class="icon-contact size-24"></i>
-        {{ac.copayerName}} <span ng-if="ac.copayerId == copayerId">({{'Me'|translate}})</span>
-        <span class="right tu">
-          <span ng-if="ac.type == 'reject'" class="text-warning"><i class="fi-x icon-sign x"></i>Rejected</span>
-          <span ng-if="ac.type == 'accept'" class="text-success"><i class="fi-check icon-sign check"></i>Signed</span>
+        <span class="right">
+          <i ng-if="ac.type == 'reject'" class="fi-x icon-sign x db"></i>
+          <i ng-if="ac.type == 'accept'" class="fi-check icon-sign check db"></i>
         </span>
+        {{ac.copayerName}} <span ng-if="ac.copayerId == copayerId">({{'Me'|translate}})</span>
       </li>
     </ul>
   </div> 
diff --git a/src/css/main.css b/src/css/main.css
index 4318fc8af..b0806d3ea 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -343,7 +343,8 @@ ul.tx-copayers {
   padding: 0.2rem 0.3rem;
   border-radius: 100%;
   color: #fff;
-  margin-right: 7px;
+  font-size: 10px;
+  margin-top: 3px;
 }
 
 .icon-sign.check {
@@ -625,7 +626,6 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 .header-modal {
-  border-bottom: 1px solid #E2E7ED;
   background: #fff;
   width: 100%;
   padding: 0.8rem;