Use heading component for modal header
[MAILPOET-2777]
This commit is contained in:
@@ -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;
|
||||||
|
@@ -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>
|
||||||
|
Reference in New Issue
Block a user