Design Comment Component

client/coral-admin/src/containers/ModerationQueue/components/Comment.js

@@ -6,9 +6,11 @@ import {Link} from 'react-router';
 
 import styles from './styles.css';
 import {Icon} from 'coral-ui';
-import ActionButton from '../../../components/ActionButton';
+
 import FlagBox from './FlagBox';
 import CommentType from './CommentType';
+import ActionButton from 'coral-admin/src/components/ActionButton';
+import BanUserButton from 'coral-admin/src/components/BanUserButton';
 
 const linkify = new Linkify();
 
@@ -29,6 +31,7 @@ const Comment = ({actions = [], ...props}) => {
           <span className={styles.created}>
               {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
             </span>
+          <BanUserButton user={props.comment.user} onClick={() => props.showBanUserDialog(props.comment.user, props.comment.id)} />
           <CommentType type={props.commentType} />
         </div>
         <div className={styles.sideActions}>
@@ -40,7 +43,6 @@ const Comment = ({actions = [], ...props}) => {
                             user={props.comment.user}
                             acceptComment={() => props.acceptComment({commentId: props.comment.id})}
                             rejectComment={() => props.rejectComment({commentId: props.comment.id})}
-                            showBanUserDialog={() => props.showBanUserDialog(props.comment.user, props.comment.id)}
               />
             )}
           </div>

client/coral-admin/src/containers/ModerationQueue/components/CommentType.css

@@ -1,7 +1,7 @@
 .commentType {
   position: absolute;
-  right: 5px;
-  top: 5px;
+  right: 15px;
+  top: 11px;
   color: white;
   background: grey;
   padding: 2px 13px;

client/coral-admin/src/containers/ModerationQueue/components/FlagBox.css

@@ -5,10 +5,30 @@
     padding: 0 14px;
   }
 
+  .detail {
+    padding: 0 20px 16px;
+    ul {
+      padding: 0;
+      list-style: none;
+      font-size: 12px;
+      font-weight: 500;
+    }
+  }
+
   .header {
     position: relative;
     .moreDetail {
       float: right;
+      font-size: 12px;
+      font-weight: 500;
+      margin-right: 10px;
+      margin-top: 8px;
+      color: black;
+
+      &:hover {
+        opacity: 0.9;
+        cursor: pointer;
+      }
     }
     i {
       vertical-align: middle;

client/coral-admin/src/containers/ModerationQueue/components/FlagBox.js

@@ -1,22 +1,47 @@
-import React, {PropTypes} from 'react';
+import React, {Component, PropTypes} from 'react';
 import {Icon} from 'coral-ui';
 import styles from './FlagBox.css';
 
-const FlagBox = props => (
-  <div className={styles.flagBox}>
-    <div className={styles.container}>
-      <div className={styles.header}>
-        <Icon name='flag'/><h3>Flags ({props.actionSummaries.length}):</h3>
-        <ul>
-          {props.actionSummaries.map((action, i) =>
-            <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
-          )}
-        </ul>
-        <span className={styles.moreDetail}></span>
+class FlagBox extends Component {
+  constructor () {
+    super();
+    this.state = {
+      showDetail: false
+    };
+  }
+
+  toggleDetail = () => {
+    this.setState((state) => ({
+      showDetail: !state.showDetail
+    }));
+  }
+
+  render() {
+    const {props} = this;
+    return (
+      <div className={styles.flagBox}>
+        <div className={styles.container}>
+          <div className={styles.header}>
+            <Icon name='flag'/><h3>Flags ({props.actionSummaries.length}):</h3>
+            <ul>
+              {props.actionSummaries.map((action, i) =>
+                <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
+              )}
+            </ul>
+            <a onClick={this.toggleDetail} className={styles.moreDetail}>More detail</a>
+          </div>
+          {this.state.showDetail && (<div className={styles.detail}>
+            <ul>
+              {props.actionSummaries.map((action, i) =>
+                <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
+              )}
+            </ul>
+          </div>)}
+        </div>
       </div>
-    </div>
-  </div>
-);
+    );
+  }
+}
 
 FlagBox.propTypes = {
   actionSummaries: PropTypes.array.isRequired

client/coral-admin/src/containers/ModerationQueue/components/styles.css

@@ -170,11 +170,12 @@ span {
   position: relative;
   transition: box-shadow 200ms;
   margin-top: 0;
-  padding: 20px 0 0;
-  min-height: 187px;
+  padding: 4px 0 0;
+  min-height: 220px;
 
   .container {
     padding: 0 14px;
+    min-height: 180px;
   }
 
   &:hover {
@@ -198,7 +199,7 @@ span {
      right: 0;
      height: 100%;
      top: 0;
-     padding: 40px 18px;
+     padding: 65px 12px;
      box-sizing: border-box;
    }