refactoring - added font awesome

app/Wrapper.js

@@ -10,9 +10,7 @@ export default class Wrapper extends React.Component {
         return (
             <div>
                 <Navbar/>
-                <div className="content">
-                    {this.props.children}
-                </div>
+                {this.props.children}
             </div>
         );
     }

app/components/Navbar/Navbar.js

@@ -8,9 +8,17 @@ export default class Navbar extends React.Component {
     render() {
         return (
             <div className="Navbar">
-                <div className="Navbar__header">Title</div>
-                <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
-                <Link to="/new" className="Navbar__item" activeClassName="Navbar__item--active">New</Link>
+                <div className="Navbar__header">
+                    <span>React Webpack 2 Seed</span>
+                    <a href="https://github.com/mgerb/react-webpack2-seed">GitHub
+                        <i className="fa fa-github" aria-hidden="true"/>
+                    </a>
+                </div>
+                
+                <div className="Navbar__nav">
+                    <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
+                    <Link to="/new" className="Navbar__item" activeClassName="Navbar__item--active">New</Link>
+                </div>
             </div>
         );
     }

app/components/Navbar/Navbar.scss

@@ -1,47 +1,42 @@
 @import '../../scss/variables';
 
-.Navbar {
-    position: fixed;
+.Navbar__nav {
+    height: 40px;
+    border-bottom: 1px solid $light3;
     display: flex;
-    flex-direction: column;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: $navbarWidth;
-    background-color: $gray2;
-    border-right: 1px solid darken($gray2, 2%);
-    overflow-y: auto;
+    background-color: $light1;
 }
 
 .Navbar__header {
-    min-height: 100px;
     display: flex;
+    height: 50px;
     align-items: center;
-    justify-content: center;
-    background-color: $gray2;
+    justify-content: space-between;
+    padding-left: 10px;
+    padding-right: 10px;
+    background-color: $dark2;
 }
 
 .Navbar__item {
-    min-height: 50px;
+    color: $fontPrimary;
     text-decoration: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+    width: 100px;
+    transition: all 0.1s linear;
     text-align: center;
-    color: $white;
-    transition: background-color 0.1s linear;
+    line-height: 40px;
     
     &:hover {
-        background-color: $gray1; 
+        color: $fontSecondary;
+        border-bottom: 2px solid $primaryBlue; 
     }
     
     & + .Navbar__item {
-        border-top: 1px solid $gray1;
+        border-left: 1px solid $light3;
     }
     
 }
 
 .Navbar__item--active {
-    padding-left: 4px;
-    border-right: 4px solid $primaryBlue;
+    color: $fontSecondary;
+    border-bottom: 2px solid $primaryBlue;
 }

app/pages/Home/Home.js

@@ -1,12 +1,15 @@
 import React from 'react';
 
+import './Home.scss';
+
 export default class Home extends React.Component {
 
     render() {
         return (
             <div className="Home">
-                Test home page
+                test 123
             </div>
         );
     }
-}
+}
+

app/pages/Home/Home.scss

@@ -0,0 +1,3 @@
+.Home {
+    padding: 10px;
+}

app/pages/NotFound/NotFound.scss

@@ -1,8 +1,5 @@
 .NotFound {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    
     font-size: 20px;
+    text-align: center;
+    padding-top: 200px;
 }

app/scss/index.scss

@@ -1,3 +1,4 @@
+@import '../assets/font-awesome/css/font-awesome.css';
 @import '../assets/normalize.css';
 @import './variables.scss';
 @import './style.scss';

app/scss/style.scss

@@ -1,11 +1,23 @@
-body {
-    background-color: $gray1;
-    color: $white;
-    padding-left: $navbarWidth;
+html {
+    font-family: 'Roboto Condensed', sans-serif;
 }
 
-.content {
-    padding: 10px;
-    height: 100%;
-    width: 100%;
-}
+body {
+    color: $fontPrimary;
+    background-color: $light2;
+}
+
+.fa {
+    margin-right: 5px;
+    margin-left: 5px;
+}
+
+a {
+    text-decoration: none;
+    color: $fontPrimary;
+    transition: all 0.1s linear;
+    
+    &:hover {
+        color: $primaryBlue;
+    }
+}

app/scss/variables.scss

@@ -1,13 +1,21 @@
-$navbarWidth: 200px;
-
-
 // colors
 $primaryBlue: #42adf4;
 $white: darken(white, 10%);
 
-$gray1: #686a6e;
-$gray2: #424549;
-$gray3: #36393e;
+$gray1: #2e3136;
+$gray2: #2a2d32;
+$gray3: #23262a;
 $gray4: #2e3136;
 $gray5: #282b30;
 $gray6: #1e2124;
+
+$light1: #fff;
+$light2: #f4f4f4;
+$light3: #e3e3e3;
+
+$dark2: #3a3f41;
+$dark1: lighten($dark2, 5%);
+$dark3: darken($dark2, 5%);
+
+$fontPrimary: darken($light3, 10%);
+$fontSecondary: darken($light3, 20%);