From 08d672ed4655cda257ec0c44a78c6ce2648ea533 Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Tue, 15 Nov 2016 10:11:37 -0800
Subject: [PATCH 1/8] Changes model and add admin.

---
 .../coral-admin/src/containers/Configure.css  |  6 +++++
 .../coral-admin/src/containers/Configure.js   | 24 ++++++++++++++++-
 .../coral-embed-stream/src/CommentStream.js   |  4 +++
 client/coral-embed-stream/style/default.css   | 11 ++++++++
 client/coral-plugin-infobox/InfoBox.js        | 11 ++++++++
 .../__tests__/infoBox.spec.js                 | 26 +++++++++++++++++++
 models/setting.js                             | 12 ++++++++-
 tests/models/setting.js                       | 12 +++++++--
 8 files changed, 102 insertions(+), 4 deletions(-)
 create mode 100644 client/coral-plugin-infobox/InfoBox.js
 create mode 100644 client/coral-plugin-infobox/__tests__/infoBox.spec.js

diff --git a/client/coral-admin/src/containers/Configure.css b/client/coral-admin/src/containers/Configure.css
index 98cb0e254..c832e96c1 100644
--- a/client/coral-admin/src/containers/Configure.css
+++ b/client/coral-admin/src/containers/Configure.css
@@ -23,6 +23,12 @@
   cursor: pointer;
 }
 
+.configSettingInfoBox {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
 .configSettingEmbed {
   border: 1px solid #ccc;
   border-radius: 4px;
diff --git a/client/coral-admin/src/containers/Configure.js b/client/coral-admin/src/containers/Configure.js
index 229c4e948..0dff4cf9a 100644
--- a/client/coral-admin/src/containers/Configure.js
+++ b/client/coral-admin/src/containers/Configure.js
@@ -7,7 +7,7 @@ import {
   ListItem,
   ListItemContent,
   ListItemAction,
-  //Textfield,
+  Textfield,
   Checkbox,
   Button,
   Icon
@@ -36,6 +36,16 @@ class Configure extends React.Component {
     this.props.dispatch(updateSettings({moderation}));
   }
 
+  updateInfoBoxEnable () {
+    const infoboxEnable = this.props.settings.infoBoxEnable;
+    this.props.dispatch(updateSettings({infoboxEnable}));
+  }
+
+  updateInfoBoxContent () {
+    const infoboxContent = this.props.settings.infoBoxContent;
+    this.props.dispatch(updateSettings({infoboxContent}));
+  }
+
   saveSettings () {
     this.props.dispatch(saveSettingsToServer());
   }
@@ -50,6 +60,18 @@ class Configure extends React.Component {
         </ListItemAction>
         Enable pre-moderation
       </ListItem>
+      <ListItem className={styles.configSettingInfoBox}>
+        <ListItemAction>
+          <Checkbox
+            onClick={this.updateInfoBoxEnable.bind(this)}
+            checked={this.props.settings.infoBoxEnable} />
+        </ListItemAction>
+        <Textfield
+          onChange={this.updateInfoBoxContent}
+          expandable
+          label='Include your text here'
+          value={this.props.settings.infoBoxContent}/>
+      </ListItem>
       {/*
       <ListItem className={styles.configSetting}>
         <ListItemAction><Checkbox /></ListItemAction>
diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index bfccf7cfc..004f5b642 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/client/coral-embed-stream/src/CommentStream.js
@@ -7,6 +7,7 @@ import {
 } from '../../coral-framework';
 import {connect} from 'react-redux';
 import CommentBox from '../../coral-plugin-commentbox/CommentBox';
+import InfoBox from '../../coral-plugin-infobox/InfoBox';
 import Content from '../../coral-plugin-commentcontent/CommentContent';
 import PubDate from '../../coral-plugin-pubdate/PubDate';
 import Count from '../../coral-plugin-comment-count/CommentCount';
@@ -100,6 +101,9 @@ class CommentStream extends Component {
         rootItem
         ? <div>
           <div id="commentBox">
+            <InfoBox
+              content={this.props.config.infoBox.content}
+              enable={this.props.config.infoBox.enable}/>
             <Count
               id={rootItemId}
               items={this.props.items}/>
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index e1c730bfc..08b1d8041 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -49,6 +49,17 @@ hr {
   font-weight: bold;
 }
 
+/* Info Box Styles */
+.coral-plugin-infobox-info {
+  position: fixed;
+  bottom: 0;
+  border: 0;
+  background: rgb(105,105,105);
+  color: white;
+  border-radius: 2px;
+  font-weight: bold;
+}
+
 /* Comment Box Styles */
 .coral-plugin-commentbox-container {
   display: flex;
diff --git a/client/coral-plugin-infobox/InfoBox.js b/client/coral-plugin-infobox/InfoBox.js
new file mode 100644
index 000000000..cae80df88
--- /dev/null
+++ b/client/coral-plugin-infobox/InfoBox.js
@@ -0,0 +1,11 @@
+import React from 'react';
+const packagename = 'coral-plugin-infobox';
+
+const InfoBox = ({enable, content}) =>
+<div
+  className={`${packagename}-info`}
+  hidden={`${!enable}`}>
+  {content}
+</div>;
+
+export default InfoBox;
diff --git a/client/coral-plugin-infobox/__tests__/infoBox.spec.js b/client/coral-plugin-infobox/__tests__/infoBox.spec.js
new file mode 100644
index 000000000..b8b761489
--- /dev/null
+++ b/client/coral-plugin-infobox/__tests__/infoBox.spec.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import {expect} from 'chai';
+import InfoBox from '../InfoBox';
+
+describe('InfoBox', () => {
+  let comment;
+  let render;
+  beforeEach(() => {
+    comment = {};
+    const postItem = (item) => {
+      comment.posted = item;
+      return Promise.resolve(4);
+    };
+    render = shallow(<InfoBox
+      postItem={postItem}
+      updateItem={(e) => comment.text = e.target.value}
+      item_id={'1'}
+      comments={['1', '2', '3']}/>);
+  });
+
+  it('should render the InfoBox appropriately', () => {
+    expect(render.contains('<div class="InfoBox"')).to.be.truthy;
+    expect(render.contains('<button class="postCommentButton"')).to.be.truthy;
+  });
+});
diff --git a/models/setting.js b/models/setting.js
index 09b13e099..a35a1aba4 100644
--- a/models/setting.js
+++ b/models/setting.js
@@ -3,7 +3,9 @@ const Schema = mongoose.Schema;
 
 const SettingSchema = new Schema({
   id: {type: String, default: '1'},
-  moderation: {type: String, enum: ['pre', 'post'], default: 'pre'}
+  moderation: {type: String, enum: ['pre', 'post'], default: 'pre'},
+  infoBoxEnable: {type: Boolean, default: false},
+  infoBoxContent: {type: String, default: ''}
 }, {
   timestamps: {
     createdAt: 'created_at',
@@ -35,6 +37,14 @@ SettingSchema.statics.getModerationSetting = function () {
   return this.findOne({id: '1'}).select('moderation');
 };
 
+/**
+ * Gets the info box settings and sends it back
+ * @return {Promise} content the content of the info Box
+ */
+SettingSchema.statics.getInfoBoxSetting = function () {
+  return this.findOne({id: '1'}).select('infoBoxEnable', 'infoBoxContent');
+};
+
 /**
  * This will update the settings object with whatever you pass in
  * @param  {object} setting a hash of whatever settings you want to update
diff --git a/tests/models/setting.js b/tests/models/setting.js
index f50110635..3f4dc27fa 100644
--- a/tests/models/setting.js
+++ b/tests/models/setting.js
@@ -8,7 +8,7 @@ const expect = require('chai').expect;
 describe('Setting: model', () => {
 
   beforeEach(() => {
-    const defaults = {id: 1, moderation: 'pre'};
+    const defaults = {id: 1};
     return Setting.update({id: '1'}, {$setOnInsert: defaults}, {upsert: true});
   });
 
@@ -18,13 +18,21 @@ describe('Setting: model', () => {
         expect(settings).to.have.property('moderation').and.to.equal('pre');
       });
     });
+    it('should have two infoBox fields defined', () => {
+      return Setting.getSettings().then(settings => {
+        expect(settings).to.have.property('infoBoxEnable').and.to.equal(false);
+        expect(settings).to.have.property('infoBoxContent').and.to.equal('');
+      });
+    });
   });
 
   describe('#updateSettings()', () => {
     it('should update the settings with a passed object', () => {
-      const mockSettings = {moderation: 'post'};
+      const mockSettings = {moderation: 'post', infoBoxEnable: true, infoBoxContent: 'yeah'};
       return Setting.updateSettings(mockSettings).then(updatedSettings => {
         expect(updatedSettings).to.have.property('moderation').and.to.equal('post');
+        expect(updatedSettings).to.have.property('infoBoxEnable', true);
+        expect(updatedSettings).to.have.property('infoBoxContent', 'yeah');
       });
     });
   });

From a0accfd993e3fd65e6cbe431a3c90d943bff0066 Mon Sep 17 00:00:00 2001
From: Dan Zajdband <dan.zajdband@gmail.com>
Date: Tue, 15 Nov 2016 13:26:39 -0500
Subject: [PATCH 2/8] Fixed infoBoxEnabled name

---
 client/coral-admin/src/containers/Configure.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/coral-admin/src/containers/Configure.js b/client/coral-admin/src/containers/Configure.js
index 0dff4cf9a..416ef8f7b 100644
--- a/client/coral-admin/src/containers/Configure.js
+++ b/client/coral-admin/src/containers/Configure.js
@@ -37,13 +37,13 @@ class Configure extends React.Component {
   }
 
   updateInfoBoxEnable () {
-    const infoboxEnable = this.props.settings.infoBoxEnable;
-    this.props.dispatch(updateSettings({infoboxEnable}));
+    const infoBoxEnable = !this.props.settings.infoBoxEnable;
+    this.props.dispatch(updateSettings({infoBoxEnable}));
   }
 
   updateInfoBoxContent () {
-    const infoboxContent = this.props.settings.infoBoxContent;
-    this.props.dispatch(updateSettings({infoboxContent}));
+    const infoBoxContent = this.props.settings.infoBoxContent;
+    this.props.dispatch(updateSettings({infoBoxContent}));
   }
 
   saveSettings () {

From 399ba72e0e24ee4a353897290406db16f3abf2a9 Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Tue, 15 Nov 2016 15:15:41 -0800
Subject: [PATCH 3/8] It changes translations to json file. It adds infobox
 setting.

---
 client/coral-admin/src/components/Comment.js  |  2 +-
 .../src/components/ModerationKeysModal.js     |  2 +-
 .../src/containers/Community/Community.js     |  2 +-
 .../coral-admin/src/containers/Configure.css  |  2 +
 .../coral-admin/src/containers/Configure.js   | 21 ++++++---
 .../src/containers/ModerationQueue.js         |  4 +-
 client/coral-admin/src/translations.js        | 47 -------------------
 client/coral-admin/src/translations.json      | 47 +++++++++++++++++++
 8 files changed, 69 insertions(+), 58 deletions(-)
 delete mode 100644 client/coral-admin/src/translations.js
 create mode 100644 client/coral-admin/src/translations.json

diff --git a/client/coral-admin/src/components/Comment.js b/client/coral-admin/src/components/Comment.js
index 2b0b7561b..c115bcf61 100644
--- a/client/coral-admin/src/components/Comment.js
+++ b/client/coral-admin/src/components/Comment.js
@@ -4,7 +4,7 @@ import {Button, Icon} from 'react-mdl';
 import timeago from 'timeago.js';
 import styles from './CommentList.css';
 import I18n from 'coral-framework/i18n/i18n';
-import translations from '../translations';
+import translations from '../translations.json';
 
 // Render a single comment for the list
 export default props => (
diff --git a/client/coral-admin/src/components/ModerationKeysModal.js b/client/coral-admin/src/components/ModerationKeysModal.js
index 5cf9fe17e..d350c74e0 100644
--- a/client/coral-admin/src/components/ModerationKeysModal.js
+++ b/client/coral-admin/src/components/ModerationKeysModal.js
@@ -1,5 +1,5 @@
 import I18n from 'coral-framework/i18n/i18n';
-import translations from '../translations';
+import translations from '../translations.json';
 import React from 'react';
 import Modal from 'components/Modal';
 import styles from './ModerationKeysModal.css';
diff --git a/client/coral-admin/src/containers/Community/Community.js b/client/coral-admin/src/containers/Community/Community.js
index 8e0b955a4..1f009429b 100644
--- a/client/coral-admin/src/containers/Community/Community.js
+++ b/client/coral-admin/src/containers/Community/Community.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import I18n from 'coral-framework/i18n/i18n';
-import translations from '../../translations';
+import translations from '../../translations.json';
 import {Grid, Cell} from 'react-mdl';
 
 import styles from './Community.css';
diff --git a/client/coral-admin/src/containers/Configure.css b/client/coral-admin/src/containers/Configure.css
index c832e96c1..a70e68746 100644
--- a/client/coral-admin/src/containers/Configure.css
+++ b/client/coral-admin/src/containers/Configure.css
@@ -27,6 +27,8 @@
   border: 1px solid #ccc;
   border-radius: 4px;
   margin-bottom: 10px;
+  cursor: pointer;
+  width: auto;
 }
 
 .configSettingEmbed {
diff --git a/client/coral-admin/src/containers/Configure.js b/client/coral-admin/src/containers/Configure.js
index 416ef8f7b..bafe335ab 100644
--- a/client/coral-admin/src/containers/Configure.js
+++ b/client/coral-admin/src/containers/Configure.js
@@ -14,7 +14,7 @@ import {
 } from 'react-mdl';
 import styles from './Configure.css';
 import I18n from 'coral-framework/i18n/i18n';
-import translations from '../translations';
+import translations from '../translations.json';
 
 class Configure extends React.Component {
   constructor (props) {
@@ -24,6 +24,8 @@ class Configure extends React.Component {
 
     this.copyToClipBoard = this.copyToClipBoard.bind(this);
     this.updateModeration = this.updateModeration.bind(this);
+    this.updateInfoBoxEnable = this.updateInfoBoxEnable.bind(this);
+    this.updateInfoBoxContent = this.updateInfoBoxContent.bind(this);
     this.saveSettings = this.saveSettings.bind(this);
   }
 
@@ -41,8 +43,8 @@ class Configure extends React.Component {
     this.props.dispatch(updateSettings({infoBoxEnable}));
   }
 
-  updateInfoBoxContent () {
-    const infoBoxContent = this.props.settings.infoBoxContent;
+  updateInfoBoxContent (event) {
+    const infoBoxContent =  event.target.value;
     this.props.dispatch(updateSettings({infoBoxContent}));
   }
 
@@ -60,17 +62,24 @@ class Configure extends React.Component {
         </ListItemAction>
         Enable pre-moderation
       </ListItem>
-      <ListItem className={styles.configSettingInfoBox}>
+      <ListItem threeLine className={styles.configSettingInfoBox}>
         <ListItemAction>
           <Checkbox
-            onClick={this.updateInfoBoxEnable.bind(this)}
+            onClick={this.updateInfoBoxEnable}
             checked={this.props.settings.infoBoxEnable} />
         </ListItemAction>
+        <ListItemContent>Include Comment Stream Description for Readers.
+        Write a message to be added to the top of your comment stream. Pose a topic, include community guidelines, etc.
+        </ListItemContent>
+      </ListItem>
+      <ListItem className={styles.configSettingInfoBox}>
         <Textfield
           onChange={this.updateInfoBoxContent}
+          value={this.props.settings.infoBoxContent}
           expandable
           label='Include your text here'
-          value={this.props.settings.infoBoxContent}/>
+          rows={3}
+          style={{width: '100%'}}/>
       </ListItem>
       {/*
       <ListItem className={styles.configSetting}>
diff --git a/client/coral-admin/src/containers/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue.js
index 9178bda57..cfc48ae6b 100644
--- a/client/coral-admin/src/containers/ModerationQueue.js
+++ b/client/coral-admin/src/containers/ModerationQueue.js
@@ -6,7 +6,7 @@ import {updateStatus} from 'actions/comments';
 import styles from './ModerationQueue.css';
 import key from 'keymaster';
 import I18n from 'coral-framework/i18n/i18n';
-import translations from '../translations';
+import translations from '../translations.json';
 
 /*
  * Renders the moderation queue as a tabbed layout with 3 moderation
@@ -91,7 +91,7 @@ class ModerationQueue extends React.Component {
               commentIds={
                 comments
                   .get('ids')
-                  .filter(id => 
+                  .filter(id =>
                     comments
                       .get('byId')
                       .get(id)
diff --git a/client/coral-admin/src/translations.js b/client/coral-admin/src/translations.js
deleted file mode 100644
index 67a8142fd..000000000
--- a/client/coral-admin/src/translations.js
+++ /dev/null
@@ -1,47 +0,0 @@
-export default {
-  en: {
-    'community': {
-      username_and_email: 'Username and Email',
-      account_creation_date: 'Account Creation Date'
-    },
-    'modqueue': {
-      'pending': 'pending',
-      'rejected': 'rejected',
-      'flagged': 'flagged',
-      'shortcuts': 'Shortcuts',
-      'close': 'Close',
-      'actions': 'Actions',
-      'navigation': 'Navigation',
-      'approve': 'Approve comment',
-      'reject': 'Reject comment',
-      'nextcomment': 'Go to the next comment',
-      'prevcomment': 'Go to the previous comment',
-      'singleview': 'Toggle single comment edit view',
-      'thismenu': 'Open this menu'
-    },
-    'comment': {
-      'flagged': 'flagged',
-      'anon': 'Anonymous'
-    },
-    'embedlink': {
-      'copy': 'Copy to Clipboard'
-    }
-  },
-  es: {
-    'community': {
-      username_and_email: 'Usuario y E-mail',
-      account_creation_date: 'Fecha de creación de la cuenta'
-    },
-    'modqueue': {
-      'pending': 'pendiente',
-      'rejected': 'rechazado',
-      'flagged': 'marcado',
-      'shortcuts': 'Atajos de teclado',
-      'close': 'Cerrar'
-    },
-    'comment': {
-      'flagged': 'marcado',
-      'anon': 'Anónimo'
-    }
-  }
-};
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
new file mode 100644
index 000000000..43d0939e0
--- /dev/null
+++ b/client/coral-admin/src/translations.json
@@ -0,0 +1,47 @@
+{
+  "en": {
+  "community": {
+    "username_and_email": "Username and Email",
+    "account_creation_date": "Account Creation Date"
+  },
+  "modqueue": {
+    "pending": "pending",
+    "rejected": "rejected",
+    "flagged": "flagged",
+    "shortcuts": "Shortcuts",
+    "close": "Close",
+    "actions": "Actions",
+    "navigation": "Navigation",
+    "approve": "Approve comment",
+    "reject": "Reject comment",
+    "nextcomment": "Go to the next comment",
+    "prevcomment": "Go to the previous comment",
+    "singleview": "Toggle single comment edit view",
+    "thismenu": "Open this menu"
+  },
+  "comment": {
+    "flagged": "flagged",
+    "anon": "Anonymous"
+  },
+  "embedlink": {
+    "copy": "Copy to Clipboard"
+  }
+  },
+  "es": {
+    "community": {
+      "username_and_email": "Usuario y E-mail",
+      "account_creation_date": "Fecha de creación de la cuenta"
+    },
+    "modqueue": {
+      "pending": "pendiente",
+      "rejected": "rechazado",
+      "flagged": "marcado",
+      "shortcuts": "Atajos de teclado",
+      "close": "Cerrar"
+    },
+    "comment": {
+      "flagged": "marcado",
+      "anon": "Anónimo"
+    }
+  }
+}

From d24c7c0bc28dca666f46a21cba16fe6874bc3ae4 Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Tue, 15 Nov 2016 15:18:17 -0800
Subject: [PATCH 4/8] Struggling with hiding elements.

---
 client/coral-embed-stream/src/CommentStream.js | 4 ++--
 client/coral-embed-stream/style/default.css    | 6 ++++++
 client/coral-plugin-infobox/InfoBox.js         | 3 +--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index 004f5b642..d8f5718a7 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/client/coral-embed-stream/src/CommentStream.js
@@ -102,8 +102,8 @@ class CommentStream extends Component {
         ? <div>
           <div id="commentBox">
             <InfoBox
-              content={this.props.config.infoBox.content}
-              enable={this.props.config.infoBox.enable}/>
+              content={this.props.config.infoBoxContent}
+              enable={this.props.config.infoBoxEnable}/>
             <Count
               id={rootItemId}
               items={this.props.items}/>
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 08b1d8041..9875198cb 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -58,6 +58,12 @@ hr {
   color: white;
   border-radius: 2px;
   font-weight: bold;
+  display: block;
+}
+
+.hidden  {
+  visibility: hidden;
+  display: none;
 }
 
 /* Comment Box Styles */
diff --git a/client/coral-plugin-infobox/InfoBox.js b/client/coral-plugin-infobox/InfoBox.js
index cae80df88..2aaa2f486 100644
--- a/client/coral-plugin-infobox/InfoBox.js
+++ b/client/coral-plugin-infobox/InfoBox.js
@@ -3,8 +3,7 @@ const packagename = 'coral-plugin-infobox';
 
 const InfoBox = ({enable, content}) =>
 <div
-  className={`${packagename}-info`}
-  hidden={`${!enable}`}>
+  className={`${packagename}-info ${enable ? '' : ', hidden'}` }>
   {content}
 </div>;
 

From 3abc0692bbd85995e71aa5ec314e23f80e67de44 Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Tue, 15 Nov 2016 15:31:12 -0800
Subject: [PATCH 5/8] At the top, not the bottom.

---
 client/coral-embed-stream/style/default.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 793ab0f8c..2f7394d4d 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -52,7 +52,7 @@ hr {
 /* Info Box Styles */
 .coral-plugin-infobox-info {
   position: fixed;
-  bottom: 0;
+  top: 0;
   border: 0;
   background: rgb(105,105,105);
   color: white;

From 621550e261e8676f278088b9562e11897abd326e Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Tue, 15 Nov 2016 15:31:54 -0800
Subject: [PATCH 6/8] Null, not empty string.

---
 client/coral-plugin-infobox/InfoBox.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/coral-plugin-infobox/InfoBox.js b/client/coral-plugin-infobox/InfoBox.js
index 2aaa2f486..db2ea22c4 100644
--- a/client/coral-plugin-infobox/InfoBox.js
+++ b/client/coral-plugin-infobox/InfoBox.js
@@ -3,7 +3,7 @@ const packagename = 'coral-plugin-infobox';
 
 const InfoBox = ({enable, content}) =>
 <div
-  className={`${packagename}-info ${enable ? '' : ', hidden'}` }>
+  className={`${packagename}-info ${enable ? null : ', hidden'}` }>
   {content}
 </div>;
 

From ff2c3cf30b6fa2cc822194e582912f8596ee7bcb Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Tue, 15 Nov 2016 20:31:24 -0800
Subject: [PATCH 7/8] Hide the textfield when not enable.

---
 client/coral-admin/src/containers/Configure.css | 4 ++++
 client/coral-admin/src/containers/Configure.js  | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/coral-admin/src/containers/Configure.css b/client/coral-admin/src/containers/Configure.css
index a70e68746..7141059b1 100644
--- a/client/coral-admin/src/containers/Configure.css
+++ b/client/coral-admin/src/containers/Configure.css
@@ -61,3 +61,7 @@
   font-size: 14px;
   letter-spacing: 0.03em;
 }
+
+.hidden {
+  display: none;
+}
diff --git a/client/coral-admin/src/containers/Configure.js b/client/coral-admin/src/containers/Configure.js
index bafe335ab..7d33e8e5a 100644
--- a/client/coral-admin/src/containers/Configure.js
+++ b/client/coral-admin/src/containers/Configure.js
@@ -72,7 +72,7 @@ class Configure extends React.Component {
         Write a message to be added to the top of your comment stream. Pose a topic, include community guidelines, etc.
         </ListItemContent>
       </ListItem>
-      <ListItem className={styles.configSettingInfoBox}>
+      <ListItem className={`${styles.configSettingInfoBox} ${this.props.settings.infoBoxEnable ? null : styles.hidden}`} >
         <Textfield
           onChange={this.updateInfoBoxContent}
           value={this.props.settings.infoBoxContent}

From 7968839826207f7eaf72b3baecb6ee3509e52f64 Mon Sep 17 00:00:00 2001
From: gaba <gabelula@gmail.com>
Date: Wed, 16 Nov 2016 03:07:27 -0800
Subject: [PATCH 8/8] It adds translations for the admin and fix CSS.

---
 client/coral-admin/src/components/Header.js   | 12 +++--
 .../coral-admin/src/components/ui/Drawer.js   | 10 ++--
 .../coral-admin/src/components/ui/Header.js   | 10 ++--
 .../coral-admin/src/containers/Configure.css  |  7 +++
 .../coral-admin/src/containers/Configure.js   | 49 +++++++------------
 client/coral-admin/src/translations.json      | 26 ++++++++++
 6 files changed, 74 insertions(+), 40 deletions(-)

diff --git a/client/coral-admin/src/components/Header.js b/client/coral-admin/src/components/Header.js
index 1a89da513..b2bee0a44 100644
--- a/client/coral-admin/src/components/Header.js
+++ b/client/coral-admin/src/components/Header.js
@@ -2,22 +2,26 @@ import React from 'react';
 import {Layout, Navigation, Drawer, Header} from 'react-mdl';
 import {Link} from 'react-router';
 import styles from './Header.css';
+import I18n from 'coral-framework/i18n/i18n';
+import translations from '../translations.json';
 
 // App header. If we add a navbar it should be here
 export default (props) => (
   <Layout fixedDrawer>
     <Header title='Talk'>
       <Navigation>
-        <Link className={styles.navLink} to={'/admin/'}>Moderate</Link>
-        <Link className={styles.navLink} to={'/admin/configure'}>Configure</Link>
+        <Link className={styles.navLink} to={'/admin/'}>{lang.t('configure.moderate')}</Link>
+        <Link className={styles.navLink} to={'/admin/configure'}>{lang.t('Configure')}</Link>
       </Navigation>
     </Header>
     <Drawer>
       <Navigation>
-        <Link className={styles.navLink} to={'/admin/'}>Moderate</Link>
-        <Link className={styles.navLink} to={'/admin/configure'}>Configure</Link>
+        <Link className={styles.navLink} to={'/admin/'}>{lang.t('configure.moderate')}</Link>
+        <Link className={styles.navLink} to={'/admin/configure'}>{lang.t('configure.Configure')}</Link>
       </Navigation>
     </Drawer>
     {props.children}
   </Layout>
 );
+
+const lang = new I18n(translations);
diff --git a/client/coral-admin/src/components/ui/Drawer.js b/client/coral-admin/src/components/ui/Drawer.js
index 9ea727911..12bf7c1d2 100644
--- a/client/coral-admin/src/components/ui/Drawer.js
+++ b/client/coral-admin/src/components/ui/Drawer.js
@@ -2,13 +2,17 @@ import React from 'react';
 import {Navigation, Drawer} from 'react-mdl';
 import {Link} from 'react-router';
 import styles from './Header.css';
+import I18n from 'coral-framework/i18n/i18n';
+import translations from '../../translations.json';
 
 export default () => (
   <Drawer>
     <Navigation>
-      <Link className={styles.navLink} to="/admin">Moderate</Link>
-      <Link className={styles.navLink} to="/admin/community">Community</Link>
-      <Link className={styles.navLink} to="/admin/configure">Configure</Link>
+      <Link className={styles.navLink} to="/admin">{lang.t('configure.moderate')}</Link>
+      <Link className={styles.navLink} to="/admin/community">{lang.t('configure.community')}</Link>
+      <Link className={styles.navLink} to="/admin/configure">{lang.t('configure.configure')}</Link>
     </Navigation>
   </Drawer>
 );
+
+const lang = new I18n(translations);
diff --git a/client/coral-admin/src/components/ui/Header.js b/client/coral-admin/src/components/ui/Header.js
index 86e622672..d85a91744 100644
--- a/client/coral-admin/src/components/ui/Header.js
+++ b/client/coral-admin/src/components/ui/Header.js
@@ -2,16 +2,20 @@ import React from 'react';
 import {Navigation, Header} from 'react-mdl';
 import {Link} from 'react-router';
 import styles from './Header.css';
+import I18n from 'coral-framework/i18n/i18n';
+import translations from '../../translations.json';
 
 export default () => (
   <Header title='Talk'>
     <Navigation>
-      <Link className={styles.navLink} to="/admin">Moderate</Link>
-      <Link className={styles.navLink} to="/admin/community">Community</Link>
-      <Link className={styles.navLink} to="/admin/configure">Configure</Link>
+      <Link className={styles.navLink} to="/admin">{lang.t('configure.moderate')}</Link>
+      <Link className={styles.navLink} to="/admin/community">{lang.t('configure.community')}</Link>
+      <Link className={styles.navLink} to="/admin/configure">{lang.t('configure.configure')}</Link>
       <span>
         {`v${process.env.VERSION}`}
       </span>
     </Navigation>
   </Header>
 );
+
+const lang = new I18n(translations);
diff --git a/client/coral-admin/src/containers/Configure.css b/client/coral-admin/src/containers/Configure.css
index 7141059b1..8d1fc49a2 100644
--- a/client/coral-admin/src/containers/Configure.css
+++ b/client/coral-admin/src/containers/Configure.css
@@ -29,6 +29,13 @@
   margin-bottom: 10px;
   cursor: pointer;
   width: auto;
+  height: auto;
+  text-align: left;
+}
+
+.configSettingInfoBox p {
+  font-size: 12px;
+  bottom: 0;
 }
 
 .configSettingEmbed {
diff --git a/client/coral-admin/src/containers/Configure.js b/client/coral-admin/src/containers/Configure.js
index 7d33e8e5a..7d057eacc 100644
--- a/client/coral-admin/src/containers/Configure.js
+++ b/client/coral-admin/src/containers/Configure.js
@@ -60,7 +60,7 @@ class Configure extends React.Component {
             onClick={this.updateModeration}
             checked={this.props.settings.moderation === 'pre'} />
         </ListItemAction>
-        Enable pre-moderation
+        {lang.t('configure.enable-pre-moderation')}
       </ListItem>
       <ListItem threeLine className={styles.configSettingInfoBox}>
         <ListItemAction>
@@ -68,33 +68,22 @@ class Configure extends React.Component {
             onClick={this.updateInfoBoxEnable}
             checked={this.props.settings.infoBoxEnable} />
         </ListItemAction>
-        <ListItemContent>Include Comment Stream Description for Readers.
-        Write a message to be added to the top of your comment stream. Pose a topic, include community guidelines, etc.
+        <ListItemContent>
+          {lang.t('configure.include-comment-stream')}
+          <p>
+            {lang.t('configure.include-comment-stream-desc')}
+          </p>
         </ListItemContent>
       </ListItem>
       <ListItem className={`${styles.configSettingInfoBox} ${this.props.settings.infoBoxEnable ? null : styles.hidden}`} >
-        <Textfield
-          onChange={this.updateInfoBoxContent}
-          value={this.props.settings.infoBoxContent}
-          expandable
-          label='Include your text here'
-          rows={3}
-          style={{width: '100%'}}/>
+        <ListItemContent>
+          <Textfield
+            onChange={this.updateInfoBoxContent}
+            value={this.props.settings.infoBoxContent}
+            label={lang.t('configure.include-text')}
+            rows={3}/>
+        </ListItemContent>
       </ListItem>
-      {/*
-      <ListItem className={styles.configSetting}>
-        <ListItemAction><Checkbox /></ListItemAction>
-        Include Comment Stream Description for Readers
-      </ListItem>
-      <ListItem className={styles.configSetting}>
-        <ListItemAction><Checkbox /></ListItemAction>
-        Limit Comment Length
-        <Textfield
-          pattern='-?[0-9]*(\.[0-9]+)?'
-          error='Input is not a number!'
-          label='Maximum Characters' />
-      </ListItem>
-    */}
     </List>;
   }
 
@@ -115,7 +104,7 @@ class Configure extends React.Component {
 
     return <List>
       <ListItem className={styles.configSettingEmbed}>
-        <p>Copy and paste code below into your CMS to embed your comment box in your articles</p>
+        <p>{lang.t('configure.copy-and-paste')}</p>
         <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
         <Button raised colored className={styles.copyButton} onClick={this.copyToClipBoard}>
           {lang.t('embedlink.copy')}
@@ -131,8 +120,8 @@ class Configure extends React.Component {
 
   render () {
     let pageTitle = this.state.activeSection === 'comments'
-      ? 'Comment Settings'
-      : 'Embed Comment Stream';
+      ? lang.t('configure.comment-settings')
+      : lang.t('configure.embed-comment-stream');
 
     if (this.props.fetchingSettings) {
       pageTitle += ' - Loading...';
@@ -145,16 +134,16 @@ class Configure extends React.Component {
               <ListItem className={styles.settingOption}>
                 <ListItemContent
                   onClick={this.changeSection.bind(this, 'comments')}
-                  icon='settings'>Comment Settings</ListItemContent>
+                  icon='settings'>{lang.t('configure.comment-settings')}</ListItemContent>
               </ListItem>
               <ListItem className={styles.settingOption}>
                 <ListItemContent
                   onClick={this.changeSection.bind(this, 'embed')}
-                  icon='code'>Embed Comment Stream</ListItemContent>
+                  icon='code'>{lang.t('configure.embed-comment-stream')}</ListItemContent>
               </ListItem>
             </List>
             <Button raised colored onClick={this.saveSettings}>
-              <Icon name='save' /> Save Changes
+              <Icon name='save' /> {lang.t('configure.save-changes')}
             </Button>
           </div>
           <div className={styles.mainContent}>
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index 42b2bce5c..dd959172b 100644
--- a/client/coral-admin/src/translations.json
+++ b/client/coral-admin/src/translations.json
@@ -29,6 +29,19 @@
     },
     "embedlink": {
       "copy": "Copy to Clipboard"
+    },
+    "configure": {
+      "enable-pre-moderation": "Enable pre-moderation",
+      "include-comment-stream": "Include Comment Stream Description for Readers.",
+      "include-comment-stream-desc": "Write a message to be added to the top of your comment stream. Pose a topic, include community guidelines, etc.",
+      "include-text": "Include your text here.",
+      "comment-settings": "Comment Settings",
+      "embed-comment-stream": "Embed Comment Stream",
+      "save-changes": "Save Changes",
+      "copy-and-paste": "Copy and paste code below into your CMS to embed your comment box in your articles",
+      "moderate": "Moderate",
+      "configure": "Configure",
+      "community": "Community"
     }
   },
   "es": {
@@ -50,6 +63,19 @@
     "comment": {
       "flagged": "marcado",
       "anon": "Anónimo"
+    },
+    "configure": {
+      "enable-pre-moderation": "Habilitar pre-moderación",
+      "include-comment-stream": "Incluir la Descripción a un Hilo de Comentario para los y las Lectoras.",
+      "include-comment-stream-desc": "Escribir un mensaje que será agregado a la parte de arriba del tu hilo de comentarios. Por ejemplo, un tema, guias de comunidad, etc.",
+      "include-text": "Incluir tu texto aqui.",
+      "comment-settings": "Configuración de Comentarios",
+      "embed-comment-stream": "Colocar Hilo de Comentarios",
+      "save-changes": "Guardar Cambios",
+      "copy-and-paste": "Copiar y pegar el código de más abajo en tu CMS para colocar la caja de comentarios en tus articulos",
+      "moderate": "Moderar",
+      "configure": "Configurar",
+      "community": "Comunidad"
     }
   }
 }