From 6aad4411d9e34dcd6961ad8197a8bbd27d91705c Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 11 Apr 2017 11:57:08 -0300
Subject: [PATCH] Styling for plugins

---
 client/coral-plugin-commentbox/CommentBox.js    |  2 +-
 .../client/components/OffTopicCheckbox.js       |  2 +-
 .../client/components/OffTopicTag.js            |  1 -
 .../client/components/styles.css                | 17 +++++++++++------
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js
index 2592614cc..5ba952d4d 100644
--- a/client/coral-plugin-commentbox/CommentBox.js
+++ b/client/coral-plugin-commentbox/CommentBox.js
@@ -104,8 +104,8 @@ class CommentBox extends Component {
             `${charCount - length} ${lang.t('characters-remaining')}`
           }
         </div>
-        <Slot fill="commentBoxDetail" inline />
         <div className={`${name}-button-container`}>
+          <Slot fill="commentBoxDetail" inline />
           {
             isReply && (
               <Button
diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js
index d713fba3f..4bff73bae 100644
--- a/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js
+++ b/plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js
@@ -9,7 +9,7 @@ class OffTopicCheckbox extends React.Component {
 
   render() {
     return (
-      <div className={`wapo-styles-offtopic ${styles.offTopic}`}>
+      <div className={styles.offTopic}>
         <label>
           <input type="checkbox" onChange={this.handleChange}/>
           Off-Topic
diff --git a/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js b/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js
index 83ba00dec..3e045414a 100644
--- a/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js
+++ b/plugins/coral-plugin-offtopic/client/components/OffTopicTag.js
@@ -3,7 +3,6 @@ import styles from './styles.css';
 
 export default (props) => (
   <span className={styles.tag}>
-    {console.log('Offtopic tag', props.offtopic)}
     Off-topic
   </span>
 );
diff --git a/plugins/coral-plugin-offtopic/client/components/styles.css b/plugins/coral-plugin-offtopic/client/components/styles.css
index e33a7484e..feb50160b 100644
--- a/plugins/coral-plugin-offtopic/client/components/styles.css
+++ b/plugins/coral-plugin-offtopic/client/components/styles.css
@@ -1,13 +1,18 @@
 .offTopic {
-  label {
-    padding: 10px 20px;
-  }
+  height: 100%;
+}
+
+.offTopic label {
+  padding: 10px 20px;
+  display: block;
 }
 
 .tag {
-  padding: 0 12px;
-  background: coral;
-  border-radius: 3px;
+  background: rgba(245, 188, 168, 0.6);
+  display: inline-block;
+  margin: 0px 5px;
+  padding: 5px 5px;
+  border-radius: 2px;
 }