Removing top cancel button when in send draft flow (#12304)

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 {

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 && <ul className="page-container__tabs">{tabs}</ul>;
   }
 
+  renderCloseAction() {
+    const { hideClose, onClose, headerCloseText } = this.props;
+
+    if (hideClose) {
+      return null;
+    }
+
+    if (headerCloseText) {
+      return (
+        onClose && (
+          <Button
+            type="link"
+            className="page-container__header-close-text"
+            onClick={() => onClose()}
+          >
+            {headerCloseText}
+          </Button>
+        )
+      );
+    }
+
+    return (
+      onClose && (
+        <div
+          className="page-container__header-close"
+          onClick={() => onClose()}
+        />
+      )
+    );
+  }
+
   renderHeaderRow() {
     const {
       showBackButton,
@@ -47,14 +79,7 @@ export default class PageContainerHeader extends Component {
   }
 
   render() {
-    const {
+    const { title, subtitle, tabs, className, hideClose } = this.props;
-      title,
-      subtitle,
-      onClose,
-      tabs,
-      headerCloseText,
-      className,
-    } = this.props;
 
     return (
       <div
@@ -65,26 +90,18 @@ export default class PageContainerHeader extends Component {
       >
         {this.renderHeaderRow()}
 
-        {title && <div className="page-container__title">{title}</div>}
+        {title && (
-
+          <div
-        {subtitle && <div className="page-container__subtitle">{subtitle}</div>}
+            className={classnames('page-container__title', {
-
+              'page-container__title--no-margin-right': hideClose,
-        {onClose && headerCloseText ? (
+            })}
-          <Button
-            type="link"
-            className="page-container__header-close-text"
-            onClick={() => onClose()}
           >
-            {headerCloseText}
+            {title}
-          </Button>
+          </div>
-        ) : (
-          onClose && (
-            <div
-              className="page-container__header-close"
-              onClick={() => onClose()}
-            />
-          )
         )}
+        {subtitle && <div className="page-container__subtitle">{subtitle}</div>}
+
+        {this.renderCloseAction()}
 
         {this.renderTabs()}
       </div>

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