Use heading component for modal header

[MAILPOET-2777]
This commit is contained in:
Jan Jakeš
2020-05-28 12:59:03 +02:00
committed by Veljko V
parent c07819e465
commit 1b6c6bc7aa
2 changed files with 3 additions and 12 deletions

View File

@@ -84,16 +84,6 @@
width: 100%; width: 100%;
} }
.mailpoet-modal-header-heading {
font-size: 1rem;
font-weight: 600;
}
h1 {
line-height: 1;
margin: 0;
}
.mailpoet-modal-close { .mailpoet-modal-close {
background: none; background: none;
border: 0; border: 0;

View File

@@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import closeIcon from './close_icon.jsx'; import closeIcon from './close_icon.jsx';
import Heading from 'common/typography/heading/heading';
const ModalHeader = ({ const ModalHeader = ({
title, title,
@@ -10,9 +11,9 @@ const ModalHeader = ({
}) => ( }) => (
<div className="mailpoet-modal-header"> <div className="mailpoet-modal-header">
<div className="mailpoet-modal-header-heading-container"> <div className="mailpoet-modal-header-heading-container">
<h1 className="mailpoet-modal-header-heading"> <Heading level={3}>
{ title } { title }
</h1> </Heading>
</div> </div>
{ isDismissible && ( { isDismissible && (
<button type="button" onClick={onClose} className="mailpoet-modal-close">{closeIcon}</button> <button type="button" onClick={onClose} className="mailpoet-modal-close">{closeIcon}</button>