From 0ed427070abd2425269b6aa14a5f5317819e2862 Mon Sep 17 00:00:00 2001
From: bechi <bechilandia@gmail.com>
Date: Thu, 3 Dec 2015 15:07:38 -0300
Subject: [PATCH] ui tx proposal pending

---
 public/img/icon-proposal.svg           | 20 ++++++++++
 public/views/includes/transaction.html | 55 +++++++++++++-------------
 src/css/main.css                       |  8 +++-
 3 files changed, 54 insertions(+), 29 deletions(-)
 create mode 100644 public/img/icon-proposal.svg

diff --git a/public/img/icon-proposal.svg b/public/img/icon-proposal.svg
new file mode 100644
index 000000000..63e90d1b8
--- /dev/null
+++ b/public/img/icon-proposal.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="61px" height="61px" viewBox="0 0 61 61" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.2 (15855) - http://www.bohemiancoding.com/sketch -->
+    <title>Oval 145 Copy 5 + send</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <ellipse id="path-1" cx="26.25" cy="26.25" rx="26.25" ry="26.25"></ellipse>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Wallet-Multisign" sketch:type="MSArtboardGroup" transform="translate(-22.000000, -558.000000)">
+            <g id="Oval-145-Copy-5-+-send" sketch:type="MSLayerGroup" transform="translate(26.000000, 562.000000)">
+                <g id="Oval-145-Copy-5" stroke="#A5B2BF">
+                    <use stroke-width="1.09090909" fill="#FFFFFF" fill-rule="evenodd" sketch:type="MSShapeGroup" xlink:href="#path-1"></use>
+                    <use stroke-opacity="0.15" stroke-width="4" fill="none" xlink:href="#path-1"></use>
+                </g>
+                <path d="M28.2822266,38 C28.0869131,38 27.9526371,37.9064137 27.8793945,37.7192383 L27.8671875,37.7192383 L23.9243164,28.0756836 L14.2807617,24.1206055 C14.0935863,24.055501 14,23.921225 14,23.7177734 C14,23.52246 14.0895173,23.384115 14.2685547,23.3027344 L38.3774414,13.0366211 C38.4262698,13.0122069 38.4832354,13 38.5483398,13 C38.6785488,13 38.7863765,13.0427242 38.8718262,13.1281738 C38.9572758,13.2136235 39,13.3173822 39,13.4394531 C39,13.5045576 38.9877931,13.5655922 38.9633789,13.6225586 L28.6972656,37.7314453 C28.615885,37.9104827 28.47754,38 28.2822266,38 L28.2822266,38 Z M15.5991211,23.7055664 L24.168457,27.2089844 L36.6074219,14.7578125 L15.5991211,23.7055664 Z M28.2944336,36.3886719 L37.2421875,15.3925781 L24.7910156,27.831543 L28.2944336,36.3886719 Z" id="send" fill="#A5B2BF" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/public/views/includes/transaction.html b/public/views/includes/transaction.html
index 24093e465..4b3fa3fcb 100644
--- a/public/views/includes/transaction.html
+++ b/public/views/includes/transaction.html
@@ -1,37 +1,36 @@
 <div class="ng-animate-disabled row collapse last-transactions-content line-b"
   ng-class="{'text-gray':!tx.pendingForUs}"
   ng-click="home.openTxpModal(tx, index.copayers, !!index.glideraStatus)">
-  <div class="small-1 columns text-center" >
-    <i class="icon-circle-active size-10" ng-show="tx.pendingForUs" ng-style="{'color':index.backgroundColor}" style="margin-top:8px;"></i>
-    &nbsp;
-  </div>
-  <div class="small-10 columns">
-      <div>
-        <span class="text-bold size-16"><span translate>Send</span> {{tx.amountStr}}</span>
-        <time class="right size-12 text-gray m5t">{{ (tx.ts || tx.createdOn ) * 1000 | amTimeAgo}}</time>
-      </div>
-      <div class="ellipsis size-14">
-        <span ng-if="tx.hasMultiplesOutputs">
-          <span translate>Recipients</span>:
-          <span>{{tx.recipientCount}}</span>
+  <div class="large-6 medium-6 small-6 columns size-14">
+    <div class="m10r left pr">
+      <i class="icon-circle-active size-10" ng-show="tx.pendingForUs" ng-style="{'color':index.backgroundColor}"></i>
+      <img src="img/icon-proposal.svg" alt="sync" width="40">
+    </div>
+    <div class="m10t">
+      <span ng-if="!tx.merchant">
+        {{index.addressbook[tx.toAddress]}}
+        <span ng-show="!index.addressbook[tx.toAddress] && tx.message">
+          <span class="ellipsis">{{tx.message}}</span>
         </span>
-        <span ng-if="!tx.hasMultiplesOutputs">
-          <span translate>To</span>:
-          <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>
-          <span ng-if="!tx.merchant">
-            {{index.addressbook[tx.toAddress] || tx.toAddress}}
-          </span>
+        <span ng-show="!index.addressbook[tx.toAddress] && !tx.message">
+          <span translate> Sending</span>
         </span>
-      </div>
-      <div class="ellipsis text-gray size-14">
-        {{tx.message}}
-      </div>
+      </span>
+      <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>
+    </div>
   </div>
-  <div class="small-1 columns text-right">
-    <br>
+  <div class="large-5 medium-5 small-5 columns text-right">
+    <span class="size-16">
+      - {{tx.amountStr}}
+    </span>
+    <div class="size-12 text-gray">
+      <time>{{ (tx.ts || tx.createdOn ) * 1000 | amTimeAgo}}</time>
+    </div>
+  </div>
+  <div class="large-1 medium-1 small-1 columns text-right m10t">
     <i class="icon-arrow-right3 size-18"></i>
   </div>
 </div>
diff --git a/src/css/main.css b/src/css/main.css
index b91d4365c..8c6d02f7f 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -342,6 +342,12 @@ ul.tx-copayers {
   text-align: center;
 }
 
+.icon-circle-active {
+  position: absolute;
+  bottom: 2px;
+  right: 2px;
+}
+
 .icon-sign {
   padding: 0.2rem 0.3rem;
   border-radius: 100%;
@@ -1422,7 +1428,7 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
 }
 
 .spinner > div {
-  background-color: #fff;
+  background-color: #8597A7;
   height: 100%;
   width: 2px;
   display: inline-block;