From a035ed4998e1ce3396cd910a2f8cd3e1a9d18421 Mon Sep 17 00:00:00 2001
From: Chen Asraf <chen@asraf.me>
Date: Sat, 27 Jan 2018 03:54:40 +0200
Subject: [PATCH] Logo && accent color

---
 config/webpack.config.prod.js         |  2 +-
 src/_variables.css                    |  2 +-
 src/components/Header/Header.css      | 10 ++++++++++
 src/components/Header/Header.css.d.ts |  1 +
 src/components/Header/Header.tsx      |  6 +++++-
 5 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/config/webpack.config.prod.js b/config/webpack.config.prod.js
index 1aa4ca0..4e96e61 100644
--- a/config/webpack.config.prod.js
+++ b/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: {
diff --git a/src/_variables.css b/src/_variables.css
index f4a8e90..c16b53e 100644
--- a/src/_variables.css
+++ b/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);
diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
index 624cb14..66428e7 100644
--- a/src/components/Header/Header.css
+++ b/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%;
+  }
+}
diff --git a/src/components/Header/Header.css.d.ts b/src/components/Header/Header.css.d.ts
index 0542a58..209efff 100644
--- a/src/components/Header/Header.css.d.ts
+++ b/src/components/Header/Header.css.d.ts
@@ -1,2 +1,3 @@
 export const header: string;
 export const requestDataContainer: string;
+export const navBarContainer: string;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 119ac9c..2f06ffb 100644
--- a/src/components/Header/Header.tsx
+++ b/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} />