From f7e4e209ef9600822ec3f40ba42ad9a7ba6e95e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patryk=20=C5=81ucka?= <patryk.lucka@gmail.com>
Date: Tue, 18 Aug 2020 16:10:56 +0200
Subject: [PATCH] move footer buttons to scrollable area (#9228)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Patryk Łucka <patryk.lucka@consensys.net>
---
 ...onfirm-page-container-content.component.js | 34 ++++++++++++++++
 .../confirm-page-container-content/index.scss |  6 +++
 .../confirm-page-container.component.js       | 40 ++++++++++++-------
 3 files changed, 66 insertions(+), 14 deletions(-)

diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
index e87492832..0143df6d1 100644
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-content.component.js
@@ -4,6 +4,8 @@ import classnames from 'classnames'
 import { Tabs, Tab } from '../../../ui/tabs'
 import { ConfirmPageContainerSummary, ConfirmPageContainerWarning } from '.'
 import ErrorMessage from '../../../ui/error-message'
+import { PageContainerFooter } from '../../../ui/page-container'
+
 
 export default class ConfirmPageContainerContent extends Component {
   static propTypes = {
@@ -22,6 +24,15 @@ export default class ConfirmPageContainerContent extends Component {
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     titleComponent: PropTypes.node,
     warning: PropTypes.string,
+    // Footer
+    onCancelAll: PropTypes.func,
+    onCancel: PropTypes.func,
+    cancelText: PropTypes.string,
+    onSubmit: PropTypes.func,
+    submitText: PropTypes.string,
+    disabled: PropTypes.bool,
+    unapprovedTxCount: PropTypes.number,
+    rejectNText: PropTypes.string,
   }
 
   renderContent () {
@@ -66,6 +77,14 @@ export default class ConfirmPageContainerContent extends Component {
       detailsComponent,
       dataComponent,
       warning,
+      onCancelAll,
+      onCancel,
+      cancelText,
+      onSubmit,
+      submitText,
+      disabled,
+      unapprovedTxCount,
+      rejectNText,
     } = this.props
 
     return (
@@ -104,6 +123,21 @@ export default class ConfirmPageContainerContent extends Component {
             </div>
           )
         }
+        <PageContainerFooter
+          onCancel={onCancel}
+          cancelText={cancelText}
+          onSubmit={onSubmit}
+          submitText={submitText}
+          submitButtonType="confirm"
+          disabled={disabled}
+        >
+          {unapprovedTxCount > 1 && (
+            <a onClick={onCancelAll}>
+              {rejectNText}
+            </a>
+          )}
+        </PageContainerFooter>
+
       </div>
     )
   }
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss b/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss
index 854327f12..cb263ec9c 100644
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/index.scss
@@ -5,6 +5,8 @@
   overflow-y: auto;
   height: 100%;
   flex: 1;
+  display: flex;
+  flex-direction: column;
 
   &__error-container {
     padding: 0 16px 16px 16px;
@@ -72,4 +74,8 @@
     text-transform: uppercase;
     margin: 0 8px;
   }
+
+  .page-container__footer {
+    margin-top: auto;
+  }
 }
diff --git a/ui/app/components/app/confirm-page-container/confirm-page-container.component.js b/ui/app/components/app/confirm-page-container/confirm-page-container.component.js
index 404e214f4..baf75bbd3 100644
--- a/ui/app/components/app/confirm-page-container/confirm-page-container.component.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container.component.js
@@ -157,23 +157,35 @@ export default class ConfirmPageContainer extends Component {
               nonce={nonce}
               assetImage={assetImage}
               warning={warning}
+              onCancelAll={onCancelAll}
+              onCancel={onCancel}
+              cancelText={this.context.t('reject')}
+              onSubmit={onSubmit}
+              submitText={this.context.t('confirm')}
+              disabled={disabled}
+              unapprovedTxCount={unapprovedTxCount}
+              rejectNText={this.context.t('rejectTxsN', [unapprovedTxCount])}
             />
           )
         }
-        <PageContainerFooter
-          onCancel={() => onCancel()}
-          cancelText={this.context.t('reject')}
-          onSubmit={() => onSubmit()}
-          submitText={this.context.t('confirm')}
-          submitButtonType="confirm"
-          disabled={disabled}
-        >
-          {unapprovedTxCount > 1 && (
-            <a onClick={() => onCancelAll()}>
-              {this.context.t('rejectTxsN', [unapprovedTxCount])}
-            </a>
-          )}
-        </PageContainerFooter>
+        {
+          contentComponent && (
+            <PageContainerFooter
+              onCancel={onCancel}
+              cancelText={this.context.t('reject')}
+              onSubmit={onSubmit}
+              submitText={this.context.t('confirm')}
+              submitButtonType="confirm"
+              disabled={disabled}
+            >
+              {unapprovedTxCount > 1 && (
+                <a onClick={onCancelAll}>
+                  {this.context.t('rejectTxsN', [unapprovedTxCount])}
+                </a>
+              )}
+            </PageContainerFooter>
+          )
+        }
       </div>
     )
   }