use h4 and appear close button

src/client/js/components/Admin/ExportArchiveData/SelectCollectionsModal.jsx

@@ -174,7 +174,7 @@ class SelectCollectionsModal extends React.Component {
 
     return (
       <Modal isOpen={this.props.isOpen} toggle={this.props.onClose}>
-        <ModalHeader toggle={this.props.onClose}>
+        <ModalHeader tag="h4" toggle={this.props.onClose}>
           {t('admin:export_management.export_collections')}
         </ModalHeader>
 

src/client/js/components/Admin/ImportData/GrowiArchive/ErrorViewer.jsx

@@ -21,7 +21,7 @@ class ErrorViewer extends React.Component {
 
     return (
       <Modal isOpen={this.props.isOpen} toggle={this.props.onClose}>
-        <ModalHeader toggle={this.props.onClose} className="bg-danger text-white">
+        <ModalHeader tag="h4" toggle={this.props.onClose} className="bg-danger text-white">
           Errors
         </ModalHeader>
         <ModalBody>

src/client/js/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx

@@ -204,7 +204,7 @@ class ImportCollectionConfigurationModal extends React.Component {
 
     return (
       <Modal isOpen={this.props.isOpen} toggle={this.props.onClose} onEnter={this.initialize}>
-        <ModalHeader toggle={this.props.onClose}>
+        <ModalHeader tag="h4" toggle={this.props.onClose}>
           {`'${collectionName}'`} Configuration
         </ModalHeader>
 

src/client/js/components/Admin/Notification/NotificationDeleteModal.jsx

@@ -12,7 +12,7 @@ class NotificationDeleteModal extends React.PureComponent {
     const { t, notificationForConfiguration } = this.props;
     return (
       <Modal isOpen={this.props.isOpen} toggle={this.props.onClose}>
-        <ModalHeader toggle={this.props.onClose} className="modal-header" closeButton>
+        <ModalHeader tag="h4" toggle={this.props.onClose} className="modal-header">
           <i className="icon icon-fire"></i> Delete Global Notification Setting
         </ModalHeader>
         <ModalBody>

src/client/js/components/Admin/Security/LdapAuthTestModal.jsx

@@ -111,7 +111,7 @@ class LdapAuthTestModal extends React.Component {
 
     return (
       <Modal isOpen={this.props.isOpen} toggle={this.props.onClose}>
-        <ModalHeader className="modal-header" toggle={this.props.onClose}>
+        <ModalHeader tag="h4" className="modal-header" toggle={this.props.onClose}>
           Test LDAP Account
         </ModalHeader>
         <ModalBody>

src/client/js/components/Admin/UserGroup/UserGroupDeleteModal.jsx

@@ -164,7 +164,7 @@ class UserGroupDeleteModal extends React.Component {
 
     return (
       <Modal isOpen={this.props.isShow} toggle={this.props.onHide}>
-        <ModalHeader toggle={this.props.onHide} className="modal-header bg-danger">
+        <ModalHeader tag="h4" toggle={this.props.onHide} className="modal-header bg-danger">
           <i className="icon icon-fire"></i> {t('admin:user_group_management.delete_modal.header')}
         </ModalHeader>
         <ModalBody>

src/client/js/components/Admin/UserGroupDetail/UserGroupUserModal.jsx

@@ -19,7 +19,7 @@ class UserGroupUserModal extends React.Component {
 
     return (
       <Modal isOpen={adminUserGroupDetailContainer.state.isUserGroupUserModalOpen} toggle={adminUserGroupDetailContainer.closeUserGroupUserModal}>
-        <ModalHeader toggle={adminUserGroupDetailContainer.closeUserGroupUserModal}>
+        <ModalHeader tag="h4" toggle={adminUserGroupDetailContainer.closeUserGroupUserModal}>
           {t('admin:user_group_management.add_modal.add_user') }
         </ModalHeader>
         <ModalBody>

src/client/js/components/Admin/Users/PasswordResetModal.jsx

@@ -87,7 +87,7 @@ class PasswordResetModal extends React.Component {
 
     return (
       <Modal isOpen={adminUsersContainer.state.isPasswordResetModalShown} toggle={adminUsersContainer.hidePasswordResetModal}>
-        <ModalHeader toggle={adminUsersContainer.hidePasswordResetModal} className="modal-header">
+        <ModalHeader tag="h4" toggle={adminUsersContainer.hidePasswordResetModal} className="modal-header">
           {t('admin:user_management.reset_password') }
         </ModalHeader>
         <ModalBody>

src/client/js/components/Admin/Users/UserInviteModal.jsx

@@ -189,7 +189,7 @@ class UserInviteModal extends React.Component {
 
     return (
       <Modal isOpen={adminUsersContainer.state.isUserInviteModalShown} toggle={this.onToggleModal}>
-        <ModalHeader toggle={this.onToggleModal} className="modal-header">
+        <ModalHeader tag="h4" toggle={this.onToggleModal} className="modal-header">
           {t('admin:user_management.invite_users') }
         </ModalHeader>
         <ModalBody>

src/client/js/components/PageAttachment/DeleteAttachmentModal.jsx

@@ -73,7 +73,7 @@ export default class DeleteAttachmentModal extends React.Component {
 
     return (
       <Modal {...props} className="attachment-delete-modal" bsSize="large" aria-labelledby="contained-modal-title-lg">
-        <ModalHeader closeButton>
+        <ModalHeader tag="h4" toggle={this.props.toggle}>
           <span id="contained-modal-title-lg">Delete attachment?</span>
         </ModalHeader>
         <ModalBody>

src/client/js/components/PageComment/DeleteCommentModal.jsx

@@ -37,7 +37,7 @@ export default class DeleteCommentModal extends React.Component {
 
     return (
       <Modal isOpen={this.props.isShown} toggle={this.props.cancel} className="page-comment-delete-modal">
-        <ModalHeader toggle={this.props.cancel}>
+        <ModalHeader tag="h4" toggle={this.props.cancel}>
           <span>
             <i className="icon-fw icon-fire text-danger"></i>
             Delete comment?

src/client/js/components/PageEditor/Editor.jsx

@@ -260,7 +260,7 @@ export default class Editor extends AbstractEditor {
 
     return (
       <Modal isOpen={this.state.isCheatsheetModalShown} toggle={hideCheatsheetModal} className="modal modal-gfm-cheatsheet">
-        <ModalHeader closeButton className="bg-primary">
+        <ModalHeader tag="h4" toggle={hideCheatsheetModal} className="bg-primary">
           <span className="text-white"><i className="icon-fw icon-question" />Markdown Help</span>
         </ModalHeader>
         <ModalBody>

src/client/js/components/PageEditor/HandsontableModal.jsx

@@ -434,7 +434,7 @@ export default class HandsontableModal extends React.PureComponent {
 
     return (
       <Modal isOpen={this.state.show} toggle={this.cancel} size="lg" className={dialogClassName}>
-        <ModalHeader toggle={this.cancel} close={buttons}>Edit Table</ModalHeader>
+        <ModalHeader tag="h4" toggle={this.cancel} close={buttons}>Edit Table</ModalHeader>
         <ModalBody className="p-0 d-flex flex-column">
           <div className="px-4 py-3 modal-navbar bg-light">
             <Button className="mr-4 data-import-button bg-light" onClick={this.toggleDataImportArea}>

src/client/js/components/SavePageControls/GrantSelector.jsx

@@ -217,7 +217,7 @@ class GrantSelector extends React.Component {
         isOpen={this.state.isSelectGroupModalShown}
         toggle={this.hideSelectGroupModal}
       >
-        <ModalHeader toggle={this.hideSelectGroupModal}>
+        <ModalHeader tag="h4" toggle={this.hideSelectGroupModal}>
           Select a Group
         </ModalHeader>
         <ModalBody>

src/client/js/components/SearchPage/DeletePageListModal.jsx

@@ -29,7 +29,7 @@ export default class DeletePageListModal extends React.Component {
 
     return (
       <Modal isOpen={this.props.isShown} toggle={this.props.cancel} className="page-list-delete-modal">
-        <ModalHeader toggle={this.props.cancel}>
+        <ModalHeader tag="h4" toggle={this.props.cancel}>
           Deleting pages:
         </ModalHeader>
         <ModalBody>