From 4d89db931e714fee167f8652e9d53cbfe1375a0d Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Wed, 29 Mar 2017 21:34:09 +0700
Subject: [PATCH] Integrate MarkdownEditor

---
 .../src/containers/Configure/Configure.css    |  8 ++++----
 .../containers/Configure/StreamSettings.js    | 19 +++++++++----------
 client/coral-ui/components/Card.css           |  1 -
 3 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css
index b1b1ebbaf..04ef96dd2 100644
--- a/client/coral-admin/src/containers/Configure/Configure.css
+++ b/client/coral-admin/src/containers/Configure/Configure.css
@@ -73,7 +73,6 @@
 .configSettingInfoBox {
   min-height: 100px;
   margin-bottom: 20px;
-  cursor: pointer;
   width: auto;
   height: auto;
   text-align: left;
@@ -180,7 +179,9 @@
 
   .content {
     display: inline-block;
-    padding-left: 30px;
+    padding: 0px 30px;
+    box-sizing: border-box;
+    width: 100%;
   }
 }
 
@@ -192,12 +193,11 @@
   }
 
   .wrapper {
-    width: 550px;
+    width: 100%;
   }
 
   .descriptionBox {
     margin-top: 15px;
-    max-width: 550px;
 
     input {
       height: 150px;
diff --git a/client/coral-admin/src/containers/Configure/StreamSettings.js b/client/coral-admin/src/containers/Configure/StreamSettings.js
index ab0ef6af6..08ec062c8 100644
--- a/client/coral-admin/src/containers/Configure/StreamSettings.js
+++ b/client/coral-admin/src/containers/Configure/StreamSettings.js
@@ -5,6 +5,7 @@ import translations from '../../translations.json';
 import styles from './Configure.css';
 import {Checkbox, Textfield} from 'react-mdl';
 import {Card, Icon, TextArea} from 'coral-ui';
+import MarkdownEditor from 'coral-admin/src/components/MarkdownEditor';
 
 const TIMESTAMPS = {
   weeks: 60 * 60 * 24 * 7,
@@ -32,8 +33,8 @@ const updateInfoBoxEnable = (updateSettings, infoBox) => () => {
   updateSettings({infoBoxEnable});
 };
 
-const updateInfoBoxContent = (updateSettings) => (event) => {
-  const infoBoxContent =  event.target.value;
+const updateInfoBoxContent = (updateSettings) => (value) => {
+  const infoBoxContent = value;
   updateSettings({infoBoxContent});
 };
 
@@ -112,19 +113,17 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
             {lang.t('configure.include-comment-stream-desc')}
           </p>
           <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
-            <div>
-              <TextArea
-                className={styles.descriptionBox}
-                onChange={updateInfoBoxContent(updateSettings)}
-                value={settings.infoBoxContent}
-              />
-            </div>
+            <MarkdownEditor
+              className={styles.descriptionBox}
+              onChange={updateInfoBoxContent(updateSettings)}
+              value={settings.infoBoxContent}
+            />
           </div>
         </div>
       </Card>
       <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
-        <div className={styles.settingsHeader}>{lang.t('configure.closed-stream-settings')}</div>
         <div className={styles.wrapper}>
+          <div className={styles.settingsHeader}>{lang.t('configure.closed-stream-settings')}</div>
           <p>{lang.t('configure.closed-comments-desc')}</p>
           <div>
             <TextArea className={styles.descriptionBox}
diff --git a/client/coral-ui/components/Card.css b/client/coral-ui/components/Card.css
index d4b5b1e91..ef1f2626d 100644
--- a/client/coral-ui/components/Card.css
+++ b/client/coral-ui/components/Card.css
@@ -10,7 +10,6 @@
   min-height: 200px;
   overflow: hidden;
   width: 330px;
-  z-index: 1;
   position: relative;
   background: #fff;
   border-radius: 2px;