upgrade to webpack 4 - complete overhaul

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>