Merge pull request #2031 from weseek/support/fix-modal-color

Support/fix modal color

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

@@ -175,7 +175,7 @@ class SelectCollectionsModal extends React.Component {
 
     return (
       <Modal isOpen={this.props.isOpen} toggle={this.props.onClose}>
-        <ModalHeader tag="h4" toggle={this.props.onClose}>
+        <ModalHeader tag="h4" toggle={this.props.onClose} className="bg-info text-light">
           {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 tag="h4" toggle={this.props.onClose} className="bg-danger text-white">
+        <ModalHeader tag="h4" toggle={this.props.onClose} className="bg-danger text-light">
           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 tag="h4" toggle={this.props.onClose}>
+        <ModalHeader tag="h4" toggle={this.props.onClose} className="bg-info text-light">
           {`'${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 tag="h4" toggle={this.props.onClose} className="modal-header">
+        <ModalHeader tag="h4" toggle={this.props.onClose} className="bg-danger text-light">
           <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" toggle={this.props.onClose} className="bg-info text-light">
           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 text-light">
           <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 text-light">
           {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 text-light">
           {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 text-light">
           {t('admin:user_management.invite_users') }
         </ModalHeader>
         <ModalBody>

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

@@ -71,7 +71,7 @@ class AssociateModal extends React.Component {
 
     return (
       <Modal isOpen={this.props.isOpen} toggle={this.props.onClose} size="lg">
-        <ModalHeader className="bg-info" toggle={this.props.onClose}>
+        <ModalHeader className="bg-info text-light" toggle={this.props.onClose}>
           { t('Create External Account') }
         </ModalHeader>
         <ModalBody>

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

@@ -49,7 +49,7 @@ class DisassociateModal extends React.Component {
 
     return (
       <Modal isOpen={this.props.isOpen} toggle={this.props.onClose}>
-        <ModalHeader className="bg-info" toggle={this.props.onClose}>
+        <ModalHeader className="bg-info text-light" toggle={this.props.onClose}>
           {t('personal_settings.disassociate_external_account')}
         </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 text-light">
           Image Crop
         </ModalHeader>
         <ModalBody className="my-4">

src/client/js/components/Page/TagEditor.jsx

@@ -47,7 +47,7 @@ export default class TagEditor extends React.Component {
   render() {
     return (
       <Modal isOpen={this.state.isOpenModal} toggle={this.closeModalHandler} id="edit-tag-modal">
-        <ModalHeader tag="h4" toggle={this.closeModalHandler} className="bg-primary">
+        <ModalHeader tag="h4" toggle={this.closeModalHandler} className="bg-primary text-light">
           <span className="text-white">Edit Tags</span>
         </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 tag="h4" toggle={this.props.toggle}>
+        <ModalHeader tag="h4" toggle={this.props.toggle} className="bg-danger text-light">
           <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 text-light">
           <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/Editor.jsx

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

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 text-light">
+          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 text-light">
           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 text-light">
           Deleting pages:
         </ModalHeader>
         <ModalBody>

src/client/styles/scss/theme/_apply-colors-dark.scss

@@ -7,7 +7,7 @@
   &.active,
   &.active:hover,
   &.active:focus {
-    color: white;
+    color: $light;
     background-color: lighten($bgcolor-global, 5%);
   }
 }
@@ -47,14 +47,6 @@ textarea.form-control {
   }
 }
 
-.modal {
-  .modal-header {
-    .close {
-      color: white;
-    }
-  }
-}
-
 /*
  * Panel
  */

src/client/styles/scss/theme/_apply-colors.scss

@@ -116,22 +116,8 @@ $link-hover-color: $color-link-hover;
 .modal {
   .modal-header {
     border-bottom-color: $border-color-theme;
-
-    &.bg-primary,
-    &.bg-info,
-    &.bg-success,
-    &.bg-warning,
-    &.bg-danger {
-      color: white;
-
-      .close {
-        color: white;
-      }
-    }
-
     .close {
       opacity: 0.5;
-
       &:hover {
         opacity: 0.9;
       }

src/client/styles/scss/theme/default.scss

@@ -17,6 +17,7 @@
 //
 html[light] {
   $primary: #112744;
+  $light: white;
 
   // Background colors
   $bgcolor-global: white;
@@ -61,6 +62,7 @@ html[light] {
 //
 html[dark] {
   $primary: #d65a31;
+  $light: white;
 
   $basecolor: #222831;