Styling for plugins

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

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

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>
 );

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;
 }