Tab bar, removing extra mdl js. It adds more events

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

@@ -1,6 +1,7 @@
 .header {
   background-color: transparent;
   box-shadow: none;
+  min-height: 58px;
 }
 
 .header > div {

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 {

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