2 files changed, 69 insertions, 8 deletions

diff --git a/src/client/views/search/CheckBox.scss b/src/client/views/search/CheckBox.scss
index 8eee9176b..f7652d830 100644
--- a/src/client/views/search/CheckBox.scss
+++ b/src/client/views/search/CheckBox.scss
@@ -1,8 +1,15 @@
-@import "../globalCssVariables";    
+@import "../globalCssVariables";
 
 .checkbox {
     display: flex;
 
+    .outer {
+        display: flex;
+        position: relative;
+        justify-content: center;
+        align-items: center;
+    }
+
     .check-box {
         z-index: 900;
         position: relative;
@@ -15,13 +22,20 @@
         border-width: 2px;
     }
 
+    .check-container {
+        width: 40px;
+        height: 40px;
+        position: absolute;
+        z-index: 1000;
+    }
+
     .box:hover {
         background-color: $intermediate-color;
     }
 
     .checkmark {
         z-index: 1000;
-        position: relative;
+        position: absolute;
         fill-opacity: 0;
         stroke-width: 4px;
         stroke: white;
@@ -31,4 +45,5 @@
 
 .checkbox-title {
     text-transform: uppercase;
+    margin-left: 10px;
 }
\ No newline at end of file
diff --git a/src/client/views/search/CheckBox.tsx b/src/client/views/search/CheckBox.tsx
index 8b5f7d7c1..ace479c70 100644
--- a/src/client/views/search/CheckBox.tsx
+++ b/src/client/views/search/CheckBox.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { observer } from 'mobx-react';
 import { observable, action, runInAction } from 'mobx';
 import "./CheckBox.scss";
+import * as anime from 'animejs';
 
 interface CheckBoxProps {
     originalStatus: boolean;
@@ -11,27 +12,72 @@ interface CheckBoxProps {
 
 @observer
 export class CheckBox extends React.Component<CheckBoxProps>{
+    // true = checked, false = unchecked
     @observable _status: boolean;
+    @observable uncheckTimeline: anime.AnimeTimelineInstance;
+    @observable checkTimeline: anime.AnimeTimelineInstance;
+    @observable checkRef: any;
+
 
     constructor(props: CheckBoxProps) {
         super(props);
-
         this._status = this.props.originalStatus;
+        this.checkRef = React.createRef();
+
+        this.checkTimeline = anime.timeline({
+            loop: false,
+            autoplay: false,
+            direction: "normal",
+        });this.uncheckTimeline = anime.timeline({
+            loop: false,
+            autoplay: false,
+            direction: "normal",
+        });
+    }
+
+    componentDidMount = () => {
+        this.uncheckTimeline.add({
+            targets: this.checkRef.current,
+            easing: "easeInOutQuad",
+            duration: 500,
+            opacity: 1 ,
+        });
+        this.checkTimeline.add({
+            targets: this.checkRef.current,
+            easing: "easeInOutQuad",
+            duration: 500,
+            strokeDashoffset: [anime.setDashoffset, 0],
+            opacity: 1
+        });
     }
 
+    @action.bound
     onClick = () => {
-        this._status = !this._status;
         this.props.updateStatus(this._status);
+
+        if(this._status){
+            this.uncheckTimeline.play();
+            this.uncheckTimeline.restart();
+        }
+        else{
+            this.checkTimeline.play();
+            this.checkTimeline.restart();
+
+        }
+        this._status = !this._status;
     }
 
     render() {
         return (
-            <div className="checkbox">
-                <div className="check-box">
-                    <svg viewBox="10 10 20 20">
-                        <path className="checkmark" d="M14.1 27.2l7.1 7.2 16.7-16.8" />
+            <div className="checkbox" onClick = {this.onClick}>
+            <div className = "outer">
+                <div className="check-container">
+                    <svg viewBox="0 12 40 40">
+                        <path ref = {this.checkRef} className="checkmark" d="M14.1 27.2l7.1 7.2 16.7-18" />
                     </svg>
                 </div>
+                <div className="check-box"/>
+                </div>
                 <div className="checkbox-title">{this.props.title}</div>
             </div>
         )