Updating settings box style.

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

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;

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.",