Refactor and redesign confirm transaction views

1 files changed, 21 insertions, 12 deletions

diff --git a/ui/app/components/page-container/page-container-header/page-container-header.component.js b/ui/app/components/page-container/page-container-header/page-container-header.component.js
index 28882edce..5a5de1e5a 100644
--- a/ui/app/components/page-container/page-container-header/page-container-header.component.js
+++ b/ui/app/components/page-container/page-container-header/page-container-header.component.js
@@ -4,13 +4,14 @@ import PropTypes from 'prop-types'
 export default class PageContainerHeader extends Component {
 
   static propTypes = {
-    title: PropTypes.string.isRequired,
+    title: PropTypes.string,
     subtitle: PropTypes.string,
     onClose: PropTypes.func,
     showBackButton: PropTypes.bool,
     onBackButtonClick: PropTypes.func,
     backButtonStyles: PropTypes.object,
     backButtonString: PropTypes.string,
+    children: PropTypes.node,
   };
 
   renderHeaderRow () {
@@ -30,25 +31,33 @@ export default class PageContainerHeader extends Component {
   }
 
   render () {
-    const { title, subtitle, onClose } = this.props
+    const { title, subtitle, onClose, children } = this.props
 
     return (
       <div className="page-container__header">
 
         { this.renderHeaderRow() }
 
-        <div className="page-container__title">
-          {title}
-        </div>
+        { children }
 
-        <div className="page-container__subtitle">
-          {subtitle}
-        </div>
+        {
+          title && <div className="page-container__title">
+            { title }
+          </div>
+        }
 
-        <div
-          className="page-container__header-close"
-          onClick={() => onClose()}
-        />
+        {
+          subtitle && <div className="page-container__subtitle">
+            { subtitle }
+          </div>
+        }
+
+        {
+          onClose && <div
+            className="page-container__header-close"
+            onClick={() => onClose()}
+          />
+        }
 
       </div>
     )