update styles for nav buttons

Author: emily-yang

src/components/lesson/LessonNavBar.js

@@ -3,8 +3,8 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import '../../css/lesson/LessonNavBar.scss';
 
-const LessonNavBar = ({prev_path, next_path}) => (
-  <div className="lesson-nav">
+const LessonNavBar = ({prev_path, next_path, className}) => (
+  <div className={`lesson-nav-bar ${className}`}>
     { prev_path
       ? <button type="button" className='btn prev-btn'>
         <Link to={prev_path} >← Prev</Link>
@@ -21,6 +21,7 @@ const LessonNavBar = ({prev_path, next_path}) => (
 LessonNavBar.propTypes = {
   prev_path: PropTypes.string,
   next_path: PropTypes.string,
+  className: PropTypes.string.isRequired,
 };
 
 LessonNavBar.defaultProps = {

src/components/lesson/LessonsPane.js

@@ -7,8 +7,10 @@ import LessonNavBar from './LessonNavBar';
 // TODO: add next and previous course buttons
 const LessonsPane = ({ course_title, lessons, curr_lesson_num, base_path, prev_slug, next_slug }) => (
   <div className="lessons-pane">
-    <LessonNavBar prev_path={prev_slug ? `/courses/${prev_slug}/0`: undefined} next_path={next_slug ? `/courses/${next_slug}/0` : undefined} />
-    <h2>{course_title}</h2>
+    <h2>
+      <LessonNavBar className="course-nav" prev_path={prev_slug ? `/courses/${prev_slug}/0`: undefined} next_path={next_slug ? `/courses/${next_slug}/0` : undefined} />
+      {course_title}
+</h2>
     {lessons.map(({ order, title, length }) => (
       <LessonLink
         key={order}

src/css/lesson/LessonNavBar.scss

@@ -1,23 +1,16 @@
-.lesson-nav {
-  margin-top: -1rem;
-  margin-bottom: 2rem;
-
+.lesson-nav-bar {
   .btn {
     border: none;
 
     a {
         font-family: var(--fontfamily);
-        background-color: var(--navy);
         font-size: 1rem;
         height: 100%;
         width: 100%;
+        background-color: var(--navy);
         color:var(--cream);
         text-decoration: none;
-        padding: 0.75rem 1.5rem;
-    }
 
-    a:hover {
-      background-color: var(--brown);
     }
   }
 
@@ -30,7 +23,36 @@
   }
 }
 
-.lesson-nav:after {
+.lesson-nav {
+  margin-top: -1rem;
+  margin-bottom: 2rem;
+
+  a {
+    background-color: var(--navy);
+    color:var(--cream);
+    padding: 0.75rem 1.5rem;
+  }
+  & a:hover {
+      background-color: var(--brown);
+  }
+}
+
+.course-nav {
+  margin-bottom: 1rem;
+  a {
+    display: inline-block;
+    padding: 0.75rem 0;
+  }
+  a:hover {
+      text-decoration: underline;
+  }
+}
+
+
+
+
+// clear floats
+.lesson-nav-bar:after {
   content: '';
   display: block;
   clear: both;