diff --git a/ui/components/ui/page-container/index.scss b/ui/components/ui/page-container/index.scss index 27ce13d5f..afe634c38 100644 --- a/ui/components/ui/page-container/index.scss +++ b/ui/components/ui/page-container/index.scss @@ -104,6 +104,10 @@ color: $black; font-weight: 500; margin-right: 1.5rem; + + &--no-margin-right { + margin-right: 0; + } } &__subtitle { diff --git a/ui/components/ui/page-container/page-container-header/page-container-header.component.js b/ui/components/ui/page-container/page-container-header/page-container-header.component.js index 0c3995c10..24d1d9e53 100644 --- a/ui/components/ui/page-container/page-container-header/page-container-header.component.js +++ b/ui/components/ui/page-container/page-container-header/page-container-header.component.js @@ -15,6 +15,7 @@ export default class PageContainerHeader extends Component { tabs: PropTypes.node, headerCloseText: PropTypes.string, className: PropTypes.string, + hideClose: PropTypes.bool, }; renderTabs() { @@ -23,6 +24,37 @@ export default class PageContainerHeader extends Component { return tabs && ; } + renderCloseAction() { + const { hideClose, onClose, headerCloseText } = this.props; + + if (hideClose) { + return null; + } + + if (headerCloseText) { + return ( + onClose && ( + + ) + ); + } + + return ( + onClose && ( +
onClose()} + /> + ) + ); + } + renderHeaderRow() { const { showBackButton, @@ -47,14 +79,7 @@ export default class PageContainerHeader extends Component { } render() { - const { - title, - subtitle, - onClose, - tabs, - headerCloseText, - className, - } = this.props; + const { title, subtitle, tabs, className, hideClose } = this.props; return (
{this.renderHeaderRow()} - {title &&
{title}
} - + {title && ( +
+ {title} +
+ )} {subtitle &&
{subtitle}
} - {onClose && headerCloseText ? ( - - ) : ( - onClose && ( -
onClose()} - /> - ) - )} + {this.renderCloseAction()} {this.renderTabs()}
diff --git a/ui/pages/send/send-header/send-header.component.js b/ui/pages/send/send-header/send-header.component.js index 5e8b7f106..b89816656 100644 --- a/ui/pages/send/send-header/send-header.component.js +++ b/ui/pages/send/send-header/send-header.component.js @@ -41,6 +41,7 @@ export default function SendHeader() { headerCloseText={ stage === SEND_STAGES.EDIT ? t('cancelEdit') : t('cancel') } + hideClose={stage === SEND_STAGES.DRAFT} /> ); }