Increase contrast in viewing options

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;
+}

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)}>

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,