From 449a6f67f1fd155aee7affa120fe740d77310688 Mon Sep 17 00:00:00 2001
From: riley <riley.davis@gmail.com>
Date: Mon, 17 Apr 2017 15:37:00 -0600
Subject: [PATCH] add some tab icons

---
 .../ModerationQueue/components/ModerationMenu.js         | 9 +++++----
 .../src/containers/ModerationQueue/components/styles.css | 5 +++++
 client/coral-ui/components/Icon.js                       | 6 +++++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
index dfeb4f4b1..032aa740e 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
@@ -4,6 +4,7 @@ import styles from './styles.css';
 import {SelectField, Option} from 'react-mdl-selectfield';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations.json';
+import {Icon} from 'coral-ui';
 import {Link} from 'react-router';
 
 const lang = new I18n(translations);
@@ -25,25 +26,25 @@ const ModerationMenu = (
             to={getPath('all')}
             className={`mdl-tabs__tab ${styles.tab}`}
             activeClassName={styles.active}>
-            {lang.t('modqueue.all')} <CommentCount count={allCount} />
+            <Icon name='question_answer' className={styles.tabIcon} /> {lang.t('modqueue.all')} <CommentCount count={allCount} />
           </Link>
           <Link
             to={getPath('premod')}
             className={`mdl-tabs__tab ${styles.tab}`}
             activeClassName={styles.active}>
-            {lang.t('modqueue.premod')} <CommentCount count={premodCount} />
+            <Icon name='access_time' className={styles.tabIcon} /> {lang.t('modqueue.premod')} <CommentCount count={premodCount} />
           </Link>
           <Link
             to={getPath('flagged')}
             className={`mdl-tabs__tab ${styles.tab}`}
             activeClassName={styles.active}>
-            {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
+            <Icon name='flag' className={styles.tabIcon} /> {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
           </Link>
           <Link
             to={getPath('rejected')}
             className={`mdl-tabs__tab ${styles.tab}`}
             activeClassName={styles.active}>
-            {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
+            <Icon name='close' className={styles.tabIcon} /> {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
           </Link>
         </div>
         <SelectField
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/styles.css b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
index 51086dfd4..a22fbbc64 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/styles.css
+++ b/client/coral-admin/src/containers/ModerationQueue/components/styles.css
@@ -418,3 +418,8 @@ span {
 .loadMore:hover {
   background-color: #4399FF;
 }
+
+.tabIcon {
+  position: relative;
+  top: 7px;
+}
diff --git a/client/coral-ui/components/Icon.js b/client/coral-ui/components/Icon.js
index 11432c753..b7c49a799 100644
--- a/client/coral-ui/components/Icon.js
+++ b/client/coral-ui/components/Icon.js
@@ -1,8 +1,12 @@
-import React from 'react';
+import React, {PropTypes} from 'react';
 import {Icon as IconMDL}  from 'react-mdl';
 
 const Icon = ({className = '', name}) => (
   <IconMDL className={className} name={name} />
 );
 
+Icon.propTypes = {
+  name: PropTypes.string.isRequired
+};
+
 export default Icon;