From 61e72c7feb565c295895c589faddfbc5ee8c0239 Mon Sep 17 00:00:00 2001
From: bechi <bechilandia@gmail.com>
Date: Fri, 12 Dec 2014 01:05:59 -0300
Subject: [PATCH] add style on tx item

---
 css/src/main.css                | 23 +++++++++++++++--
 views/homeWallet.html           |  2 +-
 views/includes/transaction.html | 45 +++++++++++++++------------------
 3 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/css/src/main.css b/css/src/main.css
index 3557d1899..9523b610a 100644
--- a/css/src/main.css
+++ b/css/src/main.css
@@ -426,12 +426,19 @@ ul.tx-copayers {
   border-bottom: 1px solid #CAD2DA;
 }
 
-
 .last-transactions-content {
-  padding: 0.8rem;
+  padding: 0.8rem 0.5rem;
   cursor:pointer;
 }
 
+.last-transactions-content.active {
+  background-color: #F5F7F8;
+}
+
+.last-transactions-content.active:hover {
+  background-color: #E4E8EC;
+}
+
 .sign-action {
   background: #E4E8EC;
   width: 100%;
@@ -549,6 +556,7 @@ a.button-setup {
 .p70l {padding-left: 70px;}
 .p5h {padding: 0 5px;}
 .p20h {padding: 0 20px;}
+.p25l {padding-left: 25px;}
 .p15 {padding:15px;}
 .p20 {padding:20px;}
 .p10 {padding:10px;}
@@ -784,6 +792,17 @@ input[type=number]::-webkit-outer-spin-button {
   background-color: #1ABC9C;
 }
 
+.tx-proposal i { 
+  padding: .1rem .3rem;
+  background-color: #A5B2BF;
+  border-radius: 100%;
+  color: #fff;
+}
+
+.tx-proposal i.active {
+  background-color: #A02F23;
+}
+
 .addresses .label {
   font-weight: normal;
   padding: .2rem .3rem;
diff --git a/views/homeWallet.html b/views/homeWallet.html
index b06f5f528..00e8f5314 100644
--- a/views/homeWallet.html
+++ b/views/homeWallet.html
@@ -58,7 +58,7 @@
           <div class="last-transactions pr" ng-repeat="tx in  $root.wallet.pendingTxProposals  | orderBy:'-createdTs'" ng-include="'views/includes/transaction.html'" ng-if="$root.wallet.pendingTxProposals[0]">
           </div>
 
-          <div class="text-right size-12 line-t m10t p10t" ng-show="$root.wallet.balanceInfo.lockedBalance && !$root.wallet.balanceInfo.updatingBalance">
+          <div class="text-right size-12 line-t p10t" ng-show="$root.wallet.balanceInfo.lockedBalance && !$root.wallet.balanceInfo.updatingBalance">
           Total Locked Balance:
           <b>{{$root.wallet.balanceInfo.lockedBalance}} {{$root.wallet.settings.unitName}} </b> 
           <span class="text-gray"> {{$root.wallet.balanceInfo.lockedBalanceAlternative}} {{$root.wallet.balanceInfo.alternativeIsoCode}} </span>
diff --git a/views/includes/transaction.html b/views/includes/transaction.html
index 3a7f09cad..d8536f055 100644
--- a/views/includes/transaction.html
+++ b/views/includes/transaction.html
@@ -1,34 +1,31 @@
 
 
-<div class="last-transactions-content" ng-class="{'line-b':!$last}"  ng-click="openTxModal(tx)">
-  <div class="row" ng-repeat="out in tx.outs">
-    <div class="large-6 medium-6 small-12 columns size-16">
-      <div class="ellipsis m10b" ng-init="pendingForUs = !tx.signedBy[$root.wallet.getMyCopayerId()] && !tx.rejectedBy[$root.wallet.getMyCopayerId()]">
-
-      <span ng-class="{'color-alert':pendingForUs, 'hidden':!pendingForUs} "> ● </span>
-
-      To:
-      <span ng-if="tx.merchant">
-        <span ng-show="tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.merchant.domain}}</span>
-        <span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.merchant.domain}}</span>
+<div class="last-transactions-content" ng-class="{'line-b':!$last, 'active':pendingForUs}"  ng-click="openTxModal(tx)">
+  <div ng-repeat="out in tx.outs">
+    <div class="ellipsis p10b size-16 m20r" ng-init="pendingForUs = !tx.signedBy[$root.wallet.getMyCopayerId()] && !tx.rejectedBy[$root.wallet.getMyCopayerId()]">
+      <span class="tx-proposal size-12 m5r"> <i ng-class="{'active':pendingForUs}" class="fi-arrow-right"></i> </span>
+      <span class="text-gray">
+        To:
+        <span ng-if="tx.merchant">
+          <span ng-show="tx.merchant.pr.ca"><i class="fi-lock"></i> {{tx.merchant.domain}}</span>
+          <span ng-show="!tx.merchant.pr.ca"><i class="fi-unlock"></i> {{tx.merchant.domain}}</span>
         </span>
+        <contact address="{{out.address}}" ng-hide="tx.merchant"> </contact>
+      </span>
       </span>
-      <contact address="{{out.address}}" ng-hide="tx.merchant"> </contact>
-      </div>
     </div>
 
-    <div class="large-6 medium-6 small-12 columns">
-      <div class="text-right">
-        <span class="size-21">
-            <span ng-if="!$root.updatingBalance">
-              {{out.value}}
-            </span>
-            {{$root.wallet.settings.unitName}}
-        </span>
-        <span class="size-14 db m5t text-gray">
-          {{out.alternativeAmount}} {{out.alternativeIsoCode}}
-        </span>
+    <div class="p25l m10b" ng-class="{'text-gray':!pendingForUs}">
+      <div class="size-21 text-bold m10b">
+          <span ng-if="!$root.updatingBalance">
+            {{out.value}}
+          </span>
+          {{$root.wallet.settings.unitName}}
+          <i class="icon-arrow-right3 size-24 text-gray right"></i>
       </div>
+      <span class="alt-currency black size-12" ng-class="{'gray':!pendingForUs}">
+        {{out.alternativeAmount}} {{out.alternativeIsoCode}}
+      </span>
     </div>
   </div>
 </div>