Updated style.

src/__test__/__snapshots__/SlideShow.test.js.snap

@@ -143,7 +143,7 @@ exports[`<SlideShow /> Snapshot testing clicking button behavior 1`] = `
                     zIndex={null}
                   >
                     <div
-                      className="sc-bwzfXH fdFopt"
+                      className="sc-bwzfXH ksVuqV"
                     >
                       <h2>
                         2
@@ -352,7 +352,7 @@ exports[`<SlideShow /> Snapshot testing clicking button behavior 2`] = `
                     zIndex={null}
                   >
                     <div
-                      className="sc-bwzfXH fdFopt"
+                      className="sc-bwzfXH ksVuqV"
                     >
                       <h2>
                         3
@@ -561,7 +561,7 @@ exports[`<SlideShow /> Snapshot testing clicking button behavior 3`] = `
                     zIndex={null}
                   >
                     <div
-                      className="sc-bwzfXH fdFopt"
+                      className="sc-bwzfXH ksVuqV"
                     >
                       <h2>
                         2

src/components/Nav/NavLink.js

@@ -5,7 +5,10 @@ import { NavLink } from 'react-router-dom';
 export default class MyNav extends React.Component {
   render() {
     return (
-      <NavLink {...this.props} activeStyle={{ backgroundColor: '#111' }} />
+      <NavLink
+        {...this.props}
+        activeStyle={{ backgroundColor: '#da3f3d', color: 'white' }}
+      />
     );
   }
 }

src/components/Nav/index.js

@@ -7,7 +7,7 @@ const Nav = () =>
   <NavUl>
     <NavLi><NavLink to="/" exact={true}>Home</NavLink></NavLi>
     <NavLi><NavLink to="/toggle">Toggle</NavLink></NavLi>
-    <NavLi><NavLink to="/tabs">Tab View</NavLink></NavLi>
+    <NavLi><NavLink to="/tabs">Tabs</NavLink></NavLi>
     <NavLi><NavLink to="/counter">Counter</NavLink></NavLi>
     <NavLi><NavLink to="/modal">Modal</NavLink></NavLi>
     <NavLi><NavLink to="/slideshow">Slide</NavLink></NavLi>

src/components/Nav/style.js

@@ -4,28 +4,33 @@ const NavUl = styled.ul`
   list-style-type: none;
   margin: 0;
   padding: 0;
-  overflow: hidden;
-  background-color: #333;
+  test-aligh: center;
   height: auto;
-
+  
   @media (max-width: 800px) {
+     display: flex;
+     flex-wrap: wrap;
      height: auto;
-     width: 100vw;
   }
 `;
 
 const NavLi = styled.li`
-  width: 100px;
+  flex: 1;
+  border-bottom: 1px solid grey;
   a {
     display: block;
-    color: white;
+    color: black;
+    font-weight: bold;
     text-align: center;
-    padding: 14px 16px;
+    padding: 14px 10px;
     text-decoration: none;
+    transition: background-color 0.2s, color 0.2s;
   }
 
   a:hover {
-    background-color: #111;
+    background-color:  #da3f3d;
+    color: white;
+    transition: background-color 0.5s, color 0.5s;
   }
 
   @media (max-width: 800px) {

src/components/SlideShow/style.js

@@ -14,7 +14,7 @@ const SingleSlide = styled.div`
 	background-color: #fff;
   ${props => {
     if (props.index === 2) {
-      return `background-color: #666`;
+      return `background-color: #70C1B3; color: white;`;
     } else if (props.index === 0 || props.index === 4) {
       return `position: relative;
              z-index: -1;`;

src/components/Toggle/style.css

@@ -12,5 +12,5 @@
     width: 50px;
     height: 50px;
     border-radius: 4px;
-    background-color: rgb(130, 181, 198);
-  }
+    background-color: #70C1B3;
+  }

src/style.js

@@ -11,6 +11,7 @@ const ComponentWrapper = styled.div`
   margin: 0;
   padding: 20px;
   overflow: hidden;
+
   @media (min-width: 800px) {
     width: 70vw;
   }