Merge remote-tracking branch 'origin/support/apply-bootstrap4' into support/adjust-card-for-dark-mode

resource/locales/ja/translation.json

@@ -381,7 +381,7 @@
     "discard_changes": "HackMD の変更を破棄する",
     "integration_failed": "HackMD の統合に失敗しました",
     "fail_to_connect": "GROWI クライアントが HackMD の GROWI agent に接続できませんでした。",
-    "check_configuration": "<a href='https://docs.growi.org/guide/admin-cookbook/integrate-with-hackmd.html'>こちらのマニュアル</a>から設定を確認してください",
+    "check_configuration": "<a href='https://docs.growi.org/ja/admin-guide/admin-cookbook/integrate-with-hackmd.html'>こちらのマニュアル</a>から設定を確認してください",
     "not_initialized": "HackMD コンポーネントは初期化されていません",
     "someone_editing": "このページは、HackMD で編集されています。",
     "this_page_has_draft": "このページは、HackMD のドラフトがあります。"

src/client/js/components/Admin/App/AppSetting.jsx

@@ -112,8 +112,6 @@ class AppSetting extends React.Component {
             </div>
 
             <p className="form-text text-muted">
-              {t('admin:app_setting.enable_files_except_image')}
-              <br />
               {t('admin:app_setting.attach_enable')}
             </p>
           </div>

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

@@ -42,7 +42,7 @@ class CustomizeBehaviorSetting extends React.Component {
           <div className="col-12">
             <h2 className="admin-setting-header">{t('admin:customize_setting.behavior')}</h2>
             <div className="row">
-              <div className="col-6">
+              <div className="col-md-6">
                 <CustomizeBehaviorOption
                   behaviorType="growi"
                   isSelected={adminCustomizeContainer.state.currentBehavior === 'growi'}
@@ -57,7 +57,7 @@ class CustomizeBehaviorSetting extends React.Component {
                 </CustomizeBehaviorOption>
               </div>
 
-              <div className="col-6">
+              <div className="col-md-6">
                 <CustomizeBehaviorOption
                   behaviorType="crowi-plus"
                   isSelected={adminCustomizeContainer.state.currentBehavior === 'crowi-plus'}

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

@@ -60,7 +60,7 @@ class CustomizeBehaviorSetting extends React.Component {
 
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <CustomizeFunctionOption
                   optionId="isEnabledTimeline"
                   label={t('admin:customize_setting.function_options.timeline')}
@@ -77,7 +77,7 @@ class CustomizeBehaviorSetting extends React.Component {
             </div>
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <CustomizeFunctionOption
                   optionId="isSavedStatesOfTabChanges"
                   label={t('admin:customize_setting.function_options.tab_switch')}
@@ -93,7 +93,7 @@ class CustomizeBehaviorSetting extends React.Component {
             </div>
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <CustomizeFunctionOption
                   optionId="isEnabledAttachTitleHeader"
                   label={t('admin:customize_setting.function_options.attach_title_header')}
@@ -108,7 +108,7 @@ class CustomizeBehaviorSetting extends React.Component {
             </div>
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <div className="my-0 w-100">
                   <label>{t('admin:customize_setting.function_options.recent_created__n_draft_num_desc')}</label>
                 </div>
@@ -135,7 +135,7 @@ class CustomizeBehaviorSetting extends React.Component {
             </div>
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <CustomizeFunctionOption
                   optionId="isEnabledStaleNotification"
                   label={t('admin:customize_setting.function_options.stale_notification')}
@@ -150,7 +150,7 @@ class CustomizeBehaviorSetting extends React.Component {
             </div>
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <CustomizeFunctionOption
                   optionId="isAllReplyShown"
                   label={t('admin:customize_setting.function_options.show_all_reply_comments')}

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

@@ -93,7 +93,7 @@ class CustomizeHighlightSetting extends React.Component {
             <h2 className="admin-setting-header">{t('admin:customize_setting.code_highlight')}</h2>
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <div className="my-0">
                   <label>{t('admin:customize_setting.theme')}</label>
                 </div>
@@ -113,7 +113,7 @@ class CustomizeHighlightSetting extends React.Component {
             </div>
 
             <div className="form-group row">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-md-3 col-md-6 text-left">
                 <div className="custom-control custom-switch custom-checkbox-success">
                   <input
                     type="checkbox"

src/client/js/components/Admin/MarkdownSetting/PresentationForm.jsx

@@ -46,74 +46,76 @@ class PresentationForm extends React.Component {
           {t('admin:markdown_setting.presentation_options.page_break_setting')}
         </label>
 
-        <div className="form-group form-check-inline col-12 my-3">
-          <div className="col-4 align-self-start">
-            <div className="custom-control custom-radio">
-              <input
-                type="radio"
-                className="custom-control-input"
-                id="pageBreakOption1"
-                checked={pageBreakSeparator === 1}
-                onChange={() => adminMarkDownContainer.switchPageBreakSeparator(1)}
-              />
-              <label className="custom-control-label" htmlFor="pageBreakOption1">
-                <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.preset_one_separator') }</p>
-                <div className="mt-3">
-                  { t('admin:markdown_setting.presentation_options.preset_one_separator_desc') }
-                  <input
-                    className="form-control"
-                    type="text"
-                    value={t('admin:markdown_setting.presentation_options.preset_one_separator_value')}
-                    readOnly
-                  />
-                </div>
-              </label>
+        <div className="form-group col-12 my-3">
+          <div className="row">
+            <div className="col-md-4 col-sm-12 align-self-start mb-4">
+              <div className="custom-control custom-radio">
+                <input
+                  type="radio"
+                  className="custom-control-input"
+                  id="pageBreakOption1"
+                  checked={pageBreakSeparator === 1}
+                  onChange={() => adminMarkDownContainer.switchPageBreakSeparator(1)}
+                />
+                <label className="custom-control-label w-100" htmlFor="pageBreakOption1">
+                  <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.preset_one_separator') }</p>
+                  <div className="mt-3">
+                    { t('admin:markdown_setting.presentation_options.preset_one_separator_desc') }
+                    <input
+                      className="form-control"
+                      type="text"
+                      value={t('admin:markdown_setting.presentation_options.preset_one_separator_value')}
+                      readOnly
+                    />
+                  </div>
+                </label>
+              </div>
             </div>
-          </div>
 
-          <div className="col-4 align-self-start">
-            <div className="custom-control custom-radio">
-              <input
-                type="radio"
-                className="custom-control-input"
-                id="pageBreakOption2"
-                checked={pageBreakSeparator === 2}
-                onChange={() => adminMarkDownContainer.switchPageBreakSeparator(2)}
-              />
-              <label className="custom-control-label" htmlFor="pageBreakOption2">
-                <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.preset_two_separator') }</p>
-                <div className="mt-3">
-                  { t('admin:markdown_setting.presentation_options.preset_two_separator_desc') }
-                  <input
-                    className="form-control"
-                    type="text"
-                    value={t('admin:markdown_setting.presentation_options.preset_two_separator_value')}
-                    readOnly
-                  />
-                </div>
-              </label>
+            <div className="col-md-4 col-sm-12 align-self-start mb-4">
+              <div className="custom-control custom-radio">
+                <input
+                  type="radio"
+                  className="custom-control-input"
+                  id="pageBreakOption2"
+                  checked={pageBreakSeparator === 2}
+                  onChange={() => adminMarkDownContainer.switchPageBreakSeparator(2)}
+                />
+                <label className="custom-control-label w-100" htmlFor="pageBreakOption2">
+                  <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.preset_two_separator') }</p>
+                  <div className="mt-3">
+                    { t('admin:markdown_setting.presentation_options.preset_two_separator_desc') }
+                    <input
+                      className="form-control"
+                      type="text"
+                      value={t('admin:markdown_setting.presentation_options.preset_two_separator_value')}
+                      readOnly
+                    />
+                  </div>
+                </label>
+              </div>
             </div>
-          </div>
-          <div className="col-4 align-self-start">
-            <div className="custom-control custom-radio">
-              <input
-                type="radio"
-                id="pageBreakOption3"
-                className="custom-control-input"
-                checked={pageBreakSeparator === 3}
-                onChange={() => adminMarkDownContainer.switchPageBreakSeparator(3)}
-              />
-              <label className="custom-control-label" htmlFor="pageBreakOption3">
-                <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.custom_separator') }</p>
-                <div className="mt-3">
-                  { t('admin:markdown_setting.presentation_options.custom_separator_desc') }
-                  <input
-                    className="form-control"
-                    defaultValue={pageBreakCustomSeparator}
-                    onChange={(e) => { adminMarkDownContainer.setPageBreakCustomSeparator(e.target.value) }}
-                  />
-                </div>
-              </label>
+            <div className="col-md-4 col-sm-12 align-self-start mb-4">
+              <div className="custom-control custom-radio">
+                <input
+                  type="radio"
+                  id="pageBreakOption3"
+                  className="custom-control-input"
+                  checked={pageBreakSeparator === 3}
+                  onChange={() => adminMarkDownContainer.switchPageBreakSeparator(3)}
+                />
+                <label className="custom-control-label w-100" htmlFor="pageBreakOption3">
+                  <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.custom_separator') }</p>
+                  <div className="mt-3">
+                    { t('admin:markdown_setting.presentation_options.custom_separator_desc') }
+                    <input
+                      className="form-control"
+                      defaultValue={pageBreakCustomSeparator}
+                      onChange={(e) => { adminMarkDownContainer.setPageBreakCustomSeparator(e.target.value) }}
+                    />
+                  </div>
+                </label>
+              </div>
             </div>
           </div>
         </div>

src/client/js/components/Admin/MarkdownSetting/XssForm.jsx

@@ -42,82 +42,84 @@ class XssForm extends React.Component {
     const { xssOption } = adminMarkDownContainer.state;
 
     return (
-      <div className="form-group form-check-inline col-12 my-3">
-        <div className="col-4 align-self-start">
-          <div className="custom-control custom-radio ">
-            <input
-              type="radio"
-              className="custom-control-input"
-              id="xssOption1"
-              name="XssOption"
-              checked={xssOption === 1}
-              onChange={() => { adminMarkDownContainer.setState({ xssOption: 1 }) }}
-            />
-            <label className="custom-control-label" htmlFor="xssOption1">
-              <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.ignore_all_tags') }</p>
-              <div className="mt-4">
-                {t('admin:markdown_setting.xss_options.ignore_all_tags_desc') }
-              </div>
-            </label>
+      <div className="form-group col-12 my-3">
+        <div className="row">
+          <div className="col-md-4 col-sm-12 align-self-start mb-4">
+            <div className="custom-control custom-radio ">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="xssOption1"
+                name="XssOption"
+                checked={xssOption === 1}
+                onChange={() => { adminMarkDownContainer.setState({ xssOption: 1 }) }}
+              />
+              <label className="custom-control-label w-100" htmlFor="xssOption1">
+                <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.ignore_all_tags')}</p>
+                <div className="mt-4">
+                  {t('admin:markdown_setting.xss_options.ignore_all_tags_desc')}
+                </div>
+              </label>
+            </div>
           </div>
-        </div>
 
-        <div className="col-4 align-self-start">
-          <div className="custom-control custom-radio">
-            <input
-              type="radio"
-              className="custom-control-input"
-              id="xssOption2"
-              name="XssOption"
-              checked={xssOption === 2}
-              onChange={() => { adminMarkDownContainer.setState({ xssOption: 2 }) }}
-            />
-            <label className="custom-control-label" htmlFor="xssOption2">
-              <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.recommended_setting')}</p>
-              <div className="m-t-15">
-                <div className="d-flex justify-content-between">
-                  {t('admin:markdown_setting.xss_options.tag_names')}
+          <div className="col-md-4 col-sm-12 align-self-start mb-4">
+            <div className="custom-control custom-radio">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="xssOption2"
+                name="XssOption"
+                checked={xssOption === 2}
+                onChange={() => { adminMarkDownContainer.setState({ xssOption: 2 }) }}
+              />
+              <label className="custom-control-label w-100" htmlFor="xssOption2">
+                <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.recommended_setting')}</p>
+                <div className="m-t-15">
+                  <div className="d-flex justify-content-between">
+                    {t('admin:markdown_setting.xss_options.tag_names')}
+                  </div>
+                  <textarea
+                    className="form-control xss-list"
+                    name="recommendedTags"
+                    rows="6"
+                    cols="40"
+                    readOnly
+                    defaultValue={tags}
+                  />
                 </div>
-                <textarea
-                  className="form-control xss-list"
-                  name="recommendedTags"
-                  rows="6"
-                  cols="40"
-                  readOnly
-                  defaultValue={tags}
-                />
-              </div>
-              <div className="m-t-15">
-                <div className="d-flex justify-content-between">
-                  {t('admin:markdown_setting.xss_options.tag_attributes')}
+                <div className="m-t-15">
+                  <div className="d-flex justify-content-between">
+                    {t('admin:markdown_setting.xss_options.tag_attributes')}
+                  </div>
+                  <textarea
+                    className="form-control xss-list"
+                    name="recommendedAttrs"
+                    rows="6"
+                    cols="40"
+                    readOnly
+                    defaultValue={attrs}
+                  />
                 </div>
-                <textarea
-                  className="form-control xss-list"
-                  name="recommendedAttrs"
-                  rows="6"
-                  cols="40"
-                  readOnly
-                  defaultValue={attrs}
-                />
-              </div>
-            </label>
+              </label>
+            </div>
           </div>
-        </div>
 
-        <div className="col-4 align-self-start">
-          <div className="custom-control custom-radio">
-            <input
-              type="radio"
-              className="custom-control-input"
-              id="xssOption3"
-              name="XssOption"
-              checked={xssOption === 3}
-              onChange={() => { adminMarkDownContainer.setState({ xssOption: 3 }) }}
-            />
-            <label className="custom-control-label" htmlFor="xssOption3">
-              <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.custom_whitelist') }</p>
-              <WhiteListInput customizable />
-            </label>
+          <div className="col-md-4 col-sm-12 align-self-start mb-4">
+            <div className="custom-control custom-radio">
+              <input
+                type="radio"
+                className="custom-control-input"
+                id="xssOption3"
+                name="XssOption"
+                checked={xssOption === 3}
+                onChange={() => { adminMarkDownContainer.setState({ xssOption: 3 }) }}
+              />
+              <label className="custom-control-label w-100" htmlFor="xssOption3">
+                <p className="font-weight-bold">{t('admin:markdown_setting.xss_options.custom_whitelist')}</p>
+                <WhiteListInput customizable />
+              </label>
+            </div>
           </div>
         </div>
       </div>
@@ -142,8 +144,8 @@ class XssForm extends React.Component {
                   checked={isEnabledXss}
                   onChange={adminMarkDownContainer.switchEnableXss}
                 />
-                <label className="custom-control-label" htmlFor="XssEnable">
-                  {t('admin:markdown_setting.xss_options.enable_xss_prevention') }
+                <label className="custom-control-label w-100" htmlFor="XssEnable">
+                  {t('admin:markdown_setting.xss_options.enable_xss_prevention')}
                 </label>
               </div>
             </div>

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

@@ -40,7 +40,7 @@ class GlobalNotification extends React.Component {
     return (
       <React.Fragment>
 
-        <h2 className="border-bottom">{t('notification_setting.valid_page')}</h2>
+        <h2 className="border-bottom my-4">{t('notification_setting.valid_page')}</h2>
 
         <p className="card well">
           {/* eslint-disable-next-line react/no-danger */}

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

@@ -82,7 +82,7 @@ class UserTriggerNotification extends React.Component {
 
     return (
       <React.Fragment>
-        <h2 className="border-bottom my-5">{t('notification_setting.user_trigger_notification_header')}</h2>
+        <h2 className="border-bottom my-4">{t('notification_setting.user_trigger_notification_header')}</h2>
 
         <table className="table table-bordered">
           <thead>

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

@@ -68,7 +68,7 @@ class BasicSecurityManagement extends React.Component {
         )}
 
         <div className="row mb-5">
-          <div className="col-6 offset-3">
+          <div className="col-md-6 offset-md-3">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isBasicEnabled"
@@ -95,7 +95,7 @@ class BasicSecurityManagement extends React.Component {
         {isBasicEnabled && (
         <React.Fragment>
           <div className="row mb-5">
-            <div className="offset-3 col-6">
+            <div className="offset-md-3 col-md-6">
               <div className="custom-control custom-checkbox custom-checkbox-success">
                 <input
                   id="bindByEmail-basic"

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

@@ -69,7 +69,7 @@ class GitHubSecurityManagement extends React.Component {
         )}
 
         <div className="row mb-5">
-          <div className="offset-3 col-6 text-left">
+          <div className="col-12 offset-md-3 col-md-6">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isGitHubEnabled"
@@ -88,8 +88,8 @@ class GitHubSecurityManagement extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-3 text-right py-2">{t('security_setting.callback_URL')}</label>
-          <div className="col-6">
+          <label className="col-12 col-md-3 text-left text-md-right py-2">{t('security_setting.callback_URL')}</label>
+          <div className="col-12 col-md-6">
             <input
               className="form-control"
               type="text"

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

@@ -68,8 +68,8 @@ class GoogleSecurityManagement extends React.Component {
           </div>
         )}
 
-        <div className="row mb-5">
-          <div className="offset-3 col-6">
+        <div className="row mb-5 mt-3">
+          <div className="col-12 offset-md-3 col-md-6">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isGoogleEnabled"
@@ -88,8 +88,8 @@ class GoogleSecurityManagement extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-3 text-right py-2">{t('security_setting.callback_URL')}</label>
-          <div className="col-6">
+          <label className="col-12 col-md-3 text-left text-md-right py-2">{t('security_setting.callback_URL')}</label>
+          <div className="col-12 col-md-6">
             <input
               className="form-control"
               type="text"

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

@@ -100,10 +100,10 @@ class LocalSecuritySetting extends React.Component {
             <h3 className="border-bottom">{t('security_setting.configuration')}</h3>
 
             <div className="row">
-              <div className="col-3 text-right py-2">
+              <div className="col-12 col-md-3 text-left text-md-right py-2">
                 <strong>{t('Register limitation')}</strong>
               </div>
-              <div className="col-6">
+              <div className="col-12 col-md-6">
                 <div className="dropdown">
                   <button
                     className="btn btn-outline-secondary dropdown-toggle"
@@ -136,10 +136,10 @@ class LocalSecuritySetting extends React.Component {
               </div>
             </div>
             <div className="row">
-              <div className="col-3 text-right">
+              <div className="col-12 col-md-3 text-left text-md-right">
                 <strong dangerouslySetInnerHTML={{ __html: t('The whitelist of registration permission E-mail address') }} />
               </div>
-              <div className="col-6">
+              <div className="col-12 col-md-6">
                 <textarea
                   className="form-control"
                   type="textarea"

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

@@ -69,7 +69,7 @@ class TwitterSecurityManagement extends React.Component {
         )}
 
         <div className="row mb-5">
-          <div className="offset-3 col-6">
+          <div className="offset-md-3 col-md-6">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
                 id="isTwitterEnabled"
@@ -88,8 +88,8 @@ class TwitterSecurityManagement extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-3 text-right py-2">{t('security_setting.callback_URL')}</label>
-          <div className="col-6">
+          <label className="col-md-3 text-md-right py-2">{t('security_setting.callback_URL')}</label>
+          <div className="col-md-6">
             <input
               className="form-control"
               type="text"
@@ -116,8 +116,8 @@ class TwitterSecurityManagement extends React.Component {
             <h3 className="border-bottom">{t('security_setting.configuration')}</h3>
 
             <div className="row mb-5">
-              <label htmlFor="TwitterConsumerId" className="col-3 text-right py-2">{t('security_setting.clientID')}</label>
-              <div className="col-6">
+              <label htmlFor="TwitterConsumerId" className="col-md-3 text-md-right py-2">{t('security_setting.clientID')}</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -132,8 +132,8 @@ class TwitterSecurityManagement extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="TwitterConsumerSecret" className="col-3 text-right py-2">{t('security_setting.client_secret')}</label>
-              <div className="col-6">
+              <label htmlFor="TwitterConsumerSecret" className="col-md-3 text-md-right py-2">{t('security_setting.client_secret')}</label>
+              <div className="col-md-6">
                 <input
                   className="form-control"
                   type="text"
@@ -148,7 +148,7 @@ class TwitterSecurityManagement extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <div className="offset-3 col-6">
+              <div className="offset-md-3 col-md-6">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByUserNameTwitter"
@@ -170,7 +170,7 @@ class TwitterSecurityManagement extends React.Component {
             </div>
 
             <div className="row my-3">
-              <div className="offset-3 col-5">
+              <div className="offset-4 col-5">
                 <button
                   type="button"
                   className="btn btn-primary"

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

@@ -91,6 +91,25 @@ class UserManagement extends React.Component {
     this.props.adminUsersContainer.handleChangeSearchText(event.target.value);
   }
 
+  renderCheckbox(status, statusLabel, statusColor) {
+    return (
+      <div className={`custom-control custom-checkbox custom-checkbox-${statusColor} mr-2`}>
+        <input
+          className="custom-control-input"
+          type="checkbox"
+          id={`c_${status}`}
+          checked={this.props.adminUsersContainer.isSelected(status)}
+          onClick={() => { this.handleClick(status) }}
+        />
+        <label className="custom-control-label" htmlFor={`c_${status}`}>
+          <span className={`badge badge-pill badge-${statusColor} d-inline-block vt mt-1`}>
+            {statusLabel}
+          </span>
+        </label>
+      </div>
+    );
+  }
+
   render() {
     const { t, adminUsersContainer } = this.props;
 
@@ -138,11 +157,10 @@ class UserManagement extends React.Component {
         </p>
 
         <h2>{t('User_Management')}</h2>
-
         <div className="border-top border-bottom">
 
           <div className="d-flex justify-content-start align-items-center my-2">
-            <div>
+            <div className="d-flex align-items-baseline">
               <i className="icon-magnifier mr-1"></i>
               <span className="search-typeahead">
                 <input
@@ -154,70 +172,19 @@ class UserManagement extends React.Component {
               </span>
             </div>
 
-            <div className="mx-5 form-inline">
-              <div className="custom-control custom-checkbox custom-checkbox-primary mr-2">
-                <input
-                  className="custom-control-input"
-                  type="checkbox"
-                  id="c1"
-                  checked={adminUsersContainer.isSelected('all')}
-                  onClick={() => { this.handleClick('all') }}
-                />
-                <label className="custom-control-label" htmlFor="c1">
-                  <span className="badge badge-pill badge-primary d-inline-block vt mt-1">All</span>
-                </label>
-              </div>
-
-              <div className="custom-control custom-checkbox custom-checkbox-info mr-2">
-                <input
-                  className="custom-control-input"
-                  type="checkbox"
-                  id="c2"
-                  checked={adminUsersContainer.isSelected('registered')}
-                  onClick={() => { this.handleClick('registered') }}
-                />
-                <label className="custom-control-label" htmlFor="c2">
-                  <span className="badge badge-pill badge-info d-inline-block vt mt-1">Approval Pending</span>
-                </label>
-              </div>
-
-              <div className="custom-control custom-checkbox custom-checkbox-success mr-2">
-                <input
-                  className="custom-control-input"
-                  type="checkbox"
-                  id="c3"
-                  checked={adminUsersContainer.isSelected('active')}
-                  onClick={() => { this.handleClick('active') }}
-                />
-                <label className="custom-control-label" htmlFor="c3">
-                  <span className="badge badge-pill badge-success d-inline-block vt mt-1">Active</span>
-                </label>
-              </div>
-
-              <div className="custom-control custom-checkbox custom-checkbox-warning mr-2">
-                <input
-                  className="custom-control-input"
-                  type="checkbox"
-                  id="c4"
-                  checked={adminUsersContainer.isSelected('suspended')}
-                  onClick={() => { this.handleClick('suspended') }}
-                />
-                <label className="custom-control-label" htmlFor="c4">
-                  <span className="badge badge-pill badge-warning d-inline-block vt mt-1">Suspended</span>
-                </label>
+            <div className="mx-5">
+              <div className="form-inline">
+                {this.renderCheckbox('all', 'All', 'primary')}
+                {this.renderCheckbox('registered', 'Approval Pending', 'info')}
+                {this.renderCheckbox('active', 'Active', 'success')}
+                {this.renderCheckbox('suspended', 'Suspended', 'warning')}
+                {this.renderCheckbox('invited', 'Invited', 'info')}
               </div>
-
-              <div className="custom-control custom-checkbox custom-checkbox-info">
-                <input
-                  className="custom-control-input"
-                  type="checkbox"
-                  id="c5"
-                  checked={adminUsersContainer.isSelected('invited')}
-                  onClick={() => { this.handleClick('invited') }}
-                />
-                <label className="custom-control-label" htmlFor="c5">
-                  <span className="badge badge-pill badge-info d-inline-block vt mt-1">Invited</span>
-                </label>
+              <div>
+                {
+                  this.state.isNotifyCommentShow
+                  && <span className="text-warning">{t('admin:user_management.click_twice_same_checkbox')}</span>
+                }
               </div>
             </div>
 
@@ -234,11 +201,6 @@ class UserManagement extends React.Component {
                 Reset
               </button>
             </div>
-
-            <div className="ml-4">
-              {this.state.isNotifyCommentShow && <span className="text-warning">{t('admin:user_management.click_twice_same_checkbox')}</span>}
-            </div>
-
           </div>
         </div>
 

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

@@ -65,7 +65,7 @@ class ApiSettings extends React.Component {
 
 
         <div className="row">
-          <div className="offset-lg-1 col-lg-7">
+          <div className="offset-lg-2 col-lg-7">
 
             <p className="alert alert-warning">
               { t('page_me_apitoken.notice.update_token1') }<br />

src/client/js/components/PageEditorByHackmd.jsx

@@ -376,10 +376,10 @@ class PageEditorByHackmd extends React.Component {
 
         { this.state.hasError && (
           <div className="hackmd-error position-absolute d-flex flex-column justify-content-center align-items-center">
-            <div className="white-box text-center">
+            <div className="bg-box p-5 text-center">
               <h2 className="text-warning"><i className="icon-fw icon-exclamation"></i> {t('hackmd.integration_failed')}</h2>
               <h4>{this.state.errorMessage}</h4>
-              <p className="well well-sm text-danger">
+              <p className="card well well-sm text-danger">
                 {this.state.errorReason}
               </p>
               {/* eslint-disable-next-line react/no-danger */}

src/client/styles/scss/_on-edit.scss

@@ -60,6 +60,16 @@ body.on-edit {
     display: none;
   }
 
+  &.hackmd .grw-nav-item-edit {
+    display: none;
+  }
+
+  &.hackmd {
+    #page-editor-options-selector {
+      display: none !important;
+    }
+  }
+
   &:not(.hackmd) .nav-tab-hackmd {
     display: none;
   }

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

@@ -64,6 +64,10 @@ textarea.form-control {
 /*
  * Table
  */
+.table {
+  @extend .table-dark;
+}
+
 .table > thead > tr > th,
 .table > tbody > tr > th,
 .table > tfoot > tr > th,

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

@@ -11,6 +11,7 @@ $link-hover-color: $color-link-hover;
 @import '~bootstrap/scss/functions';
 @import '~bootstrap/scss/variables';
 @import '~bootstrap/scss/mixins';
+@import 'mixins-for-tables';
 @import 'reboot-bootstrap-colors';
 @import 'reboot-bootstrap-theme-colors';
 @import 'reboot-toastr-colors';
@@ -117,6 +118,13 @@ $link-hover-color: $color-link-hover;
   }
 }
 
+/*
+ * Icon
+ */
+.editor-container .navbar-editor svg {
+  fill: $color-editor-icons;
+}
+
 /*
  * code color of inline-code
  */
@@ -307,3 +315,10 @@ mark.rbt-highlight-text {
     }
   }
 }
+
+/*
+ * HackMd
+ */
+.bg-box {
+  background-color: $bgcolor-global;
+}

src/client/styles/scss/theme/_mixins-for-tables.scss

@@ -0,0 +1,34 @@
+//== Table
+$table-variants: (
+  'light': $light,
+  'dark': $dark,
+);
+
+// remove when master version is released
+// show https://github.com/twbs/bootstrap/blob/28cb1ff2b23253293601c51aff434c39b461025e/scss/mixins/_table-variants.scss
+@mixin table-variant($state, $background) {
+  .table-#{$state} {
+    $table-hover-bg-factor: 0.075 !default;
+    $table-striped-bg-factor: 0.05 !default;
+    $body-bg: $white !default;
+    $table-active-bg-factor: 0.1 !default;
+    $table-border-factor: 0.1 !default;
+
+    $color: color-contrast(mix(rgba($background, 1), $body-bg, opacity($background) * 100));
+    $color: gray;
+    $hover-bg: mix($color, $background, percentage($table-hover-bg-factor));
+    $striped-bg: mix($color, $background, percentage($table-striped-bg-factor));
+    $active-bg: mix($color, $background, percentage($table-active-bg-factor));
+
+    --bs-table-bg: #{$background};
+    --bs-table-striped-bg: #{$striped-bg};
+    --bs-table-striped-color: #{color-contrast($striped-bg)};
+    --bs-table-active-bg: #{$active-bg};
+    --bs-table-active-color: #{color-contrast($active-bg)};
+    --bs-table-hover-bg: #{$hover-bg};
+    --bs-table-hover-color: #{color-contrast($hover-bg)};
+
+    color: $color;
+    border-color: mix($color, $background, percentage($table-border-factor));
+  }
+}

src/client/styles/scss/theme/_reboot-bootstrap-theme-colors.scss

@@ -63,3 +63,7 @@
     background: $color;
   }
 }
+
+@each $color, $value in $table-variants {
+  @include table-variant($color, $value);
+}

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

@@ -78,6 +78,9 @@ html[light] {
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
 
@@ -135,6 +138,9 @@ html[dark] {
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: #444;
 
+  // Icon colors
+  $color-editor-icons: darken($accentcolor, 15%);
+
   // Border colors
   $border-color-theme: black; // former: `$navbar-border: #ccc;`
 

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

@@ -1,6 +1,5 @@
 @import '../variables';
 @import '../override-bootstrap-variables';
-
 // == Define Bootstrap theme colors
 //
 
@@ -50,6 +49,9 @@ html[light] {
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: lighten(desaturate($bgcolor-navbar, 10%), 15%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   // Border colors
   $border-color-theme: #ccc; // former: `$navbar-border: #ccc;`
 
@@ -107,6 +109,9 @@ html[dark] {
   $bgcolor-logo: $bgcolor-navbar;
   $fillcolor-logo-mark: #444;
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   // Border colors
   $border-color-theme: black; // former: `$navbar-border: #ccc;`
 

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

@@ -40,6 +40,9 @@ html[light] {
   $bgcolor-logo: transparent;
   $fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   $color-link-wiki: lighten($bgcolor-theme, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-global;
@@ -100,6 +103,9 @@ html[dark] {
   $bgcolor-logo: red;
   $fillcolor-logo-mark: lighten($bgcolor-theme, 20%);
 
+  // Icon colors
+  $color-editor-icons: $color-global;
+
   $color-link-wiki: lighten($bgcolor-theme, 20%);
   $color-link-wiki-hover: lighten($color-link-wiki, 20%);
   $color-link-nabvar: $color-global;

src/server/views/_form.html

@@ -12,7 +12,7 @@
 <div class="page-editor-footer d-flex flex-row align-items-center justify-content-between">
 
   <div>
-    <div id="page-editor-options-selector" class="d-none d-sm-block"></div>
+    <div id="page-editor-options-selector" class="d-none d-md-block"></div>
   </div>
 
   <div id="save-page-controls"