restyle buttons

Author: emily-yang

src/components/lesson/LessonNav.js

@@ -6,12 +6,12 @@ import '../../css/lesson/LessonNav.scss';
 const LessonNav = ({order, base_path, course_size}) => (
   <div className="lesson-nav">
     { order !== 0
-      ? <button type="button" className='btn'>
+      ? <button type="button" className='btn prev-btn'>
         <Link to={`/courses/${base_path}/${order - 1}`} >← Prev</Link>
       </button>
       : ''}
     { order !== course_size - 1
-      ? <button type="button" className="btn">
+      ? <button type="button" className="btn next-btn">
         <Link to={`/courses/${base_path}/${order + 1}`}>Next →</Link>
       </button>
       : ''}

src/css/lesson/LessonNav.scss

@@ -1,14 +1,37 @@
 .lesson-nav {
-  display: flex;
-  justify-content: space-between;
   margin-top: -1rem;
   margin-bottom: 2rem;
 
   .btn {
-    font-family: var(--fontfamily);
-    background-color: var(--navy);
-    color:var(--cream);
-    font-size: 1rem;
-    padding: 0.75rem 1.5rem;
+    border: none;
+
+    a {
+        font-family: var(--fontfamily);
+        background-color: var(--navy);
+        font-size: 1rem;
+        height: 100%;
+        width: 100%;
+        color:var(--cream);
+        text-decoration: none;
+        padding: 0.75rem 1.5rem;
+    }
+
+    a:hover {
+      background-color: var(--brown);
+    }
+  }
+
+  .prev-btn {
+    float: left;
   }
+
+  .next-btn {
+    float: right;
+  }
+}
+
+.lesson-nav:after {
+  content: '';
+  display: block;
+  clear: both;
 }