From 3ebb3ed00dbdc99c21d0c998674144dba412f5a9 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Fri, 18 Mar 2016 14:31:45 -0700
Subject: [PATCH] A bit more similar to the old theme

---
 app/components/RequestPane.js    | 27 ++++++++++----------
 app/components/ResponsePane.js   | 10 ++++----
 app/components/Sidebar.js        | 20 ++++++++-------
 app/containers/App.js            |  2 +-
 app/css/base.scss                |  3 ---
 app/css/components/response.scss |  8 +++---
 app/css/components/sidebar.scss  |  1 +
 app/css/constants/colors.scss    | 43 +++++++++++++++++++-------------
 app/css/index.scss               |  1 -
 app/css/layout/forms.scss        |  1 -
 app/css/layout/header.scss       | 23 -----------------
 app/css/layout/pane.scss         | 29 ++++++++++++++++++---
 app/reducers/index.js            |  2 +-
 13 files changed, 87 insertions(+), 83 deletions(-)
 delete mode 100644 app/css/layout/header.scss

diff --git a/app/components/RequestPane.js b/app/components/RequestPane.js
index 792dbd642..4fa039ec3 100644
--- a/app/components/RequestPane.js
+++ b/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>
 );
 
diff --git a/app/components/ResponsePane.js b/app/components/ResponsePane.js
index aa572c292..71a89066e 100644
--- a/app/components/ResponsePane.js
+++ b/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>
 );
 
diff --git a/app/components/Sidebar.js b/app/components/Sidebar.js
index 050e7876c..8f9253076 100644
--- a/app/components/Sidebar.js
+++ b/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>
 );
 
diff --git a/app/containers/App.js b/app/containers/App.js
index 7c7924132..abe85121d 100644
--- a/app/containers/App.js
+++ b/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 />
diff --git a/app/css/base.scss b/app/css/base.scss
index 73cc1b5c1..100142b38 100644
--- a/app/css/base.scss
+++ b/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 {
diff --git a/app/css/components/response.scss b/app/css/components/response.scss
index 876a85857..8af019135 100644
--- a/app/css/components/response.scss
+++ b/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;
     }
   }
 }
diff --git a/app/css/components/sidebar.scss b/app/css/components/sidebar.scss
index 6d6185944..0e50e0246 100644
--- a/app/css/components/sidebar.scss
+++ b/app/css/components/sidebar.scss
@@ -3,6 +3,7 @@
 
 #sidebar {
   align-self: stretch;
+  height: 100%;
 
   a {
     box-sizing: border-box;
diff --git a/app/css/constants/colors.scss b/app/css/constants/colors.scss
index 4ce310c3e..9b6832f62 100644
--- a/app/css/constants/colors.scss
+++ b/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 {
diff --git a/app/css/index.scss b/app/css/index.scss
index 6900ca8fe..9591001e4 100644
--- a/app/css/index.scss
+++ b/app/css/index.scss
@@ -11,7 +11,6 @@
 @import 'links';
 
 /* Layout */
-@import 'layout/header';
 @import 'layout/pane';
 @import 'layout/forms';
 
diff --git a/app/css/layout/forms.scss b/app/css/layout/forms.scss
index 7707e9f3d..f391e2a90 100644
--- a/app/css/layout/forms.scss
+++ b/app/css/layout/forms.scss
@@ -3,7 +3,6 @@
 
 .form-control {
   width: 100%;
-  background: $bg-super-light;
   outline: none;
   border: 0;
   height: $form-height;
diff --git a/app/css/layout/header.scss b/app/css/layout/header.scss
deleted file mode 100644
index d62faa6aa..000000000
--- a/app/css/layout/header.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/app/css/layout/pane.scss b/app/css/layout/pane.scss
index b2d515f35..1286643cc 100644
--- a/app/css/layout/pane.scss
+++ b/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);
+  }
 }
diff --git a/app/reducers/index.js b/app/reducers/index.js
index c4c43cbf0..e8deb0709 100644
--- a/app/reducers/index.js
+++ b/app/reducers/index.js
@@ -5,4 +5,4 @@ const rootReducer = combineReducers({
     requests
 });
 
-export default rootReducer
\ No newline at end of file
+export default rootReducer;