From afc52d69ce4308a7d104cc5da5faec1acf6d0b11 Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Thu, 3 Dec 2015 16:22:44 -0300
Subject: [PATCH] Updates tx-status, new design

---
 public/views/modals/tx-status.html | 27 +++++++++++++++------------
 src/css/main.css                   |  1 +
 src/css/mobile.css                 | 17 ++++++++++-------
 src/js/services/txStatus.js        |  5 ++++-
 4 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/public/views/modals/tx-status.html b/public/views/modals/tx-status.html
index 507a85e6b..7d6481f5c 100644
--- a/public/views/modals/tx-status.html
+++ b/public/views/modals/tx-status.html
@@ -1,18 +1,21 @@
 
-<div ng-if="type == 'broadcasted'" class="popup-txsent">
-  <i class="small-centered columns fi-check m20tp"></i>
-  <div class="text-center size-18 text-white text-bold tu p20">
-    <span translate>Payment Sent</span>
+<div ng-if="type == 'broadcasted'" class="popup-txsent text-center">
+  <i class="small-centered columns fi-check m30tp" ng-style="{'color':color, 'border-color':color}"></i>
+  <div ng-show="tx.amountStr" class="m20t size-36 text-white">
+    {{tx.amountStr}}
   </div>
-  <div class="text-center">
-    <a class="button outline round white tiny small-4" ng-click="cancel()">OKAY</a>
+  <div class="size-16 text-gray">
+    <span translate>Sent</span>
+  </div>
+  <div class="text-center m20t">
+    <a class="button outline round light-gray tiny small-4" ng-click="cancel()">OKAY</a>
   </div>
 </div>
 
 
 <div ng-if="type == 'created'" class="popup-txsigned">
-  <i class="small-centered columns fi-check m20tp"></i>
-  <div class="text-center size-18 text-primary tu text-bold p20">
+  <i class="small-centered columns fi-check m30tp" ng-style="{'color':color, 'border-color':color}"></i>
+  <div class="text-center size-18 tu text-bold p20" ng-style="{'color':color}">
     <span translate>Payment Proposal Created</span>
   </div>
   <div class="text-center">
@@ -23,8 +26,8 @@
 
 
 <div ng-if="type == 'accepted'" class="popup-txsigned">
-  <i class="small-centered columns fi-check m20tp"></i>
-  <div class="text-center size-18 text-primary tu text-bold p20">
+  <i class="small-centered columns fi-check m30tp" ng-style="{'color':color, 'border-color':color}"></i>
+  <div class="text-center size-18 text-primary tu text-bold p20" ng-style="{'color':color}">
     <span translate>Payment Accepted</span>
   </div>
   <div class="text-center">
@@ -33,8 +36,8 @@
 </div>
 
 <div ng-if="type=='rejected'" class="popup-txrejected">
-  <i class="fi-x small-centered columns m20tp"></i>
-  <div class="text-center size-18 tu text-warning text-bold p20">
+  <i class="fi-x small-centered columns m30tp" ng-style="{'color':color, 'border-color':color}"></i>
+  <div class="text-center size-18 tu text-bold p20" ng-style="{'color':color}">
     <span translate>Payment Rejected</span>
   </div>
   <div class="text-center">
diff --git a/src/css/main.css b/src/css/main.css
index b0806d3ea..2546f314c 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -513,6 +513,7 @@ ul.manage li {
 .m20r {margin-right: 20px;}
 .m20t {margin-top: 20px;}
 .m20tp {margin-top: 20%;}
+.m30tp {margin-top: 30%;}
 .m15 {margin: 15px;}
 .m15h {margin: 0 15px;}
 .p10t {padding-top: 10px;}
diff --git a/src/css/mobile.css b/src/css/mobile.css
index 585fa132e..8ab2e81fb 100644
--- a/src/css/mobile.css
+++ b/src/css/mobile.css
@@ -705,14 +705,15 @@ textarea:focus
   position: absolute;
   width: 100%;
   height: 100%;
-  background: #1ABC9C;
+  background: rgba(24,44,58,0.90);
 }
 
 .popup-txsent i {
   font-size: 5rem;
-  background-color: #fff;
-  color: #1ABC9C;
+  color: #4A90E2;
   border-radius: 100%;
+  border-color: #4A90E2;
+  border: 2px solid;
   width: 150px;
   height: 150px;
   display: block;
@@ -722,9 +723,10 @@ textarea:focus
 
 .popup-txsigned i {
   font-size: 5rem;
-  background-color: #1ABC9C;
-  color: #fff;
+  color: #4A90E2;
   border-radius: 100%;
+  border-color: #4A90E2;
+  border: 2px solid;
   width: 150px;
   height: 150px;
   display: block;
@@ -734,9 +736,10 @@ textarea:focus
 
 .popup-txrejected i {
   font-size: 5rem;
-  background-color: #ED4A43;
-  color: #fff;
+  color: #4A90E2;
   border-radius: 100%;
+  border-color: #4A90E2;
+  border: 2px solid;
   width: 150px;
   height: 150px;
   display: block;
diff --git a/src/js/services/txStatus.js b/src/js/services/txStatus.js
index a4b45d485..8456d85d1 100644
--- a/src/js/services/txStatus.js
+++ b/src/js/services/txStatus.js
@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.services').factory('txStatus', function($modal, lodash, profileService, $timeout) {
+angular.module('copayApp.services').factory('txStatus', function($modal, lodash, profileService, $timeout, txFormatService) {
   var root = {};
 
   root.notify = function(txp, cb) {
@@ -42,8 +42,11 @@ angular.module('copayApp.services').factory('txStatus', function($modal, lodash,
   };
 
   var openModal = function(type, txp, cb) {
+    var fc = profileService.focusedClient;
     var ModalInstanceCtrl = function($scope, $modalInstance) {
       $scope.type = type;
+      $scope.tx = txFormatService.processTx(txp);
+      $scope.color = fc.backgroundColor;
       $scope.cancel = function() {
         $modalInstance.dismiss('cancel');
       };