Updated theme

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>
       }))}

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;

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">

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>
     )
   };

app/css/base.scss

@@ -4,6 +4,7 @@
 html, body, #root {
   height: 100%;
   width: 100%;
+  background: $bg-darker;
 }
 
 body {

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;
   }

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;

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%);

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;
 }
 

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;
+}

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'