added course selected styles

bottega-code-school · Jun 1, 2018 · 5b3a745 · 5b3a745
1 parent 39767d5
commit 5b3a745
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/src/components/arrow.js b/src/components/arrow.js
@@ -24,7 +24,7 @@ class Arrow extends Component {
     render() {
         this.id = `arrow-${this.props.id}`
         return (
-            <a id={this.id} onClick={() => this.toggleArrow()}className={`${this.props.className} arrow`}></a>
+            <a id={this.id} onClick={() => this.toggleArrow()} className={`${this.props.className} arrow`}></a>
         )
     }
 }

diff --git a/src/components/library/libraryCourse.js b/src/components/library/libraryCourse.js
@@ -28,12 +28,17 @@ class LibraryCourse extends Component {
   }.bind(this);
 
   handleCallback = function(status) {
+    if(!status) {
+      document.getElementById('library-course').classList.add('library-course-selected');
+    } else {
+      document.getElementById('library-course').classList.remove('library-course-selected');
+    }
     this.setState({ status })
   }.bind(this)
 
   render() {
     return (
-      <div className="library-course">
+      <div id="library-course" className="library-course">
         <div className="library-course__title-check">
           <label className="library-course__title">{this.props.title}</label>
           {Icon("fas fa-check", "library-course__icon")}

diff --git a/src/style/libraryCourse.scss b/src/style/libraryCourse.scss
@@ -26,13 +26,21 @@
     }
 }
 
+@mixin solid-course {
+    background: white;
+    box-shadow: 0 2px 10px 0 rgba(0,0,0,0.21);
+}
+
+.library-course-selected {
+    @include solid-course();
+}
+
 .library-course {
 
     padding: 25px;
 
     &:hover {
-        background: white;
-        box-shadow: 0 2px 10px 0 rgba(0,0,0,0.21);
+        @include solid-course();
     }
 
     &__title {