Refactor moderationSettings styles

client/coral-admin/src/routes/Configure/components/ModerationSettings.css

@@ -0,0 +1,51 @@
+.card {
+  margin-bottom: 20px;
+  align-items: flex-start;
+  min-height: 100px;
+  max-width: 600px;
+}
+
+.header {
+  margin-top: 3px;
+  margin-bottom: 7px;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.wrapper {
+  width: 100%;
+}
+
+.actions {
+  display: inline-block;
+  width: 100%;
+}
+
+.action {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 20px;
+}
+
+.content {
+  display: inline-block;
+  padding: 0px 30px;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.enabledSetting {
+  border-left-color: #00796b;
+  border-left-style: solid;
+  border-left-width: 7px;
+}
+
+.disabledSetting {
+  padding-left: 22px;
+}
+
+.disabledSettingText {
+  color: #ccc;
+}

client/coral-admin/src/routes/Configure/components/ModerationSettings.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './Configure.css';
+import styles from './ModerationSettings.css';
 import {Card} from 'coral-ui';
 import {Checkbox} from 'react-mdl';
 import Wordlist from './Wordlist';
 import Slot from 'coral-framework/components/Slot';
 import t from 'coral-framework/services/i18n';
+import cn from 'classnames';
 
 class ModerationSettings extends React.Component {
 
@@ -47,43 +48,43 @@ class ModerationSettings extends React.Component {
     const off = styles.disabledSetting;
 
     return (
-      <div className={styles.Configure}>
+      <div>
         <h3>{t('configure.moderation_settings')}</h3>
-        <Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
+        <Card className={cn(styles.card, settings.requireEmailConfirmation ? on : off)}>
           <div className={styles.action}>
             <Checkbox
               onChange={this.updateEmailConfirmation}
               checked={settings.requireEmailConfirmation} />
           </div>
           <div className={styles.content}>
-            <div className={styles.settingsHeader}>{t('configure.require_email_verification')}</div>
+            <div className={styles.header}>{t('configure.require_email_verification')}</div>
             <p className={settings.requireEmailConfirmation ? '' : styles.disabledSettingText}>
               {t('configure.require_email_verification_text')}
             </p>
           </div>
         </Card>
-        <Card className={`${styles.configSetting} ${settings.moderation === 'PRE' ? on : off}`}>
+        <Card className={cn(styles.card, settings.moderation === 'PRE' ? on : off)}>
           <div className={styles.action}>
             <Checkbox
               onChange={this.updateModeration}
               checked={settings.moderation === 'PRE'} />
           </div>
           <div className={styles.content}>
-            <div className={styles.settingsHeader}>{t('configure.enable_pre_moderation')}</div>
+            <div className={styles.header}>{t('configure.enable_pre_moderation')}</div>
             <p className={settings.moderation === 'PRE' ? '' : styles.disabledSettingText}>
               {t('configure.enable_pre_moderation_text')}
             </p>
           </div>
         </Card>
-        <Card className={`${styles.configSetting} ${settings.premodLinksEnable ? on : off}`}>
+        <Card className={`${styles.card} ${settings.premodLinksEnable ? on : off}`}>
           <div className={styles.action}>
             <Checkbox
               onChange={this.updatePremodLinksEnable}
               checked={settings.premodLinksEnable} />
           </div>
           <div className={styles.content}>
-            <div className={styles.settingsHeader}>{t('configure.enable_premod_links')}</div>
-            <p>
+            <div className={styles.header}>{t('configure.enable_premod_links')}</div>
+            <p className={settings.premodLinksEnable ? '' : styles.disabledSettingText}>
               {t('configure.enable_premod_links_text')}
             </p>
           </div>

client/coral-admin/src/routes/Configure/components/TechSettings.css

@@ -0,0 +1,28 @@
+.card {
+  margin-bottom: 20px;
+  align-items: flex-start;
+  min-height: 100px;
+  max-width: 600px;
+}
+
+.header {
+  margin-top: 3px;
+  margin-bottom: 7px;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.wrapper {
+  width: 100%;
+}
+
+.customCSSInput {
+  width: 100%;
+  font-size: 14px;
+  padding: 14px;
+  letter-spacing: 0.03em;
+  color: #555;
+  box-sizing: border-box;
+}
+
+