sam's feedback

client/coral-admin/src/containers/Configure/Configure.css

@@ -3,7 +3,7 @@
 
   h3 {
     color: black;
-    font-size: 1.76em;
+    font-size: 1.26em;
     font-weight: 500;
   }
 }
@@ -24,6 +24,10 @@
   margin-bottom: 20px;
   align-items: flex-start;
   min-height: 100px;
+
+  h3 {
+    margin: 0;
+  }
 }
 
 .settingsError {
@@ -118,18 +122,19 @@
 }
 
 #bannedWordlist, #suspectWordlist {
-  width: 100%;
-  padding: 10px;
-
+  display: block;
   input {
     width: 100%;
   }
 }
 
-.wordlistHeader {
-  font-weight: bold;
-  font-size:18px;
-  margin-bottom:3px;
+.customCSSInput {
+  width: 100%;
+  font-size: 14px;
+  padding: 14px;
+  letter-spacing: 0.03em;
+  color: #555;
+  box-sizing: border-box;
 }
 
 .enabledSetting {

client/coral-admin/src/containers/Configure/Configure.js

@@ -89,6 +89,7 @@ class Configure extends Component {
       sectionComponent = <TechSettings
         title={pageTitle}
         fetchingSettings={this.props.settings.fetchingSettings}
+        onChangeDomainlist={this.onChangeDomainlist}
         settings={this.props.settings}
         updateSettings={this.onSettingUpdate} />;
     }

client/coral-admin/src/containers/Configure/Domainlist.js

@@ -10,7 +10,7 @@ const lang = new I18n(translations);
 const Domainlist = ({domains, onChangeDomainlist}) => {
   return (
     <Card id={styles.domainlist} className={styles.configSetting}>
-      <h3 style={{margin: 0}}>{lang.t('configure.domain-list-title')}</h3>
+      <h3>{lang.t('configure.domain-list-title')}</h3>
       <p className={styles.domainlistDesc}>{lang.t('configure.domain-list-text')}</p>
       <TagsInput
         value={domains}

client/coral-admin/src/containers/Configure/EmbedLink.js

@@ -45,6 +45,7 @@ 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">

client/coral-admin/src/containers/Configure/ModerationSettings.js

@@ -12,6 +12,10 @@ const updateModeration = (updateSettings, mod) => () => {
   updateSettings({moderation});
 };
 
+const updateEmailConfirmation = (updateSettings, verify) => () => {
+  updateSettings({requireEmailConfirmation: !verify});
+};
+
 const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
 
   // just putting this here for shorthand below
@@ -20,6 +24,19 @@ const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
 
   return (
     <div>
+      <Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
+        <div className={styles.action}>
+          <Checkbox
+            onChange={updateEmailConfirmation(updateSettings, settings.requireEmailConfirmation)}
+            checked={settings.requireEmailConfirmation} />
+        </div>
+        <div className={styles.content}>
+          <div className={styles.settingsHeader}>{lang.t('configure.require-email-verification')}</div>
+          <p className={settings.requireEmailConfirmation ? '' : styles.disabledSettingText}>
+            {lang.t('configure.require-email-verification-text')}
+          </p>
+        </div>
+      </Card>
       <Card className={`${styles.configSetting} ${settings.moderation === 'PRE' ? on : off}`}>
         <div className={styles.action}>
           <Checkbox

client/coral-admin/src/containers/Configure/StreamSettings.js

@@ -27,10 +27,6 @@ const updateCharCount = (updateSettings, settingsError) => (event) => {
   updateSettings({charCount: charCount});
 };
 
-const updateEmailConfirmation = (updateSettings, verify) => () => {
-  updateSettings({requireEmailConfirmation: !verify});
-};
-
 const updateInfoBoxEnable = (updateSettings, infoBox) => () => {
   const infoBoxEnable = !infoBox;
   updateSettings({infoBoxEnable});
@@ -69,19 +65,6 @@ const StreamSettings = ({updateSettings, settingsError, settings, errors}) => {
 
   return (
     <div>
-      <Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateEmailConfirmation(updateSettings, settings.requireEmailConfirmation)}
-            checked={settings.requireEmailConfirmation} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{lang.t('configure.require-email-verification')}</div>
-          <p className={settings.requireEmailConfirmation ? '' : styles.disabledSettingText}>
-            {lang.t('configure.require-email-verification-text')}
-          </p>
-        </div>
-      </Card>
       <Card className={`${styles.configSetting} ${settings.charCountEnable ? on : off}`}>
         <div className={styles.action}>
           <Checkbox

client/coral-admin/src/containers/Configure/TechSettings.js

@@ -1,6 +1,5 @@
 import React, {PropTypes} from 'react';
 import {Card} from 'coral-ui';
-import {Textfield} from 'react-mdl';
 import Domainlist from './Domainlist';
 import EmbedLink from './EmbedLink';
 import styles from './Configure.css';
@@ -20,17 +19,14 @@ const TechSettings = ({settings, onChangeDomainlist, updateSettings}) => {
         domains={settings.domains.whitelist}
         onChangeDomainlist={onChangeDomainlist} />
       <EmbedLink />
-      <Card className={styles.configSettingInfoBox}>
-        <div className={styles.content}>
-          {lang.t('configure.custom-css-url')}
-          <p>{lang.t('configure.custom-css-url-desc')}</p>
-          <br />
-          <Textfield
-            style={{width: '100%'}}
-            label={lang.t('configure.custom-css-url')}
-            value={settings.customCssUrl}
-            onChange={updateCustomCssUrl(updateSettings)} />
-        </div>
+      <Card className={styles.configSetting}>
+        <h3>{lang.t('configure.custom-css-url')}</h3>
+        <p>{lang.t('configure.custom-css-url-desc')}</p>
+        <br />
+        <input
+          className={styles.customCSSInput}
+          value={settings.customCssUrl}
+          onChange={updateCustomCssUrl(updateSettings)} />
       </Card>
     </div>
   );

client/coral-admin/src/containers/Configure/Wordlist.js

@@ -7,9 +7,8 @@ import {Card} from 'coral-ui';
 
 const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
   <div>
-    <h3>{lang.t('configure.banned-words-title')}</h3>
-    <Card id={styles.bannedWordlist}>
-      <p className={styles.wordlistHeader}>{lang.t('configure.banned-word-header')}</p>
+    <Card id={styles.bannedWordlist} className={styles.configSetting}>
+      <h3>{lang.t('configure.banned-words-title')}</h3>
       <p className={styles.wordlistDesc}>{lang.t('configure.banned-word-text')}</p>
       <TagsInput
         value={bannedWords}
@@ -19,9 +18,8 @@ const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
         onChange={tags => onChangeWordlist('banned', tags)}
       />
     </Card>
-    <h3>{lang.t('configure.suspect-words-title')}</h3>
-    <Card id={styles.suspectWordlist}>
-      <p className={styles.wordlistHeader}>{lang.t('configure.suspect-word-header')}</p>
+    <Card id={styles.suspectWordlist} className={styles.configSetting}>
+      <h3>{lang.t('configure.suspect-words-title')}</h3>
       <p className={styles.wordlistDesc}>{lang.t('configure.suspect-word-text')}</p>
       <TagsInput
         value={suspectWords}

client/coral-admin/src/translations.json

@@ -65,8 +65,6 @@
       "include-text": "Include your text here.",
       "comment-settings": "Settings",
       "embed-comment-stream": "Embed Stream",
-      "banned-word-header": "Write the banned words list",
-      "suspect-word-header": "Write the suspect words list",
       "banned-word-text": "Comments which contain these words or phrases (not case-sensitive) will be automatically removed from the comment stream. Type a word and press Enter or Tab to add. Optionally paste a comma-separated list.",
       "suspect-word-text": "Comments which contain these words or phrases (not case-sensitive) will be highlighted in the comment stream. Type a word and press Enter or Tab to add. Optionally paste a comma-separated list.",
       "wordlist": "Banned Words",
@@ -88,7 +86,7 @@
       "comment-count-text-pre":  "Comments will be limited to ",
       "comment-count-text-post": " characters.",
       "comment-count-error": "Please enter a valid number.",
-      "domain-list-title": "Domain Whitelist",
+      "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)."
     },
     "bandialog": {
@@ -190,8 +188,6 @@
       "comment-settings": "Configuración de Comentarios",
       "embed-comment-stream": "Colocar Hilo de Comentarios",
       "wordlist": "Palabras Suspendidas y Suspechosas",
-      "banned-word-header": "Escribir las palabras no permitidas",
-      "suspect-word-header": "Write the suspect words list",
       "banned-word-text": "Comentarios que contengan estas palabras o frases, no separadas por comas y en mayusculas o minusuculas, serán automaticamente separadas de los comentarios publicados.",
       "suspect-word-text": "Comments which contain these words or phrases (not case-sensitive) will be highlighted in the comment stream. Type a word and press Enter or Tab to add. Optionally paste a comma-separated list.",
       "banned-words-title": "Banned words list",