Small fixes

app/components/RequestUrlBar.js

@@ -5,7 +5,7 @@ import {METHODS} from '../constants/global';
 
 class UrlInput extends Component {
   shouldComponentUpdate(nextProps) {
-    return this.props.request.url !== nextProps.request.url;
+    return this.props.request.method !== nextProps.request.method;
   }
   render () {
     const {onUrlChange, onMethodChange, request} = this.props;

app/components/base/Editor.js

@@ -51,7 +51,7 @@ const BASE_CODEMIRROR_OPTIONS = {
   theme: 'monokai',
   lineNumbers: true,
   foldGutter: true,
-  // lint: true,
+  height: 'auto',
   gutters: [
     'CodeMirror-linenumbers',
     'CodeMirror-foldgutter',

app/containers/App.js

@@ -3,7 +3,7 @@ import {connect} from 'react-redux'
 import {bindActionCreators} from 'redux'
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 
-import CodeEditor from '../components/base/Editor'
+import Editor from '../components/base/Editor'
 import RequestBodyEditor from '../components/RequestBodyEditor'
 import RequestUrlBar from '../components/RequestUrlBar'
 import Sidebar from '../components/Sidebar'
@@ -74,9 +74,9 @@ class App extends Component {
                   <Tab><button className="btn">Cookies</button></Tab>
                 </TabList>
                 <TabPanel className="grid-v">
-                  <CodeEditor
+                  <Editor
                     className="grid-v"
-                    value="{}"
+                    value={'{\n' + '  "status": 200\n}'}
                     options={{mode: 'application/json', readOnly: true}}/>
                 </TabPanel>
                 <TabPanel className="grid-v pad">Raw</TabPanel>

app/css/components/editor.scss

@@ -1,4 +1,5 @@
 @import '../constants/colors';
+@import '../constants/dimensions';
 
 .editor {
   height: 100%;
@@ -7,7 +8,6 @@
   .CodeMirror {
     height: 100% !important;
     width: 100%;
-    font-size: 12px !important;
     font-family: "Source Code Pro", monospace;
     box-sizing: border-box;
   }

app/css/components/forms.scss

@@ -4,7 +4,7 @@
 .form-control {
   outline: none;
   border: 0;
-  height: $form-height;
+  height: $line-height-md;
 
   input {
     width: 100%;

app/css/components/tag.scss

@@ -11,4 +11,3 @@
     margin-right: 0;
   }
 }
-

app/css/constants/dimensions.scss

@@ -1,31 +1,29 @@
 /* Padding */
-$padding-md: 15px;
+$padding-md: 1.25rem;
 $padding-sm: $padding-md / 2;
 $padding-lg: $padding-md * 2;
 
 /* Fonts */
 $font-size: 12px;
-$font-size-sm: $font-size * 0.8;
+$font-size-sm: 0.8rem;
-$font-size-md: $font-size;
+$font-size-md: 1.0rem;
-$font-size-lg: $font-size * 1.2;
+$font-size-lg: 1.2rem;
-$font-size-xl: $font-size * 1.4;
+$font-size-xl: 1.4rem;
-$font-size-xxl: $font-size * 1.6;
+$font-size-xxl: 1.6rem;
 
 /* Breakpoints */
-$breakpoint-md: 888px;
+$breakpoint-lg: 1500px;
-$breakpoint-sm: 555px;
+$breakpoint-md: 930px;
+$breakpoint-sm: 580px;
 
 /* Wrapper */
-$line-height-md: 50px;
+$line-height-md: 4.17rem;
 $line-height-sm: $line-height-md * 0.75;
 
 /* Sidebar */
-$sidebar-width: 250px;
+$sidebar-width: 20rem;
 $sidebar-width-sm: $sidebar-width * 0.75;
 
-/* Elements */
-$form-height: 50px;
-
 /* Borders */
 $radius-md: 2px;
 

app/css/layout/base.scss

@@ -1,8 +1,12 @@
 @import '../constants/colors';
 @import '../constants/dimensions';
 
+html {
+  font-family: 'Open Sans', sans-serif;
+  font-size: $font-size;
+}
+
 html, body, #root {
-  display: block;
   width: 100%;
   height: 100%;
 }
@@ -10,8 +14,6 @@ html, body, #root {
 body {
   margin: 0;
   padding: 0;
-  font-family: 'Open Sans', sans-serif;
-  font-size: $font-size;
 }
 
 h1 {
@@ -53,3 +55,15 @@ h2 {
 strong {
   font-weight: 600;
 }
+
+@media (max-width: $breakpoint-md) {
+  body {
+    font-size: $font-size * 0.95;
+  }
+}
+
+@media (max-width: $breakpoint-sm) {
+  body {
+    font-size: $font-size * 0.9;
+  }
+}

app/css/layout/sidebar.scss

@@ -33,6 +33,10 @@
       &.sidebar__item--right-menu {
         padding-right: 0;
       }
+
+      button {
+        color: inherit;
+      }
     }
 
     & > li {

app/reducers/__tests__/requests.test.js

@@ -11,7 +11,8 @@ describe('Requests Reducer', () => {
   beforeEach(() => {
     initialState = {
       all: [],
-      active: null
+      active: null,
+      filter: ''
     };
 
     request = {
@@ -49,7 +50,8 @@ describe('Requests Reducer', () => {
       })
     ).toEqual({
       all: [request],
-      active: request.id
+      active: request.id,
+      filter: ''
     });
   });
 
@@ -67,7 +69,8 @@ describe('Requests Reducer', () => {
         request,
         Object.assign(newRequest, {name: `${request.name} (1)`})
       ],
-      active: request.id
+      active: request.id,
+      filter: ''
     });
   });
 
@@ -87,7 +90,8 @@ describe('Requests Reducer', () => {
       patch: patch
     })).toEqual({
       all: [Object.assign({}, request, patch)],
-      active: request.id
+      active: request.id,
+      filter: ''
     });
   });
 
@@ -107,7 +111,8 @@ describe('Requests Reducer', () => {
       id: request.id
     })).toEqual({
       all: [request],
-      active: request.id
+      active: request.id,
+      filter: ''
     });
   });
 

electron.js

@@ -19,7 +19,7 @@ app.on('ready', function () {
   mainWindow = new BrowserWindow({
     width: IS_DEV ? 1600 : 1200,
     height: 800,
-    minHeight: 400,
+    minHeight: 500,
     minWidth: 500
   });