Merge pull request #2040 from weseek/imprv/add-bgcolor-to-colorhackmd-err

add background-color for HackMd error

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/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/theme/_apply-colors.scss

@@ -311,3 +311,10 @@ mark.rbt-highlight-text {
     }
   }
 }
+
+/*
+ * HackMd
+ */
+.bg-box {
+  background-color: $bgcolor-global;
+}