From 89b560153d6cb987602a13397c019845143ee70d Mon Sep 17 00:00:00 2001
From: madelinegr <monika_hedman@brown.edu>
Date: Mon, 10 Jun 2019 15:33:18 -0400
Subject: ui working nicely

---
 src/client/views/SearchBox.tsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
index c2ac0c06c..812876d14 100644
--- a/src/client/views/SearchBox.tsx
+++ b/src/client/views/SearchBox.tsx
@@ -68,19 +68,34 @@ export class IconBar extends React.Component<IconBarProps> {
 
     onClick = (value: string) => {
         let oldIcons = this.props.getIcons()
-        if (value === "none") {
+        if (value === DocTypes.NONE) {
             this.newIcons = [value];
+            //if its none, change the color of all the other circles
+            document.querySelectorAll<HTMLDivElement>(".type-icon").forEach(node => {
+                if (node.id === "none") {
+                    node.style.backgroundColor = "#c2c2c5";
+                }
+                else {
+                    node.style.backgroundColor = "#121721";
+                }
+            }
+            );
         }
         else {
+            //turns "none" button off
+            let noneDoc = document.getElementById(DocTypes.NONE)
+            if(noneDoc){
+                noneDoc.style.backgroundColor = "#121721";
+            }
             if (oldIcons.includes(value)) {
                 this.newIcons = _.remove(oldIcons, value);
                 if (this.newIcons.length === 0) {
-                    this.newIcons = ["none"];
+                    this.newIcons = [DocTypes.NONE];
                 }
             }
             else {
                 this.newIcons = oldIcons;
-                if (this.newIcons.length === 1 && this.newIcons[0] === "none") {
+                if (this.newIcons.length === 1 && this.newIcons[0] === DocTypes.NONE) {
                     this.newIcons = [value]
                 }
                 else { this.newIcons.push(value); }
@@ -95,7 +110,7 @@ export class IconBar extends React.Component<IconBarProps> {
         return (
             <div>
                 <div className="icon-bar">
-                    <div className="type-icon"
+                    <div className="type-icon" id="none"
                         onClick={() => { this.onClick(DocTypes.NONE) }}>
                         <FontAwesomeIcon className="fontawesome-icon" style={{ order: -2 }} icon={faBan} />
                     </div>
@@ -297,7 +312,6 @@ export class SearchBox extends React.Component {
         }
         //not in either, close both
         else {
-            console.log("not either")
             this._resultsOpen = false;
             this._open = false;
         }
-- 
cgit v1.2.3-70-g09d2