It changes translations to json file. It adds infobox setting.

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 => (

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';

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';

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 {

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}>

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)

client/coral-admin/src/translations.js

@@ -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'
-    }
-  }
-};

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"
+    }
+  }
+}