From e8584621072fb4c5e3b16a0bfe0ccd596c4a482c Mon Sep 17 00:00:00 2001
From: Marty Alcala <marty@bitpay.com>
Date: Wed, 16 Nov 2016 15:35:25 -0500
Subject: [PATCH] fix click to pay button to bottom of screen like the slide to
 pay component

---
 src/sass/buttons.scss                      |  3 +--
 src/sass/views/includes/clickToAccept.scss | 14 ++++++++++++++
 src/sass/views/includes/txp-details.scss   |  2 +-
 www/views/confirm.html                     | 14 +++++++-------
 www/views/modals/txp-details.html          | 14 +++++++-------
 5 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/sass/buttons.scss b/src/sass/buttons.scss
index 7f35657e2..dd750d28f 100644
--- a/src/sass/buttons.scss
+++ b/src/sass/buttons.scss
@@ -19,8 +19,7 @@ $button-secondary-border:          transparent;
 $button-secondary-active-bg:       darken($subtle-gray, 5%);
 $button-secondary-active-border:   transparent;
 
-%button-standard,
-click-to-accept {
+%button-standard {
   width: 85%;
   max-width: 300px;
   margin-left: auto;
diff --git a/src/sass/views/includes/clickToAccept.scss b/src/sass/views/includes/clickToAccept.scss
index 9eb8098e0..3d8b96ada 100644
--- a/src/sass/views/includes/clickToAccept.scss
+++ b/src/sass/views/includes/clickToAccept.scss
@@ -1,7 +1,18 @@
 click-to-accept {
 
+  position: fixed;
+  bottom: 0;
+  height: 92px;
+  width: 100%;
+
   .click-to-accept {
 
+    &__button.button.button-primary.button-standard {
+      height: 100%;
+      max-width: 9999px;
+      width: 100%;
+    }
+
     &__button.disable {
       pointer-events: none;
     }
@@ -18,6 +29,9 @@ click-to-accept {
       transform: translateY(2rem);
       opacity: 0;
       pointer-events: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
 
       &.enter {
         transition: transform 250ms ease, opacity 250ms ease;
diff --git a/src/sass/views/includes/txp-details.scss b/src/sass/views/includes/txp-details.scss
index 9ebb8ad67..137573dae 100644
--- a/src/sass/views/includes/txp-details.scss
+++ b/src/sass/views/includes/txp-details.scss
@@ -8,7 +8,7 @@
   .list {
     background: #f5f5f5;
   }
-  .slide-to-pay {
+  .add-bottom-for-cta {
     bottom: 92px;
   }
   .head {
diff --git a/www/views/confirm.html b/www/views/confirm.html
index 94cd36fac..500a79671 100644
--- a/www/views/confirm.html
+++ b/www/views/confirm.html
@@ -7,7 +7,7 @@
     </ion-nav-back-button>
   </ion-nav-bar>
 
-  <ion-content ng-class="{'slide-to-pay': isCordova && !insuffientFunds && !noMatchingWallet}">
+  <ion-content ng-class="{'add-bottom-for-cta': !insuffientFunds && !noMatchingWallet}">
     <div class="list">
       <div class="item head">
         <div class="sending-label">
@@ -77,13 +77,13 @@
         </div>
       </div>
     </div>
-    <click-to-accept
-      ng-click="approve(statusChangeHandler)"
-      ng-if="!isCordova && wallets[0]"
-      click-send-status="sendStatus">
-      Click to pay
-    </click-to-accept>
   </ion-content>
+  <click-to-accept
+    ng-click="approve(statusChangeHandler)"
+    ng-if="!isCordova && wallets[0]"
+    click-send-status="sendStatus">
+    Click to pay
+  </click-to-accept>
   <slide-to-accept
     ng-if="isCordova && wallets[0]"
     slide-on-confirm="onConfirm()"
diff --git a/www/views/modals/txp-details.html b/www/views/modals/txp-details.html
index 624cbaa16..5508177b2 100644
--- a/www/views/modals/txp-details.html
+++ b/www/views/modals/txp-details.html
@@ -11,7 +11,7 @@
     </button>
   </ion-header-bar>
 
-  <ion-content ng-init="updateCopayerList()" ng-class="{'slide-to-pay': tx.pendingForUs && canSign && !hasClick}">
+  <ion-content ng-init="updateCopayerList()" ng-class="{'add-bottom-for-cta': tx.pendingForUs && canSign}">
     <div class="list">
       <div class="item head">
         <div class="sending-label">
@@ -150,12 +150,6 @@
       </div>
     </div>
 
-    <click-to-accept
-      ng-click="onConfirm(statusChangeHandler)"
-      ng-if="tx.pendingForUs && canSign && !paymentExpired && hasClick"
-      click-send-status="sendStatus">
-      Click to accept
-    </click-to-accept>
     <div class="m30t text-center" ng-if="tx.canBeRemoved || (tx.status == 'accepted' && !tx.broadcastedOn)">
       <div class="size-12 padding proposal-deletion-help" ng-show="!tx.isGlidera && isShared" translate>
         * A payment proposal can be deleted if 1) you are the creator, and no other copayer has signed, or 2) 24 hours have passed since the proposal was created.
@@ -167,6 +161,12 @@
     </div>
   </ion-content>
 
+  <click-to-accept
+    ng-click="onConfirm(statusChangeHandler)"
+    ng-if="tx.pendingForUs && canSign && !paymentExpired && hasClick"
+    click-send-status="sendStatus">
+    Click to accept
+  </click-to-accept>
   <slide-to-accept
     ng-if="tx.pendingForUs && canSign && !paymentExpired && !hasClick"
     slide-on-confirm="onConfirm()"