Label style, top level comments, no offtopic replies

client/coral-embed-stream/src/components/Comment.js

@@ -252,11 +252,13 @@ class Comment extends React.Component {
 
           <Slot
             fill="commentInfoBar"
-            data={this.props.data}
-            root={this.props.root}
+            depth={depth}
             comment={comment}
             commentId={comment.id}
+            data={this.props.data}
+            root={this.props.root}
             inline
+            right
           />
 
           { (currentUser &&

client/coral-framework/components/Slot.css

@@ -2,6 +2,10 @@
   display: inline-block;
 }
 
+.right {
+  float: right;
+}
+
 .debug {
   background-color: coral;
 }

client/coral-framework/components/Slot.js

@@ -4,9 +4,9 @@ import styles from './Slot.css';
 import {connect} from 'react-redux';
 import {getSlotElements} from 'coral-framework/helpers/plugins';
 
-function Slot ({fill, inline = false, plugin_config: config, ...rest}) {
+function Slot ({fill, inline = false, right = false, plugin_config: config, ...rest}) {
   return (
-    <div className={cn({[styles.inline]: inline, [styles.debug]: config.debug})}>
+    <div className={cn({[styles.inline]: inline, [styles.right]: right, [styles.debug]: config.debug})}>
       {getSlotElements(fill, {...rest, config})}
     </div>
   );

plugins/coral-plugin-offtopic/client/components/OffTopicCheckbox.js

@@ -22,10 +22,14 @@ class OffTopicCheckbox extends React.Component {
   render() {
     return (
       <div className={styles.offTopic}>
-        <label className={styles.offTopicLabel}>
-          <input type="checkbox" onChange={this.handleChange}/>
-          {t('off_topic')}
-        </label>
+        {
+          !this.props.isReply ? (
+            <label className={styles.offTopicLabel}>
+              <input type="checkbox" onChange={this.handleChange}/>
+              {t('off_topic')}
+            </label>
+          ) : null
+        }
       </div>
     );
   }

plugins/coral-plugin-offtopic/client/components/OffTopicFilter.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default (props) => (
+  <span>
+    Filter
+  </span>
+);

plugins/coral-plugin-offtopic/client/components/OffTopicTag.js

@@ -10,7 +10,7 @@ const isOffTopic = (tags) => {
 export default (props) => (
   <span>
     {
-      isOffTopic(props.comment.tags) ? (
+      isOffTopic(props.comment.tags) && props.depth === 0 ? (
         <span className={styles.tag}>
           {t('off_topic')}
         </span>

plugins/coral-plugin-offtopic/client/components/styles.css

@@ -8,7 +8,10 @@
 }
 
 .tag {
-  background: rgba(245, 188, 168, 0.6);
+  background: #3D73D5;
+  font-size: 12px;
+  font-weight: bold;
+  color: white;
   display: inline-block;
   margin: 0px 5px;
   padding: 5px 5px;