Simplify header DOM, style it according to specs

[MAILPOET-2777]
This commit is contained in:
Jan Jakeš
2020-05-28 15:22:36 +02:00
committed by Veljko V
parent af860cdbf6
commit 9047ef5e6c
2 changed files with 8 additions and 12 deletions

View File

@@ -58,17 +58,15 @@
.mailpoet-modal-header { .mailpoet-modal-header {
background: white; background: white;
border-bottom: 1px solid $color-tertiary-light;
margin-bottom: $grid-gap;
padding: 0 $grid-gap; padding: 0 $grid-gap;
top: 0; top: 0;
z-index: $modal-header-z-index; z-index: $modal-header-z-index;
}
.mailpoet-modal-header-heading-container { h3 {
align-items: center; margin-right: $modal-close-button-size + $grid-gap;
display: flex; }
flex-direction: row;
flex-grow: 1;
justify-content: left;
} }
.mailpoet-modal-close { .mailpoet-modal-close {

View File

@@ -5,11 +5,9 @@ import Heading from 'common/typography/heading/heading';
const ModalHeader = ({ title }) => ( const ModalHeader = ({ title }) => (
<div className="mailpoet-modal-header"> <div className="mailpoet-modal-header">
<div className="mailpoet-modal-header-heading-container"> <Heading level={3}>
<Heading level={3}> { title }
{ title } </Heading>
</Heading>
</div>
</div> </div>
); );