Merge branch 'support/apply-bootstrap4' into support/fix-subnav-layout

# Conflicts:
#	src/client/styles/scss/theme/_apply-colors-kibela.scss

.github/workflows/build-rc.yml

@@ -52,3 +52,8 @@ jobs:
         target: weseek/growi
         semver: ${{ env.SEMVER }}
         publish: true
+
+    - name: Check whether workspace is clean
+      run: |
+        STATUS=`git status --porcelain`
+        if [ -z "$STATUS" ]; then exit 0; else exit 1; fi

.github/workflows/build.yml

@@ -66,6 +66,11 @@ jobs:
         additional-tags: 'latest'
         publish: true
 
+    - name: Check whether workspace is clean
+      run: |
+        STATUS=`git status --porcelain`
+        if [ -z "$STATUS" ]; then exit 0; else exit 1; fi
+
   publish-desc:
 
     runs-on: ubuntu-latest

resource/locales/en-US/admin/admin.json

@@ -105,7 +105,7 @@
     },
     "behavior": "Behavior",
     "behavior_desc": {
-      "growi_text1": "Both of <code>/page</code> and <code>/page/</code> shows the same page。",
+      "growi_text1": "Both of <code>/page</code> and <code>/page/</code> shows the same page.",
       "growi_text2": "<code>/nonexistent_page</code> shows editing form",
       "growi_text3": "All pages shows the list of sub pages <b>if using GROWI Enhanced Layout</b>",
       "crowi_text1": "<code>/page</code> shows the page",
@@ -151,7 +151,12 @@
     "import_from": "Import from {{from}}",
     "import_growi_archive": "Import GROWI Archive",
     "growi_settings": {
-      "overwrite_documents": "Imported documents will overwrite existing documents",
+      "description_of_import_mode": {
+        "about": "When you import data with the same name as an existing one, choose from the following three modes below.",
+        "insert": "Insert: Skip importing the data.",
+        "upsert": "Upsert: Overwrite and update the existing data with imported data.",
+        "flash_and_insert": "Flash and Insert: After deleting the existing data completely, import the data"
+      },
       "growi_archive_file": "GROWI Archive File",
       "uploaded_data": "Uploaded Data",
       "extracted_file": "Extracted File",

resource/locales/ja/admin/admin.json

@@ -169,7 +169,12 @@
     "import_from": "{{from}} からインポート",
     "import_growi_archive": "GROWI アーカイブをインポート",
     "growi_settings": {
-      "overwrite_documents": "インポートされたドキュメントは既存のドキュメントを上書きします",
+      "description_of_import_mode": {
+        "about": "既存のデータと同名であるデータをインポートする際の挙動は以下の3つのモードから選べます。",
+        "insert": "Insert: 当該データのインポートをスキップします。",
+        "upsert": "Upsert: 既存のデータをインポートデータで上書き更新します。",
+        "flash_and_insert": "Flash and Insert: 既存のデータを完全に削除した後、インポートを行います。"
+      },
       "growi_archive_file": "GROWI アーカイブファイル",
       "uploaded_data": "アップロードされたデータ",
       "extracted_file": "展開されたファイル",

src/client/js/components/Admin/Customize/CustomizeHeaderSetting.jsx

@@ -53,7 +53,9 @@ class CustomizeHeaderSetting extends React.Component {
               { t('Example') }:
               <pre className="hljs">
                 {/* eslint-disable-next-line react/no-unescaped-entities */}
-                <code>&lt;script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.13.0/build/languages/yaml.min.js" defer&gt;&lt;/script&gt;</code>
+                <code className="text-wrap">&lt;script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.13.0/build/languages/yaml.min.js"
+                defer&gt;&lt;/script&gt;
+                </code>
               </pre>
             </div>
 

src/client/js/components/Admin/Customize/CustomizeThemeOptions.jsx

@@ -42,7 +42,7 @@ class CustomizeThemeOptions extends React.Component {
     return (
       <div id="themeOptions" className={`${currentLayout === 'kibela' && 'disabled'}`}>
         {/* Light Themes  */}
-        <div className="d-flex">
+        <div className="d-flex flex-wrap">
           {lightTheme.map((theme) => {
             return (
               <ThemeColorBox

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/ImportData/GrowiArchive/ImportForm.jsx

@@ -333,7 +333,7 @@ class ImportForm extends React.Component {
     );
   }
 
-  renderGroups(groupList, groupName, errors, { wellContent } = {}) {
+  renderGroups(groupList, groupName, errors) {
     const collectionNames = groupList.filter((collectionName) => {
       return this.allCollectionNames.includes(collectionName);
     });
@@ -343,19 +343,10 @@ class ImportForm extends React.Component {
     }
 
     return (
-      <div className="mt-4 row">
-        <div className="col-12">
-          <h3 className="admin-setting-header">{groupName} Collections</h3>
-          { wellContent != null && (
-            <div className="card well small" role="alert">
-              <ul>
-                <li>{wellContent}</li>
-              </ul>
-            </div>
-          )}
-          {this.renderImportItems(collectionNames)}
-          {this.renderWarnForGroups(errors, `warnFor${groupName}`)}
-        </div>
+      <div className="mt-4">
+        <legend>{groupName} Collections</legend>
+        {this.renderImportItems(collectionNames)}
+        {this.renderWarnForGroups(errors, `warnFor${groupName}`)}
       </div>
     );
   }
@@ -466,7 +457,18 @@ class ImportForm extends React.Component {
           </div>
         </form>
 
-        {this.renderGroups(GROUPS_PAGE, 'Page', warnForPageGroups, { wellContent: t('admin:importer_management.growi_settings.overwrite_documents') })}
+        <div className="card well small my-4">
+          <ul>
+            <li>{t('admin:importer_management.growi_settings.description_of_import_mode.about')}</li>
+            <ul>
+              <li>{t('admin:importer_management.growi_settings.description_of_import_mode.insert')}</li>
+              <li>{t('admin:importer_management.growi_settings.description_of_import_mode.upsert')}</li>
+              <li>{t('admin:importer_management.growi_settings.description_of_import_mode.flash_and_insert')}</li>
+            </ul>
+          </ul>
+        </div>
+
+        {this.renderGroups(GROUPS_PAGE, 'Page', warnForPageGroups)}
         {this.renderGroups(GROUPS_USER, 'User', warnForUserGroups)}
         {this.renderGroups(GROUPS_CONFIG, 'Config', warnForConfigGroups)}
         {this.renderOthers()}

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

@@ -51,8 +51,8 @@ class UploadForm extends React.Component {
       <form onSubmit={this.uploadZipFile}>
         <fieldset>
           <div className="form-group row">
-            <label htmlFor="file" className="col-3 control-label">{t('admin:importer_management.growi_settings.growi_archive_file')}</label>
-            <div className="col-6">
+            <label htmlFor="file" className="col-md-3 control-label">{t('admin:importer_management.growi_settings.growi_archive_file')}</label>
+            <div className="col-md-6">
               <input
                 type="file"
                 name="file"
@@ -64,7 +64,7 @@ class UploadForm extends React.Component {
             </div>
           </div>
           <div className="form-group row">
-            <div className="offset-3 col-6">
+            <div className="mx-auto">
               <button type="submit" className="btn btn-primary" disabled={!this.validateForm()}>
                 {t('admin:importer_management.growi_settings.upload')}
               </button>

src/client/js/components/Admin/ImportDataPage.jsx

@@ -182,26 +182,26 @@ class ImportDataPage extends React.Component {
             </div>
 
             <div className="form-group row">
-              <label htmlFor="settingForm[importer:esa:team_name]" className="col-3 col-form-label">
+              <label htmlFor="settingForm[importer:esa:team_name]" className="text-left text-md-right col-md-3 col-form-label">
                 { t('admin:importer_management.esa_settings.team_name') }
               </label>
-              <div className="col-6">
+              <div className="col-md-6">
                 <input className="form-control" type="text" name="esaTeamName" value={esaTeamName} onChange={this.handleInputValue} />
               </div>
 
             </div>
 
             <div className="form-group row">
-              <label htmlFor="settingForm[importer:esa:access_token]" className="col-3 col-form-label">
+              <label htmlFor="settingForm[importer:esa:access_token]" className="text-left text-md-right col-md-3 col-form-label">
                 { t('admin:importer_management.esa_settings.access_token') }
               </label>
-              <div className="col-6">
+              <div className="col-md-6">
                 <input className="form-control" type="password" name="esaAccessToken" value={esaAccessToken} onChange={this.handleInputValue} />
               </div>
             </div>
 
             <div className="form-group row">
-              <div className="offset-3 col-6">
+              <div className="offset-md-3 col-md-6">
                 <input
                   id="testConnectionToEsa"
                   type="button"
@@ -211,11 +211,11 @@ class ImportDataPage extends React.Component {
                   value={t('admin:importer_management.import')}
                 />
                 <input type="button" className="btn btn-secondary" onClick={this.esaHandleSubmitUpdate} value={t('Update')} />
-                <span className="offset-1">
+                <span className="offset-0 offset-sm-1">
                   <input
-                    name="Esa"
-                    type="button"
                     id="importFromEsa"
+                    type="button"
+                    name="Esa"
                     className="btn btn-secondary btn-esa"
                     onClick={this.esaHandleSubmitTest}
                     value={t('admin:importer_management.esa_settings.test_connection')}
@@ -275,26 +275,26 @@ class ImportDataPage extends React.Component {
               <input type="password" name="dummypass" style={{ display: 'none', top: '-100px', left: '-100px' }} />
             </div>
             <div className="form-group row">
-              <label htmlFor="settingForm[importer:qiita:team_name]" className="col-3 col-form-label">
+              <label htmlFor="settingForm[importer:qiita:team_name]" className="text-left text-md-right col-md-3 col-form-label">
                 { t('admin:importer_management.qiita_settings.team_name') }
               </label>
-              <div className="col-6">
+              <div className="col-md-6">
                 <input className="form-control" type="text" name="qiitaTeamName" value={qiitaTeamName} onChange={this.handleInputValue} />
               </div>
             </div>
 
             <div className="form-group row">
-              <label htmlFor="settingForm[importer:qiita:access_token]" className="col-3 col-form-label">
+              <label htmlFor="settingForm[importer:qiita:access_token]" className="text-left text-md-right col-md-3 col-form-label">
                 { t('admin:importer_management.qiita_settings.access_token') }
               </label>
-              <div className="col-6">
+              <div className="col-md-6">
                 <input className="form-control" type="password" name="qiitaAccessToken" value={qiitaAccessToken} onChange={this.handleInputValue} />
               </div>
             </div>
 
 
             <div className="form-group row">
-              <div className="offset-3 col-6">
+              <div className="offset-md-3 col-md-6">
                 <input
                   id="testConnectionToQiita"
                   type="button"
@@ -304,7 +304,7 @@ class ImportDataPage extends React.Component {
                   value={t('admin:importer_management.import')}
                 />
                 <input type="button" className="btn btn-secondary" onClick={this.qiitaHandleSubmitUpdate} value={t('Update')} />
-                <span className="offset-1">
+                <span className="offset-0 offset-sm-1">
                   <input
                     name="Qiita"
                     type="button"

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

@@ -6,7 +6,6 @@ import {
   Modal,
   ModalHeader,
   ModalBody,
-  ModalFooter,
 } from 'reactstrap';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
@@ -48,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>
@@ -59,7 +58,6 @@ class LdapAuthTestModal extends React.Component {
             onChangePassword={this.onChangePassword}
           />
         </ModalBody>
-        <ModalFooter />
       </Modal>
     );
   }

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/BasicInfoSettings.jsx

@@ -45,9 +45,9 @@ class BasicInfoSettings extends React.Component {
     return (
       <Fragment>
 
-        <div className="row form-group mb-3">
-          <label htmlFor="userForm[name]" className="col-sm-2 text-right">{t('Name')}</label>
-          <div className="col-sm-4 text-left">
+        <div className="form-group row">
+          <label htmlFor="userForm[name]" className="text-left text-md-right col-md-3 col-form-label">{t('Name')}</label>
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -58,9 +58,9 @@ class BasicInfoSettings extends React.Component {
           </div>
         </div>
 
-        <div className="row form-group mb-3">
-          <label htmlFor="userForm[email]" className="col-sm-2 text-right">{t('Email')}</label>
-          <div className="col-sm-4 text-left">
+        <div className="form-group row">
+          <label htmlFor="userForm[email]" className="text-left text-md-right col-md-3 col-form-label">{t('Email')}</label>
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -81,9 +81,9 @@ class BasicInfoSettings extends React.Component {
           )}
         </div>
 
-        <div className="row mb-3">
-          <label className="col-sm-2 text-right">{t('Disclose E-mail')}</label>
-          <div className="col-6">
+        <div className="form-group row">
+          <label className="text-left text-md-right col-md-3 col-form-label">{t('Disclose E-mail')}</label>
+          <div className="col-md-6">
             <div className="custom-control custom-radio custom-control-inline">
               <input
                 type="radio"
@@ -109,9 +109,9 @@ class BasicInfoSettings extends React.Component {
           </div>
         </div>
 
-        <div className="row mb-3">
-          <label className="col-sm-2 col-form-label text-right">{t('Language')}</label>
-          <div className="col-6">
+        <div className="form-group row">
+          <label className="text-left text-md-right col-md-3 col-form-label">{t('Language')}</label>
+          <div className="col-md-6">
             <div className="custom-control custom-radio custom-control-inline">
               <input
                 type="radio"

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/Me/ProfileImageSettings.jsx

@@ -102,7 +102,7 @@ class ProfileImageSettings extends React.Component {
     return (
       <React.Fragment>
         <div className="row">
-          <div className="col-md-2 offset-1 col-sm-4">
+          <div className="col-md-3 offset-1 col-sm-4">
             <h4>
               <div className="custom-control custom-radio radio-primary">
                 <input
@@ -126,7 +126,7 @@ class ProfileImageSettings extends React.Component {
             <img src={this.generateGravatarSrc()} width="64" />
           </div>
 
-          <div className="col-md-4 col-sm-7">
+          <div className="col-md-3 offset-1 col-sm-4">
             <h4>
               <div className="custom-control custom-radio radio-primary">
                 <input
@@ -144,19 +144,19 @@ class ProfileImageSettings extends React.Component {
               </div>
             </h4>
             <div className="row mb-3">
-              <label className="col-sm-4 control-label">
+              <label className="col-sm-4 col-12 control-label">
                 { t('Current Image') }
               </label>
-              <div className="col-sm-8">
+              <div className="col-sm-8 col-12">
                 {uploadedPictureSrc && (<p><img src={uploadedPictureSrc} className="picture picture-lg rounded-circle" id="settingUserPicture" /></p>)}
                 {isUploadedPicture && <button type="button" className="btn btn-danger" onClick={this.onClickDeleteBtn}>{ t('Delete Image') }</button>}
               </div>
             </div>
             <div className="row">
-              <label className="col-sm-4 control-label">
+              <label className="col-sm-4 col-12 control-label">
                 {t('Upload new image')}
               </label>
-              <div className="col-sm-8">
+              <div className="col-sm-8 col-12">
                 <input type="file" onChange={this.onSelectFile} name="profileImage" accept="image/*" />
               </div>
             </div>

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/js/components/SearchPage/SearchPageForm.jsx

@@ -42,7 +42,7 @@ class SearchPageForm extends React.Component {
           />
         </div>
         <div className="input-group-append">
-          <button className="btn btn-outline-secondary" type="button" id="button-addon2" onClick={this.search}>
+          <button className="btn btn-secondary" type="button" id="button-addon2" onClick={this.search}>
             <i className="icon-magnifier"></i>
           </button>
         </div>

src/client/styles/scss/_override-bootstrap.scss

@@ -39,11 +39,6 @@
     line-height: 14px;
   }
 
-  .small {
-    font-size: 65%;
-    line-height: 10px;
-  }
-
   code {
     padding: 2px 4px;
     font-size: 90%;
@@ -59,6 +54,14 @@
     }
   }
 
+  // Custom Control
+  .custom-control {
+    .custom-control-input,
+    .custom-control-input + .custom-control-label {
+      cursor: pointer;
+    }
+  }
+
   // card (substitute panel of bootstrap3)
   .card {
     margin-bottom: 20px;

src/client/styles/scss/_search.scss

@@ -177,8 +177,9 @@
 
 .search-page-input {
   position: sticky;
-  top: 15px;
-  z-index: 1;
+  top: 65px;
+  // placed at front-most
+  z-index: 15;
 
   margin-bottom: 15px;
 

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-kibela.scss

@@ -137,25 +137,6 @@ body.kibela {
     background-color: $bgcolor-inline-code;
   }
 
-  /* Card */
-  .card {
-    border: 1px solid $border-color-theme;
-
-    .card-header {
-      background-color: $lightthemecolor;
-      border-bottom: 1px solid $border-color-theme;
-    }
-
-    .card-body {
-      background-color: $themelight;
-    }
-
-    .card-footer {
-      background: white;
-      border-top: 1px solid $border-color-theme;
-    }
-  }
-
   /* button */
   .btn-primary {
     background: $primary;

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

@@ -25,6 +25,12 @@ $link-hover-color: $color-link-hover;
 }
 
 // Dropdown
+.dropdown-menu {
+  form {
+    color: $color-global;
+  }
+}
+
 .dropdown-item {
   color: $color-global;
   &.active,
@@ -110,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/_reboot-bootstrap-theme-colors.scss

@@ -42,7 +42,7 @@
 
 @each $theme-color, $color in $theme-colors {
   .alert.alert-#{$theme-color} {
-    color: $bgcolor-global;
+    color: $color-alert;
     background: $color;
     border: none;
 
@@ -59,7 +59,7 @@
 
 @each $theme-color, $color in $theme-colors {
   .badge.badge-#{$theme-color} {
-    color: $bgcolor-global;
+    color: $color-badge;
     background: $color;
   }
 }

src/client/styles/scss/theme/antarctic.scss

@@ -75,6 +75,12 @@ html[light] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // alert
+  $color-alert: $color-reversal;
+
+  // badge
+  $color-badge: $color-reversal;
+
   @import 'apply-colors';
   @import 'apply-colors-light';
 }
@@ -115,6 +121,12 @@ html[dark] {
   $color-dropdown-link-active: $color-global;
   $color-dropdown-link-hover: $color-reversal;
 
+  // alert
+  $color-alert: $color-global;
+
+  // badge
+  $color-badge: $color-global;
+
   @import 'apply-colors';
   @import 'apply-colors-dark';
 }

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

@@ -17,6 +17,7 @@
 //
 html[light] {
   $primary: #112744;
+  $light: white;
 
   // Background colors
   $bgcolor-global: white;
@@ -47,6 +48,12 @@ html[light] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-reversal;
 
+  // alert
+  $color-alert: $color-reversal;
+
+  // badge
+  $color-badge: $color-reversal;
+
   @import 'apply-colors';
   @import 'apply-colors-light';
 }
@@ -55,6 +62,7 @@ html[light] {
 //
 html[dark] {
   $primary: #d65a31;
+  $light: white;
 
   $basecolor: #222831;
 
@@ -87,6 +95,12 @@ html[dark] {
   $color-dropdown-link-active: $color-global;
   $color-dropdown-link-hover: $color-reversal;
 
+  // alert
+  $color-alert: $color-reversal;
+
+  // badge
+  $color-badge: $color-reversal;
+
   @import 'apply-colors';
   @import 'apply-colors-dark';
 }

src/client/styles/scss/theme/kibela.scss

@@ -1,18 +1,18 @@
 @import '../variables';
 @import '../override-bootstrap-variables';
 
+$bgcolor-theme: rgb(18, 86, 163);
+$themelight: #f4f5f6;
+$subthemecolor: rgb(88, 130, 250);
+$lightthemecolor: rgba(181, 203, 247, 0.61);
+
 // Light Mode
 html[light] {
-  $bgcolor-theme: rgb(18, 86, 163);
-  $themelight: #f4f5f6;
-  $subthemecolor: rgb(88, 130, 250);
-  $lightthemecolor: rgba(181, 203, 247, 0.61);
-
   // Background colors
   $bgcolor-navbar: white;
   $bgcolor-navbar-active: $bgcolor-theme;
   $bgcolor-global: $themelight;
-  $bgcolor-card: #e3e5e7;
+  $bgcolor-card: $lightthemecolor;
   $bgcolor-inline-code: lighten($subthemecolor, 70%);
 
   $color-header: $bgcolor-theme;
@@ -44,6 +44,12 @@ html[light] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // alert
+  $color-alert: $color-reversal;
+
+  // badge
+  $color-badge: $color-reversal;
+
   @import 'apply-colors';
   @import 'apply-colors-light';
   @import 'apply-colors-kibela';
@@ -51,11 +57,6 @@ html[light] {
 
 // Dark Mode ( same as Light Mode )
 html[dark] {
-  $bgcolor-theme: rgb(18, 86, 163);
-  $themelight: #f4f5f6;
-  $subthemecolor: rgb(88, 130, 250);
-  $lightthemecolor: rgba(181, 203, 247, 0.61);
-
   // Background colors
   $bgcolor-navbar: transparent;
   $bgcolor-navbar-active: $bgcolor-theme;
@@ -92,6 +93,12 @@ html[dark] {
   $color-dropdown-link-active: $color-reversal;
   $color-dropdown-link-hover: $color-global;
 
+  // alert
+  $color-alert: $color-global;
+
+  // badge
+  $color-badge: $color-global;
+
   @import 'apply-colors';
   @import 'apply-colors-light';
   @import 'apply-colors-kibela';