Styled components.

src/components/App/index.js

@@ -1,17 +1,13 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import logo from './logo-white.png';
+import { Header, Logo } from './style.js';
 
 export default class App extends Component {
   render() {
     return (
-      <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-        </div>
-      </div>
-
+      <Header>
+        <Logo src={logo} alt="logo" />
+      </Header>
     );
   }
 }
-

src/components/App/style.js

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const Header = styled.div`
+  text-align: center;
+ background-color: #da3f3d;
+  height: 100px;
+  padding: 20px;
+  color: white;
+flex: 0 1 100%;
+`;
+
+const Logo = styled.img`
+  height: 100px;
+`;
+
+export { Header, Logo };

src/components/Form/index.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import Form from './Form';
 import SharedTile from '../Utils/SharedTitle';
+import Code from '../Utils/Code';
 
 const FormDemo = () => {
   return (
     <div>
-      <SharedTile/>
+      <SharedTile />
       <p>
         This form is constructed purely in React without any external library.
         The placeholders and validation are implemented in pure Javascript, thus
@@ -14,11 +15,11 @@ const FormDemo = () => {
         logic on large forms is still challegning in react as the code could
         become extremely verbose and repeative. A library is still required to
         handle more professional and long forms with complex validation process.
-        In addition, using <code>setState</code> multiple times in one function
-        can lead to sublte bugs as this <code>setState</code> is asynchronous.
-        Updating the state with <code>setState</code> then checking certain
+        In addition, using <Code>setState</Code> multiple times in one function
+        can lead to sublte bugs as this <Code>setState</Code> is asynchronous.
+        Updating the state with <Code>setState</Code> then checking certain
         conditions based on the new state in one function does not work. Use a
-        callback function in <code>setState</code> instead.
+        callback function in <Code>setState</Code> instead.
       </p>
       <hr />
       <Form />

src/components/Nav/index.js

@@ -1,18 +1,18 @@
 import React from 'react';
 import NavLink from './NavLink';
 
-import './style.css';
+import { NavUl, NavLi } from './style.js';
 
 const Nav = () =>
-  <ul className="nav">
-    <li><NavLink to="/" exact={true}>Home</NavLink></li>
-    <li><NavLink to="/toggle">Toggle</NavLink></li>
-    <li><NavLink to="/tabs">Tab View</NavLink></li>
-    <li><NavLink to="/counter">Counter</NavLink></li>
-    <li><NavLink to="/modal">Modal</NavLink></li>
-    <li><NavLink to="/slideshow">Slide</NavLink></li>
-    <li><NavLink to="/form">Form</NavLink></li>
-    <li><NavLink to="/tabss">Test 404</NavLink></li>
-  </ul>;
+  <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="/counter">Counter</NavLink></NavLi>
+    <NavLi><NavLink to="/modal">Modal</NavLink></NavLi>
+    <NavLi><NavLink to="/slideshow">Slide</NavLink></NavLi>
+    <NavLi><NavLink to="/form">Form</NavLink></NavLi>
+    <NavLi><NavLink to="/tabss">Test 404</NavLink></NavLi>
+  </NavUl>;
 
 export default Nav;

src/components/Nav/style.css

@@ -1,17 +1,22 @@
-.nav {
+import styled from 'styled-components';
+
+const NavUl = styled.ul`
     list-style-type: none;
     margin: 0;
     padding: 0;
     overflow: hidden;
     background-color: #333;
     height: auto;
-}
 
-.nav li {
-    width: 100px;
+@media  (max-width: 800px) {
+        height: auto;
+        width: 100vw;
 }
+`;
 
-.nav li a {
+const NavLi = styled.li`
+width: 100px;
+a {
     display: block;
     color: white;
     text-align: center;
@@ -19,17 +24,12 @@
     text-decoration: none;
 }
 
-/* Change the link color to #111 (black) on hover */
-.nav li a:hover {
+ a:hover {
     background-color: #111;
 }
 
 @media  (max-width: 800px) {
-    .nav ul { 
-        height: auto;
-        width: 100vw;
-    }
-    .nav li {
         float: left;
-    }
-}
+}
+`;
+export { NavUl, NavLi };

src/components/Utils/Code.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const Code = styled.code`
+  font-family: Courier, monospace;
+  background-color: rgba(27, 31, 35, 0.05);
+  border-radius: 3px;
+  font-size: 85%;
+  padding: 0.2em; 
+`;
+export default Code;

src/globalStyle.js

@@ -0,0 +1,9 @@
+import { injectGlobal } from 'styled-components';
+
+injectGlobal`
+body {
+margin: 0;
+padding: 0;
+font-family: sans-serif;
+}
+`;

src/index.css

@@ -1,46 +0,0 @@
-.container {
-	display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;  
-  -webkit-flex-flow: row wrap;
-  flex-flow: row wrap;
-  height: 100%;
-}
-
-.App {
-	flex: 0 1 100%;
-}
-
-.nav {
-	bottom: 0;
-}
-
-
-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}
-
-main {
-	padding: 20px;
-}
-
-.components {
-    width: 100vw;
-}
-
-@media screen and (min-width: 800px) {
-  .components {
-    width: 70vw;
-  }
-}
-
-code {
-  font-family: Courier, monospace;
-  background-color: rgba(27, 31, 35, 0.05);
-  border-radius: 3px;
-  font-size: 85%;
-  padding: 0.2em; }

src/index.js

@@ -1,11 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-
 import Routes from './routes';
 
-import './index.css';
+import './globalStyle';
 
-ReactDOM.render(
-  <Routes />,
-  document.getElementById('root')
-);
+ReactDOM.render(<Routes />, document.getElementById('root'));

src/routes.js

@@ -1,6 +1,6 @@
-// src/routes.js
 import React from 'react';
 import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { Container, ComponentWrapper } from './style.js';
 
 import App from './components/App';
 import Nav from './components/Nav';
@@ -15,22 +15,24 @@ import NotFound from './components/NotFound';
 
 const Routes = props =>
   <Router {...props}>
-    <div className="container">
+    <Container>
       <App />
       <Nav />
-      <main className="components">
-        <Switch>
-          <Route path="/" exact component={Home} />
-          <Route path="/toggle" component={ToggleDemo} />
-          <Route path="/tabs" component={TabViewDemo} />
-          <Route path="/counter" component={CounterDemo} />
-          <Route path="/modal" component={ModalDemo} />
-          <Route path="/slideshow" component={SlideShowDemo} />
-          <Route path="/form" component={FormDemo} />
-          <Route component={NotFound} />
-        </Switch>
+      <main>
+        <ComponentWrapper>
+          <Switch>
+            <Route path="/" exact component={Home} />
+            <Route path="/toggle" component={ToggleDemo} />
+            <Route path="/tabs" component={TabViewDemo} />
+            <Route path="/counter" component={CounterDemo} />
+            <Route path="/modal" component={ModalDemo} />
+            <Route path="/slideshow" component={SlideShowDemo} />
+            <Route path="/form" component={FormDemo} />
+            <Route component={NotFound} />
+          </Switch>
+        </ComponentWrapper>
       </main>
-    </div>
+    </Container>
   </Router>;
 
 export default Routes;

src/style.js

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Container = styled.div`
+  display: flex;  
+  flex-flow: row wrap;
+  height: 100%;
+`;
+
+const ComponentWrapper = styled.div`
+    width: 100%;
+	padding: 20px;
+@media screen and (min-width: 800px) {
+    width: 70vw;
+}
+`;
+
+export { Container, ComponentWrapper };