From a4e6638217cc4ad0c36ceeeef5036511effb0b5d Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Tue, 10 Jan 2017 10:55:03 -0300
Subject: [PATCH] Tab bar, removing extra mdl js. It adds more events

---
 .../coral-admin/src/components/ui/Header.css  |  1 +
 .../ModerationQueue/ModerationQueue.css       | 21 ++++++++++++++++++-
 .../ModerationQueue/ModerationQueue.js        | 17 ++++++++-------
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/client/coral-admin/src/components/ui/Header.css b/client/coral-admin/src/components/ui/Header.css
index 22774baef..2073bd68a 100644
--- a/client/coral-admin/src/components/ui/Header.css
+++ b/client/coral-admin/src/components/ui/Header.css
@@ -1,6 +1,7 @@
 .header {
   background-color: transparent;
   box-shadow: none;
+  min-height: 58px;
 }
 
 .header > div {
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.css b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.css
index 802fb88be..339672a3b 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.css
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.css
@@ -6,12 +6,31 @@
 }
 
 .tabBar {
-  background: #9E9E9E;
+  background: #262626;
+  z-index: 5;
 }
 
 .tab {
   flex: 1;
   color: white;
+  text-transform: capitalize;
+  font-weight: 500;
+  font-size: 15px;
+  letter-spacing: 1px;
+}
+
+.active {
+  color: white;
+  box-sizing: border-box;
+  border-bottom: solid 5px #F36451;
+}
+
+.active > span {
+  color: white;
+}
+
+.active:after {
+  background: transparent !important;
 }
 
 .showShortcuts {
diff --git a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
index 55a2e705e..585760bf4 100644
--- a/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
+++ b/client/coral-admin/src/containers/ModerationQueue/ModerationQueue.js
@@ -12,14 +12,17 @@ const lang = new I18n(translations);
 
 export default ({onTabClick, ...props}) => (
   <div>
-    <div className='mdl-tabs mdl-js-tabs mdl-js-ripple-effect'>
+    <div className='mdl-tabs'>
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
-        <a href='#pending' onClick={() => onTabClick('pending')}
-           className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.pending')}</a>
-        <a href='#rejected' onClick={() => onTabClick('rejected')}
-           className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.rejected')}</a>
-        <a href='#flagged' onClick={() => onTabClick('flagged')}
-           className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.flagged')}</a>
+        <a href='#pending' onClick={() => onTabClick('pending')} className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'pending' ? styles.active : ''}`}>
+          {lang.t('modqueue.pending')}
+        </a>
+        <a href='#rejected' onClick={() => onTabClick('rejected')} className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'rejected' ? styles.active : ''}`}>
+          {lang.t('modqueue.rejected')}
+        </a>
+        <a href='#flagged' onClick={() => onTabClick('flagged')} className={`mdl-tabs__tab ${styles.tab} ${props.activeTab === 'flagged' ? styles.active : ''}`}>
+          {lang.t('modqueue.flagged')}
+        </a>
       </div>
       <div className={`mdl-tabs__panel is-active ${styles.listContainer}`} id='pending'>
         <CommentList