From a1a45a7969d7ea7f3c9b547c962d939d78253fe6 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 3 Mar 2017 15:10:15 -0500
Subject: [PATCH 1/6] Styles and disable and enable things

---
 .../src/containers/Configure/Configure.css      | 17 +++++++++++------
 .../src/containers/Configure/StreamSettings.js  | 15 ++++++++++-----
 client/coral-admin/src/translations.json        |  4 ++--
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css
index 058ff7a64..54deadccf 100644
--- a/client/coral-admin/src/containers/Configure/Configure.css
+++ b/client/coral-admin/src/containers/Configure/Configure.css
@@ -41,7 +41,9 @@
 
 .settingsHeader {
   margin-top: 3px;
-  margin-bottom: 10px;
+  margin-bottom: 7px;
+  font-size: 18px;
+  font-weight: 500;
 }
 
 .disabledSettingText {
@@ -58,11 +60,6 @@
   overflow: visible;
 }
 
-.configSettingInfoBox p {
-  font-size: 12px;
-  bottom: 0;
-}
-
 .configSettingEmbed {
   border: 1px solid #ccc;
   border-radius: 4px;
@@ -170,3 +167,11 @@
     padding-left: 30px;
   }
 }
+
+
+.Configure {
+  p {
+    line-height: 1.2;
+    max-width: 600px;
+  }
+}
diff --git a/client/coral-admin/src/containers/Configure/StreamSettings.js b/client/coral-admin/src/containers/Configure/StreamSettings.js
index 568e0a075..bd4111006 100644
--- a/client/coral-admin/src/containers/Configure/StreamSettings.js
+++ b/client/coral-admin/src/containers/Configure/StreamSettings.js
@@ -64,7 +64,7 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
   const off = styles.disabledSetting;
 
   return (
-    <div>
+    <div className={styles.Configure}>
       <Card className={`${styles.configSetting} ${settings.charCountEnable ? on : off}`}>
         <div className={styles.action}>
           <Checkbox
@@ -79,7 +79,9 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
               className={`${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
               htmlFor='charCount'
               onChange={updateCharCount(updateSettings, settingsError)}
-              value={settings.charCount}/>
+              value={settings.charCount}
+              disabled={settings.charCountEnable ? '' : 'disabled'}
+            />
             <span>{lang.t('configure.comment-count-text-post')}</span>
               {
                 errors.charCount &&
@@ -99,8 +101,10 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
             checked={settings.infoBoxEnable} />
         </div>
         <div className={styles.content}>
-          {lang.t('configure.include-comment-stream')}
-          <p>
+          <div className={styles.settingsHeader}>
+            {lang.t('configure.include-comment-stream')}
+          </div>
+          <p className={settings.infoBoxEnable ? '' : styles.disabledSettingText}>
             {lang.t('configure.include-comment-stream-desc')}
           </p>
           <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
@@ -109,7 +113,8 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
                 onChange={updateInfoBoxContent(updateSettings)}
                 value={settings.infoBoxContent}
                 label={lang.t('configure.include-text')}
-                rows={3}/>
+                rows={3}
+              />
             </div>
           </div>
         </div>
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index cebc499ca..686001f6a 100644
--- a/client/coral-admin/src/translations.json
+++ b/client/coral-admin/src/translations.json
@@ -63,7 +63,7 @@
       "enable-pre-moderation-text": "Moderators must approve any comment before it is published.",
       "require-email-verification": "Require Email Verification",
       "require-email-verification-text": "New Users must verify their email before commenting",
-      "include-comment-stream": "Include Comment Stream Description for Readers.",
+      "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": "Settings",
@@ -87,7 +87,7 @@
       "close-after": "Close comments after",
       "comment-count-header": "Limit Comment Length",
       "comment-count-text-pre":  "Comments will be limited to ",
-      "comment-count-text-post": " characters.",
+      "comment-count-text-post": " characters",
       "comment-count-error": "Please enter a valid number.",
       "domain-list-title": "Permitted Domains",
       "domain-list-text": "Enter the domains you would like to permit for Talk, e.g. your local, staging and production environments (ex. localhost:3000, staging.domain.com, domain.com)."

From 1f0d102115f2619689ee5ac03975e80003cb5a63 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 3 Mar 2017 15:53:53 -0500
Subject: [PATCH 2/6] new components!! textarea stuff and configure bugs

---
 .../src/containers/Configure/Configure.css    | 11 ++++++++++
 .../containers/Configure/StreamSettings.js    | 20 +++++++++----------
 client/coral-ui/components/TextArea.css       | 15 ++++++++++++++
 client/coral-ui/components/TextArea.js        | 14 +++++++++++++
 client/coral-ui/index.js                      |  2 ++
 5 files changed, 51 insertions(+), 11 deletions(-)
 create mode 100644 client/coral-ui/components/TextArea.css
 create mode 100644 client/coral-ui/components/TextArea.js

diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css
index 54deadccf..c262b01d3 100644
--- a/client/coral-admin/src/containers/Configure/Configure.css
+++ b/client/coral-admin/src/containers/Configure/Configure.css
@@ -78,6 +78,8 @@
   border-color: #ccc;
   border-style: solid;
   border-width: 0px 0px 1px 0px;
+  font-size: 14px;
+  text-align: center;
 }
 
 .charCountTexfieldEnabled {
@@ -174,4 +176,13 @@
     line-height: 1.2;
     max-width: 600px;
   }
+
+  .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 bd4111006..c4f01f4bc 100644
--- a/client/coral-admin/src/containers/Configure/StreamSettings.js
+++ b/client/coral-admin/src/containers/Configure/StreamSettings.js
@@ -3,8 +3,8 @@ import {SelectField, Option} from 'react-mdl-selectfield';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import styles from './Configure.css';
-import {Textfield, Checkbox} from 'react-mdl';
-import {Card, Icon} from 'coral-ui';
+import {Checkbox} from 'react-mdl';
+import {Card, Icon, TextArea, Textfield} from 'coral-ui';
 
 const TIMESTAMPS = {
   weeks: 60 * 60 * 24 * 7,
@@ -108,12 +108,11 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
             {lang.t('configure.include-comment-stream-desc')}
           </p>
           <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
-            <div className={styles.content}>
-              <Textfield
+            <div>
+              <TextArea
+                className={styles.descriptionBox}
                 onChange={updateInfoBoxContent(updateSettings)}
                 value={settings.infoBoxContent}
-                label={lang.t('configure.include-text')}
-                rows={3}
               />
             </div>
           </div>
@@ -123,11 +122,10 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
         <div className={styles.content}>
           {lang.t('configure.closed-comments-desc')}
           <div>
-          <Textfield
-            onChange={updateClosedMessage(updateSettings)}
-            value={settings.closedMessage}
-            label={lang.t('configure.closed-comments-label')}
-            rows={3}/>
+            <TextArea className={styles.descriptionBox}
+              onChange={updateClosedMessage(updateSettings)}
+              value={settings.closedMessage}
+            />
           </div>
         </div>
       </Card>
diff --git a/client/coral-ui/components/TextArea.css b/client/coral-ui/components/TextArea.css
new file mode 100644
index 000000000..794064cf1
--- /dev/null
+++ b/client/coral-ui/components/TextArea.css
@@ -0,0 +1,15 @@
+.textArea {
+  textarea {
+    width: 100%;
+    display: block;
+    outline: none;
+    border: 1px solid rgba(0,0,0,.12);
+    padding: 6px;
+    box-sizing: border-box;
+    border-radius: 2px;
+    margin: 5px auto;
+    min-height: 175px;
+    font-size: 14px;
+    resize: none;
+  }
+}
diff --git a/client/coral-ui/components/TextArea.js b/client/coral-ui/components/TextArea.js
new file mode 100644
index 000000000..519ef6b19
--- /dev/null
+++ b/client/coral-ui/components/TextArea.js
@@ -0,0 +1,14 @@
+import React, {PropTypes} from 'react';
+import styles from './TextArea.css';
+
+const TextArea = ({className, value = '', ...props}) => (
+  <div className={`${styles.textArea} ${className ? className : ''}`} {...props}>
+    <textarea value={value} />
+  </div>
+);
+
+TextArea.propTypes = {
+  onChange: PropTypes.func,
+};
+
+export default TextArea;
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index b3498c3e0..2f84ceac8 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -22,3 +22,5 @@ export {default as WizardNav} from './components/WizardNav';
 export {default as Select} from './components/Select';
 export {default as Option} from './components/Option';
 export {default as SnackBar} from './components/SnackBar';
+export {default as Textfield} from './components/Textfield';
+export {default as TextArea} from './components/TextArea';

From ec4fc566c143cc050b5a2a1ecc7c31b4a3e435a3 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 3 Mar 2017 16:15:30 -0500
Subject: [PATCH 3/6] props

---
 client/coral-ui/components/TextArea.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/coral-ui/components/TextArea.js b/client/coral-ui/components/TextArea.js
index 519ef6b19..fedc7914b 100644
--- a/client/coral-ui/components/TextArea.js
+++ b/client/coral-ui/components/TextArea.js
@@ -2,8 +2,8 @@ import React, {PropTypes} from 'react';
 import styles from './TextArea.css';
 
 const TextArea = ({className, value = '', ...props}) => (
-  <div className={`${styles.textArea} ${className ? className : ''}`} {...props}>
-    <textarea value={value} />
+  <div className={`${styles.textArea} ${className ? className : ''}`}>
+    <textarea value={value} {...props}/>
   </div>
 );
 

From 6cd75b57dcca8ea305e4143605706f68a58a1fb7 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Fri, 3 Mar 2017 16:18:58 -0500
Subject: [PATCH 4/6] border box

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

diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index f888b8fa6..009246963 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -80,6 +80,7 @@ hr {
   padding: 10px;
   margin-bottom: 10px;
   display: block;
+  box-sizing: border-box;
 }
 
 /* Question Box Styles */
@@ -220,7 +221,7 @@ hr {
 
 .comment__action-container .material-icons {
   font-size: 12px;
-  margin-left: 3px;  
+  margin-left: 3px;
 }
 
 button.comment__action-button,

From e80d6e7b0a9de6a7d8d97fddb7a3c82ffaba8e49 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Mon, 6 Mar 2017 12:12:26 -0500
Subject: [PATCH 5/6] Configure UX Style Polish!

---
 .../src/containers/Configure/Configure.css    | 56 +++++++++++--------
 .../src/containers/Configure/Domainlist.js    | 22 +++++---
 .../src/containers/Configure/EmbedLink.js     | 20 ++++---
 .../Configure/ModerationSettings.js           |  2 +-
 .../containers/Configure/StreamSettings.js    | 15 ++---
 .../src/containers/Configure/TechSettings.js  | 11 ++--
 .../src/containers/Configure/Wordlist.js      | 34 ++++++-----
 client/coral-admin/src/translations.json      |  6 +-
 client/coral-ui/index.js                      |  1 -
 9 files changed, 98 insertions(+), 69 deletions(-)

diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css
index c262b01d3..0272fdec0 100644
--- a/client/coral-admin/src/containers/Configure/Configure.css
+++ b/client/coral-admin/src/containers/Configure/Configure.css
@@ -24,10 +24,29 @@
   margin-bottom: 20px;
   align-items: flex-start;
   min-height: 100px;
+  max-width: 600px;
 
   h3 {
     margin: 0;
   }
+
+  .actions {
+    display: inline-block;
+    width: 100%;
+      .copiedText {
+        display: inline-block;
+        color: #00796b;
+        padding: 12px;
+        font-size: 14px;
+        float: right;
+      }
+
+      .copyButton {
+        display: inline-block;
+        width: 200px;
+        float: right;
+      }
+  }
 }
 
 .settingsError {
@@ -95,29 +114,18 @@
   color: white;
 }
 
-.copiedText {
-  color: #00796b;
-  float: right;
-  padding: 12px;
-  font-size: 14px;
-}
-
-.copyButton {
-  float: right;
-  width: 200px;
-}
-
 .embedInput {
-  border-radius: 3px;
-  border: 1px solid #ccc;
+  width: 100%;
   display: block;
-  width: 90%;
-  vertical-align: middle;
-  margin-bottom: 10px;
-  color: #555;
-  padding: 14px;
+  outline: none;
+  border: 1px solid rgba(0,0,0,.12);
+  padding: 6px;
+  box-sizing: border-box;
+  border-radius: 2px;
+  margin: 5px auto;
+  min-height: 175px;
   font-size: 14px;
-  letter-spacing: 0.03em;
+  resize: none;
 }
 
 #bannedWordlist, #suspectWordlist {
@@ -170,11 +178,15 @@
   }
 }
 
-
 .Configure {
+
   p {
     line-height: 1.2;
-    max-width: 600px;
+    max-width: 550px;
+  }
+
+  .wrapper {
+    width: 550px;
   }
 
   .descriptionBox {
diff --git a/client/coral-admin/src/containers/Configure/Domainlist.js b/client/coral-admin/src/containers/Configure/Domainlist.js
index c8c7cbd6c..f1fc25dd0 100644
--- a/client/coral-admin/src/containers/Configure/Domainlist.js
+++ b/client/coral-admin/src/containers/Configure/Domainlist.js
@@ -10,15 +10,19 @@ const lang = new I18n(translations);
 const Domainlist = ({domains, onChangeDomainlist}) => {
   return (
     <Card id={styles.domainlist} className={styles.configSetting}>
-      <h3>{lang.t('configure.domain-list-title')}</h3>
-      <p className={styles.domainlistDesc}>{lang.t('configure.domain-list-text')}</p>
-      <TagsInput
-        value={domains}
-        inputProps={{placeholder: 'URL'}}
-        addOnPaste={true}
-        pasteSplit={data => data.split(',').map(d => d.trim())}
-        onChange={tags => onChangeDomainlist('whitelist', tags)}
-      />
+      <div className={styles.wrapper}>
+        <div className={styles.settingsHeader}>{lang.t('configure.domain-list-title')}</div>
+        <p className={styles.domainlistDesc}>{lang.t('configure.domain-list-text')}</p>
+        <div className={styles.wrapper}>
+          <TagsInput
+            value={domains}
+            inputProps={{placeholder: 'URL'}}
+            addOnPaste={true}
+            pasteSplit={data => data.split(',').map(d => d.trim())}
+            onChange={tags => onChangeDomainlist('whitelist', tags)}
+          />
+        </div>
+      </div>
     </Card>
   );
 };
diff --git a/client/coral-admin/src/containers/Configure/EmbedLink.js b/client/coral-admin/src/containers/Configure/EmbedLink.js
index 674bafa6e..86ab8b1f8 100644
--- a/client/coral-admin/src/containers/Configure/EmbedLink.js
+++ b/client/coral-admin/src/containers/Configure/EmbedLink.js
@@ -45,13 +45,19 @@ class EmbedLink extends Component {
     `.trim();
     return (
       <Card shadow="2" className={styles.configSetting}>
-        <h3>Embed Comment Stream</h3>
-        <p>{lang.t('configure.copy-and-paste')}</p>
-        <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
-        <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
-          {lang.t('embedlink.copy')}
-        </Button>
-        <div className={styles.copiedText}>{this.state.copied && 'Copied!'}</div>
+        <div className={styles.wrapper}>
+          <div className={styles.settingsHeader}>Embed Comment Stream</div>
+          <p>{lang.t('configure.copy-and-paste')}</p>
+          <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
+          <div className={styles.actions}>
+            <Button raised className={styles.copyButton} onClick={this.copyToClipBoard} cStyle="black">
+              {lang.t('embedlink.copy')}
+            </Button>
+            <div className={styles.copiedText}>
+              {this.state.copied && 'Copied!'}
+            </div>
+          </div>
+        </div>
       </Card>
     );
   }
diff --git a/client/coral-admin/src/containers/Configure/ModerationSettings.js b/client/coral-admin/src/containers/Configure/ModerationSettings.js
index 23f0f39d8..da158b612 100644
--- a/client/coral-admin/src/containers/Configure/ModerationSettings.js
+++ b/client/coral-admin/src/containers/Configure/ModerationSettings.js
@@ -23,7 +23,7 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
   const off = styles.disabledSetting;
 
   return (
-    <div>
+    <div className={styles.Configure}>
       <Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
         <div className={styles.action}>
           <Checkbox
diff --git a/client/coral-admin/src/containers/Configure/StreamSettings.js b/client/coral-admin/src/containers/Configure/StreamSettings.js
index c4f01f4bc..51250e340 100644
--- a/client/coral-admin/src/containers/Configure/StreamSettings.js
+++ b/client/coral-admin/src/containers/Configure/StreamSettings.js
@@ -3,8 +3,8 @@ import {SelectField, Option} from 'react-mdl-selectfield';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import styles from './Configure.css';
-import {Checkbox} from 'react-mdl';
-import {Card, Icon, TextArea, Textfield} from 'coral-ui';
+import {Checkbox, Textfield} from 'react-mdl';
+import {Card, Icon, TextArea} from 'coral-ui';
 
 const TIMESTAMPS = {
   weeks: 60 * 60 * 24 * 7,
@@ -94,7 +94,7 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
           </p>
         </div>
       </Card>
-      <Card className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? on : off}`}>
+      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox} ${settings.infoBoxEnable ? on : off}`}>
         <div className={styles.action}>
           <Checkbox
             onChange={updateInfoBoxEnable(updateSettings, settings.infoBoxEnable)}
@@ -118,9 +118,10 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
           </div>
         </div>
       </Card>
-      <Card className={styles.configSettingInfoBox}>
-        <div className={styles.content}>
-          {lang.t('configure.closed-comments-desc')}
+      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
+        <div className={styles.settingsHeader}>{lang.t('configure.closed-stream-settings')}</div>
+        <div className={styles.wrapper}>
+          <p>{lang.t('configure.closed-comments-desc')}</p>
           <div>
             <TextArea className={styles.descriptionBox}
               onChange={updateClosedMessage(updateSettings)}
@@ -129,7 +130,7 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
           </div>
         </div>
       </Card>
-      <Card className={styles.configSettingInfoBox}>
+      <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
         <div className={styles.content}>
           {lang.t('configure.close-after')}
           <br />
diff --git a/client/coral-admin/src/containers/Configure/TechSettings.js b/client/coral-admin/src/containers/Configure/TechSettings.js
index c50a7d507..daf1fef8a 100644
--- a/client/coral-admin/src/containers/Configure/TechSettings.js
+++ b/client/coral-admin/src/containers/Configure/TechSettings.js
@@ -14,19 +14,20 @@ const updateCustomCssUrl = (updateSettings) => (event) => {
 
 const TechSettings = ({settings, onChangeDomainlist, updateSettings}) => {
   return (
-    <div>
+    <div className={styles.Configure}>
       <Domainlist
         domains={settings.domains.whitelist}
         onChangeDomainlist={onChangeDomainlist} />
       <EmbedLink />
       <Card className={styles.configSetting}>
-        <h3>{lang.t('configure.custom-css-url')}</h3>
-        <p>{lang.t('configure.custom-css-url-desc')}</p>
-        <br />
-        <input
+        <div className={styles.wrapper}>
+          <div className={styles.settingsHeader}>{lang.t('configure.custom-css-url')}</div>
+          <p>{lang.t('configure.custom-css-url-desc')}</p>
+          <input
           className={styles.customCSSInput}
           value={settings.customCssUrl}
           onChange={updateCustomCssUrl(updateSettings)} />
+        </div>
       </Card>
     </div>
   );
diff --git a/client/coral-admin/src/containers/Configure/Wordlist.js b/client/coral-admin/src/containers/Configure/Wordlist.js
index aa79cb8ae..8eb010b79 100644
--- a/client/coral-admin/src/containers/Configure/Wordlist.js
+++ b/client/coral-admin/src/containers/Configure/Wordlist.js
@@ -8,25 +8,29 @@ import {Card} from 'coral-ui';
 const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
   <div>
     <Card id={styles.bannedWordlist} className={styles.configSetting}>
-      <h3>{lang.t('configure.banned-words-title')}</h3>
+      <div className={styles.settingsHeader}>{lang.t('configure.banned-words-title')}</div>
       <p className={styles.wordlistDesc}>{lang.t('configure.banned-word-text')}</p>
-      <TagsInput
-        value={bannedWords}
-        inputProps={{placeholder: 'word or phrase'}}
-        addOnPaste={true}
-        pasteSplit={data => data.split(',').map(d => d.trim())}
-        onChange={tags => onChangeWordlist('banned', tags)}
-      />
+      <div className={styles.wrapper}>
+        <TagsInput
+          value={bannedWords}
+          inputProps={{placeholder: 'word or phrase'}}
+          addOnPaste={true}
+          pasteSplit={data => data.split(',').map(d => d.trim())}
+          onChange={tags => onChangeWordlist('banned', tags)}
+        />
+      </div>
     </Card>
     <Card id={styles.suspectWordlist} className={styles.configSetting}>
-      <h3>{lang.t('configure.suspect-words-title')}</h3>
+      <div className={styles.settingsHeader}>{lang.t('configure.suspect-words-title')}</div>
       <p className={styles.wordlistDesc}>{lang.t('configure.suspect-word-text')}</p>
-      <TagsInput
-        value={suspectWords}
-        inputProps={{placeholder: 'word or phrase'}}
-        addOnPaste={true}
-        pasteSplit={data => data.split(',').map(d => d.trim())}
-        onChange={tags => onChangeWordlist('suspect', tags)} />
+      <div className={styles.wrapper}>
+        <TagsInput
+          value={suspectWords}
+          inputProps={{placeholder: 'word or phrase'}}
+          addOnPaste={true}
+          pasteSplit={data => data.split(',').map(d => d.trim())}
+          onChange={tags => onChangeWordlist('suspect', tags)} />
+      </div>
     </Card>
   </div>
 );
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index 686001f6a..11d3303d9 100644
--- a/client/coral-admin/src/translations.json
+++ b/client/coral-admin/src/translations.json
@@ -53,6 +53,7 @@
       "copy": "Copy to Clipboard"
     },
     "configure": {
+      "closed-stream-settings": "Closed Stream Message",
       "stream-settings": "Stream Settings",
       "moderation-settings": "Moderation Settings",
       "tech-settings": "Tech Settings",
@@ -79,7 +80,7 @@
       "configure": "Configure",
       "community": "Community",
       "streams": "Streams",
-      "closed-comments-desc": "Write a message for closed threads",
+      "closed-comments-desc": "Write a message to be displayed when when your comment stream is closed and no longer accepting comments.",
       "closed-comments-label": "Write a message...",
       "hours": "Hours",
       "days": "Days",
@@ -178,6 +179,7 @@
       "username_flags": ""
     },
     "configure": {
+      "closed-stream-settings": "Mensaje cuando los comentarios están cerrados en el artículo",
       "stream-settings": "Configuración de Comentarios",
       "moderation-settings": "Configuración de Moderación",
       "tech-settings": "Configuración Technical",
@@ -204,7 +206,7 @@
       "configure": "Configurar",
       "community": "Comunidad",
       "streams": "Streams",
-      "closed-comments-desc": "Escribe un mensaje para cuando los comentarios se encuentran cerrados",
+      "closed-comments-desc": "Escribe un mensaje que será mostrado cuando los comentarios estén cerrados y no se acepten más comentarios.",
       "closed-comments-label": "Escribe un mensaje...",
       "never": "Nunca",
       "hours": "Horas",
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index 2f84ceac8..148da0383 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -22,5 +22,4 @@ export {default as WizardNav} from './components/WizardNav';
 export {default as Select} from './components/Select';
 export {default as Option} from './components/Option';
 export {default as SnackBar} from './components/SnackBar';
-export {default as Textfield} from './components/Textfield';
 export {default as TextArea} from './components/TextArea';

From 09556c9befe5aa4637e637bf01a9afbb0b3adb72 Mon Sep 17 00:00:00 2001
From: Riley Davis <riley.davis@gmail.com>
Date: Mon, 6 Mar 2017 14:06:32 -0700
Subject: [PATCH 6/6] indention

---
 .../src/containers/Configure/Configure.css    | 25 ++++++++++---------
 .../src/containers/Configure/TechSettings.js  |  6 ++---
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css
index 0272fdec0..6cb623978 100644
--- a/client/coral-admin/src/containers/Configure/Configure.css
+++ b/client/coral-admin/src/containers/Configure/Configure.css
@@ -33,19 +33,20 @@
   .actions {
     display: inline-block;
     width: 100%;
-      .copiedText {
-        display: inline-block;
-        color: #00796b;
-        padding: 12px;
-        font-size: 14px;
-        float: right;
-      }
 
-      .copyButton {
-        display: inline-block;
-        width: 200px;
-        float: right;
-      }
+    .copiedText {
+      display: inline-block;
+      color: #00796b;
+      padding: 12px;
+      font-size: 14px;
+      float: right;
+    }
+
+    .copyButton {
+      display: inline-block;
+      width: 200px;
+      float: right;
+    }
   }
 }
 
diff --git a/client/coral-admin/src/containers/Configure/TechSettings.js b/client/coral-admin/src/containers/Configure/TechSettings.js
index daf1fef8a..6fbc302a0 100644
--- a/client/coral-admin/src/containers/Configure/TechSettings.js
+++ b/client/coral-admin/src/containers/Configure/TechSettings.js
@@ -24,9 +24,9 @@ const TechSettings = ({settings, onChangeDomainlist, updateSettings}) => {
           <div className={styles.settingsHeader}>{lang.t('configure.custom-css-url')}</div>
           <p>{lang.t('configure.custom-css-url-desc')}</p>
           <input
-          className={styles.customCSSInput}
-          value={settings.customCssUrl}
-          onChange={updateCustomCssUrl(updateSettings)} />
+            className={styles.customCSSInput}
+            value={settings.customCssUrl}
+            onChange={updateCustomCssUrl(updateSettings)} />
         </div>
       </Card>
     </div>