banUsers and moderate separate streams, not found assets etc

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

@@ -14,7 +14,6 @@ import translations from '../../../translations.json';
 
 const Comment = props => {
   const links = linkify.getMatches(props.body);
-
   return (
     <li tabIndex={props.index}
         className={`mdl-card mdl-shadow--2dp ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
@@ -50,14 +49,24 @@ const Comment = props => {
           : null}
         </div>
       </div>
+
+      {/* <div className={styles.itemBody}> */}
+        {/* Article title */}
+        {/* <a>Moderate this Article</a> */}
+      {/* </div> */}
+
       <div className={styles.itemBody}>
-        <span className={styles.body}>
+        <p className={styles.body}>
           <Linkify component='span' properties={{style: linkStyles}}>
             <Highlighter searchWords={props.suspectWords} textToHighlight={props.body}/>
           </Linkify>
-        </span>
+        </p>
       </div>
-      <span className={styles.context}><a>View context</a></span>
+
+      {/*  <span className={styles.context}> */}
+        {/* <a>View context</a> */}
+      {/* </span> */}
+
     </li>
   );
 };

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import {Link} from 'react-router';
+import styles from './styles.css';
+
+const ModerationHeader = props => (
+    <div className=''>
+      <div className={`mdl-tabs ${styles.header}`}>
+        {
+          props.asset ?
+            <div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
+              <Link className="mdl-tabs__tab" to="/admin/moderate">All Streams</Link>
+              <a className="mdl-tabs__tab">{props.asset.title}</a>
+              <Link className="mdl-tabs__tab" to="/admin/streams">Select Stream</Link>
+            </div>
+            :
+            <div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
+              <a className="mdl-tabs__tab" />
+              <a className="mdl-tabs__tab">All Streams</a>
+              <Link className="mdl-tabs__tab" to="/admin/streams">Select Stream</Link>
+            </div>
+        }
+      </div>
+    </div>
+);
+export default ModerationHeader;

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

@@ -5,7 +5,7 @@ import translations from '../../../translations.json';
 
 const lang = new I18n(translations);
 
-const ModerationQueueHeader = (props) => (
+const ModerationMenu = (props) => (
   <div className='mdl-tabs'>
     <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
       <a href='#all'
@@ -29,14 +29,6 @@ const ModerationQueueHeader = (props) => (
           </a>
           : null
       }
-      <a href='#account'
-         onClick={(e) => {
-           e.preventDefault();
-           props.onTabClick('account');
-         }}
-         className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'account' ? styles.active : ''}`}>
-        {lang.t('modqueue.account')}
-      </a>
       <a href='#rejected'
          onClick={(e) => {
            e.preventDefault();
@@ -59,9 +51,9 @@ const ModerationQueueHeader = (props) => (
   </div>
 );
 
-ModerationQueueHeader.propTypes = {
+ModerationMenu.propTypes = {
   activeTab: PropTypes.string.isRequired,
   enablePremodTab: PropTypes.bool
 };
 
-export default ModerationQueueHeader;
+export default ModerationMenu;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import {Link} from 'react-router';
+import styles from './styles.css';
+
+const NotFound = props => (
+  <div className={`mdl-card mdl-shadow--2dp ${styles.notFound}`}>
+    <p>
+      The provided asset id <Link to={`/admin/moderate/${props.assetId}`}>{props.assetId}</Link> does not exist.
+      <Link className={styles.goToStreams} to="/admin/streams">Go to Streams</Link>
+    </p>
+  </div>
+);
+
+export default NotFound;

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

@@ -1,3 +1,62 @@
+.notFound {
+  position: relative;
+  margin: 20px auto;
+  text-align: center;
+  padding: 68px 45px;
+  vertical-align: middle;
+  min-width: 500px;
+
+  a {
+    color: rgb(244, 126, 107);
+    font-weight: 500;
+
+    &.goToStreams {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+    }
+  }
+}
+
+.header {
+  background-color: #3949AB;
+  color: white;
+  margin-bottom: -1px;
+
+  .moderateAsset {
+    a {
+      -webkit-box-flex: 1;
+      -ms-flex: 1;
+      flex: 1;
+      color: white;
+      text-transform: capitalize;
+      font-weight: 500;
+      font-size: 15px;
+      letter-spacing: 1px;
+      transition: opacity 200ms;
+      opacity: 1;
+
+      &:hover {
+          opacity: .8;
+         cursor: pointer;
+      }
+
+      &:first-child {
+        text-align: left;
+      }
+
+      &:nth-child(2) {
+       text-align: center;
+      }
+
+      &:last-child {
+        text-align: right;
+      }
+    }
+  }
+}
+
+
 @custom-media --big-viewport (min-width: 780px);
 
 .list {