refactoring - added font awesome

README.md

@@ -0,0 +1,13 @@
+# A starter project for React with Webpack 2
+
+## Commands
+
+- yarn install
+- yarn run dev
+
+http://localhost:3000
+
+npm may be used, but I prefer yarn
+
+`npm install -g yarn`
+

app/Wrapper.js

@@ -10,9 +10,7 @@ export default class Wrapper extends React.Component {
         return (
             <div>
                 <Navbar/>
-                <div className="content">
+                {this.props.children}
-                    {this.props.children}
-                </div>
             </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>
+                <div className="Navbar__header">
-                <Link to="/" className="Navbar__item" onlyActiveOnIndex activeClassName="Navbar__item--active">Home</Link>
+                    <span>React Webpack 2 Seed</span>
-                <Link to="/new" className="Navbar__item" activeClassName="Navbar__item--active">New</Link>
+                    <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 {
+.Navbar__nav {
-    position: fixed;
+    height: 40px;
+    border-bottom: 1px solid $light3;
     display: flex;
-    flex-direction: column;
+    background-color: $light1;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: $navbarWidth;
-    background-color: $gray2;
-    border-right: 1px solid darken($gray2, 2%);
-    overflow-y: auto;
 }
 
 .Navbar__header {
-    min-height: 100px;
     display: flex;
+    height: 50px;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
-    background-color: $gray2;
+    padding-left: 10px;
+    padding-right: 10px;
+    background-color: $dark2;
 }
 
 .Navbar__item {
-    min-height: 50px;
+    color: $fontPrimary;
     text-decoration: none;
-    display: flex;
+    width: 100px;
-    align-items: center;
+    transition: all 0.1s linear;
-    justify-content: center;
     text-align: center;
-    color: $white;
+    line-height: 40px;
-    transition: background-color 0.1s linear;
     
     &: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;
+    color: $fontSecondary;
-    border-right: 4px solid $primaryBlue;
+    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 {
+html {
-    background-color: $gray1;
+    font-family: 'Roboto Condensed', sans-serif;
-    color: $white;
-    padding-left: $navbarWidth;
 }
 
-.content {
+body {
-    padding: 10px;
+    color: $fontPrimary;
-    height: 100%;
+    background-color: $light2;
-    width: 100%;
+}
+
+.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;
+$gray1: #2e3136;
-$gray2: #424549;
+$gray2: #2a2d32;
-$gray3: #36393e;
+$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%);

index.html

@@ -1,4 +1,7 @@
 <html>
+    <head>
+        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
+    </head>
     <body>
         <div id="app"></div>
     </body>

package.json

@@ -13,6 +13,7 @@
     "autoprefixer": "^6.6.0",
     "babel-core": "^6.21.0",
     "babel-loader": "^6.2.10",
+    "babel-plugin-add-module-exports": "^0.2.1",
     "babel-preset-es2015": "^6.18.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-0": "^6.16.0",
@@ -21,6 +22,7 @@
     "eslint": "^3.12.2",
     "eslint-plugin-react": "^6.8.0",
     "extract-text-webpack-plugin": "2.0.0-rc.1",
+    "file-loader": "^0.10.0",
     "html-webpack-plugin": "^2.24.1",
     "node-sass": "^4.5.0",
     "postcss-loader": "^1.2.1",
@@ -29,6 +31,7 @@
     "react-router": "^3.0.0",
     "sass-loader": "^4.1.1",
     "style-loader": "^0.13.1",
+    "url-loader": "^0.5.7",
     "webpack": "2.2.1",
     "webpack-dev-server": "2.2.0"
   }

webpack.config.js

@@ -11,7 +11,7 @@ module.exports = {
     },
     output: {
         path: path.resolve(__dirname, 'dist'),
-        filename: '[name].js'
+        filename: '[name].[hash].js'
     },
     module: {
         rules: [{
@@ -29,6 +29,21 @@ module.exports = {
                 fallbackLoader: 'style-loader',
                 loader: 'css-loader'
             })
+        }, {
+            test: /\.svg$/,
+            loader: 'url-loader?limit=65000&mimetype=image/svg+xml&name=static/[name].[hash].[ext]'
+        }, {
+            test: /\.woff$/,
+            loader: 'url-loader?limit=65000&mimetype=application/font-woff&name=static/[name].[hash].[ext]'
+        }, {
+            test: /\.woff2$/,
+            loader: 'url-loader?limit=65000&mimetype=application/font-woff2&name=static/[name].[hash].[ext]'
+        }, {
+            test: /\.[ot]tf$/,
+            loader: 'url-loader?limit=65000&mimetype=application/octet-stream&name=static/[name].[hash].[ext]'
+        }, {
+            test: /\.eot$/,
+            loader: 'url-loader?limit=65000&mimetype=application/vnd.ms-fontobject&name=static/[name].[hash].[ext]'
         }]
     },
     plugins: [

yarn.lock

@@ -396,6 +396,10 @@ babel-messages@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-add-module-exports@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz#9ae9a1f4a8dc67f0cdec4f4aeda1e43a5ff65e25"
+
 babel-plugin-check-es2015-constants@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
@@ -2016,6 +2020,12 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
+file-loader@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.10.0.tgz#bbe6db7474ac92c7f54fdc197cf547e98b6b8e12"
+  dependencies:
+    loader-utils "~0.2.5"
+
 filename-regex@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775"
@@ -2801,7 +2811,7 @@ loader-runner@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
 
-loader-utils@^0.2.11, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.7, loader-utils@~0.2.2:
+loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.15, loader-utils@^0.2.16, loader-utils@^0.2.7, loader-utils@~0.2.2, loader-utils@~0.2.5:
   version "0.2.16"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
   dependencies:
@@ -2951,6 +2961,10 @@ mime-types@^2.1.12, mime-types@~2.1.11, mime-types@~2.1.13, mime-types@~2.1.7:
   dependencies:
     mime-db "~1.26.0"
 
+mime@1.2.x:
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.2.11.tgz#58203eed86e3a5ef17aed2b7d9ebd47f0a60dd10"
+
 mime@1.3.4, mime@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
@@ -4518,6 +4532,13 @@ upper-case@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
 
+url-loader@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.7.tgz#67e8779759f8000da74994906680c943a9b0925d"
+  dependencies:
+    loader-utils "0.2.x"
+    mime "1.2.x"
+
 url-parse@1.0.x:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.0.5.tgz#0854860422afdcfefeb6c965c662d4800169927b"