adjust class about modal

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 tag="h4" toggle={this.props.onClose} className="bg-danger text-white">
+        <ModalHeader tag="h4" toggle={this.props.onClose} className="bg-danger">
           Errors
         </ModalHeader>
         <ModalBody>

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 tag="h4" toggle={this.props.onClose} className="modal-header">
+        <ModalHeader tag="h4" toggle={this.props.onClose} className="bg-danger">
           <i className="icon icon-fire"></i> Delete Global Notification Setting
         </ModalHeader>
         <ModalBody>

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

@@ -47,7 +47,7 @@ class LdapAuthTestModal extends React.Component {
 
     return (
       <Modal isOpen={this.props.isOpen} toggle={this.props.onClose}>
-        <ModalHeader tag="h4" className="modal-header" toggle={this.props.onClose}>
+        <ModalHeader tag="h4" className="bg-info" 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 className="modal-md" isOpen={this.props.isShow} toggle={this.props.onHide}>
-        <ModalHeader tag="h4" toggle={this.props.onHide} className="modal-header bg-danger">
+        <ModalHeader tag="h4" toggle={this.props.onHide} className="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 tag="h4" toggle={adminUserGroupDetailContainer.closeUserGroupUserModal}>
+        <ModalHeader tag="h4" toggle={adminUserGroupDetailContainer.closeUserGroupUserModal} className="bg-info">
           {t('admin:user_group_management.add_modal.add_user') }
         </ModalHeader>
         <ModalBody>

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

@@ -83,7 +83,7 @@ class PasswordResetModal extends React.Component {
 
     return (
       <Modal isOpen={this.props.isOpen} toggle={this.props.onClose}>
-        <ModalHeader tag="h4" toggle={this.props.onClose} className="modal-header">
+        <ModalHeader tag="h4" toggle={this.props.onClose} className="bg-warning">
           {t('admin:user_management.reset_password') }
         </ModalHeader>
         <ModalBody>

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

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

src/client/js/components/Me/ImageCropModal.jsx

@@ -87,7 +87,7 @@ class ImageCropModal extends React.Component {
   render() {
     return (
       <Modal isOpen={this.props.show} toggle={this.props.onModalClose}>
-        <ModalHeader tag="h4" toggle={this.props.onModalClose}>
+        <ModalHeader tag="h4" toggle={this.props.onModalClose} className="bg-info">
           Image Crop
         </ModalHeader>
         <ModalBody className="my-4">

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 tag="h4" toggle={this.props.toggle}>
+        <ModalHeader tag="h4" toggle={this.props.toggle} className="bg-danger">
           <span id="contained-modal-title-lg">Delete attachment?</span>
         </ModalHeader>
         <ModalBody>

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

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

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

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

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

@@ -217,7 +217,7 @@ class GrantSelector extends React.Component {
         isOpen={this.state.isSelectGroupModalShown}
         toggle={this.hideSelectGroupModal}
       >
-        <ModalHeader tag="h4" toggle={this.hideSelectGroupModal}>
+        <ModalHeader tag="h4" toggle={this.hideSelectGroupModal} className="bg-info">
           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 tag="h4" toggle={this.props.cancel}>
+        <ModalHeader tag="h4" toggle={this.props.cancel} className="bg-danger">
           Deleting pages:
         </ModalHeader>
         <ModalBody>