From fce1d60d091925af72e98bd6c3646eb9764c67e7 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Sat, 14 Oct 2017 00:06:18 +0700
Subject: [PATCH] Increase contrast in viewing options

---
 .../Moderation/components/ViewOptions.css       | 17 ++++++++++++++---
 .../routes/Moderation/components/ViewOptions.js |  5 +++--
 client/coral-ui/components/Dropdown.js          |  5 +++--
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css
index 406f29bf8..e5dfc8c01 100644
--- a/client/coral-admin/src/routes/Moderation/components/ViewOptions.css
+++ b/client/coral-admin/src/routes/Moderation/components/ViewOptions.css
@@ -53,10 +53,8 @@
   list-style: none;
 }
 
-.selectField {
+.dropdow {
   position: relative;
-  background: #7B7B7B;
-  color: white;
   margin-top: 5px;
 
   @media (--tablet) {
@@ -65,3 +63,16 @@
     margin-left: 10px;
   }
 }
+
+.dropdownToggle {
+  background: #7B7B7B;
+  color: white;
+
+  &:focus {
+    background: #aaa;
+  }
+}
+
+.dropdownToggleOpen {
+  background: #aaa;
+}
diff --git a/client/coral-admin/src/routes/Moderation/components/ViewOptions.js b/client/coral-admin/src/routes/Moderation/components/ViewOptions.js
index 799ab519f..c46b7f869 100644
--- a/client/coral-admin/src/routes/Moderation/components/ViewOptions.js
+++ b/client/coral-admin/src/routes/Moderation/components/ViewOptions.js
@@ -18,12 +18,13 @@ class ViewOptions extends React.Component {
         <h2 className={cn(styles.headline, 'talk-admin-moderation-view-options-headline')}>
           View Options
         </h2>
-        <div className={styles.viewOptionsContent}> 
+        <div className={styles.viewOptionsContent}>
           <ul className={styles.viewOptionsList}>
             <li className={styles.viewOptionsItem}>
               Sort Comments
               <Dropdown
-                className={styles.selectField}
+                toggleClassName={styles.dropdownToggle}
+                toggleOpenClassName={styles.dropdownToggleOpen}
                 placeholder={t('modqueue.sort')}
                 value={sort}
                 onChange={(sort) => selectSort(sort)}>
diff --git a/client/coral-ui/components/Dropdown.js b/client/coral-ui/components/Dropdown.js
index e248cbab6..97467b49b 100644
--- a/client/coral-ui/components/Dropdown.js
+++ b/client/coral-ui/components/Dropdown.js
@@ -128,12 +128,12 @@ class Dropdown extends React.Component {
   }
 
   render() {
-    const {className, toggleClassName} = this.props;
+    const {className, toggleClassName, toggleOpenClassName} = this.props;
     return (
       <ClickOutside onClickOutside={this.hideMenu}>
         <div className={cn(styles.dropdown, className)}>
           <div
-            className={cn(styles.toggle, toggleClassName, {[styles.toggleOpen]: this.state.isOpen})}
+            className={cn(styles.toggle, toggleClassName, {[cn(this.state.isOpen, toggleOpenClassName)]: this.state.isOpen})}
             onClick={this.handleClick}
             onKeyDown={this.handleKeyDown}
             role="button"
@@ -172,6 +172,7 @@ class Dropdown extends React.Component {
 Dropdown.propTypes = {
   className: PropTypes.string,
   toggleClassName: PropTypes.string,
+  toggleOpenClassName: PropTypes.string,
   placeholder: PropTypes.string,
   icon: PropTypes.string,
   onChange: PropTypes.func.isRequired,