got editors working and more css

app/components/Editor.js

@@ -0,0 +1,111 @@
+import React, {Component, PropTypes} from 'react';
+import {getDOMNode} from 'react-dom';
+import CodeMirror from 'codemirror';
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/htmlmixed/htmlmixed';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/addon/scroll/simplescrollbars';
+import 'codemirror/addon/scroll/simplescrollbars.css';
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/material.css'
+import 'codemirror/theme/railscasts.css'
+import 'codemirror/theme/tomorrow-night-bright.css'
+import 'codemirror/theme/ambiance.css'
+import 'codemirror/theme/mbo.css'
+import 'codemirror/theme/pastel-on-dark.css'
+
+class Editor extends Component {
+
+  constructor () {
+    super();
+    this._currentCodemirrorValue = null;
+    this.state = {
+      isFocused: false
+    }
+  }
+
+  componentDidMount () {
+    var textareaNode = this.refs.textarea;
+    let options = Object.assign({
+      //theme: 'material',
+      //theme: 'mbo',
+      theme: 'pastel-on-dark',
+      fixedGutter: true,
+      scrollbarStyle: 'overlay'
+    }, this.props.options || {});
+
+    if (options.mode === 'application/json') {
+      options.mode = 'application/ld+json';
+    }
+
+    this.codeMirror = CodeMirror.fromTextArea(textareaNode, options);
+    this.codeMirror.on('change', this.codemirrorValueChanged.bind(this));
+    this.codeMirror.on('focus', this.focusChanged.bind(this, true));
+    this.codeMirror.on('blur', this.focusChanged.bind(this, false));
+    this._currentCodemirrorValue = this.props.defaultValue || this.props.value || '';
+    this.codeMirror.setValue(this._currentCodemirrorValue);
+  }
+
+  componentWillUnmount () {
+    // todo: is there a lighter-weight way to remove the cm instance?
+    if (this.codeMirror) {
+      this.codeMirror.toTextArea();
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (this.codeMirror && nextProps.value !== undefined && this._currentCodemirrorValue !== nextProps.value) {
+      this.codeMirror.setValue(nextProps.value);
+    }
+    if (typeof nextProps.options === 'object') {
+      for (var optionName in nextProps.options) {
+        if (nextProps.options.hasOwnProperty(optionName)) {
+          this.codeMirror.setOption(optionName, nextProps.options[optionName]);
+        }
+      }
+    }
+  }
+
+  getCodeMirror () {
+    return this.codeMirror;
+  }
+
+  focus () {
+    if (this.codeMirror) {
+      this.codeMirror.focus();
+    }
+  }
+
+  focusChanged (focused) {
+    this.setState({
+      isFocused: focused
+    });
+    this.props.onFocusChange && this.props.onFocusChange(focused);
+  }
+
+  codemirrorValueChanged (doc, change) {
+    var newValue = doc.getValue();
+    this._currentCodemirrorValue = newValue;
+    this.props.onChange && this.props.onChange(newValue);
+  }
+
+  render () {
+    return (
+      <textarea name={this.props.path}
+                ref='textarea'
+                defaultValue={this.props.value}
+                autoComplete='off'></textarea>
+    );
+  }
+}
+
+Editor.propTypes = {
+  onChange: PropTypes.func,
+  onFocusChange: PropTypes.func,
+  options: PropTypes.object,
+  path: PropTypes.string,
+  value: PropTypes.string,
+  className: PropTypes.any
+};
+
+export default Editor;

app/containers/App.js

@@ -1,6 +1,7 @@
 import React, { Component, PropTypes } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
+import Editor from '../components/Editor';
 import Header from '../components/Header'
 import * as TodoActions from '../actions'
 
@@ -9,7 +10,7 @@ class App extends Component {
     //const { global, todos, actions } = this.props;
     return (
       <div className="grid">
-        <aside id="sidebar">
+        <aside id="sidebar" className="pane">
           <header className="header header-clickable">
             <h1><a href="#">Insomnia</a></h1>
           </header>
@@ -21,18 +22,31 @@ class App extends Component {
             })}
           </ul>
         </aside>
-        <section id="request" className="pane col-1">
-          <header className="header"><h2>Request</h2></header>
-          <div className="form-control url-input grid">
-            <button className="btn bg-light bg-hover txt-sm">
-              POST&nbsp;&nbsp;<i className="fa fa-caret-down"></i>
-            </button>
-            <input type="text" placeholder="https://google.com"/>
-            <button className="btn bg-hover bg-light"><i className="fa fa-play-circle-o"></i></button>
-          </div>
+        <section id="request" className="pane col grid-v">
+          <header className="header header-no-padding">
+            <div className="form-control url-input">
+              <div className="grid">
+                <button className="btn bg-light bg-hover method-dropdown">
+                  POST&nbsp;&nbsp;<i className="fa fa-caret-down"></i>
+                </button>
+                <input type="text" placeholder="https://google.com"/>
+                <button className="btn bg-hover bg-light send-request-button">
+                  <i className="fa fa-play-circle-o txt-xl"></i>
+                </button>
+              </div>
+            </div>
+          </header>
+          <Editor value={localStorage['json']}
+                  onChange={(v) => {localStorage['json'] = v;}}
+                  options={{mode: 'application/json', lineNumbers: true}}
+          ></Editor>
         </section>
-        <section id="response" className="pane col-1">
+        <section id="response" className="pane col grid-v">
           <header className="header"><h2>Response</h2></header>
+          <Editor value={localStorage['json']}
+                  onChange={(v) => {localStorage['json'] = v;}}
+                  options={{mode: 'application/json', lineNumbers: true}}
+          ></Editor>
         </section>
       </div>
     )

app/css/base.scss

@@ -23,3 +23,18 @@ h2 {
   font-size: $font-size-xl;
 }
 
+.CodeMirror {
+  height: 100% !important;
+  width: 100%;
+  font-size: 13px !important;
+  font-family: "Source Code Pro", monospace;
+}
+
+.CodeMirror, .CodeMirror-gutters, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background: $bg-dark !important;
+}
+
+.CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
+  background: lighten($bg-dark, 10%);
+}
+

app/css/components/request.scss

@@ -11,5 +11,9 @@
   .url-input {
     background: $bg-light;
     font-size: $font-size-lg;
+
+    .method-dropdown {
+      font-size: $font-size-md;
+    }
   }
 }

app/css/components/sidebar.scss

@@ -2,14 +2,12 @@
 @import '../constants/colors';
 
 #sidebar {
-  width: $sidebar-width;
   background: lighten($bg-dark, 3%);
   color: $font-dark-bg;
   align-self: stretch;
 
   .header {
     background: $bg-dark;
-    border-bottom-color: darken($bg-dark, 1%);
   }
 
   a {
@@ -18,8 +16,10 @@
     display: block;
   }
 
-  .sidebar-items li {
-    a {
+  ul.sidebar-items {
+    width: $sidebar-width;
+
+    li > a {
       color: darken($font-dark-bg, 30%);
       padding: $default-padding;
       height: $sidebar-item-height;

app/css/constants/colors.scss

@@ -23,7 +23,15 @@ $font-dark-bg: #ffffff;
   color: $font-light-bg;
 }
 
-.bg-light.bg-hover:hover {
-  background: darken($bg-light, 2%);
+.bg-super-light {
+  background: $bg-light;
+  color: $font-light-bg;
 }
 
+.bg-light.bg-hover:hover {
+  background: darken($bg-light, 3%);
+}
+
+.bg-light.bg-hover:active {
+  background: darken($bg-light, 6%);
+}

app/css/constants/dimensions.scss

@@ -3,21 +3,33 @@ $default-padding: 15px;
 /* Fonts */
 $font-size: 12px;
 $font-size-sm: $font-size * 0.8;
+$font-size-md: $font-size;
 $font-size-lg: $font-size * 1.3;
 $font-size-xl: $font-size * 1.5;
 $font-size-xxl: $font-size * 1.8;
 
 .txt-sm {
-  font-size: 90%;
+  font-size: $font-size-sm;
+}
+
+.txt-md {
+  font-size: $font-size-md;
 }
 
 .txt-lg {
-  font-size: 120%;
+  font-size: $font-size-lg;
+}
+
+.txt-xl {
+  font-size: $font-size-xl;
 }
 
 /* Wrapper */
 $header-height: 50px;
 
 /* Sidebar */
-$sidebar-width: 250px;
+$sidebar-width: 300px;
 $sidebar-item-height: 45px;
+
+/* Elements */
+$form-height: 50px;

app/css/grid.scss

@@ -8,18 +8,32 @@
   align-items: stretch;
   align-content: flex-start;
   height: 100%;
+  width: 100%;
+  box-sizing: border-box;
 }
 
-.col-1, .col-2 {
-  flex-basis: auto;
+.col {
+  flex: 1 1 auto;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
 }
 
-.col-1 {
-  flex-grow: 1;
+.grid-v {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: stretch;
+  align-content: flex-start;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
 }
 
-.col-1 {
-  flex-grow: 1;
-  flex-basis: auto;
+.row {
+  height: 100%;
+  flex: 1 1 auto;
+  box-sizing: border-box;
 }
-

app/css/index.scss

@@ -4,8 +4,8 @@
 
 /* Boilerplate */
 @import 'reset';
-@import 'base';
 @import 'grid';
+@import 'base';
 
 /* Styles */
 @import 'links';

app/css/layout/forms.scss

@@ -6,6 +6,7 @@
   background: $bg-super-light;
   outline: none;
   border: 0;
+  height: $form-height;
 }
 
 .btn {
@@ -15,13 +16,15 @@
 }
 
 input, button {
+  box-sizing: border-box;
   padding: $default-padding;
+  font-size: inherit;
   background: none;
   border: 0;
   outline: 0;
-  font-size: inherit;
   width: 100%;
   height: 100%;
+  margin: 0;
 }
 
 button {

app/css/layout/header.scss

@@ -2,15 +2,18 @@
 @import '../constants/colors';
 
 .header {
-  box-shadow: 1px 0 3px rgba(0, 0, 0, .15);
-  border-bottom: 1px solid transparent;
-  z-index: 1;
-  position: relative;
-
-  &.header-clickable a, &:not(.header-clickable) {
+  &.header-clickable a, &:not(.header-clickable) > *:first-child {
+    display: block;
     height: $header-height;
     box-sizing: border-box;
-    display: block;
     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,6 +1,6 @@
 @import '../constants/colors';
 
 .pane {
-  box-shadow: 1px 0 3px rgba(0, 0, 0, .15);
   background-color: $bg-light;
 }
+

app/css/lib/codemirror/codemirror.css

@@ -0,0 +1,335 @@
+/* BASICS */
+
+.CodeMirror {
+  /* Set height, width, borders, and global font properties here */
+  font-family: monospace;
+  height: 300px;
+  color: black;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+  padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre {
+  padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+  border-right: 1px solid #ddd;
+  background-color: #f7f7f7;
+  white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+  padding: 0 3px 0 5px;
+  min-width: 20px;
+  text-align: right;
+  color: #999;
+  white-space: nowrap;
+}
+
+.CodeMirror-guttermarker { color: black; }
+.CodeMirror-guttermarker-subtle { color: #999; }
+
+/* CURSOR */
+
+.CodeMirror-cursor {
+  border-left: 1px solid black;
+  border-right: none;
+  width: 0;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+  border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+  width: auto;
+  border: 0;
+  background: #7e7;
+}
+.cm-fat-cursor div.CodeMirror-cursors {
+  z-index: 1;
+}
+
+.cm-animate-fat-cursor {
+  width: auto;
+  border: 0;
+  -webkit-animation: blink 1.06s steps(1) infinite;
+  -moz-animation: blink 1.06s steps(1) infinite;
+  animation: blink 1.06s steps(1) infinite;
+  background-color: #7e7;
+}
+@-moz-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@-webkit-keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+@keyframes blink {
+  0% {}
+  50% { background-color: transparent; }
+  100% {}
+}
+
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror-overwrite .CodeMirror-cursor {}
+
+.cm-tab { display: inline-block; text-decoration: inherit; }
+
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+  position: absolute;
+}
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+.cm-strikethrough {text-decoration: line-through;}
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable,
+.cm-s-default .cm-punctuation,
+.cm-s-default .cm-property,
+.cm-s-default .cm-operator {}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3 {color: #085;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-s-default .cm-error {color: #f00;}
+.cm-invalidchar {color: #f00;}
+
+.CodeMirror-composing { border-bottom: 2px solid; }
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
+.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
+.CodeMirror-activeline-background {background: #e8f2ff;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+  position: relative;
+  overflow: hidden;
+  background: white;
+}
+
+.CodeMirror-scroll {
+  overflow: scroll !important; /* Things will break if this is overridden */
+  /* 30px is the magic margin used to hide the element's real scrollbars */
+  /* See overflow: hidden in .CodeMirror */
+  margin-bottom: -30px; margin-right: -30px;
+  padding-bottom: 30px;
+  height: 100%;
+  outline: none; /* Prevent dragging from highlighting the element */
+  position: relative;
+}
+.CodeMirror-sizer {
+  position: relative;
+  border-right: 30px solid transparent;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actual scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  position: absolute;
+  z-index: 6;
+  display: none;
+}
+.CodeMirror-vscrollbar {
+  right: 0; top: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+  bottom: 0; left: 0;
+  overflow-y: hidden;
+  overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+  right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+  left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+  position: absolute; left: 0; top: 0;
+  z-index: 3;
+}
+.CodeMirror-gutter {
+  white-space: normal;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+  margin-bottom: -30px;
+  /* Hack to make IE7 behave */
+  *zoom:1;
+  *display:inline;
+}
+.CodeMirror-gutter-wrapper {
+  position: absolute;
+  z-index: 4;
+  background: none !important;
+  border: none !important;
+}
+.CodeMirror-gutter-background {
+  position: absolute;
+  top: 0; bottom: 0;
+  z-index: 4;
+}
+.CodeMirror-gutter-elt {
+  position: absolute;
+  cursor: default;
+  z-index: 4;
+}
+.CodeMirror-gutter-wrapper {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+.CodeMirror-lines {
+  cursor: text;
+  min-height: 1px; /* prevents collapsing before first draw */
+}
+.CodeMirror pre {
+  /* Reset some styles that the rest of the page might have set */
+  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  border-width: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: inherit;
+  margin: 0;
+  white-space: pre;
+  word-wrap: normal;
+  line-height: inherit;
+  color: inherit;
+  z-index: 2;
+  position: relative;
+  overflow: visible;
+  -webkit-tap-highlight-color: transparent;
+}
+.CodeMirror-wrap pre {
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  word-break: normal;
+}
+
+.CodeMirror-linebackground {
+  position: absolute;
+  left: 0; right: 0; top: 0; bottom: 0;
+  z-index: 0;
+}
+
+.CodeMirror-linewidget {
+  position: relative;
+  z-index: 2;
+  overflow: auto;
+}
+
+.CodeMirror-widget {}
+
+.CodeMirror-code {
+  outline: none;
+}
+
+/* Force content-box sizing for the elements where we expect it */
+.CodeMirror-scroll,
+.CodeMirror-sizer,
+.CodeMirror-gutter,
+.CodeMirror-gutters,
+.CodeMirror-linenumber {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+.CodeMirror-measure {
+  position: absolute;
+  width: 100%;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.CodeMirror-cursor { position: absolute; }
+.CodeMirror-measure pre { position: static; }
+
+div.CodeMirror-cursors {
+  visibility: hidden;
+  position: relative;
+  z-index: 3;
+}
+div.CodeMirror-dragcursors {
+  visibility: visible;
+}
+
+.CodeMirror-focused div.CodeMirror-cursors {
+  visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+.CodeMirror-crosshair { cursor: crosshair; }
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+
+.cm-searching {
+  background: #ffa;
+  background: rgba(255, 255, 0, .4);
+}
+
+/* IE7 hack to prevent it from returning funny offsetTops on the spans */
+.CodeMirror span { *vertical-align: text-bottom; }
+
+/* Used to force a border model for a node */
+.cm-force-border { padding-right: .1px; }
+
+@media print {
+  /* Hide the cursor when printing */
+  .CodeMirror div.CodeMirror-cursors {
+    visibility: hidden;
+  }
+}
+
+/* See issue #2901 */
+.cm-tab-wrap-hack:after { content: ''; }
+
+/* Help users use markselection to safely style text background */
+span.CodeMirror-selectedtext { background: none; }

app/css/lib/codemirror/material.css

@@ -0,0 +1,53 @@
+/*
+
+    Name:       material
+    Author:     Michael Kaminsky (http://github.com/mkaminsky11)
+
+    Original material color scheme by Mattia Astorino (https://github.com/equinusocio/material-theme)
+
+*/
+
+.cm-s-material {
+  background-color: #263238;
+  color: rgba(233, 237, 237, 1);
+}
+.cm-s-material .CodeMirror-gutters {
+  background: #263238;
+  color: rgb(83,127,126);
+  border: none;
+}
+.cm-s-material .CodeMirror-guttermarker, .cm-s-material .CodeMirror-guttermarker-subtle, .cm-s-material .CodeMirror-linenumber { color: rgb(83,127,126); }
+.cm-s-material .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
+.cm-s-material div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
+.cm-s-material.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
+.cm-s-material .CodeMirror-line::selection, .cm-s-material .CodeMirror-line > span::selection, .cm-s-material .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
+.cm-s-material .CodeMirror-line::-moz-selection, .cm-s-material .CodeMirror-line > span::-moz-selection, .cm-s-material .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
+
+.cm-s-material .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
+.cm-s-material .cm-keyword { color: rgba(199, 146, 234, 1); }
+.cm-s-material .cm-operator { color: rgba(233, 237, 237, 1); }
+.cm-s-material .cm-variable-2 { color: #80CBC4; }
+.cm-s-material .cm-variable-3 { color: #82B1FF; }
+.cm-s-material .cm-builtin { color: #DECB6B; }
+.cm-s-material .cm-atom { color: #F77669; }
+.cm-s-material .cm-number { color: #F77669; }
+.cm-s-material .cm-def { color: rgba(233, 237, 237, 1); }
+.cm-s-material .cm-string { color: #C3E88D; }
+.cm-s-material .cm-string-2 { color: #80CBC4; }
+.cm-s-material .cm-comment { color: #546E7A; }
+.cm-s-material .cm-variable { color: #82B1FF; }
+.cm-s-material .cm-tag { color: #80CBC4; }
+.cm-s-material .cm-meta { color: #80CBC4; }
+.cm-s-material .cm-attribute { color: #FFCB6B; }
+.cm-s-material .cm-property { color: #80CBAE; }
+.cm-s-material .cm-qualifier { color: #DECB6B; }
+.cm-s-material .cm-variable-3 { color: #DECB6B; }
+.cm-s-material .cm-tag { color: rgba(255, 83, 112, 1); }
+.cm-s-material .cm-error {
+  color: rgba(255, 255, 255, 1.0);
+  background-color: #EC5F67;
+}
+.cm-s-material .CodeMirror-matchingbracket {
+  text-decoration: underline;
+  color: white !important;
+}

app/index.html

@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta charset="utf-8">
     <title>Redux TodoMVC example</title>
 </head>
 <body>
 <div id="root"></div>
 <script src="bundle.js"></script>
 </body>
-</html>
+</html>

package.json

@@ -7,14 +7,15 @@
     "url": "git@bitbucket.org:gschier/insomnia.git"
   },
   "dependencies": {
+    "babel-polyfill": "^6.7.2",
     "classnames": "^2.2.3",
+    "codemirror": "^5.12.0",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
+    "react-redux": "^4.4.1",
     "redux": "^3.3.1",
     "redux-logger": "^2.6.1",
-    "react-redux": "^4.4.1",
     "redux-thunk": "^2.0.1",
-    "babel-polyfill": "^6.7.2",
     "webpack": "^1.12.14"
   },
   "devDependencies": {

webpack/base.config.js

@@ -2,54 +2,54 @@ var path = require('path');
 var webpack = require('webpack');
 
 module.exports = {
-    context: path.join(__dirname, '../app'),
-    entry: [
-        './index.js',
-        './index.html'
-    ],
-    output: {
-        path: path.join(__dirname, '../dist'),
-        filename: 'bundle.js'
-    },
-    module: {
-        loaders: [
-            {
-                id: 'babel',
-                test: /\.jsx?$/,
-                loaders: ['babel?presets[]=react,presets[]=es2015'],
-                exclude: /node_modules/
-            },
-            {
-                test: /\.(scss|css)$/,
-                loader: 'style!css!sass'
-            },
-            {
-                test: /\.(html)$/,
-                loader: "file?name=[name].[ext]"
-            },
-            {
-                test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "url?limit=10000&mimetype=application/font-woff"
-            },
-            {
-                test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "url?limit=10000&mimetype=application/font-woff"
-            },
-            {
-                test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "url?limit=10000&mimetype=application/octet-stream"
-            },
-            {
-                test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "file"
-            },
-            {
-                test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-                loader: "url?limit=10000&mimetype=image/svg+xml"
-            }
-        ]
-    },
-    resolve: {
-        extensions: ['', '.js', '.jsx']
-    }
-};
+  context: path.join(__dirname, '../app'),
+  entry: [
+    './index.js',
+    './index.html'
+  ],
+  output: {
+    path: path.join(__dirname, '../dist'),
+    filename: 'bundle.js'
+  },
+  module: {
+    loaders: [
+      {
+        id: 'babel',
+        test: /\.jsx?$/,
+        loaders: ['babel?presets[]=react,presets[]=es2015'],
+        exclude: /node_modules/
+      },
+      {
+        test: /\.(scss|css)$/,
+        loader: 'style!css!sass'
+      },
+      {
+        test: /\.(html)$/,
+        loader: "file?name=[name].[ext]"
+      },
+      {
+        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
+        loader: "url?limit=10000&mimetype=application/font-woff"
+      },
+      {
+        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
+        loader: "url?limit=10000&mimetype=application/font-woff"
+      },
+      {
+        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
+        loader: "url?limit=10000&mimetype=application/octet-stream"
+      },
+      {
+        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
+        loader: "file"
+      },
+      {
+        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
+        loader: "url?limit=10000&mimetype=image/svg+xml"
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['', '.js', '.jsx']
+  }
+};