diff --git a/packages/graphql-playground-react/package.json b/packages/graphql-playground-react/package.json
index e390f0ed3..099d735b2 100644
--- a/packages/graphql-playground-react/package.json
+++ b/packages/graphql-playground-react/package.json
@@ -37,13 +37,9 @@
   ],
   "devDependencies": {
     "@types/deasync": "0.1.0",
-    "@types/express": "4.11.0",
-    "@types/hapi": "16.1.12",
-    "@types/jest": "22.1.1",
-    "@types/koa": "2.0.43",
-    "@types/node": "9.4.0",
-    "@types/react": "16.0.36",
-    "@types/react-dom": "16.0.4",
+    "@types/jest": "22.2.3",
+    "@types/node": "10.1.4",
+    "@types/react": "16.3.14",
     "@types/zen-observable": "^0.5.3",
     "autoprefixer": "7.2.5",
     "babel-cli": "6.26.0",
@@ -140,7 +136,7 @@
     "postcss-modules": "^1.1.0",
     "prettier": "^1.13.0",
     "prop-types": "^15.6.0",
-    "query-string": "^6.1.0",
+    "query-string": "5",
     "react": "^16.3.1",
     "react-addons-shallow-compare": "^15.6.2",
     "react-codemirror": "^1.0.0",
diff --git a/packages/graphql-playground-react/src/components/FileEditor.tsx b/packages/graphql-playground-react/src/components/FileEditor.tsx
index 10f010fa9..e3d17a298 100644
--- a/packages/graphql-playground-react/src/components/FileEditor.tsx
+++ b/packages/graphql-playground-react/src/components/FileEditor.tsx
@@ -5,6 +5,7 @@ import { QueryEditor } from './Playground/QueryEditor'
 import { createStructuredSelector } from 'reselect'
 import { getFile } from '../state/sessions/selectors'
 import { editFile } from '../state/sessions/actions'
+import EditorWrapper, { Container } from './Playground/EditorWrapper'
 import { connect } from 'react-redux'
 
 export interface Props {
@@ -15,16 +16,18 @@ export interface Props {
 class FileEditor extends React.Component<Props, {}> {
   render() {
     return (
-      <Wrapper className="graphiql-container">
-        <div className="editorWrap">
-          <div className="queryWrap">
-            <QueryEditor
-              value={this.props.value}
-              onChange={this.props.onChange}
-            />
-          </div>
-        </div>
-      </Wrapper>
+      <Container>
+        <Wrapper>
+          <EditorWrapper>
+            <QueryWrap>
+              <QueryEditor
+                value={this.props.value}
+                onChange={this.props.onChange}
+              />
+            </QueryWrap>
+          </EditorWrapper>
+        </Wrapper>
+      </Container>
     )
   }
 }
@@ -58,7 +61,10 @@ const Wrapper = styled.div`
       color: rgba(42, 126, 210, 1);
     }
   }
-  .CodeMirror-gutters {
-    background: none !important;
-  }
+`
+
+const QueryWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 `
diff --git a/packages/graphql-playground-react/src/components/HistoryPopup.tsx b/packages/graphql-playground-react/src/components/HistoryPopup.tsx
index b9619fbf6..d0e7f6fc2 100644
--- a/packages/graphql-playground-react/src/components/HistoryPopup.tsx
+++ b/packages/graphql-playground-react/src/components/HistoryPopup.tsx
@@ -19,6 +19,7 @@ import { duplicateSession } from '../state/sessions/actions'
 import { toggleHistoryItemStarring } from '../state/history/actions'
 import { Session } from '../state/sessions/reducers'
 import { OrderedMap } from 'immutable'
+import { Container } from './Playground/EditorWrapper'
 
 export interface ReduxProps {
   isOpen: boolean
@@ -122,11 +123,11 @@ class HistoryPopup extends React.Component<
                     'graphiql-wrapper': localTheme === 'light',
                   })}
                 >
-                  <div className="graphiql-container">
-                    <div className="queryWrap">
+                  <Container>
+                    <QueryWrap>
                       <QueryEditor value={selectedItem.query} />
-                    </div>
-                  </div>
+                    </QueryWrap>
+                  </Container>
                 </GraphiqlWrapper>
               </Big>
             </Right>
@@ -182,12 +183,6 @@ export default withTheme<{}>(
 const Wrapper = styled.div`
   display: flex;
   min-height: 500px;
-
-  & .graphiql-container.graphiql-container {
-    & .queryWrap.queryWrap {
-      border-top: none;
-    }
-  }
 `
 
 const Left = styled.div`
@@ -280,3 +275,9 @@ const GraphiqlWrapper = Big.extend`
   display: flex;
   flex: 1 1 auto;
 `
+
+const QueryWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/ConfigEditor.tsx b/packages/graphql-playground-react/src/components/Playground/ConfigEditor.tsx
index b2eac7838..1ba6c118b 100644
--- a/packages/graphql-playground-react/src/components/Playground/ConfigEditor.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/ConfigEditor.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react'
+import EditorWrapper from './EditorWrapper'
+import { styled } from '../../styled'
 
 export interface Props {
   value?: string
@@ -123,7 +125,11 @@ export class ConfigEditor extends React.Component<Props, {}> {
   }
 
   render() {
-    return <div className="codemirrorWrap" ref={this.setNode} />
+    return (
+      <EditorWrapper>
+        <Editor innerRef={this.setNode} />
+      </EditorWrapper>
+    )
   }
 
   setNode = node => {
@@ -166,3 +172,9 @@ export class ConfigEditor extends React.Component<Props, {}> {
     }
   }
 }
+
+const Editor = styled.div`
+  flex: 1;
+  height: 100%;
+  position: relative;
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsStyles.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsStyles.tsx
new file mode 100644
index 000000000..7a5323143
--- /dev/null
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsStyles.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { styled } from '../../../styled'
+
+const Title = styled.div`
+  color: rgba(0, 0, 0, 0.3);
+  cursor: default;
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 16px;
+  user-select: none;
+`
+export const CategoryTitle = ({ children }) => <Title>{children}</Title>
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/FieldDoc.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/FieldDoc.tsx
index 20f9db890..970dca614 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/FieldDoc.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/FieldDoc.tsx
@@ -13,6 +13,7 @@ import ScalarTypeSchema from './DocsTypes/ScalarType'
 import EnumTypeSchema from './DocsTypes/EnumTypeSchema'
 import UnionTypeSchema from './DocsTypes/UnionTypeSchema'
 import { getDeeperType, serialize } from '../util/stack'
+import { CategoryTitle } from './DocsStyles'
 
 export interface Props {
   schema: any
@@ -115,7 +116,7 @@ export default class FieldDoc extends React.Component<Props, State> {
           markdown={field.description || ''}
         />
 
-        <div className="doc-category-title">{`${typeInstance} details`}</div>
+        <CategoryTitle>{`${typeInstance} details`}</CategoryTitle>
         {type.description &&
           type.description.length > 0 && (
             <div className="markdown-content">
@@ -148,7 +149,7 @@ export default class FieldDoc extends React.Component<Props, State> {
 
         {obj.args.length > 0 && (
           <div>
-            <div className="doc-category-title">arguments</div>
+            <CategoryTitle>arguments</CategoryTitle>
             {obj.args.map((arg, index) => (
               <div key={arg.name}>
                 <div>
@@ -166,7 +167,7 @@ export default class FieldDoc extends React.Component<Props, State> {
 
         {obj.implementations.length > 0 && (
           <div>
-            <div className="doc-category-title">implementations</div>
+            <CategoryTitle>implementations</CategoryTitle>
             {obj.implementations.map((data, index) => (
               <TypeLink
                 key={data.name}
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocs.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocs.tsx
index 41408e94e..b2bc0cc56 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocs.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocs.tsx
@@ -26,6 +26,7 @@ import { GraphQLSchema } from 'graphql'
 import { getSessionDocs } from '../../../state/docs/selectors'
 import { getSelectedSessionIdFromRoot } from '../../../state/sessions/selectors'
 import { createStructuredSelector } from 'reselect'
+import { styled } from '../../../styled'
 
 interface StateFromProps {
   docs: {
@@ -120,19 +121,17 @@ class GraphDocs extends React.Component<
     } else if (schema === null) {
       // Schema is null when it explicitly does not exist, typically due to
       // an error during introspection.
-      emptySchema = (
-        <div className="error-container">{'No Schema Available'}</div>
-      )
+      emptySchema = <ErrorContainer>{'No Schema Available'}</ErrorContainer>
     }
 
     return (
-      <div
+      <Docs
         className={cn('graph-docs docExplorerWrap docs', { open: docsOpen })}
         style={docsStyle}
-        ref={this.setRef}
+        innerRef={this.setRef}
       >
         <style jsx={true} global={true}>{`
-          .graphiql-container .doc-category-title {
+          .graph-docs .doc-category-title {
             @p: .mh0, .ph16;
             border: none;
           }
@@ -159,13 +158,6 @@ class GraphDocs extends React.Component<
             padding: 1px 2px;
             background: rgba(0, 0, 0, 0.06);
           }
-          .graph-docs {
-            @p: .absolute, .h100;
-            right: -2px;
-          }
-          .graph-docs.open {
-            z-index: 2000;
-          }
           .docs-button {
             @p: .absolute, .white, .bgGreen, .pv6, .z2, .ttu, .fw6, .f12, .ph10,
               .pointer;
@@ -179,23 +171,11 @@ class GraphDocs extends React.Component<
             border-top-left-radius: 2px;
             border-top-right-radius: 2px;
           }
-          .doc-explorer {
-            @p: .flex, .relative, .h100;
-            letter-spacing: 0.3px;
-            outline: none;
-            box-shadow: -1px 1px 6px 0 rgba(0, 0, 0, 0.3);
-          }
           .doc-explorer-container {
             @p: .flex, .relative, .h100, .w100;
             overflow-x: auto;
             overflow-y: hidden;
           }
-          .doc-explorer:before {
-            @p: .top0, .bottom0, .bgGreen, .absolute, .z3;
-            left: 0px;
-            content: '';
-            width: 6px;
-          }
           .doc-explorer-gradient {
             @p: .z1, .absolute, .top0, .bottom0;
             pointer-events: none;
@@ -208,28 +188,17 @@ class GraphDocs extends React.Component<
               rgba(255, 255, 255, 0)
             );
           }
-          .docExplorerResizer {
-            @p: .top0, .bottom0, .absolute, .z5;
-            cursor: col-resize;
-            left: -7px;
-            content: '';
-            width: 20px;
-          }
         `}</style>
         <div className="docs-button" onClick={this.handleToggleDocs}>
           Schema
         </div>
-        <div
-          className="docExplorerResizer"
-          onMouseDown={this.handleDocsResizeStart}
-        />
+        <DocsResizer onMouseDown={this.handleDocsResizeStart} />
         <div className="doc-explorer-gradient" />
-        <div
-          className="doc-explorer"
+        <DocsExplorer
           onKeyDown={this.handleKeyDown}
           onMouseMove={this.handleMouseMove}
           tabIndex={0}
-          ref={this.setDocExplorerRef}
+          innerRef={this.setDocExplorerRef}
         >
           <div className="doc-explorer-container">
             {emptySchema && <ColumnDoc>{emptySchema}</ColumnDoc>}
@@ -257,8 +226,8 @@ class GraphDocs extends React.Component<
               </ColumnDoc>
             ))}
           </div>
-        </div>
-      </div>
+        </DocsExplorer>
+      </Docs>
     )
   }
 
@@ -453,3 +422,80 @@ export default connect<StateFromProps, DispatchFromProps, Props>(
   null,
   { withRef: true },
 )(GraphDocs)
+
+const Docs = styled.div`
+  background: white;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
+  position: absolute;
+  right: -2px;
+  z-index: 3;
+  height: 100%;
+  font-family: 'Open Sans', sans-serif;
+  -webkit-font-smoothing: antialiased;
+
+  &.open {
+    z-index: 2000;
+  }
+
+  .field-name {
+    color: #1f61a0;
+  }
+  .type-name {
+    color: rgb(245, 160, 0);
+  }
+  .arg-name {
+    color: #1f61a9;
+  }
+
+  code {
+    font-family: 'Source Code Pro', monospace;
+    border-radius: 2px;
+    padding: 1px 2px;
+    background: rgba(0, 0, 0, 0.06);
+  }
+`
+
+const DocsExplorer = styled.div`
+  background: white;
+  display: flex;
+  position: relative;
+  height: 100%;
+  letter-spacing: 0.3px;
+  outline: none;
+  box-shadow: -1px 1px 6px 0 rgba(0, 0, 0, 0.3);
+
+  &::before {
+    top: 0;
+    bottom: 0;
+    background: ${props => props.theme.colours.green};
+    position: absolute;
+    z-index: 3;
+    left: 0px;
+    content: '';
+    width: 6px;
+  }
+`
+
+const DocsResizer = styled.div`
+  cursor: col-resize;
+  height: 100%;
+  left: -5px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 10px;
+  z-index: 10;
+`
+
+const ErrorContainer = styled.div`
+  font-weight: bold;
+  left: 0;
+  letter-spacing: 1px;
+  opacity: 0.5;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  text-transform: uppercase;
+  top: 50%;
+  transform: translate(0, -50%);
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocsRoot.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocsRoot.tsx
index f0c8ccea3..d27a7fd17 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocsRoot.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocsRoot.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import TypeLink from './TypeLink'
 import { serializeRoot } from '../util/stack'
+import { CategoryTitle } from './DocsStyles'
 
 export interface Props {
   schema: any
@@ -60,7 +61,7 @@ interface ShowRootTypeProps {
 function ShowRootType({ name, fields, offset }: ShowRootTypeProps) {
   return (
     <div>
-      <div className="doc-category-title">{name}</div>
+      <CategoryTitle>{name}</CategoryTitle>
       {fields
         .filter(field => !field.isDeprecated)
         .map((field, index) => (
diff --git a/packages/graphql-playground-react/src/components/Playground/EditorWrapper.tsx b/packages/graphql-playground-react/src/components/Playground/EditorWrapper.tsx
new file mode 100644
index 000000000..cc05da1e6
--- /dev/null
+++ b/packages/graphql-playground-react/src/components/Playground/EditorWrapper.tsx
@@ -0,0 +1,829 @@
+import * as React from 'react'
+import { styled } from '../../styled'
+import { injectGlobal } from 'styled-components'
+
+const EditorWrapper = styled.div`
+  /* Comment */
+  .cm-comment {
+    color: ${p => p.theme.editorColours.comment};
+  }
+
+  /* Punctuation */
+  .cm-punctuation {
+    color: ${p => p.theme.editorColours.punctuation};
+  }
+
+  /* Proppery */
+  .cm-property {
+    color: ${p => p.theme.editorColours.property};
+  }
+
+  /* Keyword */
+  .cm-keyword {
+    color: ${p => p.theme.editorColours.keyword};
+  }
+
+  /* OperationName, FragmentName */
+  .cm-def {
+    color: ${p => p.theme.editorColours.def};
+  }
+
+  /* FieldAlias */
+  .cm-qualifier {
+    color: ${p => p.theme.editorColours.def};
+  }
+
+  /* ArgumentName and ObjectFieldName */
+  .cm-attribute {
+    color: ${p => p.theme.editorColours.attribute};
+  }
+
+  /* Number */
+  .cm-number {
+    color: ${p => p.theme.editorColours.number};
+  }
+
+  /* String */
+  .cm-string {
+    color: ${p => p.theme.editorColours.string};
+  }
+
+  /* Boolean */
+  .cm-builtin {
+    color: ${p => p.theme.editorColours.builtin};
+  }
+
+  /* EnumValue */
+  .cm-string-2 {
+    color: ${p => p.theme.editorColours.string2};
+  }
+
+  /* Variable */
+  .cm-variable {
+    color: ${p => p.theme.editorColours.variable};
+  }
+
+  /* Directive */
+  .cm-meta {
+    color: ${p => p.theme.editorColours.meta};
+  }
+
+  /* Type */
+  .cm-atom {
+    color: ${p => p.theme.editorColours.atom};
+  }
+
+  /* Comma */
+  .cm-ws {
+    color: ${p => p.theme.editorColours.ws};
+  }
+  position: relative;
+  display: flex;
+  flex: 1 1 0%;
+  flex-flow: column;
+
+  .CodeMirror {
+    color: rgba(255, 255, 255, 0.3);
+    font-family: ${p => p.theme.settings['editor.fontFamily']};
+    font-size: ${p => `${p.theme.settings['editor.fontSize']}px`};
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  .CodeMirror-lines {
+    padding: 20px 0;
+  }
+
+  .CodeMirror-gutters {
+    border-right: none;
+  }
+
+  .CodeMirror span[role='presentation'] {
+    color: ${p => p.theme.colours.text};
+  }
+
+  /* CURSOR */
+
+  .CodeMirror div.CodeMirror-cursor {
+    background: ${p =>
+      p.theme.settings['editor.cursorShape'] === 'block'
+        ? p.theme.editorColours.cursorColor
+        : 'transparent'};
+    border-left: ${p =>
+      p.theme.settings['editor.cursorShape'] === 'line'
+        ? `1px solid ${p.theme.editorColours.cursorColor}`
+        : 0};
+    border-bottom: ${p =>
+      p.theme.settings['editor.cursorShape'] === 'underline'
+        ? `1px solid ${p.theme.editorColours.cursorColor}`
+        : 0};
+  }
+  /* Shown when moving in bi-directional text */
+  .CodeMirror div.CodeMirror-secondarycursor {
+    border-left: 1px solid silver;
+  }
+  .CodeMirror.cm-fat-cursor div.CodeMirror-cursor {
+    background: rgba(255, 255, 255, 0.6);
+    color: white;
+    border: 0;
+    width: auto;
+  }
+  .CodeMirror.cm-fat-cursor div.CodeMirror-cursors {
+    z-index: 1;
+  }
+
+  .cm-animate-fat-cursor {
+    -webkit-animation: blink 1.06s steps(1) infinite;
+    animation: blink 1.06s steps(1) infinite;
+    border: 0;
+    width: auto;
+  }
+  @-webkit-keyframes blink {
+    0% {
+      background: #7e7;
+    }
+    50% {
+      background: none;
+    }
+    100% {
+      background: #7e7;
+    }
+  }
+  @keyframes blink {
+    0% {
+      background: #7e7;
+    }
+    50% {
+      background: none;
+    }
+    100% {
+      background: #7e7;
+    }
+  }
+
+  .CodeMirror-foldmarker {
+    border-radius: 4px;
+    background: #08f;
+    background: linear-gradient(#43a8ff, #0f83e8);
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+    color: white;
+    font-family: arial;
+    font-size: 12px;
+    line-height: 0;
+    margin: 0 3px;
+    padding: 0px 4px 1px;
+    text-shadow: 0 -1px rgba(0, 0, 0, 0.1);
+  }
+
+  div.CodeMirror span.CodeMirror-matchingbracket {
+    /* color: rgba(255, 255, 255, 0.4); */
+    text-decoration: underline;
+  }
+
+  div.CodeMirror span.CodeMirror-nonmatchingbracket {
+    color: rgb(242, 92, 84);
+  }
+
+  .toolbar-button {
+    background: #fdfdfd;
+    background: linear-gradient(#fbfbfb, #f8f8f8);
+    border-color: #d3d3d3 #d0d0d0 #bababa;
+    border-radius: 4px;
+    border-style: solid;
+    border-width: 0.5px;
+    box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.13), inset 0 1px #fff;
+    color: #444;
+    cursor: pointer;
+    display: inline-block;
+    margin: 0 5px 0;
+    padding: 2px 8px 4px;
+    text-decoration: none;
+  }
+  .toolbar-button:active {
+    background: linear-gradient(#ececec, #d8d8d8);
+    border-color: #cacaca #c9c9c9 #b0b0b0;
+    box-shadow: 0 1px 0 #fff, inset 0 1px rgba(255, 255, 255, 0.2),
+      inset 0 1px 1px rgba(0, 0, 0, 0.08);
+  }
+  .toolbar-button.error {
+    background: linear-gradient(#fdf3f3, #e6d6d7);
+    color: #b00;
+  }
+
+  .autoInsertedLeaf.cm-property {
+    -webkit-animation-duration: 6s;
+    animation-duration: 6s;
+    -webkit-animation-name: insertionFade;
+    animation-name: insertionFade;
+    border-bottom: 2px solid rgba(255, 255, 255, 0);
+    border-radius: 2px;
+    margin: -2px -4px -1px;
+    padding: 2px 4px 1px;
+  }
+
+  @-webkit-keyframes insertionFade {
+    from,
+    to {
+      background: rgba(255, 255, 255, 0);
+      border-color: rgba(255, 255, 255, 0);
+    }
+
+    15%,
+    85% {
+      background: #fbffc9;
+      border-color: #f0f3c0;
+    }
+  }
+
+  @keyframes insertionFade {
+    from,
+    to {
+      background: rgba(255, 255, 255, 0);
+      border-color: rgba(255, 255, 255, 0);
+    }
+
+    15%,
+    85% {
+      background: #fbffc9;
+      border-color: #f0f3c0;
+    }
+  }
+
+  .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 {
+    background-color: transparent;
+    border: none;
+    white-space: nowrap;
+  }
+  .CodeMirror-linenumbers {
+  }
+  .CodeMirror-linenumber {
+    font-family: Open Sans, sans-serif;
+    font-weight: 600;
+    font-size: ${p => `${p.theme.settings['editor.fontSize'] - 2}px`};
+    color: ${p => p.theme.colours.textInactive};
+    min-width: 20px;
+    padding: 0 3px 0 5px;
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  .CodeMirror-guttermarker {
+    color: black;
+  }
+  .CodeMirror-guttermarker-subtle {
+    color: #999;
+  }
+
+  .cm-tab {
+    display: inline-block;
+    text-decoration: inherit;
+  }
+
+  .CodeMirror-ruler {
+    border-left: 1px solid #ccc;
+    position: absolute;
+  }
+  .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-error {
+    color: #f00;
+  }
+  .cm-invalidchar {
+    color: #f00;
+  }
+
+  .CodeMirror-composing {
+    border-bottom: 2px solid;
+  }
+  .CodeMirror-matchingtag {
+    background: rgba(255, 150, 0, 0.3);
+  }
+  .CodeMirror-activeline-background {
+    background: #e8f2ff;
+  }
+
+  /* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+  .CodeMirror {
+    background: white;
+    overflow: hidden;
+    line-height: 1.6;
+  }
+
+  .CodeMirror-scroll {
+    height: 100%;
+    /* 30px is the magic margin used to hide the element's real scrollbars */
+    /* See overflow: hidden in .CodeMirror */
+    margin-bottom: -30px;
+    margin-right: -30px;
+    outline: none; /* Prevent dragging from highlighting the element */
+    overflow: scroll !important; /* Things will break if this is overridden */
+    padding-bottom: 30px;
+    position: relative;
+  }
+  .CodeMirror-sizer {
+    border-right: 30px solid transparent;
+    position: relative;
+  }
+
+  /* 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 {
+    display: none !important;
+    position: absolute;
+    z-index: 6;
+  }
+  .CodeMirror-vscrollbar {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    right: 0;
+    top: 0;
+  }
+  .CodeMirror-hscrollbar {
+    bottom: 0;
+    left: 0;
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+  .CodeMirror-scrollbar-filler {
+    right: 0;
+    bottom: 0;
+  }
+  .CodeMirror-gutter-filler {
+    left: 0;
+    bottom: 0;
+  }
+
+  .CodeMirror-gutters {
+    min-height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 3;
+  }
+  .CodeMirror-gutter {
+    display: inline-block;
+    height: 100%;
+    margin-bottom: -30px;
+    vertical-align: top;
+    white-space: normal;
+    /* Hack to make IE7 behave */
+    *zoom: 1;
+    *display: inline;
+  }
+  .CodeMirror-gutter-wrapper {
+    background: none !important;
+    border: none !important;
+    position: absolute;
+    z-index: 4;
+  }
+  .CodeMirror-gutter-background {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 4;
+  }
+  .CodeMirror-gutter-elt {
+    cursor: default;
+    position: absolute;
+    z-index: 4;
+  }
+  .CodeMirror-gutter-wrapper {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+  .CodeMirror-lines {
+    cursor: text;
+    min-height: 1px; /* prevents collapsing before first draw */
+  }
+  .CodeMirror pre {
+    -webkit-tap-highlight-color: transparent;
+    /* Reset some styles that the rest of the page might have set */
+    background: transparent;
+    border-radius: 0;
+    border-width: 0;
+    color: inherit;
+    font-family: inherit;
+    font-size: inherit;
+    -webkit-font-variant-ligatures: none;
+    font-variant-ligatures: none;
+    line-height: inherit;
+    margin: 0;
+    overflow: visible;
+    position: relative;
+    white-space: pre;
+    word-wrap: normal;
+    z-index: 2;
+  }
+  .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 {
+    overflow: auto;
+    position: relative;
+    z-index: 2;
+  }
+
+  .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 {
+    box-sizing: content-box;
+  }
+
+  .CodeMirror-measure {
+    height: 0;
+    overflow: hidden;
+    position: absolute;
+    visibility: hidden;
+    width: 100%;
+  }
+
+  .CodeMirror-cursor {
+    position: absolute;
+  }
+  .CodeMirror-measure pre {
+    position: static;
+  }
+
+  div.CodeMirror-cursors {
+    position: relative;
+    visibility: hidden;
+    z-index: 3;
+  }
+  div.CodeMirror-dragcursors {
+    visibility: visible;
+  }
+
+  .CodeMirror-focused div.CodeMirror-cursors {
+    visibility: visible;
+  }
+
+  .CodeMirror-selected {
+    background: ${p => p.theme.editorColours.selection};
+  }
+  .CodeMirror-focused .CodeMirror-selected {
+    background: ${p => p.theme.editorColours.selection};
+  }
+  .CodeMirror-crosshair {
+    cursor: crosshair;
+  }
+  .CodeMirror-line::-moz-selection,
+  .CodeMirror-line > span::-moz-selection,
+  .CodeMirror-line > span > span::-moz-selection {
+    background: ${p => p.theme.editorColours.selection};
+  }
+  .CodeMirror-line::selection,
+  .CodeMirror-line > span::selection,
+  .CodeMirror-line > span > span::selection {
+    background: ${p => p.theme.editorColours.selection};
+  }
+  .CodeMirror-line::-moz-selection,
+  .CodeMirror-line > span::-moz-selection,
+  .CodeMirror-line > span > span::-moz-selection {
+    background: ${p => p.theme.editorColours.selection};
+  }
+
+  .cm-searching {
+    background: #ffa;
+    background: rgba(255, 255, 0, 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: 0.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;
+  }
+
+  .CodeMirror-dialog {
+    background: inherit;
+    color: inherit;
+    left: 0;
+    right: 0;
+    overflow: hidden;
+    padding: 0.1em 0.8em;
+    position: absolute;
+    z-index: 15;
+  }
+
+  .CodeMirror-dialog-top {
+    border-bottom: 1px solid #eee;
+    top: 0;
+  }
+
+  .CodeMirror-dialog-bottom {
+    border-top: 1px solid #eee;
+    bottom: 0;
+  }
+
+  .CodeMirror-dialog input {
+    background: transparent;
+    border: 1px solid #d3d6db;
+    color: inherit;
+    font-family: monospace;
+    outline: none;
+    width: 20em;
+  }
+
+  .CodeMirror-dialog button {
+    font-size: 70%;
+  }
+
+  .CodeMirror-foldgutter {
+    width: 0.7em;
+  }
+  .CodeMirror-foldgutter-open,
+  .CodeMirror-foldgutter-folded {
+    cursor: pointer;
+  }
+  .CodeMirror-foldgutter-open:after {
+    content: '▾';
+  }
+  .CodeMirror-foldgutter-folded:after {
+    content: '▸';
+  }
+  /* The lint marker gutter */
+  .CodeMirror-lint-markers {
+    width: 16px;
+  }
+
+  .CodeMirror-jump-token {
+    text-decoration: underline;
+  }
+`
+
+// Styling of portal for hints
+// .CodeMirror-info info for types breaks stack trace
+// tslint:disable-next-line
+injectGlobal`
+  .CodeMirror-lint-tooltip {
+    background-color: white;
+    border-radius: 4px 4px 4px 4px;
+    border: 1px solid black;
+    color: infotext;
+    font-family: monospace;
+    font-size: 10pt;
+    max-width: 600px;
+    opacity: 0;
+    overflow: hidden;
+    padding: 2px 5px;
+    position: fixed;
+    -webkit-transition: opacity 0.4s;
+    transition: opacity 0.4s;
+    z-index: 100;
+  }
+
+  .CodeMirror-lint-message-error,
+  .CodeMirror-lint-message-warning {
+    padding-left: 23px;
+  }
+
+  .CodeMirror-lint-mark-error,
+  .CodeMirror-lint-mark-warning {
+    background-position: left bottom;
+    background-repeat: repeat-x;
+  }
+
+  .CodeMirror-lint-mark-error {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==');
+  }
+
+  .CodeMirror-lint-mark-warning {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=');
+  }
+
+  .CodeMirror-lint-marker-error,
+  .CodeMirror-lint-marker-warning {
+    background-position: center center;
+    background-repeat: no-repeat;
+    cursor: pointer;
+    display: inline-block;
+    height: 16px;
+    position: relative;
+    vertical-align: middle;
+    width: 16px;
+  }
+
+  .CodeMirror-lint-message-error,
+  .CodeMirror-lint-message-warning {
+    background-position: top left;
+    background-repeat: no-repeat;
+    padding-left: 18px;
+  }
+
+  .CodeMirror-lint-marker-error,
+  .CodeMirror-lint-message-error {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=');
+  }
+
+  .CodeMirror-lint-marker-warning,
+  .CodeMirror-lint-message-warning {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=');
+  }
+
+  .CodeMirror-lint-marker-multiple {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC');
+    background-position: right bottom;
+    background-repeat: no-repeat;
+    width: 100%;
+    height: 100%;
+  }
+
+  .CodeMirror-hints {
+    background: white;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+    font-size: 14px;
+    list-style: none;
+    margin-left: -6px;
+    margin: 0;
+    max-height: 20em;
+    overflow-y: auto;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    z-index: 10;
+    border-radius: 2px;
+    top: 0 !important;
+    left: 0 !important;
+  }
+
+  .CodeMirror-hints-wrapper {
+    font-family: 'Open Sans', sans-serif;
+    background: white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
+    margin-left: -6px;
+    position: absolute;
+    z-index: 10;
+  }
+
+  .CodeMirror-hints-wrapper .CodeMirror-hints {
+    box-shadow: none;
+    margin-left: 0;
+    position: relative;
+    z-index: 0;
+  }
+
+  .CodeMirror-hint {
+    color: rgba(15, 32, 45, 0.6);
+    cursor: pointer;
+    margin: 0;
+    max-width: 300px;
+    overflow: hidden;
+    padding: 6px 12px;
+    white-space: pre;
+  }
+
+  li.CodeMirror-hint-active {
+    background-color: #2a7ed3;
+    border-top-color: white;
+    color: white;
+  }
+
+  .CodeMirror-hint-information {
+    border-top: solid 1px rgba(0, 0, 0, 0.1);
+    max-width: 300px;
+    padding: 10px 12px;
+    position: relative;
+    z-index: 1;
+    background-color: rgba(15, 32, 45, 0.03);
+    font-size: 14px;
+  }
+
+  .CodeMirror-hint-information:first-child {
+    border-bottom: solid 1px #c0c0c0;
+    border-top: none;
+    margin-bottom: -1px;
+  }
+
+  .CodeMirror-hint-information .content {
+    color: rgba(15, 32, 45, 0.6);
+    box-orient: vertical;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    line-clamp: 3;
+    line-height: 1.36;
+    max-height: 59px;
+    overflow: hidden;
+    text-overflow: -o-ellipsis-lastline;
+  }
+
+  .CodeMirror-hint-information .content p:first-child {
+    margin-top: 0;
+  }
+
+  .CodeMirror-hint-information .content p:last-child {
+    margin-bottom: 0;
+  }
+
+  .CodeMirror-hint-information .infoType {
+    color: rgb(241, 143, 1);
+    cursor: pointer;
+    display: inline;
+    margin-right: 0.5em;
+  }
+`
+
+const Wrapper = ({ children }) => <EditorWrapper>{children}</EditorWrapper>
+
+const GraphqlContainer = styled.div`
+  color: #141823;
+  display: flex;
+  flex-direction: row;
+  font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular',
+    'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande',
+    arial, sans-serif;
+  font-size: 14px;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  width: 100%;
+`
+
+export const Container = ({ children }) => (
+  <GraphqlContainer>{children}</GraphqlContainer>
+)
+
+export default Wrapper
diff --git a/packages/graphql-playground-react/src/components/Playground/ExecuteButton.tsx b/packages/graphql-playground-react/src/components/Playground/ExecuteButton.tsx
index ca6e5b89b..54a1fb0db 100644
--- a/packages/graphql-playground-react/src/components/Playground/ExecuteButton.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/ExecuteButton.tsx
@@ -66,7 +66,7 @@ class ExecuteButton extends React.Component<
     if (hasOptions && optionsOpen) {
       const highlight = this.state.highlight
       options = (
-        <ul className="execute-options">
+        <ExecuteOptions>
           {operations.map(operation => (
             <ExecuteButtonOperation
               operation={operation}
@@ -77,7 +77,7 @@ class ExecuteButton extends React.Component<
               key={operation.name ? operation.name.value : '*'}
             />
           ))}
-        </ul>
+        </ExecuteOptions>
       )
     }
 
@@ -261,3 +261,37 @@ const Button = withProps<ButtonProps>()(styled.div)`
     background-color: ${buttonBackgroundHover};
   }
 `
+
+const ExecuteOptions = styled.ul`
+  background: #fff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.25);
+  left: -1px;
+  margin: 0;
+  padding: 8px 0;
+  position: absolute;
+  top: 78px;
+  z-index: 100;
+
+  &:before {
+    position: absolute;
+    background: white;
+    content: '';
+    top: -4px;
+    left: 34px;
+    transform: rotate(45deg);
+    width: 8px;
+    height: 8px;
+  }
+
+  li {
+    cursor: pointer;
+    list-style: none;
+    min-width: 100px;
+    padding: 2px 30px 4px 10px;
+  }
+
+  li.selected {
+    background: rgb(39, 174, 96);
+    color: white;
+  }
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx b/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx
index ab57118c7..7bc43a8c0 100644
--- a/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { isNamedType, GraphQLSchema } from 'graphql'
-import * as cn from 'classnames'
 import ExecuteButton from './ExecuteButton'
 import QueryEditor from './QueryEditor'
+import EditorWrapper, { Container } from './EditorWrapper'
 import CodeMirrorSizer from 'graphiql/dist/utility/CodeMirrorSizer'
 import { fillLeafs } from 'graphiql/dist/utility/fillLeafs'
 import { getLeft, getTop } from 'graphiql/dist/utility/elementPosition'
@@ -15,7 +15,7 @@ import ReponseTracing from './ResponseTracing'
 import withTheme from '../Theme/withTheme'
 import { LocalThemeInterface } from '../Theme'
 import GraphDocs from './DocExplorer/GraphDocs'
-import { styled } from '../../styled/index'
+import { withProps, styled } from '../../styled/index'
 import TopBar from './TopBar/TopBar'
 import {
   VariableEditorComponent,
@@ -159,12 +159,8 @@ class GraphQLEditor extends React.PureComponent<
 
   render() {
     return (
-      <div className={cn('graphiql-container')}>
-        <style jsx={true}>{`
-          .graphiql-container {
-            font-family: Open Sans, sans-serif;
-          }
-
+      <Container>
+        <style jsx={true} global={true}>{`
           .docs-button,
           .schema-button {
             @p: .absolute, .white, .bgGreen, .pa6, .br2, .z2, .ttu, .fw6, .f14,
@@ -200,22 +196,6 @@ class GraphQLEditor extends React.PureComponent<
             right: 38px;
             z-index: 2;
           }
-          .intro {
-            @p: .absolute, .tlCenter, .top50, .left50, .white20, .f16, .tc;
-            font-family: 'Source Code Pro', 'Consolas', 'Inconsolata',
-              'Droid Sans Mono', 'Monaco', monospace;
-            letter-spacing: 0.6px;
-            width: 235px;
-          }
-
-          .listening {
-            @p: .f16, .white40, .absolute, .bottom0, .bgDarkBlue;
-            font-family: 'Source Code Pro', 'Consolas', 'Inconsolata',
-              'Droid Sans Mono', 'Monaco', monospace;
-            letter-spacing: 0.6px;
-            padding-left: 24px;
-            padding-bottom: 60px;
-          }
 
           .onboarding-hint {
             @p: .absolute, .br2, .z999;
@@ -248,20 +228,13 @@ class GraphQLEditor extends React.PureComponent<
             transition: opacity 300ms ease-in;
           }
         `}</style>
-        <div className="editorWrap">
+        <EditorWrapper>
           <TopBar shareEnabled={this.props.shareEnabled} />
-          <div
+          <EditorBar
             ref={this.setEditorBarComponent}
-            className="editorBar"
             onMouseDown={this.handleResizeStart}
           >
-            <div
-              className={cn('queryWrap', this.props.localTheme)}
-              style={{
-                WebkitFlex: this.props.editorFlex,
-                flex: this.props.editorFlex,
-              }}
-            >
+            <QueryWrap flex={this.props.editorFlex}>
               <QueryEditor
                 getRef={this.setQueryEditorComponent}
                 schema={this.props.schema}
@@ -269,45 +242,32 @@ class GraphQLEditor extends React.PureComponent<
                 onRunQuery={this.runQueryAtCursor}
                 onClickReference={this.handleClickReference}
               />
-              <div
-                className="variable-editor"
-                style={{
-                  height: this.props.variableEditorOpen
-                    ? this.props.variableEditorHeight
-                    : null,
-                }}
+              <VariableEditor
+                isOpen={this.props.variableEditorOpen}
+                height={this.props.variableEditorHeight}
               >
-                <div
-                  className="variable-editor-title"
-                  style={{
-                    cursor: this.props.variableEditorOpen
-                      ? 'row-resize'
-                      : 'n-resize',
-                  }}
+                <VariableEditorTitle
+                  isOpen={this.props.variableEditorOpen}
                   onMouseDown={this.handleVariableResizeStart}
                 >
-                  <span
-                    className={cn('subtitle', {
-                      active: this.props.queryVariablesActive,
-                    })}
-                    ref={this.setQueryVariablesRef}
+                  <VariableEditorSubtitle
+                    isOpen={this.props.queryVariablesActive}
+                    innerRef={this.setQueryVariablesRef}
                     onClick={this.props.openQueryVariables}
                   >
-                    {'Query Variables'}
-                  </span>
-                  <span
-                    className={cn('subtitle', {
-                      active: !this.props.queryVariablesActive,
-                    })}
-                    ref={this.setHttpHeadersRef}
+                    Query Variables
+                  </VariableEditorSubtitle>
+                  <VariableEditorSubtitle
+                    isOpen={!this.props.queryVariablesActive}
+                    innerRef={this.setHttpHeadersRef}
                     onClick={this.props.closeQueryVariables}
                   >
                     {'HTTP Headers ' +
                       (this.props.headersCount && this.props.headersCount > 0
                         ? `(${this.props.headersCount})`
                         : '')}
-                  </span>
-                </div>
+                  </VariableEditorSubtitle>
+                </VariableEditorTitle>
                 {this.props.queryVariablesActive ? (
                   <VariableEditorComponent
                     getRef={this.setVariableEditorComponent}
@@ -329,10 +289,10 @@ class GraphQLEditor extends React.PureComponent<
                     onRunQuery={this.runQueryAtCursor}
                   />
                 )}
-              </div>
+              </VariableEditor>
               <QueryDragBar ref={this.setQueryResizer} />
-            </div>
-            <div className="resultWrap">
+            </QueryWrap>
+            <ResultWrap>
               <ResultDragBar ref={this.setResponseResizer} />
               <ExecuteButton />
               {this.props.queryRunning &&
@@ -340,39 +300,28 @@ class GraphQLEditor extends React.PureComponent<
               <Results setRef={this.setResultComponent} />
               {!this.props.queryRunning &&
                 (!this.props.responses || this.props.responses.size === 0) && (
-                  <div className="intro">
-                    Hit the Play Button to get a response here
-                  </div>
+                  <Intro>Hit the Play Button to get a response here</Intro>
                 )}
               {this.props.subscriptionActive && (
-                <div className="listening">Listening &hellip;</div>
+                <Listening>Listening &hellip;</Listening>
               )}
-              <div
-                className="response-tracing"
-                style={{
-                  height: this.props.responseTracingOpen
-                    ? this.props.responseTracingHeight
-                    : null,
-                }}
+              <ResponseTracking
+                isOpen={this.props.responseTracingOpen}
+                height={this.props.responseTracingHeight}
               >
-                <div
-                  className="response-tracing-title"
-                  style={{
-                    cursor: this.props.responseTracingOpen
-                      ? 'row-resize'
-                      : 'n-resize',
-                  }}
+                <ResponseTrackingTitle
+                  isOpen={this.props.responseTracingOpen}
                   onMouseDown={this.handleTracingResizeStart}
                 >
                   Tracing
-                </div>
-                <ReponseTracing open={this.props.responseTracingOpen} />
-              </div>
-            </div>
-          </div>
-        </div>
+                </ResponseTrackingTitle>
+                <ReponseTracing />
+              </ResponseTracking>
+            </ResultWrap>
+          </EditorBar>
+        </EditorWrapper>
         <GraphDocs ref={this.setDocExplorerRef} schema={this.props.schema} />
-      </div>
+      </Container>
     )
   }
 
@@ -689,6 +638,21 @@ export default withTheme<Props>(
   )(GraphQLEditor),
 )
 
+const EditorBar = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+`
+
+const ResultWrap = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  position: relative;
+  border-left: none;
+  background: ${p => p.theme.colours.resultBackground};
+`
+
 const DragBar = styled.div`
   width: 15px;
   position: absolute;
@@ -705,3 +669,102 @@ const ResultDragBar = styled(DragBar)`
   left: 0px;
   z-index: 1;
 `
+
+interface DrawerProps {
+  isOpen: boolean
+  height: number
+}
+
+const BottomDrawer = withProps<DrawerProps>()(styled.div)`
+  display: flex;
+  background: #0b1924;
+  flex-direction: column;
+  position: relative;
+  height: ${props => (props.isOpen ? `${props.height}px` : '43px')};
+  `
+
+interface TitleProps {
+  isOpen: boolean
+}
+
+const BottomDrawerTitle = styled.div`
+  background: #0b1924;
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.53px;
+  line-height: 14px;
+  font-size: 14px;
+  padding: 14px 14px 5px 21px;
+  user-select: none;
+`
+
+const VariableEditor = styled(BottomDrawer)`
+  .CodeMirror {
+    padding-left: 12px;
+    width: calc(100% - 12px);
+    background: ${p => p.theme.colours.leftDrawerBackground};
+  }
+`
+
+const VariableEditorTitle = withProps<TitleProps>()(styled(BottomDrawerTitle))`
+  cursor: ${p => (p.isOpen ? 'row-resize' : 'n-resize')};
+  background: ${p => p.theme.colours.leftDrawerBackground};
+`
+
+const VariableEditorSubtitle = withProps<TitleProps>()(styled.span)`
+  margin-right: 10px;
+  cursor: pointer;
+  color: ${p =>
+    p.isOpen ? p.theme.colours.text : p.theme.colours.textInactive};
+`
+
+const ResponseTracking = styled(BottomDrawer)`
+  background: ${p => p.theme.colours.rightDrawerBackground};
+`
+
+const ResponseTrackingTitle = withProps<TitleProps>()(
+  styled(BottomDrawerTitle),
+)`
+  text-align: right;
+  background: ${p => p.theme.colours.rightDrawerBackground};
+  cursor: ${props => (props.isOpen ? 's-resize' : 'n-resize')};
+  color: ${p => p.theme.colours.textInactive};
+`
+
+interface QueryProps {
+  flex: number
+}
+
+const QueryWrap = withProps<QueryProps>()(styled.div)`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: ${props => props.flex} 1 0%;
+  border-top: 8px solid ${props => props.theme.colours.resultBackground};
+`
+
+const Intro = styled.div`
+  width: 235px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: ${p => p.theme.colours.textInactive};
+  font-size: ${p => p.theme.sizes.small16};
+  font-family: 'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono',
+    'Monaco', monospace;
+  text-align: center;
+  letter-spacing: 0.6px;
+`
+
+const Listening = styled.div`
+  position: absolute;
+  bottom: 0;
+  color: ${p => p.theme.colours.text};
+  background: ${p => p.theme.colours.resultBackground};
+  font-size: ${p => p.theme.sizes.small16};
+  font-family: ${p => p.theme.settings['editor.fontFamily']};
+  letter-spacing: 0.6px;
+  padding-left: 24px;
+  padding-bottom: 60px;
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/QueryEditor.tsx b/packages/graphql-playground-react/src/components/Playground/QueryEditor.tsx
index c00b1af6e..a0e216d29 100644
--- a/packages/graphql-playground-react/src/components/Playground/QueryEditor.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/QueryEditor.tsx
@@ -18,6 +18,9 @@ import {
   getSelectedSessionIdFromRoot,
   getScrollTop,
 } from '../../state/sessions/selectors'
+import EditorWrapper from './EditorWrapper'
+import { styled } from '../../styled'
+
 /**
  * QueryEditor
  *
@@ -229,7 +232,11 @@ export class QueryEditor extends React.PureComponent<Props & ReduxProps, {}> {
   }
 
   render() {
-    return <div className="query-editor" ref={this.setRef} />
+    return (
+      <EditorWrapper>
+        <Editor innerRef={this.setRef} />
+      </EditorWrapper>
+    )
   }
 
   setRef = ref => {
@@ -302,3 +309,14 @@ export default connect(
   mapStateToProps,
   { onChange: editQuery, setScrollTop },
 )(QueryEditor)
+
+const Editor = styled.div`
+  flex: 1 1 0%;
+  position: relative;
+
+  .CodeMirror {
+    padding-left: 12px;
+    width: calc(100% - 12px);
+    background: ${p => p.theme.colours.editorBackground};
+  }
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/ResultViewer.tsx b/packages/graphql-playground-react/src/components/Playground/ResultViewer.tsx
index 5c41978e1..6372853ce 100644
--- a/packages/graphql-playground-react/src/components/Playground/ResultViewer.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/ResultViewer.tsx
@@ -7,9 +7,11 @@
  */
 
 import * as React from 'react'
+import { styled, withProps } from '../../styled'
 
 export interface Props {
   value: string
+  isSubscription: boolean
   hideGutters?: boolean
 }
 
@@ -89,14 +91,10 @@ export class ResultViewer extends React.Component<Props, {}> {
 
   render() {
     return (
-      <div className="result-codemirror" ref={this.setRef}>
-        <style jsx={true}>{`
-          .result-codemirror :global(.CodeMirror) {
-            @p: .bbox, .pl38;
-            background: none;
-          }
-        `}</style>
-      </div>
+      <Result
+        innerRef={this.setRef}
+        isSubscription={this.props.isSubscription}
+      />
     )
   }
 
@@ -119,3 +117,29 @@ export class ResultViewer extends React.Component<Props, {}> {
     return this.node && this.node.clientHeight
   }
 }
+
+interface ResultProps {
+  isSubscription: boolean
+}
+
+const Result = withProps<ResultProps>()(styled.div)`
+  position: relative;
+  display: flex;
+  flex: 1;
+  height: ${props => (props.isSubscription ? 'auto' : '100%')};
+  .CodeMirror {
+    height: ${props => (props.isSubscription ? 'auto' : '100%')};
+    position: ${props => (props.isSubscription ? 'relative' : 'absolute%')};
+    box-sizing: border-box;
+    background: none;
+    padding-left: 38px;
+  }
+  .CodeMirror-scroll {
+    overflow: auto !important;
+    max-width: 50vw;
+    margin-right: 10px;
+  }
+  .cm-string {
+    color: ${p => p.theme.editorColours.property} !important;
+  }
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/Results.tsx b/packages/graphql-playground-react/src/components/Playground/Results.tsx
index 25901dfc6..9dedfa377 100644
--- a/packages/graphql-playground-react/src/components/Playground/Results.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/Results.tsx
@@ -1,12 +1,11 @@
 import * as React from 'react'
 import ageOfDate from './util/ageOfDate'
 import { ResultViewer } from './ResultViewer'
-import * as cn from 'classnames'
 import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
 import { getResponses } from '../../state/sessions/selectors'
 import { List } from 'immutable'
-import { styled } from '../../styled'
+import { styled, withProps } from '../../styled'
 import { ResponseRecord } from '../../state/sessions/reducers'
 
 export interface Props {
@@ -25,81 +24,50 @@ const defaultResponseRecord = new ResponseRecord({
 
 const Results: React.SFC<Props & ReduxProps> = ({ setRef, responses }) => {
   const response1 = responses.get(0) || defaultResponseRecord
+  const isSubscription = responses.size > 1
   return (
-    <div
-      className={cn('result-window', {
-        isSubscription: responses.size > 1,
-      })}
-      ref={setRef}
-    >
-      <style jsx={true}>{`
-        .result-window {
-          @p: .bgDarkBlue, .nosb, .relative;
-        }
-
-        .subscription-time {
-          @p: .relative;
-          height: 17px;
-          margin-top: 12px;
-          margin-bottom: 4px;
-          &:before {
-            @p: .absolute, .w100;
-            content: '';
-            top: 9px;
-            left: 95px;
-            border-top: 1px solid $white20;
-          }
-        }
-
-        .subscription-time-text {
-          @p: .bgDarkBlue, .white50, .f12;
-          padding-left: 15px;
-        }
-
-        .result-viewer-wrapper {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          overflow: auto;
-        }
-        .isSubscription .result-viewer-wrapper {
-          position: relative;
-        }
-      `}</style>
+    <ResultWindow innerRef={setRef} isSubscription={isSubscription}>
       {responses.size <= 1 ? (
-        <Response key={'first'}>
+        <Response key={'first'} isSubscription={isSubscription}>
           {responses.size > 1 &&
             response1.time && (
-              <div className="subscription-time">
-                <div className="subscription-time-text">
+              <SubscriptionTime>
+                <SubscriptionTimeText>
                   {ageOfDate(response1.time)}
-                </div>
-              </div>
+                </SubscriptionTimeText>
+              </SubscriptionTime>
             )}
-          <div className="result-viewer-wrapper">
-            <ResultViewer value={response1.date} />
-          </div>
+          <ResultWrapper isSubscription={isSubscription}>
+            <ResultViewer
+              value={response1.date}
+              isSubscription={isSubscription}
+            />
+          </ResultWrapper>
         </Response>
       ) : (
         responses.map(response => (
-          <Response key={response.resultID || String(response.time)}>
+          <Response
+            key={response.resultID || String(response.time)}
+            isSubscription={isSubscription}
+          >
             {responses.size > 1 &&
               response.time && (
-                <div className="subscription-time">
-                  <div className="subscription-time-text">
+                <SubscriptionTime>
+                  <SubscriptionTimeText>
                     {ageOfDate(response.time)}
-                  </div>
-                </div>
+                  </SubscriptionTimeText>
+                </SubscriptionTime>
               )}
-            <div className="result-viewer-wrapper">
-              <ResultViewer value={response.date} />
-            </div>
+            <ResultWrapper isSubscription={responses.size > 1}>
+              <ResultViewer
+                value={response.date}
+                isSubscription={isSubscription}
+              />
+            </ResultWrapper>
           </Response>
         ))
       )}
-    </div>
+    </ResultWindow>
   )
 }
 
@@ -109,8 +77,82 @@ const mapStateToProps = createStructuredSelector({
 
 export default connect(mapStateToProps)(Results)
 
-const Response = styled.div`
+const ResultWindow = withProps<ResultWrapperProps>()(styled.div)`
+  flex: 1;
+  height: ${props => (props.isSubscription ? 'auto' : '100%')};
+  position: relative;
+  overflow: ${props => (props.isSubscription ? 'auto' : 'visible')};
+  max-height: none !important;
+
+  .cm-string {
+    color: rgb(41, 185, 115);
+  }
+
+  .cm-def {
+    color: rgb(241, 143, 1);
+  }
+
+  .cm-property {
+    color: rgb(51, 147, 220);
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .CodeMirror {
+    background: ${p => p.theme.colours.resultBackground};
+  }
+  .CodeMirror-gutters {
+    cursor: col-resize;
+  }
+  .CodeMirror-foldgutter,
+  .CodeMirror-foldgutter-open:after,
+  .CodeMirror-foldgutter-folded:after {
+    padding-left: 3px;
+  }
+`
+
+const Response = withProps<ResultWrapperProps>()(styled.div)`
+  position: relative;
+  display: flex;
+  flex: 1;
+  height: ${props => (props.isSubscription ? `auto` : '100%')};
+  flex-direction: column;
   &:not(:first-child):last-of-type {
     margin-bottom: 48px;
   }
 `
+
+const SubscriptionTime = styled.div`
+  position: relative;
+  height: 17px;
+  margin-top: 12px;
+  margin-bottom: 4px;
+  &:before {
+    position: absolute;
+    width: 100%;
+    content: '';
+    top: 9px;
+    left: 95px;
+    border-top: 1px solid ${p => p.theme.colours.white20};
+  }
+`
+
+const SubscriptionTimeText = styled.div`
+  color: rgba(23, 42, 58, 1);
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.5);
+  padding-left: 15px;
+`
+
+interface ResultWrapperProps {
+  isSubscription: boolean
+}
+
+const ResultWrapper = withProps<ResultWrapperProps>()(styled.div)`
+  display: flex;
+  flex: 1;
+  height: ${props => (props.isSubscription ? `auto` : '100%')};
+  position: ${props => (props.isSubscription ? `relative` : 'static')};
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/VariableEditor.tsx b/packages/graphql-playground-react/src/components/Playground/VariableEditor.tsx
index 884ef77c9..3486a0005 100644
--- a/packages/graphql-playground-react/src/components/Playground/VariableEditor.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/VariableEditor.tsx
@@ -17,6 +17,7 @@ import {
 } from '../../state/sessions/selectors'
 import { createStructuredSelector } from 'reselect'
 import { VariableToType } from '../../state/sessions/reducers'
+import { styled } from '../../styled'
 
 /* tslint:disable */
 
@@ -184,9 +185,8 @@ class VariableEditor extends React.PureComponent<Props & ReduxProps> {
 
   render() {
     return (
-      <div
-        className="codemirrorWrap"
-        ref={node => {
+      <Editor
+        innerRef={node => {
           this._node = node
         }}
       />
@@ -254,3 +254,9 @@ export const HeadersEditorComponent = connect(
     onChange: editHeaders,
   },
 )(VariableEditor)
+
+const Editor = styled.div`
+  flex: 1;
+  height: 100%;
+  position: relative;
+`
diff --git a/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx b/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx
index ef707ab75..b9a0b8bad 100644
--- a/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx
+++ b/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx
@@ -10,6 +10,12 @@ import {
   theme as styledTheme,
   keyframes,
 } from '../styled'
+import {
+  darkColours,
+  lightColours,
+  darkEditorColours,
+  lightEditorColours,
+} from '../styled/theme'
 import OldThemeProvider from './Theme/ThemeProvider'
 import { getActiveEndpoints } from './util'
 import { ISettings } from '../types'
@@ -323,7 +329,18 @@ class PlaygroundWrapper extends React.Component<
     return (
       <div>
         {title}
-        <ThemeProvider theme={{ ...styledTheme, mode: theme } as any}>
+        <ThemeProvider
+          theme={
+            {
+              ...styledTheme,
+              mode: theme,
+              colours: theme === 'dark' ? darkColours : lightColours,
+              editorColours:
+                theme === 'dark' ? darkEditorColours : lightEditorColours,
+              config: this.props.config!,
+            } as any
+          }
+        >
           <OldThemeProvider theme={theme}>
             <App>
               {this.props.config &&
diff --git a/packages/graphql-playground-react/src/components/SettingsEditor.tsx b/packages/graphql-playground-react/src/components/SettingsEditor.tsx
index 25519093d..1d6392c0a 100644
--- a/packages/graphql-playground-react/src/components/SettingsEditor.tsx
+++ b/packages/graphql-playground-react/src/components/SettingsEditor.tsx
@@ -9,6 +9,7 @@ import { getConfigString } from '../state/general/selectors'
 import { setSettingsString, setConfigString } from '../state/general/actions'
 import { editSettings, saveSettings } from '../state/sessions/actions'
 import { getSettingsString } from '../state/workspace/reducers'
+import EditorWrapper, { Container } from './Playground/EditorWrapper'
 
 export interface Props {
   value: string
@@ -29,9 +30,9 @@ export class SettingsEditor extends React.Component<Props, {}> {
   render() {
     const { isConfig } = this.props
     return (
-      <Wrapper className="graphiql-container">
-        <div className="editorWrap">
-          <div className="variable-editor">
+      <Container>
+        <Wrapper>
+          <EditorWrapper>
             <ConfigEditor
               value={this.props.value}
               onEdit={this.props.onChange}
@@ -40,16 +41,16 @@ export class SettingsEditor extends React.Component<Props, {}> {
               readOnly={this.props.readOnly}
             />
             <PlaygroundVersion>{window.version}</PlaygroundVersion>
-          </div>
-        </div>
-        {!this.props.readOnly && (
-          <ButtonWrapper>
-            <Button onClick={this.props.onSave}>
-              Save {isConfig ? `Config` : `Settings`}
-            </Button>
-          </ButtonWrapper>
-        )}
-      </Wrapper>
+          </EditorWrapper>
+          {!this.props.readOnly && (
+            <ButtonWrapper>
+              <Button onClick={this.props.onSave}>
+                Save {isConfig ? `Config` : `Settings`}
+              </Button>
+            </ButtonWrapper>
+          )}
+        </Wrapper>
+      </Container>
     )
   }
 
@@ -131,11 +132,12 @@ const backgroundColor = theme('mode', {
 const Wrapper = styled.div`
   background: ${backgroundColor};
   position: relative;
-  .variable-editor {
-    height: 100% !important;
-  }
+  display: flex;
+  flex-flow: column;
+  flex: 1 1 0;
+
   .CodeMirror {
-    background: none !important;
+    background: ${p => p.theme.colours.resultBackground};
     .CodeMirror-code {
       color: rgba(255, 255, 255, 0.7);
     }
@@ -143,9 +145,6 @@ const Wrapper = styled.div`
       color: rgba(42, 126, 210, 1);
     }
   }
-  .CodeMirror-gutters {
-    background: none !important;
-  }
 `
 
 const ButtonWrapper = styled.div`
diff --git a/packages/graphql-playground-react/src/index.tsx b/packages/graphql-playground-react/src/index.tsx
index cf61047a9..45ba957f8 100644
--- a/packages/graphql-playground-react/src/index.tsx
+++ b/packages/graphql-playground-react/src/index.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import Root from './components/Root'
-import './styles/graphiql_dark.css'
-import './styles/graphiql_light.css'
 import './index.css'
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/packages/graphql-playground-react/src/localDevIndex.tsx b/packages/graphql-playground-react/src/localDevIndex.tsx
index f39761bcc..d8a2e90bd 100644
--- a/packages/graphql-playground-react/src/localDevIndex.tsx
+++ b/packages/graphql-playground-react/src/localDevIndex.tsx
@@ -1,10 +1,7 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import MiddlewareApp from './components/MiddlewareApp'
-import './styles/graphiql_dark.css'
-import './styles/graphiql_light.css'
 import './index.css'
-import { exampleSdl } from './fixtures/sdl'
 // import { Tab } from './state/sessions/reducers'
 // import { LinkCreatorProps } from './state/sessions/fetchingSagas'
 // import { ApolloLink } from 'apollo-link'
@@ -27,7 +24,6 @@ if (process.env.NODE_ENV !== 'production') {
         {...options}
         config={config}
         configString={configString}
-        schema={exampleSdl}
         // tabs={tabs}
         // createApolloLink={customLinkCreator}
         // schema={exampleSchema}
diff --git a/packages/graphql-playground-react/src/middlewareIndex.tsx b/packages/graphql-playground-react/src/middlewareIndex.tsx
index 824503e5c..e58af8a00 100644
--- a/packages/graphql-playground-react/src/middlewareIndex.tsx
+++ b/packages/graphql-playground-react/src/middlewareIndex.tsx
@@ -1,8 +1,6 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import MiddlewareApp from './components/MiddlewareApp'
-import './styles/graphiql_dark.css'
-import './styles/graphiql_light.css'
 import './index.css'
 
 if (process.env.NODE_ENV !== 'production') {
diff --git a/packages/graphql-playground-react/src/state/workspace/deserialize.ts b/packages/graphql-playground-react/src/state/workspace/deserialize.ts
index 59100a65a..ec73d0f87 100644
--- a/packages/graphql-playground-react/src/state/workspace/deserialize.ts
+++ b/packages/graphql-playground-react/src/state/workspace/deserialize.ts
@@ -4,14 +4,14 @@ import { SharingState } from '../sharing/reducers'
 import { Map, OrderedMap, List, fromJS } from 'immutable'
 import { GeneralState } from '../general/reducers'
 import { mapValues } from 'lodash'
-import { RootState, Workspace } from './reducers'
+import { RootState, Workspace, normalizeSettingsString } from './reducers'
 import { AppHistory, AppHistoryItem } from '../appHistory/reducers'
 
 export function deserializePersistedState(state) {
   return new RootState({
     workspaces: deserializeWorkspaces(state.workspaces),
     selectedWorkspace: state.selectedWorkspace,
-    settingsString: state.settingsString,
+    settingsString: normalizeSettingsString(state.settingsString),
     appHistory: deserializeAppHistory(state.appHistory),
     general: deserializeGeneral(state.general),
   }) as any
diff --git a/packages/graphql-playground-react/src/state/workspace/reducers.ts b/packages/graphql-playground-react/src/state/workspace/reducers.ts
index 2f2c611ab..560f3c56a 100644
--- a/packages/graphql-playground-react/src/state/workspace/reducers.ts
+++ b/packages/graphql-playground-react/src/state/workspace/reducers.ts
@@ -18,6 +18,8 @@ import { deserializePersistedState } from './deserialize'
 import appHistory, { AppHistory } from '../appHistory/reducers'
 // import { createSelector } from 'reselect'
 
+import { ISettings } from '../../types'
+
 export function getSelectedWorkspaceId(state) {
   return state.get('selectedWorkspace')
 }
@@ -38,8 +40,11 @@ export class Workspace extends Record({
   history: HistoryState
 }
 
-export const defaultSettings = {
+export const defaultSettings: ISettings = {
   'general.betaUpdates': false,
+  'editor.cursorShape': 'line',
+  'editor.fontSize': 14,
+  'editor.fontFamily': `'Source Code Pro', 'Consolas', 'Inconsolata', 'Droid Sans Mono', 'Monaco', monospace`,
   'editor.theme': 'dark',
   'editor.reuseHeaders': true,
   'request.credentials': 'omit',
@@ -172,13 +177,7 @@ export const getSessionCounts = immutableMemoize(state => {
 export const getSettingsString = state => state.settingsString
 export const getSettings = createSelector(
   [getSettingsString],
-  (settingsString: any) => {
-    try {
-      return normalizeSettings(JSON.parse(settingsString))
-    } catch (e) {
-      return defaultSettings
-    }
-  },
+  parseSettingsString,
 )
 
 function normalizeSettings(settings) {
@@ -187,7 +186,22 @@ function normalizeSettings(settings) {
     settings['editor.theme'] = 'dark'
   }
 
-  return settings
+  return {
+    ...defaultSettings,
+    ...settings,
+  }
+}
+
+function parseSettingsString(settingsString) {
+  try {
+    return normalizeSettings(JSON.parse(settingsString))
+  } catch (e) {
+    return defaultSettings
+  }
+}
+
+export function normalizeSettingsString(settingsString) {
+  return JSON.stringify(parseSettingsString(settingsString), null, 2)
 }
 
 export const getTheme = createSelector(
diff --git a/packages/graphql-playground-react/src/styled/theme.ts b/packages/graphql-playground-react/src/styled/theme.ts
index 59bf69935..d157d97d8 100644
--- a/packages/graphql-playground-react/src/styled/theme.ts
+++ b/packages/graphql-playground-react/src/styled/theme.ts
@@ -1,3 +1,6 @@
+import { ISettings } from '../types'
+import { defaultSettings } from '../state/workspace/reducers'
+
 export interface Colours {
   green: string
   darkBlue: string
@@ -23,9 +26,51 @@ export interface Colours {
   purple: string
   lightGrey: string
   lighterGrey: string
+  // New dynamic styles
+  editorBackground: string
+  resultBackground: string
+  leftDrawerBackground: string
+  rightDrawerBackground: string
+  text: string
+  textInactive: string
+}
+
+export const darkColours: Colours = {
+  green: '#27ae60',
+  darkBlue: 'rgb(23, 42, 58)',
+  darkBlue50: 'rgba(23, 42, 58, 0.5)',
+  darkBlue80: 'rgba(23, 42, 58, 0.8)',
+  darkBlue60: 'rgba(23, 42, 58, 0.6)',
+  darkBlue30: 'rgba(23, 42, 58, 0.3)',
+  darkBlue20: 'rgba(23, 42, 58, 0.2)',
+  darkBlue10: 'rgba(23, 42, 58, 0.1)',
+  darkerBlue: '#0F202D',
+  darkestBlue: 'rgb(11,20,28)',
+  white10: 'rgba(255, 255, 255, 0.1)',
+  white20: 'rgba(255, 255, 255, 0.2)',
+  white30: 'rgba(255, 255, 255, 0.3)',
+  white60: 'rgba(255, 255, 255, 0.6)',
+  white70: 'rgba(255, 255, 255, 0.7)',
+  white80: 'rgba(255, 255, 255, 0.8)',
+  white: 'rgba(255, 255, 255, 1)',
+  black40: 'rgba(0, 0, 0, 0.4)',
+  red: '#f25c54',
+  purple: 'rgb(164, 3, 111)',
+
+  paleText: 'rgba(0, 0, 0, 0.5)',
+  paleGrey: '#f3f4f4', // use for bgs, borders, etc
+  lightGrey: '#eeeff0',
+  lighterGrey: '#f6f7f7',
+  // New colors
+  editorBackground: '#0f202d',
+  resultBackground: 'rgb(23, 43, 58)',
+  leftDrawerBackground: '#0b1924',
+  rightDrawerBackground: '#0b1924',
+  text: 'rgba(255,255,255,0.6)',
+  textInactive: '#555e66',
 }
 
-export const colours: Colours = {
+export const lightColours: Colours = {
   green: '#27ae60',
   darkBlue: 'rgb(23, 42, 58)',
   darkBlue50: 'rgba(23, 42, 58, 0.5)',
@@ -51,6 +96,73 @@ export const colours: Colours = {
   paleGrey: '#f3f4f4', // use for bgs, borders, etc
   lightGrey: '#eeeff0',
   lighterGrey: '#f6f7f7',
+  // New colors
+  editorBackground: '#f6f7f7',
+  resultBackground: '#eeeff0',
+  leftDrawerBackground: '#e9eaea',
+  rightDrawerBackground: '#e5e7e7',
+  text: 'rgba(0,0,0,.7)',
+  textInactive: 'rgba(0,0,0,.3)',
+}
+
+export interface EditorColours {
+  property: string
+  comment: string
+  punctuation: string
+  keyword: string
+  def: string
+  qualifier: string
+  attribute: string
+  number: string
+  string: string
+  builtin: string
+  string2: string
+  variable: string
+  meta: string
+  atom: string
+  ws: string
+  selection: string
+  cursorColor: string
+}
+
+export const darkEditorColours: EditorColours = {
+  property: 'rgb(41, 185, 115)',
+  comment: 'rgba(255, 255, 255, 0.3)',
+  punctuation: 'rgba(255, 255, 255, 0.4)',
+  keyword: 'rgb(42, 126, 211)',
+  def: 'rgb(56, 189, 193)',
+  qualifier: '#1c92a9',
+  attribute: 'rgb(247, 116, 102)',
+  number: '#2882f9',
+  string: '#d64292',
+  builtin: '#d47509',
+  string2: '#0b7fc7',
+  variable: 'rgb(181, 34, 130)',
+  meta: '#b33086',
+  atom: 'rgb(249, 233, 34)',
+  ws: 'rgba(255, 255, 255, 0.4)',
+  selection: 'rgba(255, 255, 255, 0.1)',
+  cursorColor: 'rgba(255, 255, 255, 0.4)',
+}
+
+export const lightEditorColours: EditorColours = {
+  property: '#328c8c', //
+  comment: 'rgba(0, 0, 0, 0.3)', //
+  punctuation: 'rgba(23,42,58,.8)', //
+  keyword: '#366b6b', //
+  def: 'rgb(56, 189, 193)', //
+  qualifier: '#1c92a9', //
+  attribute: '#b56531', //
+  number: '#1f6ed6;', //
+  string: '#d64292', //
+  builtin: '#d47509', //
+  string2: '#0b7fc7', //
+  variable: 'rgb(236, 95, 103)', //
+  meta: '#b33086', //
+  atom: 'rgb(245, 160, 0)', //
+  ws: 'rgba(23, 42, 58, 0.8)', //
+  selection: '#d1e9fd',
+  cursorColor: 'rgba(0, 0, 0, 0.4)',
 }
 
 export interface Sizes {
@@ -98,11 +210,15 @@ export interface ThemeInterface {
   colours: Colours
   sizes: Sizes
   shorthands: Shorthands
+  editorColours: EditorColours
+  settings: ISettings
 }
 
 export const theme: ThemeInterface = {
   mode: 'dark',
-  colours,
+  colours: darkColours,
   sizes,
   shorthands,
+  editorColours: darkEditorColours,
+  settings: defaultSettings,
 }
diff --git a/packages/graphql-playground-react/src/styles/graphiql_dark.css b/packages/graphql-playground-react/src/styles/graphiql_dark.css
index 864e5f637..cf8c6e592 100644
--- a/packages/graphql-playground-react/src/styles/graphiql_dark.css
+++ b/packages/graphql-playground-react/src/styles/graphiql_dark.css
@@ -1256,6 +1256,7 @@ span.CodeMirror-selectedtext {
   -webkit-transform: translate(0, -50%);
   transform: translate(0, -50%);
 }
+
 .CodeMirror-foldmarker {
   color: blue;
   cursor: pointer;
diff --git a/packages/graphql-playground-react/src/types.ts b/packages/graphql-playground-react/src/types.ts
index 2dac43623..d6eb00c1d 100644
--- a/packages/graphql-playground-react/src/types.ts
+++ b/packages/graphql-playground-react/src/types.ts
@@ -14,8 +14,13 @@ export type GraphQLClient =
 
 export type Theme = 'dark' | 'light'
 
+export type CursorShape = 'line' | 'block' | 'underline'
+
 export interface ISettings {
   ['general.betaUpdates']: boolean
+  ['editor.cursorShape']: CursorShape
+  ['editor.fontFamily']: string
+  ['editor.fontSize']: number
   ['editor.theme']: Theme
   ['editor.reuseHeaders']: boolean
   ['tracing.hideTracingResponse']: boolean
diff --git a/packages/graphql-playground-react/yarn.lock b/packages/graphql-playground-react/yarn.lock
index 05d490a8f..453f50923 100644
--- a/packages/graphql-playground-react/yarn.lock
+++ b/packages/graphql-playground-react/yarn.lock
@@ -24,170 +24,41 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
-"@types/accepts@*":
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/@types/accepts/-/accepts-1.3.4.tgz#467a88fb1d5ba594998eead31c093d77d1cbe99e"
-  dependencies:
-    "@types/node" "*"
-
-"@types/body-parser@*":
-  version "1.16.8"
-  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.16.8.tgz#687ec34140624a3bec2b1a8ea9268478ae8f3be3"
-  dependencies:
-    "@types/express" "*"
-    "@types/node" "*"
-
-"@types/boom@^4":
-  version "4.3.9"
-  resolved "https://registry.yarnpkg.com/@types/boom/-/boom-4.3.9.tgz#6f9adc1074e81cbf01b8d1ed5878aa1ee89bb22d"
-
-"@types/catbox@*":
-  version "7.1.5"
-  resolved "https://registry.yarnpkg.com/@types/catbox/-/catbox-7.1.5.tgz#d14e4e132a628da850a042aec1b37f088f89ecae"
-  dependencies:
-    "@types/boom" "^4"
-
-"@types/connect@*":
-  version "3.4.31"
-  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.31.tgz#1f92d6b117ecc05076c49ecd024f7976e528bad9"
-  dependencies:
-    "@types/node" "*"
-
-"@types/cookies@*":
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/@types/cookies/-/cookies-0.7.1.tgz#f9f204bd6767d389eea3b87609e30c090c77a540"
-  dependencies:
-    "@types/connect" "*"
-    "@types/express" "*"
-    "@types/keygrip" "*"
-    "@types/node" "*"
-
 "@types/deasync@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@types/deasync/-/deasync-0.1.0.tgz#b2bd6c3fcde3cf67b8be4c2f70136ba8f157b45a"
 
-"@types/events@*":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@types/events/-/events-1.1.0.tgz#93b1be91f63c184450385272c47b6496fd028e02"
-
-"@types/express-serve-static-core@*":
-  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.11.0.tgz#aaaf472777191c3e56ec7aa160034c6b55ebdd59"
-  dependencies:
-    "@types/node" "*"
-
-"@types/express@*", "@types/express@4.11.0":
-  version "4.11.0"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.11.0.tgz#234d65280af917cb290634b7a8d6bcac24aecbad"
-  dependencies:
-    "@types/body-parser" "*"
-    "@types/express-serve-static-core" "*"
-    "@types/serve-static" "*"
-
 "@types/graphql@0.11.7":
   version "0.11.7"
   resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-0.11.7.tgz#da39a2f7c74e793e32e2bb7b3b68da1691532dd5"
 
-"@types/hapi@16.1.12":
-  version "16.1.12"
-  resolved "https://registry.yarnpkg.com/@types/hapi/-/hapi-16.1.12.tgz#d51a5834321c71fe9bbd4a51800e83798e9a9f9c"
-  dependencies:
-    "@types/boom" "^4"
-    "@types/catbox" "*"
-    "@types/events" "*"
-    "@types/joi" "*"
-    "@types/mimos" "*"
-    "@types/node" "*"
-    "@types/podium" "*"
-    "@types/shot" "*"
-
-"@types/http-assert@*":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@types/http-assert/-/http-assert-1.2.2.tgz#17dfe5a82184a8898935d96fe2eaedd37d22d9a4"
-
-"@types/jest@22.1.1":
-  version "22.1.1"
-  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-22.1.1.tgz#231d7c60ed130200af9e96c82469ed25b59a7ea2"
-
-"@types/joi@*":
-  version "13.0.5"
-  resolved "https://registry.yarnpkg.com/@types/joi/-/joi-13.0.5.tgz#50829402204e8fec8ee287eeb37d79fbff34913c"
+"@types/graphql@0.12.6":
+  version "0.12.6"
+  resolved "https://registry.yarnpkg.com/@types/graphql/-/graphql-0.12.6.tgz#3d619198585fcabe5f4e1adfb5cf5f3388c66c13"
 
-"@types/keygrip@*":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/keygrip/-/keygrip-1.0.1.tgz#ff540462d2fb4d0a88441ceaf27d287b01c3d878"
-
-"@types/koa-compose@*":
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/@types/koa-compose/-/koa-compose-3.2.2.tgz#dc106e000bbf92a3ac900f756df47344887ee847"
-
-"@types/koa@2.0.43":
-  version "2.0.43"
-  resolved "https://registry.yarnpkg.com/@types/koa/-/koa-2.0.43.tgz#331a92dbfef93e97a13ce9595af7d84745c29874"
-  dependencies:
-    "@types/accepts" "*"
-    "@types/cookies" "*"
-    "@types/events" "*"
-    "@types/http-assert" "*"
-    "@types/keygrip" "*"
-    "@types/koa-compose" "*"
-    "@types/node" "*"
+"@types/jest@22.2.3":
+  version "22.2.3"
+  resolved "https://registry.yarnpkg.com/@types/jest/-/jest-22.2.3.tgz#0157c0316dc3722c43a7b71de3fdf3acbccef10d"
 
 "@types/lodash@^4.14.85":
   version "4.14.92"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.92.tgz#6e3cb0b71a1e12180a47a42a744e856c3ae99a57"
 
-"@types/mime-db@*":
-  version "1.27.0"
-  resolved "https://registry.yarnpkg.com/@types/mime-db/-/mime-db-1.27.0.tgz#9bc014a1fd1fdf47649c1a54c6dd7966b8284792"
-
-"@types/mime@*":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.0.tgz#5a7306e367c539b9f6543499de8dd519fac37a8b"
-
-"@types/mimos@*":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/mimos/-/mimos-3.0.1.tgz#59d96abe1c9e487e7463fe41e8d86d76b57a441a"
-  dependencies:
-    "@types/mime-db" "*"
-
 "@types/node@*":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-9.3.0.tgz#3a129cda7c4e5df2409702626892cb4b96546dd5"
 
-"@types/node@9.4.0":
-  version "9.4.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-9.4.0.tgz#b85a0bcf1e1cc84eb4901b7e96966aedc6f078d1"
-
-"@types/podium@*":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@types/podium/-/podium-1.0.0.tgz#bfaa2151be2b1d6109cc69f7faa9dac2cba3bb20"
+"@types/node@10.1.4":
+  version "10.1.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.1.4.tgz#606651d3f8a8bec08b8cb262161aab9209f4a29d"
 
-"@types/react-dom@16.0.4":
-  version "16.0.4"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.4.tgz#2e8fd45f5443780ed49bf2cdd9809e6091177a7d"
-  dependencies:
-    "@types/node" "*"
-    "@types/react" "*"
-
-"@types/react@*", "@types/react@16.0.36":
-  version "16.0.36"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.36.tgz#ceb5639013bdb92a94147883052e69bb2c22c69b"
-
-"@types/serve-static@*":
-  version "1.13.1"
-  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.13.1.tgz#1d2801fa635d274cd97d4ec07e26b21b44127492"
+"@types/react@16.3.14":
+  version "16.3.14"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.3.14.tgz#f90ac6834de172e13ecca430dcb6814744225d36"
   dependencies:
-    "@types/express-serve-static-core" "*"
-    "@types/mime" "*"
+    csstype "^2.2.0"
 
-"@types/shot@*":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@types/shot/-/shot-3.4.0.tgz#459477c5187d3ebd303660ab099e7e9e0f3b656f"
-  dependencies:
-    "@types/node" "*"
-
-"@types/zen-observable@0.5.3", "@types/zen-observable@^0.5.3":
+"@types/zen-observable@^0.5.3":
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/@types/zen-observable/-/zen-observable-0.5.3.tgz#91b728599544efbb7386d8b6633693a3c2e7ade5"
 
@@ -200,10 +71,10 @@ abbrev@1:
   resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
 
 accepts@~1.3.4:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f"
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.5.tgz#eb777df6011723a3b14e8a72c0805c8e86746bd2"
   dependencies:
-    mime-types "~2.1.16"
+    mime-types "~2.1.18"
     negotiator "0.6.1"
 
 acorn-dynamic-import@^2.0.0:
@@ -222,10 +93,14 @@ acorn@^4.0.3:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-acorn@^5.0.0, acorn@^5.1.1, acorn@^5.1.2:
+acorn@^5.0.0, acorn@^5.1.2:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
 
+acorn@^5.3.0:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.5.3.tgz#f473dd47e0277a08e28e9bec5aeeb04751f0b8c9"
+
 address@1.0.3, address@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
@@ -324,11 +199,18 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
+apollo-link-http-common@^0.2.4:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/apollo-link-http-common/-/apollo-link-http-common-0.2.4.tgz#877603f7904dc8f70242cac61808b1f8d034b2c3"
+  dependencies:
+    apollo-link "^1.2.2"
+
 apollo-link-http@^1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/apollo-link-http/-/apollo-link-http-1.3.2.tgz#63537ee5ecf9c004efb0317f1222b7dbc6f21559"
+  version "1.5.4"
+  resolved "https://registry.yarnpkg.com/apollo-link-http/-/apollo-link-http-1.5.4.tgz#b80b7b4b342c655b6a5614624b076a36be368f43"
   dependencies:
-    apollo-link "^1.0.7"
+    apollo-link "^1.2.2"
+    apollo-link-http-common "^0.2.4"
 
 apollo-link-ws@1.0.4:
   version "1.0.4"
@@ -336,17 +218,17 @@ apollo-link-ws@1.0.4:
   dependencies:
     apollo-link "^1.0.7"
 
-apollo-link@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.0.7.tgz#42cd38a7378332fc3e41a214ff6a6e5e703a556f"
+apollo-link@^1.0.7, apollo-link@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.2.tgz#54c84199b18ac1af8d63553a68ca389c05217a03"
   dependencies:
-    "@types/zen-observable" "0.5.3"
+    "@types/graphql" "0.12.6"
     apollo-utilities "^1.0.0"
-    zen-observable "^0.6.0"
+    zen-observable-ts "^0.8.9"
 
 apollo-utilities@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.0.4.tgz#560009ea5541b9fdc4ee07ebb1714ee319a76c15"
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/apollo-utilities/-/apollo-utilities-1.0.13.tgz#793c858bb42243f7254d3c2961c64a7158e51022"
 
 app-root-path@^2.0.0:
   version "2.0.1"
@@ -370,8 +252,8 @@ are-we-there-yet@~1.1.2:
     readable-stream "^2.0.6"
 
 argparse@^1.0.7:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86"
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
   dependencies:
     sprintf-js "~1.0.2"
 
@@ -1240,8 +1122,8 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
 
 base64-js@^1.0.2:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"
 
 base@^0.11.1:
   version "0.11.2"
@@ -1265,6 +1147,14 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+bfj-node4@^5.2.0:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/bfj-node4/-/bfj-node4-5.3.1.tgz#e23d8b27057f1d0214fc561142ad9db998f26830"
+  dependencies:
+    bluebird "^3.5.1"
+    check-types "^7.3.0"
+    tryer "^1.0.0"
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -1283,7 +1173,7 @@ block-stream@*:
   dependencies:
     inherits "~2.0.0"
 
-bluebird@^3.4.7:
+bluebird@^3.4.7, bluebird@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
 
@@ -1491,8 +1381,8 @@ buffer@^4.3.0:
     isarray "^1.0.0"
 
 buffer@^5.0.3:
-  version "5.0.8"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.8.tgz#84daa52e7cf2fa8ce4195bc5cf0f7809e0930b24"
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.1.0.tgz#c913e43678c7cb7c8bd16afbcddb6c5505e8f9fe"
   dependencies:
     base64-js "^1.0.2"
     ieee754 "^1.1.4"
@@ -1597,10 +1487,6 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
-chain-function@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.0.tgz#0d4ab37e7e18ead0bdc47b920764118ce58733dc"
-
 chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -1623,6 +1509,10 @@ chardet@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
 
+check-types@^7.3.0:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/check-types/-/check-types-7.3.0.tgz#468f571a4435c24248f5fd0cb0e8d87c3c341e7d"
+
 chokidar@^1.6.1, chokidar@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
@@ -1843,10 +1733,14 @@ commander@2.12.x, commander@~2.12.1:
   version "2.12.2"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
 
-commander@^2.11.0, commander@^2.12.1, commander@^2.9.0:
+commander@^2.11.0, commander@^2.12.1:
   version "2.13.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
 
+commander@^2.13.0, commander@^2.9.0:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -1951,7 +1845,11 @@ core-js@^1.0.0, core-js@^1.1.1:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
 
-core-js@^2.4.0, core-js@^2.5.0:
+core-js@^2.4.0:
+  version "2.5.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
+
+core-js@^2.5.0:
   version "2.5.3"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.3.tgz#8acc38345824f16d8365b7c9b4259168e8ed603e"
 
@@ -2139,8 +2037,8 @@ css-selector-tokenizer@^0.7.0:
     regexpu-core "^1.0.0"
 
 css-to-react-native@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.0.4.tgz#cf4cc407558b3474d4ba8be1a2cd3b6ce713101b"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.2.0.tgz#d524ef7f39a2747a8914e86563669ba35b7cf2e7"
   dependencies:
     css-color-keywords "^1.0.0"
     fbjs "^0.8.5"
@@ -2208,6 +2106,10 @@ cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
   dependencies:
     cssom "0.3.x"
 
+csstype@^2.2.0:
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.3.tgz#2504152e6e1cc59b32098b7f5d6a63f16294c1f7"
+
 cuid@^1.3.8:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/cuid/-/cuid-1.3.8.tgz#4b875e0969bad764f7ec0706cf44f5fb0831f6b7"
@@ -2349,7 +2251,7 @@ depd@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
 
-depd@~1.1.1:
+depd@~1.1.1, depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
 
@@ -2438,7 +2340,7 @@ dom-converter@~0.1:
   dependencies:
     utila "~0.3"
 
-"dom-helpers@^2.4.0 || ^3.0.0", dom-helpers@^3.2.0:
+"dom-helpers@^2.4.0 || ^3.0.0", dom-helpers@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
 
@@ -2520,9 +2422,9 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
-ejs@^2.5.6:
-  version "2.5.7"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.7.tgz#cc872c168880ae3c7189762fd5ffc00896c9518a"
+ejs@^2.5.7:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.1.tgz#498ec0d495655abc6f23cd61868d926464071aa0"
 
 electron-releases@^2.1.0:
   version "2.1.0"
@@ -2563,8 +2465,8 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
 
 encodeurl@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
 
 encoding@^0.1.11:
   version "0.1.12"
@@ -2853,7 +2755,7 @@ expect@^22.1.0:
     jest-message-util "^22.1.0"
     jest-regex-util "^22.1.0"
 
-express@^4.13.3, express@^4.15.2, express@^4.16.2:
+express@^4.13.3, express@^4.16.2:
   version "4.16.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.16.2.tgz#e35c6dfe2d64b7dca0a5cd4f21781be3299e076c"
   dependencies:
@@ -3026,7 +2928,7 @@ fileset@^2.0.2:
     glob "^7.0.3"
     minimatch "^3.0.3"
 
-filesize@3.5.11, filesize@^3.5.9:
+filesize@3.5.11:
   version "3.5.11"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.11.tgz#1919326749433bb3cf77368bd158caabcc19e9ee"
 
@@ -3034,6 +2936,10 @@ filesize@3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.0.tgz#22d079615624bb6fd3c04026120628a41b3f4efa"
 
+filesize@^3.5.11:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
+
 fill-range@^2.1.0:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
@@ -3480,13 +3386,13 @@ growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
 
-gzip-size@3.0.0, gzip-size@^3.0.0:
+gzip-size@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-3.0.0.tgz#546188e9bdc337f673772f81660464b389dce520"
   dependencies:
     duplexer "^0.1.1"
 
-gzip-size@4.1.0:
+gzip-size@4.1.0, gzip-size@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-4.1.0.tgz#8ae096257eabe7d69c45be2b67c448124ffb517c"
   dependencies:
@@ -3648,14 +3554,14 @@ hoek@4.x.x:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
 
-hoist-non-react-statics@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
-
-hoist-non-react-statics@^2.2.1, hoist-non-react-statics@^2.3.0:
+hoist-non-react-statics@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz#343db84c6018c650778898240135a1420ee22ce0"
 
+hoist-non-react-statics@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40"
+
 home-or-tmp@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8"
@@ -3733,7 +3639,7 @@ http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
 
-http-errors@1.6.2, http-errors@~1.6.2:
+http-errors@1.6.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
   dependencies:
@@ -3742,6 +3648,15 @@ http-errors@1.6.2, http-errors@~1.6.2:
     setprototypeof "1.0.3"
     statuses ">= 1.3.1 < 2"
 
+http-errors@~1.6.2:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.3"
+    setprototypeof "1.1.0"
+    statuses ">= 1.4.0 < 2"
+
 http-parser-js@>=0.4.0:
   version "0.4.9"
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.9.tgz#ea1a04fb64adff0242e9974f297dd4c3cad271e1"
@@ -3790,10 +3705,16 @@ husky@0.14.3:
     normalize-path "^1.0.0"
     strip-indent "^2.0.0"
 
-iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@~0.4.13:
+iconv-lite@0.4.19, iconv-lite@^0.4.17:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
 
+iconv-lite@~0.4.13:
+  version "0.4.23"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
 icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
@@ -3805,8 +3726,8 @@ icss-utils@^2.1.0:
     postcss "^6.0.1"
 
 ieee754@^1.1.4:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.11.tgz#c16384ffe00f5b7835824e67b6f2bd44a5229455"
 
 immutable@4.0.0-rc.9:
   version "4.0.0-rc.9"
@@ -3893,7 +3814,13 @@ interpret@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
 
-invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
+invariant@^2.0.0, invariant@^2.2.1:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  dependencies:
+    loose-envify "^1.0.0"
+
+invariant@^2.2.0, invariant@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
   dependencies:
@@ -3907,9 +3834,9 @@ ip@^1.1.0, ip@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
 
-ipaddr.js@1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.5.2.tgz#d4b505bde9946987ccf0fc58d9010ff9607e3fa0"
+ipaddr.js@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.6.0.tgz#e3fa357b773da619f26e95f049d055c72796f86b"
 
 is-absolute-url@^2.0.0:
   version "2.1.0"
@@ -4281,10 +4208,14 @@ istanbul-reports@^1.1.3:
   dependencies:
     handlebars "^4.0.3"
 
-iterall@1.1.3, iterall@^1.1.1:
+iterall@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.1.3.tgz#1cbbff96204056dde6656e2ed2e2226d0e6d72c9"
 
+iterall@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
+
 jest-changed-files@^22.1.4:
   version "22.1.4"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-22.1.4.tgz#1f7844bcb739dec07e5899a633c0cb6d5069834e"
@@ -4556,7 +4487,14 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-js-yaml@^3.10.0, js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.0:
+js-yaml@^3.10.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.11.0.tgz#597c1a8bd57152f26d622ce4117851a51f5ebaef"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
   dependencies:
@@ -4671,8 +4609,8 @@ jsprim@^1.2.2:
     verror "1.10.0"
 
 keycode@^2.1.9:
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.1.9.tgz#964a23c54e4889405b4861a5c9f0480d45141dfa"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04"
 
 killable@^1.0.0:
   version "1.0.0"
@@ -4871,11 +4809,11 @@ locate-path@^2.0.0:
     p-locate "^2.0.0"
     path-exists "^3.0.0"
 
-lodash-es@^4.17.4:
-  version "4.17.5"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.5.tgz#9fc6e737b1c4d151d8f9cae2247305d552ce748f"
+lodash-es@^4.17.4, lodash-es@^4.17.5:
+  version "4.17.10"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.10.tgz#62cd7104cdf5dd87f235a837f0ede0e8e5117e05"
 
-lodash-es@^4.2.0, lodash-es@^4.2.1:
+lodash-es@^4.2.1:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.4.tgz#dcc1d7552e150a0640073ba9cb31d70f032950e7"
 
@@ -4974,10 +4912,14 @@ lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0:
+"lodash@>=3.5 <5", lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.2.1, lodash@^4.3.0:
   version "4.17.4"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
+lodash@^4.13.1, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0:
+  version "4.17.10"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
+
 log-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
@@ -5203,12 +5145,22 @@ mime-db@~1.30.0:
   version "1.30.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
 
-mime-types@^2.1.12, mime-types@~2.1.15, mime-types@~2.1.16, mime-types@~2.1.17, mime-types@~2.1.7:
+mime-db@~1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.33.0.tgz#a3492050a5cb9b63450541e39d9788d2272783db"
+
+mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.7:
   version "2.1.17"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.17.tgz#09d7a393f03e995a79f8af857b70a9e0ab16557a"
   dependencies:
     mime-db "~1.30.0"
 
+mime-types@~2.1.18:
+  version "2.1.18"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.18.tgz#6f323f60a83d11146f831ff11fd66e2fe5503bb8"
+  dependencies:
+    mime-db "~1.33.0"
+
 mime@1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
@@ -5890,10 +5842,14 @@ pn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
 
-polished@^1.0.0, polished@^1.9.0:
+polished@^1.0.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/polished/-/polished-1.9.0.tgz#76d277d6610dbcb85477dbba1bd1aa8e642741b6"
 
+polished@^1.9.0:
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-1.9.2.tgz#d705cac66f3a3ed1bd38aad863e2c1e269baf6b6"
+
 portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -6499,8 +6455,8 @@ preserve@^0.2.0:
   resolved "https://registry.yarnpkg.com/preserve/-/preserve-0.2.0.tgz#815ed1f6ebc65926f865b310c0713bcb3315ce4b"
 
 prettier@^1.13.0:
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.0.tgz#054de8d5fb1a4405c845d16183f58a2c301f6f16"
+  version "1.13.2"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.13.2.tgz#412b87bc561cb11074d2877a33a38f78c2303cda"
 
 pretty-bytes@^4.0.2:
   version "4.0.2"
@@ -6557,7 +6513,15 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1:
+  version "15.6.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
+  dependencies:
+    fbjs "^0.8.16"
+    loose-envify "^1.3.1"
+    object-assign "^4.1.1"
+
+prop-types@^15.5.7:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -6566,11 +6530,11 @@ prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8,
     object-assign "^4.1.1"
 
 proxy-addr@~2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.3.tgz#355f262505a621646b3130a728eb647e22055341"
   dependencies:
     forwarded "~0.1.2"
-    ipaddr.js "1.5.2"
+    ipaddr.js "1.6.0"
 
 prr@~1.0.1:
   version "1.0.1"
@@ -6614,6 +6578,14 @@ qs@~6.4.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
 
+query-string@5:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-5.1.1.tgz#a78c012b71c17e05f2e3fa2319dd330682efb3cb"
+  dependencies:
+    decode-uri-component "^0.2.0"
+    object-assign "^4.1.0"
+    strict-uri-encode "^1.0.0"
+
 query-string@^4.1.0:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
@@ -6621,13 +6593,6 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
-query-string@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.1.0.tgz#01e7d69f6a0940dac67a937d6c6325647aa4532a"
-  dependencies:
-    decode-uri-component "^0.2.0"
-    strict-uri-encode "^2.0.0"
-
 querystring-es3@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
@@ -6739,8 +6704,8 @@ react-dev-utils@5.0.0:
     text-table "0.2.0"
 
 react-display-name@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.3.tgz#f50204d430c9ca819bc0bade0306e9175d8d1987"
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.4.tgz#e2a670b81d79a2204335510c01246f4c92ff12cf"
 
 react-dom-factories@^1.0.0:
   version "1.0.2"
@@ -6756,8 +6721,8 @@ react-dom@^15.3.2:
     prop-types "^15.5.10"
 
 react-dom@^16.3.1:
-  version "16.3.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.1.tgz#6a3c90a4fb62f915bdbcf6204422d93a7d4ca573"
+  version "16.4.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.0.tgz#099f067dd5827ce36a29eaf9a6cdc7cbf6216b1e"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -6783,6 +6748,14 @@ react-input-autosize@^2.2.1:
   dependencies:
     prop-types "^15.5.8"
 
+react-is@^16.3.1:
+  version "16.4.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.0.tgz#cc9fdc855ac34d2e7d9d2eb7059bbc240d35ffcf"
+
+react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+
 react-modal@^1.6.5:
   version "1.9.7"
   resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-1.9.7.tgz#07ef56790b953e3b98ef1e2989e347983c72871d"
@@ -6795,23 +6768,24 @@ react-modal@^1.6.5:
     react-dom-factories "^1.0.0"
 
 react-modal@^3.1.11:
-  version "3.1.11"
-  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.1.11.tgz#95c8223fcee7013258ad2d149c38c9f870c89958"
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.4.4.tgz#e9dde25e9e85a59c76831f2a2b468712a546aded"
   dependencies:
     exenv "^1.2.0"
     prop-types "^15.5.10"
+    react-lifecycles-compat "^3.0.0"
     warning "^3.0.0"
 
 react-redux@^5.0.6:
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.6.tgz#23ed3a4f986359d68b5212eaaa681e60d6574946"
+  version "5.0.7"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
   dependencies:
-    hoist-non-react-statics "^2.2.1"
+    hoist-non-react-statics "^2.5.0"
     invariant "^2.0.0"
-    lodash "^4.2.0"
-    lodash-es "^4.2.0"
+    lodash "^4.17.5"
+    lodash-es "^4.17.5"
     loose-envify "^1.1.0"
-    prop-types "^15.5.10"
+    prop-types "^15.6.0"
 
 react-router-dom@^4.2.2:
   version "4.2.2"
@@ -6844,29 +6818,27 @@ react-side-effect@^1.1.0:
     shallowequal "^1.0.1"
 
 react-transition-group@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.3.1.tgz#31d611b33e143a5e0f2d94c348e026a0f3b474b6"
   dependencies:
-    chain-function "^1.0.0"
-    classnames "^2.2.5"
-    dom-helpers "^3.2.0"
+    dom-helpers "^3.3.1"
     loose-envify "^1.3.1"
-    prop-types "^15.5.8"
-    warning "^3.0.0"
+    prop-types "^15.6.1"
 
 react-virtualized@^9.12.0:
-  version "9.16.1"
-  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.16.1.tgz#2a9c8262094bc5cca309a3ee29f2b4b572ae95a1"
+  version "9.19.1"
+  resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.19.1.tgz#84b53253df2d9df61c85ce037141edccc70a73fd"
   dependencies:
     babel-runtime "^6.26.0"
     classnames "^2.2.3"
     dom-helpers "^2.4.0 || ^3.0.0"
     loose-envify "^1.3.0"
-    prop-types "^15.5.4"
+    prop-types "^15.6.0"
+    react-lifecycles-compat "^3.0.4"
 
 react@^16.3.1:
-  version "16.3.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.3.1.tgz#4a2da433d471251c69b6033ada30e2ed1202cfd8"
+  version "16.4.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-16.4.0.tgz#402c2db83335336fba1962c08b98c6272617d585"
   dependencies:
     fbjs "^0.8.16"
     loose-envify "^1.1.0"
@@ -6980,12 +6952,12 @@ reduce-function-call@^1.0.1:
     balanced-match "^0.4.2"
 
 reduce-reducers@^0.1.0:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/reduce-reducers/-/reduce-reducers-0.1.2.tgz#fa1b4718bc5292a71ddd1e5d839c9bea9770f14b"
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/reduce-reducers/-/reduce-reducers-0.1.5.tgz#ff77ca8068ff41007319b8b4b91533c7e0e54576"
 
 redux-actions@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/redux-actions/-/redux-actions-2.2.1.tgz#d64186b25649a13c05478547d7cd7537b892410d"
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/redux-actions/-/redux-actions-2.4.0.tgz#620df42d264af88366b4e919c46ae68da7c9ce7c"
   dependencies:
     invariant "^2.2.1"
     lodash "^4.13.1"
@@ -7316,10 +7288,18 @@ rxjs@^5.4.2:
   dependencies:
     symbol-observable "1.0.1"
 
-safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@5.1.1, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
+safe-buffer@~5.1.0:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+
+"safer-buffer@>= 2.1.2 < 3":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+
 sane@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/sane/-/sane-2.2.0.tgz#d6d2e2fcab00e3d283c93b912b7c3a20846f1d56"
@@ -7352,8 +7332,8 @@ schema-utils@^0.4.3:
     ajv-keywords "^2.1.0"
 
 seamless-immutable@^7.0.1:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/seamless-immutable/-/seamless-immutable-7.1.2.tgz#c87a1eba6767a32455311d76600ac5eddeafbb69"
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/seamless-immutable/-/seamless-immutable-7.1.3.tgz#d32a8a202a331dffa69e4069a367a2159252490e"
 
 select-hose@^2.0.0:
   version "2.0.0"
@@ -7715,9 +7695,9 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-"statuses@>= 1.3.1 < 2":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+"statuses@>= 1.3.1 < 2", "statuses@>= 1.4.0 < 2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
 
 statuses@~1.3.1:
   version "1.3.1"
@@ -7758,10 +7738,6 @@ strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
 
-strict-uri-encode@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
-
 string-hash@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.1.tgz#8e85bed291e0763b8f6809d9c3368fea048db3dc"
@@ -7862,17 +7838,18 @@ style-loader@0.20.1:
     schema-utils "^0.4.3"
 
 styled-components@^3.1.6:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.6.tgz#9c443146fa82c6659a9f64dd493bf2202480342e"
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.3.0.tgz#335b1b2b673b416cd5ec012010e237ed1f877fe9"
   dependencies:
     buffer "^5.0.3"
     css-to-react-native "^2.0.3"
-    fbjs "^0.8.9"
-    hoist-non-react-statics "^1.2.0"
+    fbjs "^0.8.16"
+    hoist-non-react-statics "^2.5.0"
     is-plain-object "^2.0.1"
     prop-types "^15.5.4"
-    stylis "^3.4.0"
-    stylis-rule-sheet "^0.0.7"
+    react-is "^16.3.1"
+    stylis "^3.5.0"
+    stylis-rule-sheet "^0.0.10"
     supports-color "^3.2.3"
 
 styled-jsx-postcss@timsuchanek/styled-jsx-postcss#build3:
@@ -7900,40 +7877,48 @@ styled-jsx@^0.5.7:
     string-hash "1.1.1"
 
 styled-jsx@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.2.1.tgz#8b38b9e53e5d9767e392595ab1afdc8426b3ba5d"
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.2.6.tgz#7e826279e1ef718213ef9cc42ac7370b5008449d"
   dependencies:
     babel-plugin-syntax-jsx "6.18.0"
     babel-types "6.26.0"
     convert-source-map "1.5.1"
     source-map "0.6.1"
     string-hash "1.1.3"
-    stylis "3.4.5"
-    stylis-rule-sheet "0.0.7"
+    stylis "3.4.10"
+    stylis-rule-sheet "0.0.8"
 
 styled-theming@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/styled-theming/-/styled-theming-2.2.0.tgz#3084e43d40eaab4bc11ebafd3de04e3622fee37e"
 
-stylis-rule-sheet@0.0.7, stylis-rule-sheet@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.7.tgz#5c51dc879141a61821c2094ba91d2cbcf2469c6c"
+stylis-rule-sheet@0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.8.tgz#b0d0a126c945b1f3047447a3aae0647013e8d166"
 
-stylis@3.4.5:
-  version "3.4.5"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.5.tgz#d7b9595fc18e7b9c8775eca8270a9a1d3e59806e"
+stylis-rule-sheet@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
+
+stylis@3.4.10:
+  version "3.4.10"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.10.tgz#a135cab4b9ff208e327fbb5a6fde3fa991c638ee"
 
-stylis@^3.0.0, stylis@^3.4.0:
+stylis@^3.0.0:
   version "3.4.8"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.8.tgz#94380babbcd4c75726215794ca985b38ec96d1a3"
 
+stylis@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.0.tgz#016fa239663d77f868fef5b67cf201c4b7c701e1"
+
 subscriptions-transport-ws@^0.9.5:
-  version "0.9.5"
-  resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.5.tgz#faa9eb1230d5f2efe355368cd973b867e4483c53"
+  version "0.9.9"
+  resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.9.9.tgz#8a0bdc4c31df2e90e92901047fd8961deb138acc"
   dependencies:
     backo2 "^1.0.2"
     eventemitter3 "^2.0.3"
-    iterall "^1.1.1"
+    iterall "^1.2.1"
     lodash.assign "^4.2.0"
     lodash.isobject "^3.0.2"
     lodash.isstring "^4.0.1"
@@ -8020,10 +8005,14 @@ symbol-observable@^0.2.2:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-0.2.4.tgz#95a83db26186d6af7e7a18dbd9760a2f86d08f40"
 
-symbol-observable@^1.0.3, symbol-observable@^1.0.4:
+symbol-observable@^1.0.3:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.1.0.tgz#5c68fd8d54115d9dfb72a84720549222e8db9b32"
 
+symbol-observable@^1.0.4:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+
 symbol-tree@^3.2.1:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
@@ -8174,6 +8163,10 @@ trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
 
+tryer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.0.tgz#027b69fa823225e551cace3ef03b11f6ab37c1d7"
+
 ts-loader@3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-3.4.0.tgz#c376bc0538d4c441ea8790c3fd841ebfdbfb99d0"
@@ -8272,11 +8265,11 @@ type-check@~0.3.2:
     prelude-ls "~1.1.2"
 
 type-is@~1.6.15:
-  version "1.6.15"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.15.tgz#cab10fb4909e441c82842eafe1ad646c81804410"
+  version "1.6.16"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.16.tgz#f89ce341541c672b25ee7ae3c73dee3b2be50194"
   dependencies:
     media-typer "0.3.0"
-    mime-types "~2.1.15"
+    mime-types "~2.1.18"
 
 typescript-styled-plugin@0.4.0:
   version "0.4.0"
@@ -8295,8 +8288,8 @@ typescript@2.7.1:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.7.1.tgz#bb3682c2c791ac90e7c6210b26478a8da085c359"
 
 ua-parser-js@^0.7.9:
-  version "0.7.17"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
+  version "0.7.18"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
 
 uc.micro@^1.0.1, uc.micro@^1.0.3:
   version "1.0.3"
@@ -8489,8 +8482,8 @@ utila@~0.4:
   resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
 
 utility-types@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/utility-types/-/utility-types-1.0.0.tgz#95e0774ed78ffa055fc228591963de3902e36609"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/utility-types/-/utility-types-1.1.0.tgz#52408b6ed852fdd4076b48b30ed726f139b0f116"
 
 utils-merge@1.0.1:
   version "1.0.1"
@@ -8600,16 +8593,17 @@ webidl-conversions@^4.0.1, webidl-conversions@^4.0.2:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
 
 webpack-bundle-analyzer@^2.9.2:
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.2.tgz#63ed86eb71cc4cda86f68e685a84530ba0126449"
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.13.1.tgz#07d2176c6e86c3cdce4c23e56fae2a7b6b4ad526"
   dependencies:
-    acorn "^5.1.1"
-    chalk "^1.1.3"
-    commander "^2.9.0"
-    ejs "^2.5.6"
-    express "^4.15.2"
-    filesize "^3.5.9"
-    gzip-size "^3.0.0"
+    acorn "^5.3.0"
+    bfj-node4 "^5.2.0"
+    chalk "^2.3.0"
+    commander "^2.13.0"
+    ejs "^2.5.7"
+    express "^4.16.2"
+    filesize "^3.5.11"
+    gzip-size "^4.1.0"
     lodash "^4.17.4"
     mkdirp "^0.5.1"
     opener "^1.4.3"
@@ -8733,10 +8727,14 @@ whatwg-encoding@^1.0.1:
   dependencies:
     iconv-lite "0.4.19"
 
-whatwg-fetch@2.0.3, whatwg-fetch@>=0.10.0:
+whatwg-fetch@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
 
+whatwg-fetch@>=0.10.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
+
 whatwg-url@^6.3.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.4.0.tgz#08fdf2b9e872783a7a1f6216260a1d66cc722e08"
@@ -8841,12 +8839,11 @@ ws@^3.0.0:
     ultron "~1.1.0"
 
 ws@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-4.0.0.tgz#bfe1da4c08eeb9780b986e0e4d10eccd7345999f"
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-4.1.0.tgz#a979b5d7d4da68bf54efe0408967c324869a7289"
   dependencies:
     async-limiter "~1.0.0"
     safe-buffer "~5.1.0"
-    ultron "~1.1.0"
 
 xdg-basedir@^2.0.0:
   version "2.0.0"
@@ -8954,10 +8951,16 @@ yargs@~3.10.0:
     decamelize "^1.0.0"
     window-size "0.1.0"
 
-zen-observable@^0.6.0:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.6.1.tgz#01dbed3bc8d02cbe9ee1112c83e04c807f647244"
+zen-observable-ts@^0.8.9:
+  version "0.8.9"
+  resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-0.8.9.tgz#d3c97af08c0afdca37ebcadf7cc3ee96bda9bab1"
+  dependencies:
+    zen-observable "^0.8.0"
 
 zen-observable@^0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.7.1.tgz#f84075c0ee085594d3566e1d6454207f126411b3"
+
+zen-observable@^0.8.0:
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.8.tgz#1ea93995bf098754a58215a1e0a7309e5749ec42"