Styles and refactor errors

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

@@ -1,6 +1,6 @@
 
 import React from 'react';
-import {Button, Icon} from 'react-mdl';
+import {FABButton, Icon} from 'react-mdl';
 import timeago from 'timeago.js';
 import styles from './CommentList.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
@@ -14,7 +14,7 @@ export default props => {
   const links = linkify.getMatches(props.comment.get('body'));
 
   return (
-    <li tabindex={props.index} className={`${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
+    <li tabIndex={props.index} className={`${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
       <div className={styles.itemHeader}>
         <div className={styles.author}>
           <i className={`material-icons ${styles.avatar}`}>person</i>
@@ -26,12 +26,13 @@ export default props => {
           {links ?
           <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
           <div className={styles.actions}>
-            {props.actions.map(action => canShowAction(action, props.comment) ? (
-              <Button className={styles.actionButton}
+            {props.actions.map((action, i) => canShowAction(action, props.comment) ? (
+              <FABButton className={styles.actionButton}
+                key={i}
                 onClick={() => props.onClickAction(props.actionsMap[action].status, props.comment.get('id'))}
-                fab colored>
+                colored ripple>
                 <Icon name={props.actionsMap[action].icon} />
-              </Button>
+              </FABButton>
             ) : null)}
           </div>
         </div>

client/coral-admin/src/components/CommentList.js

@@ -112,15 +112,15 @@ export default class CommentList extends React.Component {
   }
 
   render () {
-    const {singleView, commentIds, comments, hideActive} = this.props;
+    const {singleView, commentIds, comments, hideActive, key} = this.props;
     const {active} = this.state;
 
     return (
-      <ul className={`${styles.list} ${singleView ? styles.singleView : ''}`}>
+      <ul className={`${styles.list} ${singleView ? styles.singleView : ''}`} {...key}>
         {commentIds.map((commentId, index) => (
           <Comment comment={comments.get(commentId)}
             ref={el => { if (el && commentId === active) { this._active = el; } }}
-            key={`${index  }comment`}
+            key={index}
             index={index}
             onClickAction={this.onClickAction}
             actions={this.props.actions}

client/coral-admin/src/components/ui/Header.css

@@ -2,3 +2,20 @@
     background: #505050;
     overflow: hidden;
 }
+
+.header > div {
+    position: relative;
+    padding: 0;
+    width: 1170px;
+    margin: 0 auto;
+}
+
+.active {
+    background: #232323;
+}
+
+.version {
+    position: absolute;
+    right: 0;
+    width: 50px;
+}

client/coral-admin/src/components/ui/Header.js

@@ -10,13 +10,13 @@ export default () => (
   <Header className={styles.header}>
     <Logo />
     <Navigation>
-      <IndexLink className={styles.navLink} to="/admin" activeClassName="active">{lang.t('configure.moderate')}</IndexLink>
-      <Link className={styles.navLink} to="/admin/community" activeClassName="active">{lang.t('configure.community')}</Link>
-      <Link className={styles.navLink} to="/admin/configure" activeClassName="active">{lang.t('configure.configure')}</Link>
-      <span>
-        {`v${process.env.VERSION}`}
-      </span>
+      <IndexLink className={styles.navLink} to="/admin" activeClassName={styles.active}>{lang.t('configure.moderate')}</IndexLink>
+      <Link className={styles.navLink} to="/admin/community" activeClassName={styles.active}>{lang.t('configure.community')}</Link>
+      <Link className={styles.navLink} to="/admin/configure" activeClassName={styles.active}>{lang.t('configure.configure')}</Link>
     </Navigation>
+    <div className={styles.version}>
+      {`v${process.env.VERSION}`}
+    </div>
   </Header>
 );