Keep modal heading margin only when close button is shown

[MAILPOET-2777]

assets/css/src/components/_modal.scss

@@ -59,7 +59,7 @@
   top: 0;
   z-index: $modal-header-z-index;
 
-  h3 {
+  .mailpoet-modal-is-dismissible & h3 {
     margin-right: $modal-close-button-size + $grid-gap;
   }
 }

assets/js/src/common/modal/modal.tsx

@@ -31,6 +31,7 @@ function Modal({
 }: Props) {
   return createPortal(
     <ModalOverlay
+      isDismissible={isDismissible}
       onRequestClose={onRequestClose}
       shouldCloseOnEsc={shouldCloseOnEsc}
       shouldCloseOnClickOutside={shouldCloseOnClickOutside}

assets/js/src/common/modal/overlay.tsx

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 const ESCAPE = 27;
 
 type Props = {
+  isDismissible?: boolean,
   shouldCloseOnEsc?: boolean,
   shouldCloseOnClickOutside?: boolean,
   onRequestClose?: (event: React.SyntheticEvent) => void,
@@ -12,6 +13,7 @@ type Props = {
 };
 
 function ModalOverlay({
+  isDismissible = true,
   shouldCloseOnEsc = true,
   shouldCloseOnClickOutside = true,
   onRequestClose = () => {},
@@ -56,6 +58,7 @@ function ModalOverlay({
       ref={overlayRef}
       className={classnames(
         'mailpoet-modal-screen-overlay',
+        isDismissible ? 'mailpoet-modal-is-dismissible' : null,
         className
       )}
       onKeyDown={handleKeyDown}