From 59eff3e29e36252b6ad9cac63e54265af8d357a0 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 9 Oct 2017 23:37:37 +0700
Subject: [PATCH] Refactor moderationSettings styles

---
 .../components/ModerationSettings.css         | 51 +++++++++++++++++++
 .../components/ModerationSettings.js          | 19 +++----
 .../Configure/components/TechSettings.css     | 28 ++++++++++
 3 files changed, 89 insertions(+), 9 deletions(-)
 create mode 100644 client/coral-admin/src/routes/Configure/components/ModerationSettings.css
 create mode 100644 client/coral-admin/src/routes/Configure/components/TechSettings.css

diff --git a/client/coral-admin/src/routes/Configure/components/ModerationSettings.css b/client/coral-admin/src/routes/Configure/components/ModerationSettings.css
new file mode 100644
index 000000000..3cba2f4d3
--- /dev/null
+++ b/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;
+}
diff --git a/client/coral-admin/src/routes/Configure/components/ModerationSettings.js b/client/coral-admin/src/routes/Configure/components/ModerationSettings.js
index 034dcdbb6..3175f22d2 100644
--- a/client/coral-admin/src/routes/Configure/components/ModerationSettings.js
+++ b/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>
diff --git a/client/coral-admin/src/routes/Configure/components/TechSettings.css b/client/coral-admin/src/routes/Configure/components/TechSettings.css
new file mode 100644
index 000000000..91fbe9acf
--- /dev/null
+++ b/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;
+}
+
+