From ec436bcb391ca6042f87211a19247bc1ddd25d00 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 9 Oct 2017 23:50:43 +0700
Subject: [PATCH] Refactor Configure styles

---
 .../routes/Configure/components/Configure.css | 199 +-----------------
 .../routes/Configure/components/Configure.js  |  12 +-
 .../components/ModerationSettings.css         |   6 +-
 .../Configure/components/StreamSettings.css   | 104 +++++++++
 .../Configure/components/StreamSettings.js    |  31 +--
 5 files changed, 135 insertions(+), 217 deletions(-)
 create mode 100644 client/coral-admin/src/routes/Configure/components/StreamSettings.css

diff --git a/client/coral-admin/src/routes/Configure/components/Configure.css b/client/coral-admin/src/routes/Configure/components/Configure.css
index eae75caba..33a0c9c6f 100644
--- a/client/coral-admin/src/routes/Configure/components/Configure.css
+++ b/client/coral-admin/src/routes/Configure/components/Configure.css
@@ -1,17 +1,7 @@
-/**
- * @TODO: deprecated as this file contains styles from multiple components. Please refactor.
- */
-
 .container {
   max-width: 1280px;
   margin: 0 auto;
   display: flex;
-
-  h3 {
-    color: black;
-    font-size: 1.26em;
-    font-weight: 500;
-  }
 }
 
 .leftColumn {
@@ -19,6 +9,15 @@
   width: 234px;
 }
 
+.saveBox {
+  margin-top: 38px;
+}
+
+.changedSave {
+  background-color: #00796B;
+  color: white;
+}
+
 .mainContent {
   width: calc(100% - 300px);
   padding: 10px 14px;
@@ -26,183 +25,3 @@
   max-width: 718px;
 }
 
-.configSetting {
-  margin-bottom: 20px;
-  align-items: flex-start;
-  min-height: 100px;
-  max-width: 600px;
-
-  h3 {
-    margin: 0;
-  }
-
-  .actions {
-    display: inline-block;
-    width: 100%;
-
-    .copiedText {
-      display: inline-block;
-      color: #00796b;
-      padding: 12px;
-      font-size: 14px;
-      float: right;
-    }
-
-    .copyButton {
-      display: inline-block;
-      width: 200px;
-      float: right;
-    }
-  }
-}
-
-.settingsError {
-  color: #d50000;
-}
-
-.settingsError i {
-  font-size: 14px;
-  margin-right: 3px;
-}
-
-.settingsHeader {
-  margin-top: 3px;
-  margin-bottom: 7px;
-  font-size: 18px;
-  font-weight: 500;
-}
-
-.disabledSettingText {
-  color: #ccc;
-}
-
-.configSettingInfoBox {
-  min-height: 100px;
-  margin-bottom: 20px;
-  width: auto;
-  height: auto;
-  text-align: left;
-  overflow: visible;
-}
-
-.configSettingEmbed {
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  margin-bottom: 10px;
-  display: block;
-}
-
-.configTimeoutSelect {
-  display: inline-block;
-  margin-left: 20px;
-
-  i { /* fix for firefox and react-mdl-selectfield@0.2.0 */
-    padding: 20px 0;
-    vertical-align: top;
-  }
-}
-
-.inlineTextfield {
-  border-color: #ccc;
-  border-style: solid;
-  border-width: 0px 0px 1px 0px;
-  text-align: center;
-  font-size: inherit;
-}
-
-.inlineTextfield:focus {
-  outline: none;
-}
-
-.charCountTexfield, .editCommentTimeframeTextfield {
-  width: 4em;
-  padding: 0px;
-}
-
-.charCountTexfieldEnabled {
-  border-color: #00796b;
-}
-
-.changedSave {
-  background-color: #00796B;
-  color: white;
-}
-
-.embedInput {
-  width: 100%;
-  display: block;
-  outline: none;
-  border: 1px solid rgba(0,0,0,.12);
-  padding: 6px;
-  box-sizing: border-box;
-  border-radius: 2px;
-  margin: 5px auto;
-  min-height: 175px;
-  font-size: 14px;
-  resize: none;
-}
-
-.customCSSInput {
-  width: 100%;
-  font-size: 14px;
-  padding: 14px;
-  letter-spacing: 0.03em;
-  color: #555;
-  box-sizing: border-box;
-}
-
-.enabledSetting {
-  border-left-color: #00796b;
-  border-left-style: solid;
-  border-left-width: 7px;
-}
-
-.disabledSetting {
-  padding-left: 22px;
-}
-
-.hidden {
-  display: none;
-}
-
-.saveBox {
-  margin-top: 38px;
-}
-
-.settingsSection {
-  padding-bottom: 200px;
-  .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%;
-  }
-}
-
-.Configure {
-
-  p {
-    line-height: 1.2;
-    max-width: 550px;
-  }
-
-  .wrapper {
-    width: 100%;
-  }
-
-  .descriptionBox {
-    margin-top: 15px;
-
-    input {
-      height: 150px;
-    }
-  }
-}
diff --git a/client/coral-admin/src/routes/Configure/components/Configure.js b/client/coral-admin/src/routes/Configure/components/Configure.js
index cc765f2da..ecdbddcc0 100644
--- a/client/coral-admin/src/routes/Configure/components/Configure.js
+++ b/client/coral-admin/src/routes/Configure/components/Configure.js
@@ -71,13 +71,11 @@ export default class Configure extends Component {
 
         </div>
         <div className={styles.mainContent}>
-          <div className={styles.settingsSection}>
-            <SectionComponent
-              data={this.props.data}
-              root={this.props.root}
-              settings={this.props.settings}
-            />
-          </div>
+          <SectionComponent
+            data={this.props.data}
+            root={this.props.root}
+            settings={this.props.settings}
+          />
         </div>
       </div>
     );
diff --git a/client/coral-admin/src/routes/Configure/components/ModerationSettings.css b/client/coral-admin/src/routes/Configure/components/ModerationSettings.css
index 3cba2f4d3..eaa2ad9e7 100644
--- a/client/coral-admin/src/routes/Configure/components/ModerationSettings.css
+++ b/client/coral-admin/src/routes/Configure/components/ModerationSettings.css
@@ -16,11 +16,6 @@
   width: 100%;
 }
 
-.actions {
-  display: inline-block;
-  width: 100%;
-}
-
 .action {
   display: inline-block;
   position: absolute;
@@ -49,3 +44,4 @@
 .disabledSettingText {
   color: #ccc;
 }
+
diff --git a/client/coral-admin/src/routes/Configure/components/StreamSettings.css b/client/coral-admin/src/routes/Configure/components/StreamSettings.css
new file mode 100644
index 000000000..e73721d0d
--- /dev/null
+++ b/client/coral-admin/src/routes/Configure/components/StreamSettings.css
@@ -0,0 +1,104 @@
+.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%;
+}
+
+.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;
+}
+
+.configSettingInfoBox {
+  min-height: 100px;
+  margin-bottom: 20px;
+  width: auto;
+  height: auto;
+  text-align: left;
+  overflow: visible;
+}
+
+.descriptionBox {
+  margin-top: 15px;
+
+  input {
+    height: 150px;
+  }
+}
+
+.configTimeoutSelect {
+  display: inline-block;
+  margin-left: 20px;
+
+  i { /* fix for firefox and react-mdl-selectfield@0.2.0 */
+    padding: 20px 0;
+    vertical-align: top;
+  }
+}
+
+
+
+.hidden {
+  display: none;
+}
+
+.inlineTextfield {
+  border-color: #ccc;
+  border-style: solid;
+  border-width: 0px 0px 1px 0px;
+  text-align: center;
+  font-size: inherit;
+}
+
+.inlineTextfield:focus {
+  outline: none;
+}
+
+.charCountTexfield, .editCommentTimeframeTextfield {
+  width: 4em;
+  padding: 0px;
+}
+
+.charCountTexfieldEnabled {
+  border-color: #00796b;
+}
+
+
+
+
diff --git a/client/coral-admin/src/routes/Configure/components/StreamSettings.js b/client/coral-admin/src/routes/Configure/components/StreamSettings.js
index 96c07601f..dd6ff6f92 100644
--- a/client/coral-admin/src/routes/Configure/components/StreamSettings.js
+++ b/client/coral-admin/src/routes/Configure/components/StreamSettings.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import {SelectField, Option} from 'react-mdl-selectfield';
 import t from 'coral-framework/services/i18n';
-import styles from './Configure.css';
+import styles from './StreamSettings.css';
 import {Checkbox, Textfield} from 'react-mdl';
 import {Card, Icon, TextArea} from 'coral-ui';
 import PropTypes from 'prop-types';
 import Slot from 'coral-framework/components/Slot';
 import MarkdownEditor from 'coral-framework/components/MarkdownEditor';
+import cn from 'classnames';
 
 const TIMESTAMPS = {
   weeks: 60 * 60 * 24 * 7,
@@ -104,20 +105,20 @@ class StreamSettings extends React.Component {
     const off = styles.disabledSetting;
 
     return (
-      <div className={styles.Configure}>
+      <div>
         <h3>{t('configure.stream_settings')}</h3>
-        <Card className={`${styles.configSetting} ${settings.charCountEnable ? on : off}`}>
+        <Card className={cn(styles.card, settings.charCountEnable ? on : off)}>
           <div className={styles.action}>
             <Checkbox
               onChange={this.updateCharCountEnable}
               checked={settings.charCountEnable} />
           </div>
           <div className={styles.content}>
-            <div className={styles.settingsHeader}>{t('configure.comment_count_header')}</div>
+            <div className={styles.header}>{t('configure.comment_count_header')}</div>
             <p className={settings.charCountEnable ? '' : styles.disabledSettingText}>
               <span>{t('configure.comment_count_text_pre')}</span>
               <input type='text'
-                className={`${styles.inlineTextfield} ${styles.charCountTexfield} ${settings.charCountEnable && styles.charCountTexfieldEnabled}`}
+                className={cn(styles.inlineTextfield, styles.charCountTexfield, settings.charCountEnable && styles.charCountTexfieldEnable)}
                 htmlFor='charCount'
                 onChange={this.updateCharCount}
                 value={settings.charCount}
@@ -135,20 +136,20 @@ class StreamSettings extends React.Component {
             </p>
           </div>
         </Card>
-        <Card className={`${styles.configSetting} ${styles.configSettingInfoBox} ${settings.infoBoxEnable ? on : off}`}>
+        <Card className={cn(styles.card, styles.configSettingInfoBox, settings.infoBoxEnable ? on : off)}>
           <div className={styles.action}>
             <Checkbox
               onChange={this.updateInfoBoxEnable}
               checked={settings.infoBoxEnable} />
           </div>
           <div className={styles.content}>
-            <div className={styles.settingsHeader}>
+            <div className={styles.header}>
               {t('configure.include_comment_stream')}
             </div>
             <p className={settings.infoBoxEnable ? '' : styles.disabledSettingText}>
               {t('configure.include_comment_stream_desc')}
             </p>
-            <div className={`${styles.configSettingInfoBox} ${settings.infoBoxEnable ? null : styles.hidden}`} >
+            <div className={cn(styles.configSettingInfoBox, settings.infoBoxEnable ? null : styles.hidden)} >
               <MarkdownEditor
                 className={styles.descriptionBox}
                 onChange={this.updateInfoBoxContent}
@@ -157,9 +158,9 @@ class StreamSettings extends React.Component {
             </div>
           </div>
         </Card>
-        <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
+        <Card className={cn(styles.card, styles.configSettingInfoBox)}>
           <div className={styles.wrapper}>
-            <div className={styles.settingsHeader}>{t('configure.closed_stream_settings')}</div>
+            <div className={styles.header}>{t('configure.closed_stream_settings')}</div>
             <p>{t('configure.closed_comments_desc')}</p>
             <div>
               <TextArea className={styles.descriptionBox}
@@ -170,13 +171,13 @@ class StreamSettings extends React.Component {
           </div>
         </Card>
         {/* Edit Comment Timeframe */}
-        <Card className={styles.configSetting}>
-          <div className={styles.settingsHeader}>{t('configure.edit_comment_timeframe_heading')}</div>
+        <Card className={styles.card}>
+          <div className={styles.header}>{t('configure.edit_comment_timeframe_heading')}</div>
           <p>
             {t('configure.edit_comment_timeframe_text_pre')}
             &nbsp;
             <input
-              className={`${styles.inlineTextfield} ${styles.editCommentTimeframeTextfield}`}
+              className={cn(styles.inlineTextfield, styles.editCommentTimeframeTextfield)}
               type="number"
               min="0"
               onChange={this.updateEditCommentWindowLength}
@@ -188,14 +189,14 @@ class StreamSettings extends React.Component {
             {t('configure.edit_comment_timeframe_text_post')}
           </p>
         </Card>
-        <Card className={`${styles.configSetting} ${styles.configSettingInfoBox}`}>
+        <Card className={cn(styles.card, styles.configSettingInfoBox)}>
           <div className={styles.action}>
             <Checkbox
               onChange={this.updateAutoClose}
               checked={settings.autoCloseStream} />
           </div>
           <div className={styles.content}>
-            <div className={styles.settingsHeader}>{t('configure.close_after')}</div>
+            <div className={styles.header}>{t('configure.close_after')}</div>
             <br />
             <Textfield
               type='number'