Adding single view and restyling selected comment.

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

@@ -109,6 +109,7 @@ class ModerationContainer extends Component {
           currentAsset={asset}
           comments={comments}
           activeTab={activeTab}
+          singleView={moderation.singleView}
           selectedIndex={this.state.selectedIndex}
           suspectWords={settings.wordlist.suspect}
           showBanUserDialog={props.showBanUserDialog}

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

@@ -1,15 +1,16 @@
 import React, {PropTypes} from 'react';
 
 import Comment from './components/Comment';
+import styles from './components/styles.css';
 import EmptyCard from '../../components/EmptyCard';
 import {actionsMap} from './helpers/moderationQueueActionsMap';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations';
 
 const lang = new I18n(translations);
-const ModerationQueue = ({comments, selectedIndex, ...props}) => {
+const ModerationQueue = ({comments, selectedIndex, singleView, ...props}) => {
   return (
-    <div id="moderationList">
+    <div id="moderationList" className={`${styles.list} ${singleView ? styles.singleView : ''}`}>
       <ul style={{paddingLeft: 0}}>
       {
         comments.length

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

@@ -22,7 +22,7 @@ const Comment = ({actions = [], ...props}) => {
   const actionSummaries = props.comment.action_summaries;
   return (
     <li tabIndex={props.index}
-        className={`mdl-card mdl-shadow--2dp ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
+        className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''}`}>
       <div className={styles.container}>
         <div className={styles.itemHeader}>
         <div className={styles.author}>

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

@@ -136,7 +136,7 @@ span {
     display: none;
   }
 
-  &.singleView .listItem.activeItem {
+  &.singleView .listItem.selected {
     display: block;
     height: 100%;
     font-size: 1.5em;
@@ -187,7 +187,8 @@ span {
   }
 
   &.selected {
-    box-shadow: 0px 0px 15px 5px rgb(255, 255, 111);
+    max-width: 670px;
+    max-height: 410px;
   }
 
   .context {