move footer buttons to scrollable area (#9228)

Co-authored-by: Patryk Łucka <patryk.lucka@consensys.net>

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>
     )
   }

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;
+  }
 }

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()}
+          contentComponent && (
-          cancelText={this.context.t('reject')}
+            <PageContainerFooter
-          onSubmit={() => onSubmit()}
+              onCancel={onCancel}
-          submitText={this.context.t('confirm')}
+              cancelText={this.context.t('reject')}
-          submitButtonType="confirm"
+              onSubmit={onSubmit}
-          disabled={disabled}
+              submitText={this.context.t('confirm')}
-        >
+              submitButtonType="confirm"
-          {unapprovedTxCount > 1 && (
+              disabled={disabled}
-            <a onClick={() => onCancelAll()}>
+            >
-              {this.context.t('rejectTxsN', [unapprovedTxCount])}
+              {unapprovedTxCount > 1 && (
-            </a>
+                <a onClick={onCancelAll}>
-          )}
+                  {this.context.t('rejectTxsN', [unapprovedTxCount])}
-        </PageContainerFooter>
+                </a>
+              )}
+            </PageContainerFooter>
+          )
+        }
       </div>
     )
   }