From 182c504edbbe38f30762f859cda38fc018d51df3 Mon Sep 17 00:00:00 2001
From: David Jay <davidgljay@gmail.com>
Date: Mon, 12 Dec 2016 17:35:33 -0500
Subject: [PATCH] Updating settings box style.

---
 .../src/containers/Configure/CommentSettings.js   | 15 ++++++++++-----
 .../src/containers/Configure/Configure.css        | 15 ++++++++++++++-
 client/coral-admin/src/translations.json          |  2 ++
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/client/coral-admin/src/containers/Configure/CommentSettings.js b/client/coral-admin/src/containers/Configure/CommentSettings.js
index 429893b34..53f769da4 100644
--- a/client/coral-admin/src/containers/Configure/CommentSettings.js
+++ b/client/coral-admin/src/containers/Configure/CommentSettings.js
@@ -45,22 +45,27 @@ const updateClosedMessage = (updateSettings) => (event) => {
 };
 
 const CommentSettings = (props) => <List>
-  <ListItem className={styles.configSetting}>
+  <ListItem className={`${styles.configSetting} ${props.settings.moderation === 'pre' ? styles.enabledSetting : styles.disabledSetting}`}>
     <ListItemAction>
       <Checkbox
         onClick={updateModeration(props.updateSettings, props.settings.moderation)}
         checked={props.settings.moderation === 'pre'} />
     </ListItemAction>
-    {lang.t('configure.enable-pre-moderation')}
+    <ListItemContent>
+    <div className={styles.settingsHeader}>{lang.t('configure.enable-pre-moderation')}</div>
+    <p className={props.settings.moderation === 'pre' ? '' : styles.disabledSettingText}>
+      {lang.t('configure.enable-pre-moderation-text')}
+    </p>
+  </ListItemContent>
   </ListItem>
-  <ListItem className={styles.configSetting}>
+  <ListItem className={`${styles.configSetting} ${props.settings.charCountEnable ? styles.enabledSetting : styles.disabledSetting}`}>
     <ListItemAction>
       <Checkbox
         onClick={updateCharCountEnable(props.updateSettings, props.settings.charCountEnable)}
         checked={props.settings.charCountEnable} />
     </ListItemAction>
     <ListItemContent>
-      Limit Content Length
+      <div className={styles.settingsHeader}>Limit Content Length</div>
       <p className={props.settings.charCountEnable ? '' : styles.disabledSettingText}>
         <span>Comments will be limited to </span>
         <input type='text'
@@ -72,7 +77,7 @@ const CommentSettings = (props) => <List>
       </p>
     </ListItemContent>
   </ListItem>
-  <ListItem threeLine className={styles.configSettingInfoBox}>
+  <ListItem threeLine className={`${styles.configSettingInfoBox} ${props.settings.infoBoxEnable ? styles.enabledSetting : styles.disabledSetting}`}>
     <ListItemAction>
       <Checkbox
         onClick={updateInfoBoxEnable(props.updateSettings, props.settings.infoBoxEnable)}
diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css
index 2aa44d148..f1519df56 100644
--- a/client/coral-admin/src/containers/Configure/Configure.css
+++ b/client/coral-admin/src/containers/Configure/Configure.css
@@ -20,7 +20,12 @@
   border-radius: 4px;
   height: 90px;
   margin-bottom: 10px;
-  cursor: pointer;
+  align-items: flex-start;
+}
+
+.settingsHeader {
+  margin-top: 3px;
+  margin-bottom: 10px;
 }
 
 .disabledSettingText {
@@ -100,7 +105,15 @@
   margin-bottom:3px;
 }
 
+.enabledSetting {
+  border-left-color: #4caf50;
+  border-left-style: solid;
+  border-left-width: 7px;
+}
 
+.disabledSetting {
+  padding-left: 23px;
+}
 
 .hidden {
   display: none;
diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json
index 013c159a8..7672cdfce 100644
--- a/client/coral-admin/src/translations.json
+++ b/client/coral-admin/src/translations.json
@@ -41,6 +41,7 @@
     },
     "configure": {
       "enable-pre-moderation": "Enable pre-moderation",
+      "enable-pre-moderation-text": "Moderators must approve any comment before it is published.",
       "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.",
@@ -96,6 +97,7 @@
     },
     "configure": {
       "enable-pre-moderation": "Habilitar pre-moderación",
+      "enable-pre-moderation-text": "tracundeme!",
       "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.",