From 6a5f667336d7a382e8bc5458af0fdf04f05ab803 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 22 Mar 2017 13:20:26 -0300
Subject: [PATCH] hover, menu order

---
 .../coral-admin/src/components/ui/Header.css  |  6 ++-
 .../components/ModerationMenu.js              | 48 +++++++++++++------
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/client/coral-admin/src/components/ui/Header.css b/client/coral-admin/src/components/ui/Header.css
index e30cb46d7..eba94d892 100644
--- a/client/coral-admin/src/components/ui/Header.css
+++ b/client/coral-admin/src/components/ui/Header.css
@@ -74,8 +74,12 @@
   background-color: transparent;
   transition: background-color 200ms;
 
+  &:hover {
+    background-color: #232323;
+  }
+
   &.active {
-     background-color: #232323;
+    background-color: #232323;
   }
 }
 
diff --git a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
index b8160e21b..e428f6a52 100644
--- a/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
+++ b/client/coral-admin/src/containers/ModerationQueue/components/ModerationMenu.js
@@ -1,35 +1,53 @@
-import React, {PropTypes} from 'react';
+import React, { PropTypes } from 'react';
 import CommentCount from './CommentCount';
 import styles from './styles.css';
-import {SelectField, Option} from 'react-mdl-selectfield';
+import { SelectField, Option } from 'react-mdl-selectfield';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations.json';
-import {Link} from 'react-router';
+import { Link } from 'react-router';
 
 const lang = new I18n(translations);
 
-const ModerationMenu = ({asset, premodCount, rejectedCount, flaggedCount, selectSort, sort}) => {
-  const premodPath = asset ? `/admin/moderate/premod/${asset.id}` : '/admin/moderate/premod';
-  const rejectPath = asset ? `/admin/moderate/rejected/${asset.id}` : '/admin/moderate/rejected';
-  const flagPath = asset ? `/admin/moderate/flagged/${asset.id}` : '/admin/moderate/flagged';
+const ModerationMenu = (
+  { asset, premodCount, rejectedCount, flaggedCount, selectSort, sort }
+) => {
+  const premodPath = asset
+    ? `/admin/moderate/premod/${asset.id}`
+    : '/admin/moderate/premod';
+  const rejectPath = asset
+    ? `/admin/moderate/rejected/${asset.id}`
+    : '/admin/moderate/rejected';
+  const flagPath = asset
+    ? `/admin/moderate/flagged/${asset.id}`
+    : '/admin/moderate/flagged';
+
   return (
-    <div className='mdl-tabs'>
+    <div className="mdl-tabs">
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
-        <div className={styles.tabBarPadding}/>
+        <div className={styles.tabBarPadding} />
         <div>
-          <Link to={premodPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+          <Link
+            to={premodPath}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
             {lang.t('modqueue.premod')} <CommentCount count={premodCount} />
           </Link>
-          <Link to={rejectPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
-            {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
-          </Link>
-          <Link to={flagPath} className={`mdl-tabs__tab ${styles.tab}`} activeClassName={styles.active}>
+          <Link
+            to={flagPath}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
             {lang.t('modqueue.flagged')} <CommentCount count={flaggedCount} />
           </Link>
+          <Link
+            to={rejectPath}
+            className={`mdl-tabs__tab ${styles.tab}`}
+            activeClassName={styles.active}>
+            {lang.t('modqueue.rejected')} <CommentCount count={rejectedCount} />
+          </Link>
         </div>
         <SelectField
           className={styles.selectField}
-          label='Sort'
+          label="Sort"
           value={sort}
           onChange={sort => selectSort(sort)}>
           <Option value={'REVERSE_CHRONOLOGICAL'}>Newest First</Option>