Logo && accent color

config/webpack.config.prod.js

@@ -120,7 +120,7 @@ module.exports = {
       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
       // please link the files into your node_modules/ and let module-resolution kick in.
       // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
+      // new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
     ],
   },
   module: {

src/_variables.css

@@ -1,5 +1,5 @@
 $font-family: "Helvetica Neue", "Calibri", "Segoe UI", "Arial", sans-serif;
-$highlight: #05a;
+$highlight: #551182;
 $text-main: #222;
 $text-light: #555;
 $drop-shadow: drop-shadow(1.5px 1.5px 1px #0003);

src/components/Header/Header.css

@@ -15,3 +15,13 @@
   grid-column-gap: 14px;
   width: 100%;
 }
+
+.nav-bar-container {
+  display: grid;
+  grid-template-columns: [logo] 32px [nav] auto;
+  grid-column-gap: 14px;
+
+  & img {
+    width: 100%;
+  }
+}

src/components/Header/Header.css.d.ts

@@ -1,2 +1,3 @@
 export const header: string;
 export const requestDataContainer: string;
+export const navBarContainer: string;

src/components/Header/Header.tsx

@@ -10,6 +10,7 @@ import { dispatch, register, ActionTypes, StoreKeys, Store } from 'common/Dispat
 import * as classNames from 'classnames'
 import NavBar from 'components/NavBar/NavBar'
 import RequestHeaders from 'components/RequestHeaders/RequestHeaders'
+const logo = require('../../../public/android-chrome-192x192.png')
 
 class Header extends React.Component<I.IProps, I.IState> {
   constructor(props: I.IProps) {
@@ -20,7 +21,10 @@ class Header extends React.Component<I.IProps, I.IState> {
   render() {
     return (
       <div className={classNames(css.header, this.props.className)}>
-        <NavBar store={this.props.store} />
+        <div className={css.navBarContainer}>
+          <img src={logo} />
+          <NavBar store={this.props.store} />
+        </div>
         <div className={css.requestDataContainer}>
           <RequestType store={this.props.store} />
           <RequestHeaders store={this.props.store} />