From fc1290b614eeda0f99bb857b1a264dc0fc344674 Mon Sep 17 00:00:00 2001
From: madelinegr <monika_hedman@brown.edu>
Date: Tue, 11 Jun 2019 15:28:51 -0400
Subject: big icon changes coming

---
 src/client/views/search/SearchBox.tsx  | 1 +
 src/client/views/search/ToggleBar.scss | 4 ++++
 src/client/views/search/ToggleBar.tsx  | 6 ++++--
 3 files changed, 9 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 836062af6..e9146a6d1 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -255,6 +255,7 @@ export class SearchBox extends React.Component {
                                 temp for filtering where in doc the keywords are found
                             </div>
                         </div>
+                        <button className = "reset-filter">Reset Filters</button>
                     </div>
                 ) : undefined}
             </div>
diff --git a/src/client/views/search/ToggleBar.scss b/src/client/views/search/ToggleBar.scss
index cccbf30fc..caae354ee 100644
--- a/src/client/views/search/ToggleBar.scss
+++ b/src/client/views/search/ToggleBar.scss
@@ -12,6 +12,10 @@
     .toggle-option{
         width: 100px;
         text-align: center;
+        -webkit-transition: all 0.2s ease-in-out;
+    -moz-transition: all 0.2s ease-in-out;
+    -o-transition: all 0.2s ease-in-out;
+    transition: all 0.2s ease-in-out;
     }
 }
 
diff --git a/src/client/views/search/ToggleBar.tsx b/src/client/views/search/ToggleBar.tsx
index f3a1a3171..7dbb3b767 100644
--- a/src/client/views/search/ToggleBar.tsx
+++ b/src/client/views/search/ToggleBar.tsx
@@ -19,6 +19,7 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
     @observable forwardTimeline: anime.AnimeTimelineInstance;
     @observable _toggleButton: React.RefObject<HTMLDivElement>;
     @observable _originalStatus: boolean = this.props.originalStatus;
+    @observable _curStatus: boolean = this.props.originalStatus;
 
     constructor(props: ToggleBarProps) {
         super(props);
@@ -69,6 +70,7 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
 
     @action.bound
     onclick() {
+        this._curStatus = !this._curStatus;
         this.forwardTimeline.play();
         this.forwardTimeline.reverse();
         this.props.changeStatus();
@@ -78,8 +80,8 @@ export class ToggleBar extends React.Component<ToggleBarProps>{
         return (
             <div>
                 <div className="toggle-title">
-                    <div className="toggle-option">{this.props.optionOne}</div>
-                    <div className="toggle-option">{this.props.optionTwo}</div>
+                    <div className="toggle-option" style = {{ opacity: (this._curStatus ? 1:.4)}}>{this.props.optionOne}</div>
+                    <div className="toggle-option" style = {{ opacity: (this._curStatus ? .4:1)}}>{this.props.optionTwo}</div>
                 </div>
                 <div className="toggle-bar" id="toggle-bar" style={{ flexDirection: (this._originalStatus ? "row" : "row-reverse") }}>
                     <div className="toggle-button" id="toggle-button" ref={this._toggleButton} onClick={this.onclick} />
-- 
cgit v1.2.3-70-g09d2