upgrade to webpack 4 - complete overhaul

app/app.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import Wrapper from './Wrapper';
+import { Routes } from './routes';
 
-ReactDOM.render(<Wrapper />, document.getElementById('app'));
+ReactDOM.render(<Routes />, document.getElementById('app'));

app/components/Navbar/Navbar.scss

@@ -1,41 +0,0 @@
-@import '../../scss/variables';
-
-.Navbar__nav {
-  height: 40px;
-  border-bottom: 1px solid $light1;
-  display: flex;
-  background-color: $gray--lighter;
-}
-
-.Navbar__header {
-  display: flex;
-  height: 50px;
-  align-items: center;
-  justify-content: space-between;
-  padding-left: 10px;
-  padding-right: 10px;
-  background-color: $background;
-}
-
-.Navbar__item {
-  color: $fontPrimary;
-  text-decoration: none;
-  width: 100px;
-  transition: all 0.1s linear;
-  text-align: center;
-  line-height: 40px;
-
-  &:hover {
-    color: $fontSecondary;
-    border-bottom: 2px solid $blue;
-  }
-
-  & + .Navbar__item {
-    border-left: 1px solid $gray;
-  }
-}
-
-.Navbar__item--active {
-  color: $fontSecondary;
-  border-bottom: 2px solid $blue;
-}

app/components/index.ts

@@ -0,0 +1 @@
+export * from './nav-bar/nav-bar';

app/components/nav-bar/nav-bar.scss

@@ -0,0 +1,38 @@
+@import '~open-color/open-color.scss';
+
+.nav-bar__nav {
+  height: 40px;
+  border-bottom: 1px solid $oc-gray-2;
+  display: flex;
+  background-color: $oc-gray-7;
+}
+
+.nav-bar__header {
+  color: $oc-gray-2;
+  display: flex;
+  height: 50px;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 10px;
+  padding-right: 10px;
+  background-color: $oc-gray-8;
+}
+
+.nav-bar__item {
+  color: $oc-gray-2;
+  text-decoration: none;
+  width: 100px;
+  transition: all 0.1s linear;
+  text-align: center;
+  line-height: 40px;
+
+  &:hover {
+    color: $oc-gray-3;
+    border-bottom: 2px solid $oc-indigo-5;
+  }
+}
+
+.nav-bar__item--active {
+  color: $oc-gray-3;
+  border-bottom: 2px solid $oc-indigo-5;
+}

app/components/nav-bar/nav-bar.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
-import './Navbar.scss';
+import './nav-bar.scss';
 
 interface Props {}
 
 interface State {}
 
-export default class Navbar extends React.Component<Props, State> {
+export class NavBar extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
   }
 
-  render() {
+  public render(): JSX.Element {
     return (
-      <div className="Navbar">
-        <div className="Navbar__header">
+      <div>
+        <div className="nav-bar__header">
           <span>React Starter</span>
           <a href="https://github.com/mgerb/react-webpack2-seed">
             GitHub
@@ -23,20 +23,20 @@ export default class Navbar extends React.Component<Props, State> {
           </a>
         </div>
 
-        <div className="Navbar__nav">
+        <div className="nav-bar__nav">
           <NavLink
             to="/"
-            className="Navbar__item"
+            className="nav-bar__item"
             exact
-            activeClassName="Navbar__item--active"
+            activeClassName="nav-bar__item--active"
           >
             Home
           </NavLink>
           <NavLink
             to="/new"
-            className="Navbar__item"
+            className="nav-bar__item"
             exact
-            activeClassName="Navbar__item--active"
+            activeClassName="nav-bar__item--active"
           >
             New
           </NavLink>

app/pages/home/home.scss

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

app/pages/home/home.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
-import './Home.scss';
+import './home.scss';
 
 interface Props extends RouteComponentProps<any> {}
 
 interface State {}
 
-export default class Home extends React.Component<Props, State> {
+export class Home extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
   }
 
-  render() {
-    return <div className="Home">test 123</div>;
+  public render(): JSX.Element {
+    return <div className="Home">test 123456</div>;
   }
 }

app/pages/index.ts

@@ -0,0 +1,2 @@
+export * from './home/home';
+export * from './not-found/not-found';

app/pages/not-found/not-found.scss

@@ -1,4 +1,4 @@
-.NotFound {
+.not-found {
   font-size: 20px;
   text-align: center;
   padding-top: 200px;

app/pages/not-found/not-found.tsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 
-import './NotFound.scss';
+import './not-found.scss';
 
 interface Props extends RouteComponentProps<any> {}
 
 interface State {}
 
-export default class NotFound extends React.Component<Props, State> {
+export class NotFound extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
   }
 
-  public render(): any {
-    return <div className="NotFound">404 Not Found</div>;
+  public render(): JSX.Element {
+    return <div className="not-found">404 Not Found</div>;
   }
 }

app/routes.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 
-import Navbar from './components/Navbar/Navbar';
-import Home from './pages/Home/Home';
-import NotFound from './pages/NotFound/NotFound';
+import { NavBar } from './components';
+import { Home, NotFound } from './pages';
 
 // styling
 import './scss/index.scss';
@@ -12,16 +11,16 @@ interface Props {}
 
 interface State {}
 
-export default class Wrapper extends React.Component<Props, State> {
+export class Routes extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
   }
 
-  public render() {
+  public render(): JSX.Element {
     return (
       <BrowserRouter>
         <div>
-          <Navbar />
+          <NavBar />
           <Switch>
             <Route exact path="/" component={Home} />
             <Route component={NotFound} />

app/scss/index.scss

@@ -1,4 +1,5 @@
 @import '~font-awesome/css/font-awesome.css';
 @import '~normalize.css/normalize.css';
-@import './variables.scss';
+@import '~open-color/open-color.scss';
 @import './style.scss';
+

app/scss/style.scss

@@ -3,8 +3,8 @@ html {
 }
 
 body {
-  color: $fontPrimary;
-  background-color: $white;
+  color: $oc-gray-8;
+  background-color: $oc-gray-0;
 }
 
 .fa {
@@ -14,10 +14,10 @@ body {
 
 a {
   text-decoration: none;
-  color: $fontPrimary;
+  color: $oc-indigo-5;
   transition: all 0.1s linear;
 
   &:hover {
-    color: $blue;
+    color: $oc-indigo-4;
   }
 }

app/scss/variables.scss

@@ -1,15 +0,0 @@
-$dark-blue: #1d2938;
-$gray: #293341;
-$gray--lighter: #3A4553;
-$blue: #258de5;
-$blue--lighter: saturate(lighten($blue, 10%), 100%);
-$green: #39ce83;
-$red: #e95779;
-$white: #fff;
-$light1: #e9eef2;
-
-$background: $dark-blue;
-$foreground: #53718a;
-
-$fontPrimary: lighten($gray, 50%);
-$fontSecondary: lighten($gray, 60%);