From 0434ecf7552abe100911962645f8837f78627e50 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 9 Oct 2017 22:58:58 +0700
Subject: [PATCH] Refactor Wordlist styles

---
 .../routes/Configure/components/Wordlist.css    | 17 +++++++++++++++++
 .../src/routes/Configure/components/Wordlist.js | 14 +++++++-------
 2 files changed, 24 insertions(+), 7 deletions(-)
 create mode 100644 client/coral-admin/src/routes/Configure/components/Wordlist.css

diff --git a/client/coral-admin/src/routes/Configure/components/Wordlist.css b/client/coral-admin/src/routes/Configure/components/Wordlist.css
new file mode 100644
index 000000000..a1667e5ce
--- /dev/null
+++ b/client/coral-admin/src/routes/Configure/components/Wordlist.css
@@ -0,0 +1,17 @@
+.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%;
+}
diff --git a/client/coral-admin/src/routes/Configure/components/Wordlist.js b/client/coral-admin/src/routes/Configure/components/Wordlist.js
index acc4382bb..9522d9c3e 100644
--- a/client/coral-admin/src/routes/Configure/components/Wordlist.js
+++ b/client/coral-admin/src/routes/Configure/components/Wordlist.js
@@ -1,15 +1,15 @@
 import React from 'react';
 import t from 'coral-framework/services/i18n';
 import TagsInput from 'coral-admin/src/components/TagsInput';
-import styles from './Configure.css';
+import styles from './Wordlist.css';
 import PropTypes from 'prop-types';
 import {Card} from 'coral-ui';
 
 const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
   <div>
-    <Card id={styles.bannedWordlist} className={styles.configSetting}>
-      <div className={styles.settingsHeader}>{t('configure.banned_words_title')}</div>
-      <p className={styles.wordlistDesc}>{t('configure.banned_word_text')}</p>
+    <Card className={styles.card}>
+      <div className={styles.header}>{t('configure.banned_words_title')}</div>
+      <p>{t('configure.banned_word_text')}</p>
       <div className={styles.wrapper}>
         <TagsInput
           value={bannedWords}
@@ -18,9 +18,9 @@ const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
         />
       </div>
     </Card>
-    <Card id={styles.suspectWordlist} className={styles.configSetting}>
-      <div className={styles.settingsHeader}>{t('configure.suspect_word_title')}</div>
-      <p className={styles.wordlistDesc}>{t('configure.suspect_word_text')}</p>
+    <Card className={styles.card}>
+      <div className={styles.header}>{t('configure.suspect_word_title')}</div>
+      <p>{t('configure.suspect_word_text')}</p>
       <div className={styles.wrapper}>
         <TagsInput
           value={suspectWords}