From bf70d94b36cfe38be78ff9935ffecdbe354f1a28 Mon Sep 17 00:00:00 2001
From: vellichora <fangrui_tong@brown.edu>
Date: Wed, 11 Mar 2020 15:53:41 -0400
Subject: more css

---
 src/client/views/search/FilterBox.tsx  |  2 +-
 src/client/views/search/SearchBox.scss | 11 +++++------
 src/client/views/search/SearchBox.tsx  |  9 ++++-----
 3 files changed, 10 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/client/views/search/FilterBox.tsx b/src/client/views/search/FilterBox.tsx
index 684f50766..432e18b22 100644
--- a/src/client/views/search/FilterBox.tsx
+++ b/src/client/views/search/FilterBox.tsx
@@ -387,7 +387,7 @@ export class FilterBox extends React.Component {
                     {/* {this.getActiveFilters()} */}
                 </div>
                 {this._filterOpen ? (
-                    <div className="filter-form" onPointerDown={this.stopProp} id="filter-form" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
+                    <div className="filter-form" onPointerDown={this.stopProp} id="filter-form" style={this._filterOpen ? { display: "flex", background: "black" } : { display: "none" }}>
                         <div className="top-filter-header" style={{ display: "flex", width: "100%" }}>
                             <div id="header">Filter Search Results</div>
                             <div style={{ marginLeft: "auto" }}></div>
diff --git a/src/client/views/search/SearchBox.scss b/src/client/views/search/SearchBox.scss
index 11f5e4d91..176ed646d 100644
--- a/src/client/views/search/SearchBox.scss
+++ b/src/client/views/search/SearchBox.scss
@@ -10,6 +10,7 @@
     font-size: 10px;
     line-height: 1;
     overflow: hidden;
+    background: lightgrey,
 }
 
 .searchBox-bar {
@@ -18,7 +19,6 @@
     justify-content: flex-end;
     align-items: center;
     padding-left: 2px;
-    padding-right: 2px;
 
     .searchBox-barChild {
 
@@ -34,8 +34,7 @@
             -webkit-transition: width 0.4s;
             transition: width 0.4s;
             align-self: stretch;
-            margin-left: 2px;
-            margin-right: 2px
+
         }
 
         .searchBox-input:focus {
@@ -89,12 +88,12 @@
 
 .filter-form {
     position: relative;
-    right: 1px;
-    color: grey;
+    background: black;
     flex-direction: column;
     transform-origin: top;
     border-bottom: solid grey 1px;
-    margin: 5px;
+    padding: 5px;
+    transition: height 0.5s ease, display 0.5s ease;
 
     .filter-header {
         display: flex;
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 1025629d5..4f0ca5709 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -391,14 +391,13 @@ export class SearchBox extends React.Component {
                 </div>
 
                 <div className="filter-form" style={this._filterOpen ? { display: "flex" } : { display: "none" }}>
-                    <div className="filter-header">
-                        <button className="filter-item" onClick={this.handleWordQueryChange}>Keywords</button>
-                        <button className="filter-item" onClick={this.handleKeyChange}>Keys</button>
-                        <button className="filter-item" onClick={this.handleNodeChange}>Nodes</button>
+                    <div className="filter-header" style={this._filterOpen ? {} : { display: "none" }}>
+                        <button className="filter-item" style={this._basicWordStatus ? { background: "#aaaaa3", } : {}} onClick={this.handleWordQueryChange}>Keywords</button>
+                        <button className="filter-item" style={this._keyStatus ? { background: "#aaaaa3" } : {}} onClick={this.handleKeyChange}>Keys</button>
+                        <button className="filter-item" style={this._nodeStatus ? { background: "#aaaaa3" } : {}} onClick={this.handleNodeChange}>Nodes</button>
                     </div>
                     <div className="filter-body" style={this._nodeStatus ? { display: "flex" } : { display: "none" }}>
                         <IconBar />
-
                     </div>
                     <div style={this._keyStatus ? { display: "flex" } : { display: "none" }}>
 
-- 
cgit v1.2.3-70-g09d2