Design Pass

client/coral-admin/src/containers/ModerationQueue/ModerationContainer.js

@@ -76,6 +76,7 @@ class ModerationContainer extends Component {
         />
         <ModerationQueue
           data={data}
+          currentAsset={asset}
           activeTab={moderation.activeTab}
           enablePremodTab={enablePremodTab}
           suspectWords={settings.wordlist.suspect}

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

@@ -18,6 +18,7 @@ const ModerationQueue = props => {
             showBanUserDialog={props.showBanUserDialog}
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment}
+            currentAsset={props.currentAsset}
           />;
         })
       }

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

@@ -15,7 +15,6 @@ import translations from 'coral-admin/src/translations.json';
 
 const Comment = ({actions = [], ...props}) => {
   const links = linkify.getMatches(props.comment.body);
-
   return (
     <li tabIndex={props.index}
         className={`mdl-card mdl-shadow--2dp ${styles.Comment} ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
@@ -48,11 +47,11 @@ const Comment = ({actions = [], ...props}) => {
           : null}
         </div>
       </div>
-
-     <div className={styles.moderateArticle}>
-       {props.comment.asset.title} <Link to={`/admin/moderate/${props.comment.asset.id}`}>Moderate Article</Link>
-     </div>
-
+      {!props.currentAsset && (
+        <div className={styles.moderateArticle}>
+          Article: {props.comment.asset.title} <Link to={`/admin/moderate/${props.comment.asset.id}`}>Moderate Article</Link>
+        </div>
+      )}
       <div className={styles.itemBody}>
         <p className={styles.body}>
           <Linkify component='span' properties={{style: linkStyles}}>

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

@@ -6,7 +6,7 @@
 }
 
 .tabBar {
-  background: #262626;
+  background-color: rgba(44, 44, 44, 0.89);
   z-index: 5;
 }
 
@@ -73,7 +73,7 @@ span {
 }
 
 .header {
-  background-color: #3949AB;
+  background-color: #2c2c2c;
   color: white;
   margin-bottom: -1px;
 
@@ -156,6 +156,7 @@ span {
   padding: 16px 14px;
   position: relative;
   transition: box-shadow 200ms;
+  margin-top: 0;
 
 
   &:hover {
@@ -222,10 +223,11 @@ span {
   }
 
   .body {
-    margin-top: 20px;
+    margin-top: 0px;
     flex: 1;
     font-size: 0.88em;
     color: black;
+    max-width: 500px;
   }
 
   .flagged {
@@ -294,15 +296,16 @@ span {
 
 .Comment {
   .moderateArticle {
-    padding: 10px 0px;
+    font-size: 12px;
     a {
-      display: block;
+      display: inline-block;
       color: #679af3;
       text-decoration: none;
       font-size: 1em;
-      font-weight: 500;
+      font-weight: 400;
       letter-spacing: .5px;
-      font-size: .8em;
+      font-size: 12px;
+      margin-left: 10px;
 
       &:hover {
         text-decoration: underline;