From 5a55653873f335ec7bc2b319bce4afcefc6b9f6a Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Thu, 17 Mar 2016 23:30:48 -0700
Subject: [PATCH] Updated theme

---
 app/components/RequestPane.js    |  4 ++--
 app/components/ResponsePane.js   | 20 ++++++++++++++++++++
 app/components/Sidebar.js        |  4 ++--
 app/containers/App.js            | 16 ++--------------
 app/css/base.scss                |  1 +
 app/css/components/request.scss  |  7 -------
 app/css/components/response.scss |  4 ----
 app/css/components/sidebar.scss  |  5 -----
 app/css/constants/colors.scss    | 15 +++++++++++++--
 app/css/layout/pane.scss         |  5 ++++-
 app/index.js                     |  3 ++-
 11 files changed, 46 insertions(+), 38 deletions(-)
 create mode 100644 app/components/ResponsePane.js

diff --git a/app/components/RequestPane.js b/app/components/RequestPane.js
index c93c884a4..792dbd642 100644
--- a/app/components/RequestPane.js
+++ b/app/components/RequestPane.js
@@ -16,9 +16,9 @@ const RequestPane = (props) => (
         </div>
       </div>
     </header>
-    <div className="bg-light pane-tabs">
+    <div className="bg-dark pane-tabs">
       {['Query Params', 'Body', 'Headers', 'Basic Auth'].map((name => {
-        return <button key={name} className={'btn ' + (name === 'Body' ? 'bg-dark' : 'bg-light')}>
+        return <button key={name} className="btn bg-dark">
           {name}
         </button>
       }))}
diff --git a/app/components/ResponsePane.js b/app/components/ResponsePane.js
new file mode 100644
index 000000000..aa572c292
--- /dev/null
+++ b/app/components/ResponsePane.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import Editor from '../components/Editor'
+
+const ResponsePane = (props) => (
+  <section id="response" className="pane col grid-v bg-super-light">
+    <header className="header header-no-padding text-center">
+      <div>
+        <div className="tag success"><strong>200</strong> SUCCESS</div>
+        <div className="tag"><strong>GET</strong> https://google.com</div>
+      </div>
+    </header>
+    <Editor value={'{}'}
+            options={{mode: 'application/json', lineNumbers: true}}
+    ></Editor>
+  </section>
+);
+
+ResponsePane.propTypes = {};
+
+export default ResponsePane;
diff --git a/app/components/Sidebar.js b/app/components/Sidebar.js
index 7e9042fbd..050e7876c 100644
--- a/app/components/Sidebar.js
+++ b/app/components/Sidebar.js
@@ -1,8 +1,8 @@
 import React from 'react'
 
 const Sidebar = (props) => (
-  <aside id="sidebar" className="pane">
-    <header className="header header-clickable">
+  <aside id="sidebar" className="pane bg-dark">
+    <header className="header header-clickable bg-primary">
       <h2><a href="#">Insomnia</a></h2>
     </header>
     <ul className="sidebar-items">
diff --git a/app/containers/App.js b/app/containers/App.js
index 19c7c4b81..7c7924132 100644
--- a/app/containers/App.js
+++ b/app/containers/App.js
@@ -1,10 +1,8 @@
 import React, { Component, PropTypes } from 'react'
-import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import Editor from '../components/Editor'
 import Sidebar from '../components/Sidebar'
 import RequestPane from '../components/RequestPane'
-import * as TodoActions from '../actions'
+import ResponsePane from '../components/ResponsePane'
 
 class App extends Component {
   render () {
@@ -13,17 +11,7 @@ class App extends Component {
       <div className="grid">
         <Sidebar />
         <RequestPane />
-        <section id="response" className="pane col grid-v">
-          <header className="header header-no-padding text-center">
-            <div>
-              <div className="tag success"><strong>200</strong> SUCCESS</div>
-              <div className="tag"><strong>GET</strong> https://google.com</div>
-            </div>
-          </header>
-          <Editor value={'{}'}
-                  options={{mode: 'application/json', lineNumbers: true}}
-          ></Editor>
-        </section>
+        <ResponsePane />
       </div>
     )
   };
diff --git a/app/css/base.scss b/app/css/base.scss
index 612240cf2..73cc1b5c1 100644
--- a/app/css/base.scss
+++ b/app/css/base.scss
@@ -4,6 +4,7 @@
 html, body, #root {
   height: 100%;
   width: 100%;
+  background: $bg-darker;
 }
 
 body {
diff --git a/app/css/components/request.scss b/app/css/components/request.scss
index ce41f00e4..27ee592f9 100644
--- a/app/css/components/request.scss
+++ b/app/css/components/request.scss
@@ -2,13 +2,6 @@
 @import '../constants/dimensions';
 
 #request {
-  background: $bg-dark;
-
-  .header {
-    background: $bg-super-light;
-    border-right: 1px solid $bg-light;
-  }
-
   .url-input {
     font-size: $font-size-lg;
   }
diff --git a/app/css/components/response.scss b/app/css/components/response.scss
index 761a86dd0..876a85857 100644
--- a/app/css/components/response.scss
+++ b/app/css/components/response.scss
@@ -1,11 +1,7 @@
 @import '../constants/colors';
 
 #response {
-  background: $bg-dark;
-
   .header {
-    background: $bg-super-light;
-
     // HACK: Find some way to center this vertically
     .tag {
       margin-top: 10px;
diff --git a/app/css/components/sidebar.scss b/app/css/components/sidebar.scss
index 083c8c763..6d6185944 100644
--- a/app/css/components/sidebar.scss
+++ b/app/css/components/sidebar.scss
@@ -2,20 +2,15 @@
 @import '../constants/colors';
 
 #sidebar {
-  background: darken($bg-dark, 3%);
-  color: $font-dark-bg;
   align-self: stretch;
 
   a {
     box-sizing: border-box;
-    color: $font-dark-bg;
     display: block;
   }
 
   ul.sidebar-items {
     width: $sidebar-width;
-    background: $bg-dark;
-    margin-right: 3px;
 
     li.sidebar-item > a {
       color: darken($font-dark-bg, 40%);
diff --git a/app/css/constants/colors.scss b/app/css/constants/colors.scss
index f87812e3b..4ce310c3e 100644
--- a/app/css/constants/colors.scss
+++ b/app/css/constants/colors.scss
@@ -3,12 +3,13 @@ $bg-primary: #7D70CC;
 $bg-light: #eaeaea;
 $bg-super-light: #ffffff;
 $bg-dark: #2c2d28;
+$bg-darker: darken($bg-dark, 3%);
 
 $success: #598f07;
 
 /* Font Colors */
 $font-light-bg: #444444;
-$font-dark-bg: #ffffff;
+$font-dark-bg: #eeeeee;
 
 .success {
   border-color: $success !important;
@@ -17,11 +18,21 @@ $font-dark-bg: #ffffff;
 
 .bg-primary {
   background: $bg-primary;
-  color: $font-dark-bg;
+
+  &, a {
+    color: $font-dark-bg;
+  }
 }
 
 .bg-dark {
   background: $bg-dark;
+  &, a {
+    color: $font-dark-bg;
+  }
+}
+
+.bg-darker {
+  background: $bg-darker;
   color: $font-dark-bg;
 }
 
diff --git a/app/css/layout/pane.scss b/app/css/layout/pane.scss
index 2146af6ef..b2d515f35 100644
--- a/app/css/layout/pane.scss
+++ b/app/css/layout/pane.scss
@@ -1,6 +1,9 @@
 @import '../constants/colors';
 
 .pane {
-  background-color: $bg-light;
+  margin-right: 2px;
 }
 
+.pane-tabs {
+  border-bottom: 2px solid $bg-darker;
+}
diff --git a/app/index.js b/app/index.js
index 185012389..1922b62b2 100644
--- a/app/index.js
+++ b/app/index.js
@@ -1,9 +1,10 @@
 import React from 'react'
 import { render } from 'react-dom'
 import { Provider } from 'react-redux'
-import { loadTodos } from './actions/index';
 import App from './containers/App'
 import configureStore from './stores/configureStore'
+
+// Global CSS
 import './css/index.scss'
 import './css/lib/chrome/platform_app.css'
 import './css/lib/fontawesome/css/font-awesome.css'