A bit more similar to the old theme

app/components/RequestPane.js

@@ -3,30 +3,31 @@ import Editor from '../components/Editor'
 
 const RequestPane = (props) => (
   <section id="request" className="pane col grid-v">
-    <header className="header header-no-padding">
+    <header className="pane-header pane-header-no-padding bg-super-light">
       <div className="form-control url-input">
         <div className="grid">
-          <button className="btn bg-super-light method-dropdown">
+          <button className="btn method-dropdown">
             POST&nbsp;&nbsp;<i className="fa fa-caret-down"></i>
           </button>
           <input type="text" placeholder="https://google.com"/>
-          <button className="btn bg-super-light send-request-button">
+          <button className="btn send-request-button">
             <i className="fa fa-repeat txt-xl"></i>
           </button>
         </div>
       </div>
     </header>
-    <div className="bg-dark pane-tabs">
-      {['Query Params', 'Body', 'Headers', 'Basic Auth'].map((name => {
-        return <button key={name} className="btn bg-dark">
-          {name}
-        </button>
-      }))}
+    <div className="pane-body grid-v">
+      <div className="bg-dark pane-tabs">
+        {['Query Params', 'Body', 'Headers', 'Basic Auth'].map((name =>
+            <button key={name} className={'btn ' + (name === 'Body' ? 'bg-dark' : 'bg-dark')}>
+              {name}
+            </button>
+        ))}
+      </div>
+      <Editor value={localStorage['json']}
+              onChange={(v) => {localStorage['json'] = v}}
+              options={{mode: 'application/json', lineNumbers: true}}/>
     </div>
-    <Editor value={localStorage['json']}
-            onChange={(v) => {localStorage['json'] = v;}}
-            options={{mode: 'application/json', lineNumbers: true}}
-    ></Editor>
   </section>
 );
 

app/components/ResponsePane.js

@@ -2,16 +2,16 @@ 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">
+  <section id="response" className="pane col grid-v">
+    <header className="pane-header header-no-padding text-center bg-super-light">
       <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>
+    <div className="pane-body">
+      <Editor value={'{}'} options={{mode: 'application/json', lineNumbers: true}}></Editor>
+    </div>
   </section>
 );
 

app/components/Sidebar.js

@@ -1,17 +1,19 @@
 import React from 'react'
 
 const Sidebar = (props) => (
-  <aside id="sidebar" className="pane bg-dark">
-    <header className="header header-clickable bg-primary">
+  <aside id="sidebar" className="pane">
+    <header className="pane-header pane-header-clickable bg-primary">
       <h2><a href="#">Insomnia</a></h2>
     </header>
-    <ul className="sidebar-items">
-      {[0, 1, 2, 3, 4].map((i) => {
-        return <li key={i} className={'sidebar-item ' + (i === 0 ? 'active': '')}>
-          <a href="#">Item 1</a>
-        </li>;
-      })}
-    </ul>
+    <div className="pane-body">
+      <ul className="sidebar-items">
+        {[0, 1, 2, 3, 4].map((i) => {
+          return <li key={i} className={'sidebar-item ' + (i === 0 ? 'active': '')}>
+            <a href="#">Item 1</a>
+          </li>;
+        })}
+      </ul>
+    </div>
   </aside>
 );
 

app/containers/App.js

@@ -8,7 +8,7 @@ class App extends Component {
   render () {
     //const { global, todos, actions } = this.props;
     return (
-      <div className="grid">
+      <div className="grid bg-dark">
         <Sidebar />
         <RequestPane />
         <ResponsePane />

app/css/base.scss

@@ -4,7 +4,6 @@
 html, body, #root {
   height: 100%;
   width: 100%;
-  background: $bg-darker;
 }
 
 body {
@@ -12,8 +11,6 @@ body {
   padding: 0;
   font-family: 'Open Sans', sans-serif;
   font-size: $font-size;
-  background: $bg-light;
-  color: $font-light-bg;
 }
 
 h1 {

app/css/components/response.scss

@@ -1,10 +1,10 @@
 @import '../constants/colors';
 
 #response {
-  .header {
-    // HACK: Find some way to center this vertically
-    .tag {
-      margin-top: 10px;
+  .pane-header {
+
+    .tag { // HACK: Find some way to center this vertically
+      margin-top: -4px;
     }
   }
 }

app/css/components/sidebar.scss

@@ -3,6 +3,7 @@
 
 #sidebar {
   align-self: stretch;
+  height: 100%;
 
   a {
     box-sizing: border-box;

app/css/constants/colors.scss

@@ -2,14 +2,13 @@
 $bg-primary: #7D70CC;
 $bg-light: #eaeaea;
 $bg-super-light: #ffffff;
-$bg-dark: #2c2d28;
-$bg-darker: darken($bg-dark, 3%);
+$bg-dark: #272824;
 
 $success: #598f07;
 
 /* Font Colors */
 $font-light-bg: #444444;
-$font-dark-bg: #eeeeee;
+$font-dark-bg: #dddddd;
 
 .success {
   border-color: $success !important;
@@ -19,39 +18,47 @@ $font-dark-bg: #eeeeee;
 .bg-primary {
   background: $bg-primary;
 
-  &, a {
+  &, a, textarea, input, .btn {
     color: $font-dark-bg;
   }
 }
 
 .bg-dark {
   background: $bg-dark;
-  &, a {
+  &, a, textarea, input, .btn {
     color: $font-dark-bg;
   }
 }
 
-.bg-darker {
-  background: $bg-darker;
-  color: $font-dark-bg;
-}
-
 .bg-light {
   background: $bg-light;
-  color: $font-light-bg;
-}
 
-.bg-light.btn:hover {
-  background: darken($bg-light, 4%);
-}
+  &, a, textarea, input, .btn {
+    color: $font-light-bg;
+  }
 
-.bg-light.btn:active {
-  background: darken($bg-light, 6%);
+  .btn:hover {
+    background: darken($bg-light, 4%);
+  }
+
+  .btn:active {
+    background: darken($bg-light, 6%);
+  }
 }
 
 .bg-super-light {
   background: $bg-super-light;
-  color: $font-light-bg;
+  &, a, textarea, input, .btn {
+    color: $font-light-bg;
+  }
+
+  .btn:hover {
+    background: darken($bg-super-light, 4%);
+  }
+
+  .btn:active {
+    background: darken($bg-super-light, 6%);
+  }
 }
 
 .bg-super-light.btn:hover {

app/css/index.scss

@@ -11,7 +11,6 @@
 @import 'links';
 
 /* Layout */
-@import 'layout/header';
 @import 'layout/pane';
 @import 'layout/forms';
 

app/css/layout/forms.scss

@@ -3,7 +3,6 @@
 
 .form-control {
   width: 100%;
-  background: $bg-super-light;
   outline: none;
   border: 0;
   height: $form-height;

app/css/layout/header.scss

@@ -1,23 +0,0 @@
-@import '../constants/dimensions';
-@import '../constants/colors';
-
-.header {
-  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
-  z-index: 1;
-  position: relative;
-
-  &.header-clickable a, &:not(.header-clickable) > *:first-child {
-    display: block;
-    height: $header-height;
-    box-sizing: border-box;
-    padding: $default-padding;
-  }
-
-  &:not(.header_clickable).header-no-padding > *:first-child {
-    padding: 0;
-  }
-
-  &.header-clickable.header-no-padding a {
-    padding: 0;
-  }
-}

app/css/layout/pane.scss

@@ -1,9 +1,30 @@
 @import '../constants/colors';
+@import '../constants/dimensions';
 
 .pane {
-  margin-right: 2px;
-}
+  .pane-header {
+    z-index: 1;
+    position: relative;
+    border-right: 2px solid rgba(0,0,0,0.05);
 
-.pane-tabs {
-  border-bottom: 2px solid $bg-darker;
+    &.pane-header-clickable a, &:not(.pane-header-clickable) > *:first-child {
+      display: block;
+      height: $header-height;
+      box-sizing: border-box;
+      padding: $default-padding;
+    }
+
+    &:not(.pane-header_clickable).pane-header-no-padding > *:first-child {
+      padding: 0;
+    }
+
+    &.pane-header-clickable.header-no-padding a {
+      padding: 0;
+    }
+  }
+
+  .pane-body {
+    height: 100%;
+    border-right: 2px solid rgba(0,0,0,0.1);
+  }
 }

app/reducers/index.js

@@ -5,4 +5,4 @@ const rootReducer = combineReducers({
     requests
 });
 
-export default rootReducer
+export default rootReducer;