From 1cc047d060f5666ae20c649f42ae1a0f038b2450 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 8 Jun 2016 18:06:16 +0200
Subject: [PATCH] Fix PieceListToolbar styling

---
 .../piece_list_toolbar.js                     | 45 ++++++++---------
 js/components/piece_list.js                   |  1 -
 sass/ascribe_custom_style.scss                |  8 ---
 sass/ascribe_piece_list_toolbar.scss          | 50 +++++++------------
 4 files changed, 38 insertions(+), 66 deletions(-)

diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
index bcc15603..b95a16ff 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
@@ -1,6 +1,7 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 
 import PieceListToolbarFilterWidget from './piece_list_toolbar_filter_widget';
 import PieceListToolbarOrderWidget from './piece_list_toolbar_order_widget';
@@ -43,30 +44,26 @@ let PieceListToolbar = React.createClass({
         const { className, children, searchFor, searchQuery } = this.props;
 
         return (
-            <div className={className}>
-                <div className="row">
-                    <div className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
-                        <div className="row">
-                            <span className="pull-left">
-                                {children}
-                            </span>
-                            <span className="pull-right">
-                                <PieceListToolbarOrderWidget
-                                    orderParams={this.props.orderParams}
-                                    orderBy={this.props.orderBy}
-                                    applyOrderBy={this.props.applyOrderBy}/>
-                                <PieceListToolbarFilterWidget
-                                    filterParams={this.props.filterParams}
-                                    filterBy={this.props.filterBy}
-                                    applyFilterBy={this.props.applyFilterBy} />
-                            </span>
-                            <SearchBar
-                                className="pull-right search-bar ascribe-input-glyph"
-                                searchFor={searchFor}
-                                searchQuery={searchQuery}
-                                threshold={AppConstants.searchThreshold}/>
-                        </div>
-                    </div>
+            <div className={classNames('row', className)}>
+                <div className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-piece-list-toolbar">
+                    <span className="pull-left">
+                        {children}
+                    </span>
+                    <span className="pull-right">
+                        <PieceListToolbarOrderWidget
+                            orderParams={this.props.orderParams}
+                            orderBy={this.props.orderBy}
+                            applyOrderBy={this.props.applyOrderBy}/>
+                        <PieceListToolbarFilterWidget
+                            filterParams={this.props.filterParams}
+                            filterBy={this.props.filterBy}
+                            applyFilterBy={this.props.applyFilterBy} />
+                    </span>
+                    <SearchBar
+                        className="pull-right search-bar ascribe-input-glyph"
+                        searchFor={searchFor}
+                        searchQuery={searchQuery}
+                        threshold={AppConstants.searchThreshold}/>
                 </div>
             </div>
         );
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 114585d7..98e3252d 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -290,7 +290,6 @@ const PieceList = React.createClass({
         return (
             <div>
                 <PieceListToolbar
-                    className="ascribe-piece-list-toolbar"
                     searchFor={this.searchFor}
                     searchQuery={this.state.search}
                     filterParams={filterParams}
diff --git a/sass/ascribe_custom_style.scss b/sass/ascribe_custom_style.scss
index d6e4872d..1312739d 100644
--- a/sass/ascribe_custom_style.scss
+++ b/sass/ascribe_custom_style.scss
@@ -241,14 +241,6 @@ fieldset[disabled] .btn-secondary.active {
     }
 }
 
-.open > .btn-default.dropdown-toggle:hover,
-.open > .btn-default.dropdown-toggle:focus,
-.open > .btn-default.dropdown-toggle.focus,
-.open > .btn-default.dropdown-toggle.dropdown-toggle {
-    background-color: darken($ascribe--button-secondary-fg-color, 20%);
-    border-color: darken($ascribe--button-secondary-fg-color, 20%);
-}
-
 .pager li > a,
 .pager li > span {
     background-color: $ascribe--button-default-color;
diff --git a/sass/ascribe_piece_list_toolbar.scss b/sass/ascribe_piece_list_toolbar.scss
index a83447fb..099afe07 100644
--- a/sass/ascribe_piece_list_toolbar.scss
+++ b/sass/ascribe_piece_list_toolbar.scss
@@ -1,8 +1,3 @@
-.ascribe-piece-list-toolbar {
-    padding-left: 15px;
-    padding-right: 15px;
-}
-
 .search-bar {
     max-width: 200px;
 
@@ -29,42 +24,31 @@
     }
 }
 
-.ascribe-piece-list-toolbar-widget {
-    button {
-        background-color: transparent;
-        border: 1px solid transparent;
-        color: $ascribe--button-default-color;
-        padding: 6px 4px 6px 8px;
+.ascribe-piece-list-toolbar-widget.dropdown-toggle.btn {
+    background-color: transparent;
+    border: 1px solid transparent;
+    box-shadow: none;
+    color: $ascribe--button-default-color;
+    padding: 6px 4px 6px 8px;
 
-        &:hover,
-        &:active {
-            background-color: $ascribe--button-default-color !important;
-            border-color: $ascribe--button-default-color !important;
-            color: white;
-        }
-        .caret {
-            display: none;
-        }
+    .open &,
+    &:hover,
+    &:active {
+        background-color: $ascribe--button-default-color !important;
+        border-color: $ascribe--button-default-color !important;
+        color: white;
     }
-
-    .ascribe-piece-list-toolbar-widget-item {
-        a {
-            padding-left: 0;
-            padding-right: 0;
-        }
+    .caret {
+        display: none;
     }
+}
 
+.ascribe-piece-list-toolbar-widget-item {
     .checkbox-line {
         height: 25px;
         position: relative;
         color: #333333;
 
-        /* Fuck you react-bootstrap */
-        &:hover {
-            background-color: $dropdown-link-hover-bg;
-            cursor: pointer;
-        }
-
         span {
             cursor: pointer;
             left: 9px;
@@ -81,7 +65,7 @@
         }
     }
 
-    .dropdown-menu {
+    .dropdown-menu & {
         min-width: 170px;
     }
 }