diff --git a/packages/graphql-playground-electron/package.json b/packages/graphql-playground-electron/package.json
index 5a462d3d5..21da4cfda 100644
--- a/packages/graphql-playground-electron/package.json
+++ b/packages/graphql-playground-electron/package.json
@@ -96,7 +96,7 @@
     "graphql": "^0.13.2",
     "graphql-config": "^2.1.0",
     "graphql-config-extension-graphcool": "1.0.8",
-    "graphql-config-extension-prisma": "^0.2.0",
+    "graphql-config-extension-prisma": "^0.2.2",
     "graphql-playground-html": "^1.6.0",
     "graphql-playground-react": "1.7.4",
     "immutable": "4.0.0-rc.9",
diff --git a/packages/graphql-playground-electron/yarn.lock b/packages/graphql-playground-electron/yarn.lock
index 5d3a82090..4d3739c07 100644
--- a/packages/graphql-playground-electron/yarn.lock
+++ b/packages/graphql-playground-electron/yarn.lock
@@ -1853,7 +1853,7 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
-codemirror-graphql@^0.6.11, "codemirror-graphql@github:timsuchanek/codemirror-graphql#details-fix":
+codemirror-graphql@^0.6.11, codemirror-graphql@timsuchanek/codemirror-graphql#details-fix:
   version "0.6.12"
   resolved "https://codeload.github.com/timsuchanek/codemirror-graphql/tar.gz/801ec32683c38d6dc0f8f7bc19014a111edc9ebd"
   dependencies:
@@ -3700,12 +3700,12 @@ graphql-config-extension-graphcool@1.0.8:
     graphcool-yml "0.4.15"
     graphql-config "^2.0.1"
 
-graphql-config-extension-prisma@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/graphql-config-extension-prisma/-/graphql-config-extension-prisma-0.2.0.tgz#6cbc82b55db7070e48bb65f4691aac0c2f4297ba"
+graphql-config-extension-prisma@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/graphql-config-extension-prisma/-/graphql-config-extension-prisma-0.2.2.tgz#88d6b741279ceb4330be465e5272c0dc4736a3e5"
   dependencies:
     graphql-config "^2.0.1"
-    prisma-yml "1.0.92"
+    prisma-yml "1.0.95"
 
 graphql-config@1.1.4:
   version "1.1.4"
@@ -6524,13 +6524,13 @@ pretty-format@^22.4.0, pretty-format@^22.4.3:
     ansi-regex "^3.0.0"
     ansi-styles "^3.2.0"
 
-prisma-json-schema@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/prisma-json-schema/-/prisma-json-schema-0.1.0.tgz#0e53346421dc09241fe7240e5479f9673e5fbd10"
+prisma-json-schema@0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/prisma-json-schema/-/prisma-json-schema-0.1.2.tgz#2ad1cad7858d42bb8b32d3a31e9d3d9a7318d2e0"
 
-prisma-yml@1.0.92:
-  version "1.0.92"
-  resolved "https://registry.yarnpkg.com/prisma-yml/-/prisma-yml-1.0.92.tgz#33b25974ebd89153e2291a9831635fd0fbf08cf1"
+prisma-yml@1.0.95:
+  version "1.0.95"
+  resolved "https://registry.yarnpkg.com/prisma-yml/-/prisma-yml-1.0.95.tgz#0b025336b068eb029d25fc1357a39994fe26b89f"
   dependencies:
     ajv "5"
     bluebird "^3.5.1"
@@ -6546,7 +6546,7 @@ prisma-yml@1.0.92:
     json-stable-stringify "^1.0.1"
     jsonwebtoken "^8.1.0"
     lodash "^4.17.4"
-    prisma-json-schema "0.1.0"
+    prisma-json-schema "0.1.2"
     replaceall "^0.1.6"
     scuid "^1.0.2"
     yaml-ast-parser "^0.0.40"
@@ -7907,9 +7907,8 @@ styled-components@^3.3.2:
     postcss-load-plugins "^2.2.0"
     styled-jsx "^0.5.7"
 
-"styled-jsx-postcss@github:timsuchanek/styled-jsx-postcss#build3":
+styled-jsx-postcss@timsuchanek/styled-jsx-postcss#build3:
   version "0.2.0"
-  uid "677ee0fb7f9138047a00e03c8c3e44adbb33cf2a"
   resolved "https://codeload.github.com/timsuchanek/styled-jsx-postcss/tar.gz/677ee0fb7f9138047a00e03c8c3e44adbb33cf2a"
   dependencies:
     babel-traverse "^6.21.0"
diff --git a/packages/graphql-playground-react/.babelrc b/packages/graphql-playground-react/.babelrc
index 05fe874bc..449e589e4 100644
--- a/packages/graphql-playground-react/.babelrc
+++ b/packages/graphql-playground-react/.babelrc
@@ -1,4 +1,4 @@
 {
   "presets": ["es2015", "es2016", "react"],
-  "plugins": ["styled-jsx-postcss/babel", "babel-plugin-styled-components"]
+  "plugins": ["babel-plugin-styled-components"]
 }
diff --git a/packages/graphql-playground-react/config/webpack.config.dev.js b/packages/graphql-playground-react/config/webpack.config.dev.js
index 5c41c774d..9c70abedf 100644
--- a/packages/graphql-playground-react/config/webpack.config.dev.js
+++ b/packages/graphql-playground-react/config/webpack.config.dev.js
@@ -1,6 +1,5 @@
 'use strict'
 
-const autoprefixer = require('autoprefixer')
 const path = require('path')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
@@ -35,7 +34,7 @@ module.exports = {
     index: [
       require.resolve('./polyfills'),
       require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.appIndexJs,
+      paths.appIndexJs
     ],
     // middleware: [
     //   require.resolve('./polyfills'),
@@ -45,8 +44,8 @@ module.exports = {
     localDev: [
       require.resolve('./polyfills'),
       require.resolve('react-dev-utils/webpackHotDevClient'),
-      paths.localDevIndexJs,
-    ],
+      paths.localDevIndexJs
+    ]
   },
   output: {
     // Next line is not used in dev but WebpackDevServer crashes without it:
@@ -63,7 +62,7 @@ module.exports = {
     publicPath: publicPath,
     // Point sourcemap entries to original disk location (format as URL on Windows)
     devtoolModuleFilenameTemplate: info =>
-      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
+      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')
   },
   resolve: {
     // This allows you to set a fallback for where Webpack should look for modules.
@@ -72,7 +71,7 @@ module.exports = {
     // https://github.com/facebookincubator/create-react-app/issues/253
     modules: ['node_modules', paths.appNodeModules].concat(
       // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean),
+      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
     ),
     // These are the reasonable defaults supported by the Node ecosystem.
     // We also include JSX as a common component filename extension to support
@@ -89,12 +88,12 @@ module.exports = {
       '.js',
       '.json',
       '.web.jsx',
-      '.jsx',
+      '.jsx'
     ],
     alias: {
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web',
+      'react-native': 'react-native-web'
     },
     plugins: [
       // Prevents users from importing files from outside of src/ (or node_modules/).
@@ -102,8 +101,8 @@ module.exports = {
       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
       // please link the files into your node_modules/ and let module-resolution kick in.
       // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-    ],
+      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson])
+    ]
   },
   module: {
     strictExportPresence: true,
@@ -118,13 +117,13 @@ module.exports = {
         test: /\.(ts|tsx)$/,
         loader: require.resolve('tslint-loader'),
         enforce: 'pre',
-        include: paths.appSrc,
+        include: paths.appSrc
       },
       {
         test: /\.js$/,
         loader: require.resolve('source-map-loader'),
         enforce: 'pre',
-        include: paths.appSrc,
+        include: paths.appSrc
       },
       {
         // "oneOf" will traverse all following loaders until one will
@@ -139,8 +138,8 @@ module.exports = {
             loader: require.resolve('url-loader'),
             options: {
               limit: 10000,
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
+              name: 'static/media/[name].[hash:8].[ext]'
+            }
           },
           // Compile .tsx?
           {
@@ -148,14 +147,13 @@ module.exports = {
             include: paths.appSrc,
             use: [
               {
-                loader: require.resolve('babel-loader'),
+                loader: require.resolve('babel-loader')
               },
               {
-                loader: require.resolve('ts-loader'),
-              },
-            ],
+                loader: require.resolve('ts-loader')
+              }
+            ]
           },
-          // "postcss" loader applies autoprefixer to our CSS.
           // "css" loader resolves paths in CSS and adds assets as dependencies.
           // "style" loader turns CSS into JS modules that inject <style> tags.
           // In production, we use a plugin to extract that CSS to a file, but
@@ -167,30 +165,10 @@ module.exports = {
               {
                 loader: require.resolve('css-loader'),
                 options: {
-                  importLoaders: 1,
-                },
-              },
-              {
-                loader: require.resolve('postcss-loader'),
-                options: {
-                  // Necessary for external CSS imports to work
-                  // https://github.com/facebookincubator/create-react-app/issues/2677
-                  ident: 'postcss',
-                  plugins: () => [
-                    require('postcss-flexbugs-fixes'),
-                    autoprefixer({
-                      browsers: [
-                        '>1%',
-                        'last 4 versions',
-                        'Firefox ESR',
-                        'not ie < 9', // React doesn't support IE8 anyway
-                      ],
-                      flexbox: 'no-2009',
-                    }),
-                  ],
-                },
-              },
-            ],
+                  importLoaders: 1
+                }
+              }
+            ]
           },
           // "file" loader makes sure those assets get served by WebpackDevServer.
           // When you `import` an asset, you get its (virtual) filename.
@@ -205,14 +183,14 @@ module.exports = {
             exclude: [/\.js$/, /\.html$/, /\.json$/],
             loader: require.resolve('file-loader'),
             options: {
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-        ],
-      },
+              name: 'static/media/[name].[hash:8].[ext]'
+            }
+          }
+        ]
+      }
       // ** STOP ** Are you adding a new loader?
       // Make sure to add the new loader(s) before the "file" loader.
-    ],
+    ]
   },
   plugins: [
     // Makes some environment variables available in index.html.
@@ -224,7 +202,7 @@ module.exports = {
     new HtmlWebpackPlugin({
       inject: true,
       chunks: ['index'],
-      template: paths.appHtml,
+      template: paths.appHtml
     }),
     // new HtmlWebpackPlugin({
     //   inject: true,
@@ -236,7 +214,7 @@ module.exports = {
       inject: true,
       chunks: ['localDev'],
       template: paths.appHtml,
-      filename: 'localDev.html',
+      filename: 'localDev.html'
     }),
     // Add module names to factory functions so they appear in browser profiler.
     new webpack.NamedModulesPlugin(),
@@ -259,7 +237,7 @@ module.exports = {
     // solution that requires the user to opt into importing specific locales.
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
@@ -268,12 +246,12 @@ module.exports = {
     fs: 'empty',
     net: 'empty',
     tls: 'empty',
-    child_process: 'empty',
+    child_process: 'empty'
   },
   // Turn off performance hints during development because we don't do any
   // splitting or minification in interest of speed. These warnings become
   // cumbersome.
   performance: {
-    hints: false,
-  },
+    hints: false
+  }
 }
diff --git a/packages/graphql-playground-react/config/webpack.config.prod.js b/packages/graphql-playground-react/config/webpack.config.prod.js
index d87825d84..a47c88d7c 100644
--- a/packages/graphql-playground-react/config/webpack.config.prod.js
+++ b/packages/graphql-playground-react/config/webpack.config.prod.js
@@ -1,39 +1,38 @@
-'use strict';
+'use strict'
 
-const autoprefixer = require('autoprefixer');
-const path = require('path');
-const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const ManifestPlugin = require('webpack-manifest-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const paths = require('./paths');
-const getClientEnvironment = require('./env');
+const path = require('path')
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const ManifestPlugin = require('webpack-manifest-plugin')
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin')
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
+const paths = require('./paths')
+const getClientEnvironment = require('./env')
 
 // Webpack uses `publicPath` to determine where the app is being served from.
 // It requires a trailing slash, or the file assets will get an incorrect path.
-const publicPath = paths.servedPath;
+const publicPath = paths.servedPath
 // Some apps do not use client-side routing with pushState.
 // For these, "homepage" can be set to "." to enable relative asset paths.
-const shouldUseRelativeAssetPaths = publicPath === './';
+const shouldUseRelativeAssetPaths = publicPath === './'
 // Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'
 // `publicUrl` is just like `publicPath`, but we will provide it to our app
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-const publicUrl = publicPath.slice(0, -1);
+const publicUrl = publicPath.slice(0, -1)
 // Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
+const env = getClientEnvironment(publicUrl)
 
 // Assert this just to be safe.
 // Development builds of React are slow and not intended for production.
 if (env.stringified['process.env'].NODE_ENV !== '"production"') {
-  throw new Error('Production builds must have NODE_ENV=production.');
+  throw new Error('Production builds must have NODE_ENV=production.')
 }
 
 // Note: defined here because it will be used more than once.
-const cssFilename = 'static/css/[name].css';
+const cssFilename = 'static/css/[name].css'
 
 // ExtractTextPlugin expects the build output to be flat.
 // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
@@ -41,8 +40,8 @@ const cssFilename = 'static/css/[name].css';
 // To have this structure working with relative paths, we have to use custom options.
 const extractTextPluginOptions = shouldUseRelativeAssetPaths
   ? // Making sure that the publicPath goes back to to build folder.
-  { publicPath: Array(cssFilename.split('/').length).join('../') }
-  : {};
+    { publicPath: Array(cssFilename.split('/').length).join('../') }
+  : {}
 
 // This is the production configuration.
 // It compiles slowly and is focused on producing a fast and minimal bundle.
@@ -56,7 +55,7 @@ module.exports = {
   // In production, we only want to load the polyfills and the app code.
   entry: {
     index: [require.resolve('./polyfills'), paths.appIndexJs],
-    middleware: [require.resolve('./polyfills'), paths.middlewareIndexJs],
+    middleware: [require.resolve('./polyfills'), paths.middlewareIndexJs]
   },
   output: {
     // The build folder.
@@ -70,9 +69,7 @@ module.exports = {
     publicPath: publicPath,
     // Point sourcemap entries to original disk location (format as URL on Windows)
     devtoolModuleFilenameTemplate: info =>
-      path
-        .relative(paths.appSrc, info.absoluteResourcePath)
-        .replace(/\\/g, '/'),
+      path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/')
   },
   resolve: {
     // This allows you to set a fallback for where Webpack should look for modules.
@@ -98,13 +95,12 @@ module.exports = {
       '.js',
       '.json',
       '.web.jsx',
-      '.jsx',
+      '.jsx'
     ],
     alias: {
-
       // Support React Native Web
       // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web',
+      'react-native': 'react-native-web'
     },
     plugins: [
       // Prevents users from importing files from outside of src/ (or node_modules/).
@@ -112,8 +108,8 @@ module.exports = {
       // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
       // please link the files into your node_modules/ and let module-resolution kick in.
       // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-    ],
+      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson])
+    ]
   },
   module: {
     strictExportPresence: true,
@@ -128,13 +124,13 @@ module.exports = {
         test: /\.(ts|tsx)$/,
         loader: require.resolve('tslint-loader'),
         enforce: 'pre',
-        include: paths.appSrc,
+        include: paths.appSrc
       },
       {
         test: /\.js$/,
         loader: require.resolve('source-map-loader'),
         enforce: 'pre',
-        include: paths.appSrc,
+        include: paths.appSrc
       },
       {
         // "oneOf" will traverse all following loaders until one will
@@ -148,8 +144,8 @@ module.exports = {
             loader: require.resolve('url-loader'),
             options: {
               limit: 10000,
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
+              name: 'static/media/[name].[hash:8].[ext]'
+            }
           },
           //Compile .tsx?
           {
@@ -157,12 +153,12 @@ module.exports = {
             include: paths.appSrc,
             use: [
               {
-                loader: require.resolve('babel-loader'),
+                loader: require.resolve('babel-loader')
               },
               {
-                loader: require.resolve('ts-loader'),
-              },
-            ],
+                loader: require.resolve('ts-loader')
+              }
+            ]
           },
           // The notation here is somewhat confusing.
           // "postcss" loader applies autoprefixer to our CSS.
@@ -188,34 +184,14 @@ module.exports = {
                       options: {
                         importLoaders: 1,
                         minimize: true,
-                        sourceMap: shouldUseSourceMap,
-                      },
-                    },
-                    {
-                      loader: require.resolve('postcss-loader'),
-                      options: {
-                        // Necessary for external CSS imports to work
-                        // https://github.com/facebookincubator/create-react-app/issues/2677
-                        ident: 'postcss',
-                        plugins: () => [
-                          require('postcss-flexbugs-fixes'),
-                          autoprefixer({
-                            browsers: [
-                              '>1%',
-                              'last 4 versions',
-                              'Firefox ESR',
-                              'not ie < 9', // React doesn't support IE8 anyway
-                            ],
-                            flexbox: 'no-2009',
-                          }),
-                        ],
-                      },
-                    },
-                  ],
+                        sourceMap: shouldUseSourceMap
+                      }
+                    }
+                  ]
                 },
                 extractTextPluginOptions
               )
-            ),
+            )
             // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
           },
           {
@@ -234,14 +210,14 @@ module.exports = {
             // by webpacks internal loaders.
             exclude: [/\.js$/, /\.html$/, /\.json$/],
             options: {
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
+              name: 'static/media/[name].[hash:8].[ext]'
+            }
+          }
           // ** STOP ** Are you adding a new loader?
           // Make sure to add the new loader(s) before the "file" loader.
-        ],
-      },
-    ],
+        ]
+      }
+    ]
   },
   plugins: [
     // Makes some environment variables available in index.html.
@@ -253,7 +229,7 @@ module.exports = {
     // Generates an `index.html` file with the <script> injected.
     new HtmlWebpackPlugin({
       inject: true,
-      chunks: ["index"],
+      chunks: ['index'],
       template: paths.appHtml,
       minify: {
         removeComments: true,
@@ -265,12 +241,12 @@ module.exports = {
         keepClosingSlash: true,
         minifyJS: true,
         minifyCSS: true,
-        minifyURLs: true,
-      },
+        minifyURLs: true
+      }
     }),
     new HtmlWebpackPlugin({
       inject: true,
-      chunks: ["middleware"],
+      chunks: ['middleware'],
       template: paths.appHtml,
       minify: {
         removeComments: true,
@@ -282,9 +258,9 @@ module.exports = {
         keepClosingSlash: true,
         minifyJS: true,
         minifyCSS: true,
-        minifyURLs: true,
+        minifyURLs: true
       },
-      filename: 'middleware.html',
+      filename: 'middleware.html'
     }),
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
@@ -299,32 +275,32 @@ module.exports = {
         // https://github.com/facebookincubator/create-react-app/issues/2376
         // Pending further investigation:
         // https://github.com/mishoo/UglifyJS2/issues/2011
-        comparisons: false,
+        comparisons: false
       },
       output: {
         comments: false,
         // Turned on because emoji and regex is not minified properly using default
         // https://github.com/facebookincubator/create-react-app/issues/2488
-        ascii_only: true,
+        ascii_only: true
       },
-      sourceMap: shouldUseSourceMap,
+      sourceMap: shouldUseSourceMap
     }),
     // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
     new ExtractTextPlugin({
-      filename: cssFilename,
+      filename: cssFilename
     }),
     // Generate a manifest file which contains a mapping of all asset filenames
     // to their corresponding output file so that tools can pick it up without
     // having to parse `index.html`.
     new ManifestPlugin({
-      fileName: 'asset-manifest.json',
+      fileName: 'asset-manifest.json'
     }),
     // Moment.js is an extremely popular library that bundles large locale files
     // by default due to how Webpack interprets its code. This is a practical
     // solution that requires the user to opt into importing specific locales.
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
-    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
@@ -333,6 +309,6 @@ module.exports = {
     fs: 'empty',
     net: 'empty',
     tls: 'empty',
-    child_process: 'empty',
-  },
-};
+    child_process: 'empty'
+  }
+}
diff --git a/packages/graphql-playground-react/package.json b/packages/graphql-playground-react/package.json
index 05d050bb8..8bbfbc75d 100644
--- a/packages/graphql-playground-react/package.json
+++ b/packages/graphql-playground-react/package.json
@@ -47,7 +47,6 @@
     "@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",
     "babel-core": "6.26.3",
     "babel-loader": "7.1.4",
@@ -82,14 +81,6 @@
     "lint-staged": "6.1.0",
     "node-noop": "1.0.0",
     "object-assign": "4.1.1",
-    "postcss-cssnext": "2.11.0",
-    "postcss-flexbugs-fixes": "3.3.1",
-    "postcss-import": "9.1.0",
-    "postcss-inherit": "timsuchanek/postcss-inherit#build3",
-    "postcss-inject": "1.0.1",
-    "postcss-loader": "2.1.5",
-    "postcss-nested": "1.0.1",
-    "postcss-simple-vars": "3.1.0",
     "promise": "8.0.1",
     "raw-loader": "0.5.1",
     "react-dev-utils": "5.0.1",
@@ -104,8 +95,8 @@
     "tslint": "5.10.0",
     "tslint-graphcool-frontend": "0.0.3",
     "tslint-loader": "3.6.0",
-    "typescript": "2.8.3",
-    "typescript-styled-plugin": "0.4.0",
+    "typescript": "^3.0.1",
+    "typescript-styled-plugin": "^0.11.0",
     "url-loader": "0.6.2",
     "webpack": "3.10.0",
     "webpack-dev-server": "2.11.1",
@@ -122,17 +113,13 @@
     "apollo-link-http": "^1.3.2",
     "apollo-link-ws": "1.0.8",
     "calculate-size": "^1.1.1",
-    "classnames": "^2.2.5",
     "codemirror": "^5.38.0",
     "codemirror-graphql": "timsuchanek/codemirror-graphql#details-fix",
     "copy-to-clipboard": "^3.0.8",
     "cuid": "^1.3.8",
-    "graphcool-styles": "0.2.9",
-    "graphcool-tmp-ui": "^0.0.11",
-    "graphcool-ui": "0.0.14",
     "graphiql": "^0.11.2",
     "graphql": "^0.11.7",
-    "immutable": "4.0.0-rc.9",
+    "immutable": "^4.0.0-rc.9",
     "isomorphic-fetch": "^2.2.1",
     "js-yaml": "^3.10.0",
     "json-stable-stringify": "^1.0.1",
@@ -141,7 +128,6 @@
     "lodash.debounce": "^4.0.8",
     "markdown-it": "^8.4.1",
     "marked": "^0.3.19",
-    "postcss-modules": "^1.1.0",
     "prettier": "^1.13.0",
     "prop-types": "^15.6.0",
     "query-string": "5",
@@ -167,9 +153,7 @@
     "redux-saga": "^0.16.0",
     "reselect": "^3.0.1",
     "seamless-immutable": "^7.0.1",
-    "styled-components": "^3.3.2",
-    "styled-jsx": "^2.2.1",
-    "styled-jsx-postcss": "timsuchanek/styled-jsx-postcss#build3",
+    "styled-components": "^3.4.9",
     "subscriptions-transport-ws": "^0.9.5",
     "utility-types": "^1.0.0",
     "webpack-bundle-analyzer": "^2.9.2",
diff --git a/packages/graphql-playground-react/postcss.config.js b/packages/graphql-playground-react/postcss.config.js
deleted file mode 100644
index 41acf4209..000000000
--- a/packages/graphql-playground-react/postcss.config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-module.exports = (ctx) => ({
-  plugins: [
-    require('postcss-simple-vars')({
-      variables: () => require('graphcool-styles/dist/variables/variables.js'),
-    }),
-    require('postcss-cssnext')(),
-    require('postcss-inherit')({
-      globalStyles: 'node_modules/graphcool-styles/dist/styles.css',
-      propertyRegExp: /^(inherit|extend|p)s?:?$/i,
-    }),
-  ]
-})
diff --git a/packages/graphql-playground-react/src/components/Button.tsx b/packages/graphql-playground-react/src/components/Button.tsx
index e0ad60c1a..41aa993c0 100644
--- a/packages/graphql-playground-react/src/components/Button.tsx
+++ b/packages/graphql-playground-react/src/components/Button.tsx
@@ -1,287 +1,67 @@
 import * as React from 'react'
-import * as cn from 'classnames'
-import { Icon, $v } from 'graphcool-styles'
+import { styled } from '../styled'
+import { FullArrowRightIcon } from './Icons'
 
 export interface Props {
+  purple?: boolean
   hideArrow?: boolean
-  primary?: boolean
-  button?: boolean
-  green?: boolean
-  white?: boolean
-  gray?: boolean
-  greenOnWhite?: boolean
-  arrowToBottom?: boolean
-  arrowToLeft?: boolean
   children?: any
-  className?: string
-  wrap?: boolean
   onClick?: (e?: any) => void
 }
 
-export function A({
-  hideArrow,
-  primary,
-  button,
-  green,
-  white,
-  gray,
-  greenOnWhite,
-  arrowToBottom,
-  arrowToLeft,
-  children,
-  className,
-  wrap,
-  onClick,
-}: Props) {
-  return (
-    <div
-      className={cn('link', className, {
-        primary,
-        button,
-        green,
-        'green-on-white': greenOnWhite,
-        white,
-        arrowToBottom,
-        arrowToLeft,
-        gray,
-        wrap,
-      })}
-      onClick={onClick}
-    >
-      <style jsx={true}>{`
-        .link {
-          @p: .pointer, .dib, .blue, .f14, .flex, .itemsCenter;
-        }
+export const Button = ({ purple, hideArrow, children, onClick }: Props) => (
+  <ButtonBox purple={purple}>
+    {children ? children : 'Learn more'}
+    {!hideArrow && <FullArrowRightIcon color={'red'} width={14} height={11} />}
+  </ButtonBox>
+)
 
-        .link.gray {
-          @p: .darkBlue50;
-        }
-
-        .link.gray :global(svg) {
-          fill: $darkBlue50;
-        }
-
-        .link.gray:hover {
-          @p: .darkBlue70;
-        }
-
-        .link.gray:hover :global(svg) {
-          fill: $darkBlue70;
-        }
-
-        .link.white {
-          @p: .white50;
-        }
-
-        .link.white :global(svg) {
-          fill: $white50;
-        }
-
-        .link.white:hover {
-          @p: .white70;
-        }
-        .link.white:hover :global(svg) {
-          fill: $white70;
-        }
-
-        .link :global(a),
-        .link > div {
-          @p: .flex, .itemsCenter, .ttu, .tracked, .fw6, .nowrap, .noUnderline;
-          font-size: inherit;
-          color: inherit;
-        }
-
-        .link.wrap :global(a),
-        .link.wrap > div {
-          white-space: normal;
-          text-align: right;
-        }
-
-        .link.arrowToLeft :global(a),
-        .link.arrowToLeft > div {
-          @p: .flex, .itemsCenter, .ttu, .tracked, .fw6, .nowrap, .noUnderline;
-          font-size: inherit;
-          color: inherit;
-          flex-direction: row-reverse;
-        }
-
-        .button {
-          @p: .br2, .pv6, .ph10, .buttonShadow, .white, .bgBlue;
-          transition: background 0.25s ease, box-shadow 0.25s ease,
-            transform 0.25s ease;
-        }
-
-        .button :global(svg) {
-          fill: $white !important;
-        }
-
-        .button.green {
-          @p: .bgGreen;
-        }
-
-        .link.button.white {
-          @p: .darkBlue, .bgWhite;
-        }
-
-        .button.green-on-white {
-          @p: .green, .bgWhite;
-        }
-
-        .link.button.white :global(svg) {
-          fill: $darkBlue !important;
-        }
-
-        .button.green-on-white :global(svg) {
-          fill: $green !important;
-        }
-
-        .link :global(.arrow) {
-          @p: .ml10;
-        }
-
-        .link.arrowToLeft :global(.arrow) {
-          @p: .ml0, .mr10;
-        }
-
-        .link.arrowToBottom :global(.arrow) {
-          transform: rotate(90deg) !important;
-        }
-
-        .link.arrowToLeft :global(.arrow) {
-          transform: rotate(180deg) !important;
-        }
-
-        .link:hover {
-          color: #69a4e0;
-        }
-
-        .button:hover {
-          color: $white;
-          background: #3f8ad7;
-          box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
-          transform: translate3D(0, -1px, 0);
-        }
-
-        .button.green:hover {
-          background: #3cb66f;
-        }
-
-        .button.white:hover {
-          color: $darkBlue80;
-          background: $white;
-        }
-
-        .button.green-on-white:hover {
-          color: #3cb66f;
-          background: $white;
-        }
-
-        .link:hover :global(.arrow) {
-          animation: move 1s ease infinite;
-        }
-
-        .link.arrowToBottom:hover :global(.arrow) {
-          animation: moveToBottom 1s ease infinite;
-        }
-
-        .link.arrowToLeft:hover :global(.arrow) {
-          animation: moveToLeft 1s ease infinite;
-        }
-
-        @keyframes move {
-          0% {
-            transform: translate3D(0, 0, 0);
-          }
-
-          50% {
-            transform: translate3D(3px, 0, 0);
-          }
-
-          100% {
-            transform: translate3D(0, 0, 0);
-          }
-        }
-
-        @keyframes moveToBottom {
-          0% {
-            transform: rotate(90deg) translate3D(0, 0, 0);
-          }
-
-          50% {
-            transform: rotate(90deg) translate3D(3px, 0, 0);
-          }
-
-          100% {
-            transform: rotate(90deg) translate3D(0, 0, 0);
-          }
-        }
-
-        @keyframes moveToLeft {
-          0% {
-            transform: rotate(180deg) translate3D(0, 0, 0);
-          }
-
-          50% {
-            transform: rotate(180deg) translate3D(3px, 0, 0);
-          }
-
-          100% {
-            transform: rotate(180deg) translate3D(0, 0, 0);
-          }
-        }
-
-        @media (min-width: 1000px) {
-          .link.primary {
-            @p: .f16;
-          }
-        }
-      `}</style>
-      {
-        <div>
-          {children ? children : 'Learn more'}
-          {!hideArrow && (
-            <Icon
-              src={require('graphcool-styles/icons/fill/fullArrowRight.svg')}
-              color={$v.blue}
-              width={14}
-              height={11}
-              className="arrow"
-            />
-          )}
-        </div>
-      }
-    </div>
-  )
+interface ButtonProps {
+  purple?: boolean
 }
 
-export function Button({
-  hideArrow,
-  primary,
-  green,
-  white,
-  greenOnWhite,
-  arrowToBottom,
-  arrowToLeft,
-  children,
-  className,
-  wrap,
-  onClick,
-}: Props) {
-  return (
-    <A
-      button={true}
-      hideArrow={hideArrow}
-      primary={primary}
-      green={green}
-      white={white}
-      greenOnWhite={greenOnWhite}
-      arrowToBottom={arrowToBottom}
-      arrowToLeft={arrowToLeft}
-      className={className}
-      wrap={wrap}
-      onClick={onClick}
-    >
-      {children || null}
-    </A>
-  )
-}
+export const ButtonBox = styled<ButtonProps, 'div'>('div')`
+  display: flex;
+  align-items: center;
+
+  padding: 6px 16px;
+  border-radius: 2px;
+  background: ${p => (p.purple ? 'rgb(218, 27, 127)' : '#2a7ed2')};
+  color: ${p => p.theme.colours.white};
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 14px;
+  letter-spacing: 1px;
+  white-space: nowrap;
+
+  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
+  cursor: pointer;
+  &:hover {
+    background: ${p => (p.purple ? 'rgb(164, 3, 111)' : '#3f8ad7')};
+    transform: ${p =>
+      p.purple ? 'translate3D(0, 0, 0)' : 'translate3D(0, -1px, 0)'};
+    svg {
+      animation: move 1s ease infinite;
+    }
+  }
+
+  svg {
+    margin-left: 10px;
+    fill: ${p => p.theme.colours.white};
+  }
+
+  @keyframes move {
+    0% {
+      transform: translate3D(0, 0, 0);
+    }
+
+    50% {
+      transform: translate3D(3px, 0, 0);
+    }
+
+    100% {
+      transform: translate3D(0, 0, 0);
+    }
+  }
+`
diff --git a/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopup.tsx b/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopup.tsx
deleted file mode 100644
index 07eee48df..000000000
--- a/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopup.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import * as React from 'react'
-import CodeGenerationPopupCode from './CodeGenerationPopupCode'
-import CodeGenerationPopupHeader from './CodeGenerationPopupHeader'
-import CodeGenerationPopupEnvironmentChooser from './CodeGenerationPopupEnvironmentChooser'
-import CodeGenerationPopupClientChooser from './CodeGenerationPopupClientChooser'
-import { modalStyle } from '../../constants'
-import * as Modal from 'react-modal'
-import { Environment, GraphQLClient } from '../../types'
-import { withTheme, LocalThemeInterface } from '../Theme'
-
-export interface Props {
-  query: string
-  isOpen: boolean
-  onRequestClose: () => void
-  endpointUrl: string
-}
-
-export interface State {
-  selectedClient: GraphQLClient
-  selectedEnv: Environment
-}
-
-class CodeGenerationPopup extends React.Component<
-  Props & LocalThemeInterface,
-  State
-> {
-  constructor(props) {
-    super(props)
-    this.state = {
-      selectedEnv: 'Browser',
-      selectedClient: 'graphql-request',
-    }
-  }
-
-  componentWillMount() {
-    Modal.setAppElement('body')
-  }
-
-  render() {
-    const { query, endpointUrl, localTheme } = this.props
-    const { selectedEnv } = this.state
-    const queryActive =
-      Boolean(query) && query.length > 0 && query.includes('query')
-    const clients =
-      selectedEnv === 'Cli' ? ['curl'] : ['graphql-request', 'fetch']
-
-    let customModalStyle = modalStyle
-    if (localTheme === 'light') {
-      customModalStyle = {
-        ...modalStyle,
-        overlay: {
-          ...modalStyle.overlay,
-          backgroundColor: 'rgba(255,255,255,0.9)',
-        },
-      }
-    }
-
-    return (
-      <Modal
-        isOpen={this.props.isOpen}
-        onRequestClose={this.props.onRequestClose}
-        contentLabel="Code Generation"
-        style={customModalStyle}
-      >
-        <style jsx={true}>{`
-          .code-generation-popup-wrapper {
-            @p: .overflowScroll, .buttonShadow;
-            max-height: calc(100vh - 50px);
-          }
-          .code-generation-popup {
-            @p: .bgWhite, .br2, .flex, .flexColumn, .overflowXHidden;
-          }
-          .choosers {
-            @p: .flex, .w100;
-          }
-        `}</style>
-        <div className="code-generation-popup-wrapper">
-          <div className="code-generation-popup">
-            <CodeGenerationPopupHeader queryActive={queryActive} />
-            <div className="choosers">
-              <CodeGenerationPopupEnvironmentChooser
-                environment={this.state.selectedEnv}
-                setEnvironment={this.handleSetEnvironment}
-              />
-              <CodeGenerationPopupClientChooser
-                environment={this.state.selectedEnv}
-                client={this.state.selectedClient}
-                setClient={this.handleSetClient}
-                clients={clients}
-              />
-            </div>
-            <CodeGenerationPopupCode
-              endpointUrl={endpointUrl}
-              query={query}
-              client={this.state.selectedClient}
-              environment={this.state.selectedEnv}
-            />
-          </div>
-        </div>
-      </Modal>
-    )
-  }
-
-  private handleSetClient = (client: GraphQLClient) => {
-    this.setState({ selectedClient: client } as State)
-  }
-
-  private handleSetEnvironment = (env: Environment) => {
-    const { selectedClient } = this.state
-    if (env === 'Cli') {
-      this.setState({ selectedEnv: env, selectedClient: 'curl' } as State)
-    } else {
-      this.setState({
-        selectedEnv: env,
-        selectedClient: selectedClient === 'curl' ? 'fetch' : selectedClient,
-      } as State)
-    }
-  }
-}
-
-export default withTheme<Props>(CodeGenerationPopup)
diff --git a/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupClientChooser.tsx b/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupClientChooser.tsx
deleted file mode 100644
index cccac9003..000000000
--- a/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupClientChooser.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import * as React from 'react'
-import { $p } from 'graphcool-styles'
-import * as cx from 'classnames'
-import calculateSize from 'calculate-size'
-import { Environment } from '../../types'
-
-export interface Props {
-  environment: Environment
-  clients: string[]
-  setClient: (env: any) => void
-  client: string
-}
-
-/* tslint:disable */
-
-const Chooser = (props: Props) => (
-  <div className={cx($p.bb, $p.bt, $p.bl, $p.bBlack10, $p.flex1)}>
-    <style jsx={true}>{`
-      .condition-button:not(.bgGreen):hover {
-        background-color: $gray10;
-      }
-    `}</style>
-    <div
-      className={cx($p.pa38, $p.pt16, $p.flex, $p.flexColumn, $p.itemsCenter)}
-    >
-      <h2 className={cx($p.fw3, $p.mb10, $p.tc)}>Client</h2>
-      <div className={cx($p.dib, $p.mt25)}>
-        <div
-          className={cx(
-            $p.flex,
-            $p.flexRow,
-            $p.justifyAround,
-            $p.ph16,
-            $p.pv6,
-            $p.relative,
-            $p.itemsCenter,
-          )}
-        >
-          {props.clients.map(env => {
-            const { width } = calculateSize(env.toUpperCase(), {
-              fontSize: '14px',
-              fontWeight: '600',
-            })
-
-            return (
-              <div
-                className={cx(
-                  $p.relative,
-                  $p.flex,
-                  $p.itemsCenter,
-                  $p.justifyCenter,
-                  $p.pointer,
-                )}
-                onClick={() => props.setClient(env)}
-                style={{ width: width + 10 }}
-                key={env}
-              >
-                <div
-                  className={cx(
-                    'condition-button',
-                    $p.nowrap,
-                    $p.absolute,
-                    $p.ph10,
-                    $p.flex,
-                    $p.flexRow,
-                    $p.itemsCenter,
-                    {
-                      [cx($p.pv6, $p.bgBlack04)]: props.client !== env,
-                      [cx($p.bgGreen, $p.br2, $p.pv8, $p.z1)]:
-                        props.client === env,
-                    },
-                  )}
-                >
-                  <div
-                    className={cx($p.ttu, $p.fw6, $p.f14, {
-                      [$p.black30]: props.client !== env,
-                      [$p.white]: props.client === env,
-                    })}
-                  >
-                    {env}
-                  </div>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  </div>
-)
-
-export default Chooser
diff --git a/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupCode.tsx b/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupCode.tsx
deleted file mode 100644
index f6c6e9cf9..000000000
--- a/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupCode.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import * as React from 'react'
-import * as cx from 'classnames'
-import { $p } from 'graphcool-styles'
-import { CodeGenerator } from './codeGeneration'
-import { GraphQLClient, Environment } from '../../types'
-import { withTheme, LocalThemeInterface } from '../Theme'
-// tslint:disable-next-line
-const Codemirror: any = require('react-codemirror')
-
-export interface Props {
-  query: string
-  endpointUrl: string
-  client: GraphQLClient
-  environment: Environment
-}
-
-class CodeGenerationPopupCode extends React.Component<
-  Props & LocalThemeInterface,
-  {}
-> {
-  componentWillMount() {
-    require('codemirror/lib/codemirror.css')
-    require('codemirror/theme/dracula.css')
-    require('codemirror/theme/duotone-light.css')
-    require('codemirror/mode/javascript/javascript')
-    require('codemirror/mode/shell/shell')
-  }
-  render() {
-    const { client, environment, endpointUrl, query, localTheme } = this.props
-
-    const generator = new CodeGenerator(client, environment, endpointUrl)
-    const projectSetup = generator.getSetup()
-    const code = generator.getCode(query)
-    const title = environment !== 'Cli' ? 'Code' : 'Command'
-    const mode = environment !== 'Cli' ? 'javascript' : 'shell'
-
-    const codeTheme = localTheme === 'light' ? 'duotone-light' : 'dracula'
-
-    return (
-      <div className={cx($p.pa38, $p.pt16, 'code-generation-popup')}>
-        <style jsx={true}>{`
-          h3 {
-            @p: .fw3, .f25, .mv16;
-          }
-        `}</style>
-        <style jsx={true} global={true}>{`
-          .code-generation-popup .CodeMirror {
-            @p: .pa6;
-            height: auto;
-          }
-        `}</style>
-        {environment !== 'Cli' && (
-          <div>
-            <h3>Project Setup</h3>
-            <Codemirror
-              key={projectSetup}
-              value={projectSetup}
-              options={{
-                height: 'auto',
-                mode: 'shell',
-                theme: codeTheme,
-              }}
-            />
-          </div>
-        )}
-        <h3>{title}</h3>
-        <Codemirror
-          key={code}
-          value={code}
-          options={{
-            height: 'auto',
-            mode,
-            theme: codeTheme,
-          }}
-        />
-      </div>
-    )
-  }
-}
-
-export default withTheme<Props>(CodeGenerationPopupCode)
diff --git a/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupEnvironmentChooser.tsx b/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupEnvironmentChooser.tsx
deleted file mode 100644
index e5584ca60..000000000
--- a/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupEnvironmentChooser.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from 'react' // tslint:disable-line
-import { $p } from 'graphcool-styles'
-import * as cx from 'classnames'
-import calculateSize from 'calculate-size'
-import { Environment } from '../../types'
-
-const environments = ['Node', 'Browser', 'Cli']
-
-export interface Props {
-  environment: Environment
-  setEnvironment: (data: any) => void
-}
-
-/* tslint:disable */
-const Chooser = (props: Props) => (
-  <div className={cx($p.bt, $p.bb, $p.bBlack10, $p.flex1)}>
-    <style jsx={true}>{`
-      .condition-button:not(.bgGreen):hover {
-        background-color: $gray10;
-      }
-    `}</style>
-    <div
-      className={cx($p.pa38, $p.pt16, $p.flex, $p.flexColumn, $p.itemsCenter)}
-    >
-      <h2 className={cx($p.fw3, $p.mb10, $p.tc)}>Environment</h2>
-      <div className={cx($p.dib, $p.mt25)}>
-        <div
-          className={cx(
-            $p.flex,
-            $p.flexRow,
-            $p.justifyAround,
-            $p.ph16,
-            $p.pv6,
-            $p.relative,
-            $p.itemsCenter,
-          )}
-        >
-          {environments.map(env => {
-            const { width } = calculateSize(env.toUpperCase(), {
-              fontSize: '14px',
-              fontWeight: '600',
-            })
-
-            return (
-              <div
-                className={cx(
-                  $p.relative,
-                  $p.flex,
-                  $p.itemsCenter,
-                  $p.justifyCenter,
-                  $p.pointer,
-                )}
-                onClick={() => props.setEnvironment(env)}
-                style={{ width: width + 15 }}
-                key={env}
-              >
-                <div
-                  className={cx(
-                    'condition-button',
-                    $p.nowrap,
-                    $p.absolute,
-                    $p.ph10,
-                    $p.flex,
-                    $p.flexRow,
-                    $p.itemsCenter,
-                    {
-                      [cx($p.pv6, $p.bgBlack04)]: props.environment !== env,
-                      [cx($p.bgGreen, $p.br2, $p.pv8, $p.z1)]:
-                        props.environment === env,
-                    },
-                  )}
-                >
-                  <div
-                    className={cx($p.ttu, $p.fw6, $p.f14, {
-                      [$p.black30]: props.environment !== env,
-                      [$p.white]: props.environment === env,
-                    })}
-                  >
-                    {env}
-                  </div>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  </div>
-)
-
-export default Chooser
diff --git a/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupHeader.tsx b/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupHeader.tsx
deleted file mode 100644
index 364a0794f..000000000
--- a/packages/graphql-playground-react/src/components/CodeGenerationPopup/CodeGenerationPopupHeader.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react' // tslint:disable-line
-import { $p } from 'graphcool-styles'
-import * as cx from 'classnames'
-
-export interface Props {
-  queryActive: boolean
-}
-
-export default (props: Props) => (
-  <div
-    className={cx(
-      $p.flex,
-      $p.justifyCenter,
-      $p.black,
-      $p.itemsCenter,
-      $p.w100,
-      'container',
-    )}
-  >
-    <style jsx={true}>{`
-      .container {
-        height: 103px;
-      }
-    `}</style>
-    <div className={cx($p.f25, $p.fw3, $p.flex, $p.flexRow, $p.itemsCenter)}>
-      Generate Code for your
-      <div className={cx($p.fw6, $p.ml6)}>
-        {props.queryActive ? 'Query' : 'Mutation'}
-      </div>
-    </div>
-  </div>
-)
diff --git a/packages/graphql-playground-react/src/components/CodeGenerationPopup/codeGeneration.ts b/packages/graphql-playground-react/src/components/CodeGenerationPopup/codeGeneration.ts
deleted file mode 100644
index 2f41a29f1..000000000
--- a/packages/graphql-playground-react/src/components/CodeGenerationPopup/codeGeneration.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import { GraphQLClient, Environment } from '../../types'
-
-export class CodeGenerator {
-  private client: GraphQLClient
-  private environment: Environment
-  private endpointUrl: string
-
-  constructor(
-    client: GraphQLClient,
-    environment: Environment,
-    endpointUrl: string,
-  ) {
-    this.client = client
-    this.environment = environment
-    this.endpointUrl = endpointUrl
-  }
-
-  getSetup() {
-    const template = `$ npm install `
-
-    if (this.client === 'graphql-request') {
-      return template + `graphql-request`
-    } else if (this.client === 'fetch') {
-      return template + `isomorphic-fetch es6-promise`
-    }
-
-    return ''
-  }
-
-  getCode(query: string) {
-    if (this.environment === 'Cli') {
-      return this.getTransport() + this.getQueryCode(query)
-    } else if (this.client === 'fetch') {
-      return this.getImports() + '\n' + this.getQueryCode(query)
-    }
-
-    return (
-      this.getImports() +
-      '\n\n' +
-      this.getTransport() +
-      '\n\n' +
-      this.getQueryCode(query)
-    )
-  }
-
-  private getTransport() {
-    if (this.client === 'graphql-request' && this.environment !== 'Cli') {
-      return `const client = new GraphQLClient('${this.endpointUrl}', {
-  headers: {
-    Authorization: 'Bearer YOUR_AUTH_TOKEN',
-  },
-});
-`
-    } else if (this.environment === 'Cli') {
-      return `curl '${this.endpointUrl}' \ 
-  -H 'Authorization: Bearer YOUR_AUTH_TOKEN' \ 
-  `
-    }
-    return ''
-  }
-
-  private getImports() {
-    if (this.client === 'graphql-request' && this.environment === 'Node') {
-      return `const GraphQLClient = require('graphql-request').GraphQLClient`
-    } else if (
-      this.client === 'graphql-request' &&
-      this.environment === 'Browser'
-    ) {
-      return `import { GraphQLClient } from 'graphql-request'`
-    } else if (this.client === 'fetch') {
-      return `require('es6-promise').polyfill()
-require('isomorphic-fetch')
-      `
-    }
-    return ''
-  }
-
-  private getQueryCode(query: string) {
-    if (query.includes('mutation')) {
-      return this.getMutation(query)
-    } else {
-      return this.getQuery(query)
-    }
-  }
-
-  private getQuery(query: string) {
-    if (this.client === 'graphql-request') {
-      const curlyIndex = query.indexOf('{')
-
-      const strippedQuery = query.slice(curlyIndex, query.length)
-      if (this.client === 'graphql-request') {
-        return `function getItem() {
-  return client.request(\`
-${strippedQuery
-          .split('\n')
-          .map(line => '    ' + line)
-          .join('\n')}
-  \`)
-}`
-      }
-    }
-
-    if (this.client === 'fetch') {
-      return `function getItems() { 
-  ${this.getFetchBody(query)}
-}`
-    }
-
-    if (this.client === 'curl') {
-      return `-d '{"query":"${JSON.stringify(query.replace(/\s/g, ''))}"}'`
-    }
-
-    return ''
-  }
-
-  private getFetchBody(query: string) {
-    const clearString = query.replace(/\s/g, '')
-
-    const jsonQuery = JSON.stringify({
-      query: clearString,
-    })
-
-    return (
-      `return fetch('${this.endpointUrl}', {
-    method: 'post',
-    headers: {
-      'Content-Type': 'application/json',
-    //'Authorization': 'Bearer YOUR_AUTH_TOKEN'
-    },
-    body: '` +
-      `${jsonQuery}` +
-      `', 
-  })`
-    )
-  }
-
-  private getMutation(query: string) {
-    const curlyIndex = query.indexOf('{')
-
-    const strippedQuery = query.slice(curlyIndex, query.length)
-    if (this.client === 'graphql-request') {
-      return `function setItem() {
-  return client.request(\`
-${strippedQuery
-        .split('\n')
-        .map(line => '    ' + line)
-        .join('\n')}
-  \`)
-}`
-    }
-
-    if (this.client === 'fetch') {
-      return `function setItem() { 
-  ${this.getFetchBody(query)} 
-}`
-    }
-
-    if (this.client === 'curl') {
-      return `-d '{"query":${JSON.stringify(query.replace(/\s/g, ''))}}'`
-    }
-
-    return ''
-  }
-}
diff --git a/packages/graphql-playground-react/src/components/Copy.tsx b/packages/graphql-playground-react/src/components/Copy.tsx
index 6f9863e65..7742d319f 100644
--- a/packages/graphql-playground-react/src/components/Copy.tsx
+++ b/packages/graphql-playground-react/src/components/Copy.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react'
-import { $v } from 'graphcool-styles'
+import { styled } from '../styled'
 import * as CopyToClipboard from 'react-copy-to-clipboard'
-import * as cn from 'classnames'
 
 export interface Props {
   text: string
@@ -29,48 +28,14 @@ export default class Copy extends React.Component<Props, State> {
   }
 
   render() {
-    const { text, className } = this.props
-    let { color } = this.props
-
-    color = color || $v.blue
+    const { text, color } = this.props
 
     return (
       <CopyToClipboard text={text} onCopy={this.onCopy}>
-        <div className={cn('copy', className)}>
-          <style jsx={true}>{`
-            .copy {
-              @p: .relative;
-            }
-            @keyframes copying {
-              0% {
-                opacity: 0;
-                transform: translate(-50%, 0);
-              }
-
-              50% {
-                opacity: 1;
-              }
-
-              100% {
-                opacity: 0;
-                transform: translate(-50%, -50px);
-              }
-            }
-            .indicator {
-              @p: .absolute;
-              top: -20px;
-              left: 50%;
-              transform: translate(-50%, 0);
-              animation: copying 700ms linear;
-            }
-          `}</style>
-          {this.state.copied && (
-            <div className="indicator" style={{ color }}>
-              Copied
-            </div>
-          )}
+        <CopyBox>
+          {this.state.copied && <Indicator color={color}>Copied</Indicator>}
           {this.props.children}
-        </div>
+        </CopyBox>
       </CopyToClipboard>
     )
   }
@@ -83,3 +48,32 @@ export default class Copy extends React.Component<Props, State> {
     )
   }
 }
+
+const CopyBox = styled.div`
+  position: relative;
+`
+
+const Indicator = styled.div`
+  position: absolute;
+  top: -20px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  animation: copying 700ms linear;
+  color: ${p => (p.color ? p.color : p.theme.colours.darkBlue30)};
+
+  @keyframes copying {
+    0% {
+      opacity: 0;
+      transform: translate(-50%, 0);
+    }
+
+    50% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+      transform: translate(-50%, -50px);
+    }
+  }
+`
diff --git a/packages/graphql-playground-react/src/components/EndpointPopup.tsx b/packages/graphql-playground-react/src/components/EndpointPopup.tsx
index 3f576ff54..85fa9f590 100644
--- a/packages/graphql-playground-react/src/components/EndpointPopup.tsx
+++ b/packages/graphql-playground-react/src/components/EndpointPopup.tsx
@@ -3,7 +3,7 @@ import * as fetch from 'isomorphic-fetch'
 import Popup from './Popup'
 import { throttle } from 'lodash'
 import { Button } from './Button'
-import { styled, css, withProps } from '../styled'
+import { styled, css } from '../styled'
 
 export interface Props {
   onRequestClose: (endpoint: string) => void
@@ -75,7 +75,11 @@ export default class EndpointPopup extends React.Component<Props, State> {
               autoFocus={true}
             />
 
-            {valid && <Button onClick={this.close}>Use Endpoint</Button>}
+            {valid && (
+              <Button purple={true} onClick={this.close}>
+                Use Endpoint
+              </Button>
+            )}
           </Form>
         </Wrapper>
       </Popup>
@@ -124,10 +128,10 @@ interface InputProps {
 }
 
 // prettier-ignore
-const Input = withProps<InputProps>()(styled.input)`
+const Input = styled<InputProps, 'input'>('input')`
   background: ${p => p.theme.colours.white10};
   border-radius: ${p => p.theme.sizes.smallRadius};
-  padding: ${p => p.theme.sizes.small16} ${p => p.theme.sizes.medium25};
+  padding: ${p => `${p.theme.sizes.small16} ${p.theme.sizes.medium25}`};
   font-weight: ${p => p.theme.sizes.fontSemiBold};
   color: white;
   font-size: 16px;
diff --git a/packages/graphql-playground-react/src/components/GraphQLBinApp.tsx b/packages/graphql-playground-react/src/components/GraphQLBinApp.tsx
index f75d1c1d2..37bf1c647 100644
--- a/packages/graphql-playground-react/src/components/GraphQLBinApp.tsx
+++ b/packages/graphql-playground-react/src/components/GraphQLBinApp.tsx
@@ -3,7 +3,7 @@ import { Provider, connect } from 'react-redux'
 import createStore from '../state/createStore'
 import 'isomorphic-fetch'
 import EndpointPopup from './EndpointPopup'
-import { ThemeProvider, theme as styledTheme } from '../styled'
+import { styled, ThemeProvider, theme as styledTheme } from '../styled'
 import { Store } from 'redux'
 import PlaygroundWrapper from './PlaygroundWrapper'
 import { injectState } from '../state/workspace/actions'
@@ -118,17 +118,7 @@ class GraphQLBinApp extends React.Component<Props & ReduxProps, State> {
     }
 
     return (
-      <div className={'wrapper'}>
-        <style jsx={true}>{`
-          .wrapper {
-            @p: .w100, .h100;
-          }
-          .loading {
-            @p: .f20, .white, .flex, .w100, .h100, .bgDarkBlue, .itemsCenter,
-              .justifyCenter;
-          }
-        `}</style>
-
+      <Wrapper>
         {this.state.loading ? null : !this.state.endpoint ||
         this.state.endpoint.length === 0 ? (
           <ThemeProvider theme={styledTheme}>
@@ -143,7 +133,7 @@ class GraphQLBinApp extends React.Component<Props & ReduxProps, State> {
             subscriptionEndpoint={subscriptionEndpoint}
           />
         )}
-      </div>
+      </Wrapper>
     )
   }
 
@@ -168,3 +158,8 @@ export default class GraphQLBinAppHOC extends React.Component<Props> {
     )
   }
 }
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+`
diff --git a/packages/graphql-playground-react/src/components/HistoryPopup.tsx b/packages/graphql-playground-react/src/components/HistoryPopup.tsx
index 0c1e172ef..6a4cf7504 100644
--- a/packages/graphql-playground-react/src/components/HistoryPopup.tsx
+++ b/packages/graphql-playground-react/src/components/HistoryPopup.tsx
@@ -3,7 +3,6 @@ import * as Modal from 'react-modal'
 import HistoryHeader from './HistoryPopup/HistoryHeader'
 import { HistoryFilter } from '../types'
 import HistoryItems from './HistoryPopup/HistoryItems'
-import { Icon } from 'graphcool-styles'
 import { modalStyle } from '../constants'
 import { QueryEditor } from './Playground/QueryEditor'
 import { styled } from '../styled'
@@ -17,6 +16,7 @@ import { toggleHistoryItemStarring } from '../state/history/actions'
 import { Session } from '../state/sessions/reducers'
 import { OrderedMap } from 'immutable'
 import { Container } from './Playground/EditorWrapper'
+import { ArrowRight } from './Icons'
 
 export interface ReduxProps {
   isOpen: boolean
@@ -87,13 +87,7 @@ class HistoryPopup extends React.Component<ReduxProps, State> {
                 <View />
                 <Use onClick={this.handleClickUse}>
                   <UseText>Use</UseText>
-                  <Icon
-                    src={require('../assets/icons/arrowRight.svg')}
-                    color="white"
-                    stroke={true}
-                    width={13}
-                    height={13}
-                  />
+                  <ArrowRight color="white" width={13} height={13} />
                 </Use>
               </RightHeader>
               <Big>
@@ -231,7 +225,7 @@ const Big = styled.div`
   flex: 1 1 auto;
 `
 
-const GraphiqlWrapper = Big.extend`
+const GraphiqlWrapper = styled(Big)`
   width: 100%;
   height: 100%;
   position: relative;
diff --git a/packages/graphql-playground-react/src/components/HistoryPopup/HistoryChooser.tsx b/packages/graphql-playground-react/src/components/HistoryPopup/HistoryChooser.tsx
index d42d41ea3..4ca372e6d 100644
--- a/packages/graphql-playground-react/src/components/HistoryPopup/HistoryChooser.tsx
+++ b/packages/graphql-playground-react/src/components/HistoryPopup/HistoryChooser.tsx
@@ -1,80 +1,82 @@
 import * as React from 'react'
-import { Icon, $v } from 'graphcool-styles'
 import { HistoryFilter } from '../../types'
-import * as cx from 'classnames'
+import { styled, withTheme, ThemeInterface } from '../../styled'
+import { Star, History } from '../Icons'
 
-export interface Props {
+interface Props {
+  theme: ThemeInterface
   selectedFilter: HistoryFilter
   onSelectFilter: (filter: any) => void
 }
 
 /* tslint:disable */
 
-const HistoryChooser = ({ selectedFilter, onSelectFilter }: Props) => (
-  <div>
-    <style jsx={true}>{`
-      .chooser {
-        @inherit: .flex, .itemsCenter;
-      }
-
-      .filter {
-        @inherit: .br2,
-          .relative,
-          .pointer,
-          .ttu,
-          .flex,
-          .itemsCenter,
-          .black30,
-          .fw6,
-          .f14,
-          .bgBlack07,
-          .cbox;
-        padding: 5px 13px 6px 13px;
-        margin: 0 -2px;
-        height: 24px;
-        &.active {
-          @inherit: .z2, .white, .bgGreen;
-          padding: 7px 9px 8px 9px;
+const HistoryChooser = ({ selectedFilter, onSelectFilter, theme }: Props) => (
+  <Chooser>
+    <Filter
+      active={selectedFilter === 'HISTORY'}
+      onClick={() => onSelectFilter('HISTORY')}
+    >
+      <History
+        color={
+          selectedFilter === 'HISTORY'
+            ? theme.colours.white
+            : theme.colours.black30
         }
-      }
-
-      .filter-text {
-        @inherit: .ml6;
-      }
-    `}</style>
-    <div className="chooser">
-      <div
-        className={cx('filter', {
-          active: selectedFilter === 'HISTORY',
-        })}
-        onClick={() => onSelectFilter('HISTORY')}
-      >
-        <Icon
-          src={require('graphcool-styles/icons/stroke/history.svg')}
-          color={selectedFilter === 'HISTORY' ? $v.white : $v.gray30}
-          stroke={true}
-          strokeWidth={3}
-          width={25}
-          height={25}
-        />
-        <div className="filter-text">History</div>
-      </div>
-      <div
-        className={cx('filter', {
-          active: selectedFilter === 'STARRED',
-        })}
-        onClick={() => onSelectFilter('STARRED')}
-      >
-        <Icon
-          src={require('../../assets/icons/star.svg')}
-          color={selectedFilter === 'STARRED' ? $v.white : $v.gray30}
-          width={16}
-          height={16}
-        />
-        <div className="filter-text">Starred</div>
-      </div>
-    </div>
-  </div>
+        strokeWidth={3}
+        width={25}
+        height={25}
+      />
+      <FilterText>History</FilterText>
+    </Filter>
+    <Filter
+      active={selectedFilter === 'STARRED'}
+      onClick={() => onSelectFilter('STARRED')}
+    >
+      <Star
+        color={
+          selectedFilter === 'STARRED'
+            ? theme.colours.white
+            : theme.colours.black30
+        }
+        width={16}
+        height={16}
+      />
+      <FilterText>Starred</FilterText>
+    </Filter>
+  </Chooser>
 )
 
-export default HistoryChooser
+export default withTheme(HistoryChooser)
+
+const Chooser = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+interface FilterProps {
+  active: boolean
+}
+
+const Filter = styled<FilterProps, 'div'>('div')`
+  box-sizing: content-box;
+  height: 24px;
+  z-index: ${p => (p.active ? 2 : 0)};
+  display: flex;
+  align-items: center;
+  margin: 0 -2px;
+  padding: ${p => (p.active ? '7px 9px 8px 9px' : '5px 13px 6px 13px')};
+  background: ${p =>
+    p.active ? p.theme.colours.green : p.theme.colours.black07};
+
+  color: ${p => (p.active ? p.theme.colours.white : p.theme.colours.black30)};
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  border-radius: 2px;
+  cursor: pointer;
+`
+
+const FilterText = styled.p`
+  margin-left: 6px;
+`
diff --git a/packages/graphql-playground-react/src/components/HistoryPopup/HistoryHeader.tsx b/packages/graphql-playground-react/src/components/HistoryPopup/HistoryHeader.tsx
index 6f679e868..911b11d4b 100644
--- a/packages/graphql-playground-react/src/components/HistoryPopup/HistoryHeader.tsx
+++ b/packages/graphql-playground-react/src/components/HistoryPopup/HistoryHeader.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import HistoryChooser from './HistoryChooser'
 import { HistoryFilter } from '../../types'
+import { styled } from '../../styled'
 import SearchBox from '../Playground/DocExplorer/SearchBox'
 
 export interface Props {
@@ -9,17 +10,8 @@ export interface Props {
   onSearch: (value: string) => void
 }
 
-const HistoryHeader = (props: Props) => (
-  <div className="history-header">
-    <style jsx={true}>{`
-      .history-header {
-        @inherit: .pa16, .flex, .justifyBetween, .itemsCenter, .bgBlack02;
-      }
-
-      .search-box {
-        @inherit: .pa0, .bgTransparent;
-      }
-    `}</style>
+export default (props: Props) => (
+  <HistoryHeader>
     <HistoryChooser
       onSelectFilter={props.onSelectFilter}
       selectedFilter={props.selectedFilter}
@@ -28,9 +20,14 @@ const HistoryHeader = (props: Props) => (
       placeholder="Search the history..."
       onSearch={props.onSearch}
       clean={true}
-      isShown={true}
     />
-  </div>
+  </HistoryHeader>
 )
 
-export default HistoryHeader
+const HistoryHeader = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  background: ${p => p.theme.colours.black02};
+`
diff --git a/packages/graphql-playground-react/src/components/HistoryPopup/HistoryItems.tsx b/packages/graphql-playground-react/src/components/HistoryPopup/HistoryItems.tsx
index ce8190876..b00ec05ed 100644
--- a/packages/graphql-playground-react/src/components/HistoryPopup/HistoryItems.tsx
+++ b/packages/graphql-playground-react/src/components/HistoryPopup/HistoryItems.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
-import { Icon, $v } from 'graphcool-styles'
-import * as cx from 'classnames'
 import { Session } from '../../state/sessions/reducers'
 import { OrderedMap } from 'immutable'
+import { Star } from '../Icons'
+import { styled, withTheme, ThemeInterface } from '../../styled'
 
 export interface Props {
   items: OrderedMap<string, Session>
@@ -10,124 +10,132 @@ export interface Props {
   onItemSelect: (index: string) => void
   onItemStarToggled: (sessionId: string) => void
   searchTerm: string
+  theme: ThemeInterface
 }
 
 /* tslint:disable */
-const HistoryItems = ({
-  items,
-  onItemSelect,
-  selectedItemIndex,
-  onItemStarToggled,
-}: Props) => (
-  <div className="history-items">
-    <style jsx={true}>{`
-      .history-items {
-        @inherit: .overflowYScroll;
-        max-height: calc(100vh - 121px);
-      }
-      .item {
-        @inherit: .flex,
-          .itemsCenter,
-          .justifyBetween,
-          .bb,
-          .bBlack10,
-          .pointer;
-        padding: 25px 20px;
-        &.active {
-          @inherit: .bgBlack04;
-        }
-      }
-      .operation,
-      .star,
-      .viewer,
-      .left,
-      .right {
-        @inherit: .flex, .itemsCenter;
-      }
-      .operation {
-        @inherit: .itemsCenter;
-        margin-left: 20px;
-      }
-      .operation-text {
-        @inherit: .fw3, .f20, .mr16;
-      }
-      .operation-icon {
-        @inherit: .br2, .flex, .itemsCenter, .justifyCenter, .mr4, .fw7, .f12;
-        height: 21px;
-        width: 21px;
-        &.subscription {
-          @inherit: .purple, .bgPurple20;
-        }
-        &.query {
-          @inherit: .blue, .bgBlue20;
-        }
-        &.mutation {
-          @inherit: .lightOrange, .bgLightOrange20;
-        }
-      }
-      .date {
-        @inherit: .f14, .black50, .ml16;
-      }
-      .viewer {
-        @inherit: .ml6;
-      }
-    `}</style>
-    {items
-      .map((item, index) => (
-        <div
-          key={item.id}
-          className={cx('item', {
-            active: selectedItemIndex === index,
-          })}
-          onClick={() => onItemSelect(index)}
-        >
-          <div className="left">
-            <div className="star" onClick={() => onItemStarToggled(item.id)}>
-              <Icon
-                src={require('../../assets/icons/star.svg')}
-                color={item.starred ? 'rgb(221,171,0)' : $v.gray30}
+export default withTheme(
+  ({
+    items,
+    onItemSelect,
+    selectedItemIndex,
+    onItemStarToggled,
+    theme,
+  }: Props) => (
+    <HistoryItems>
+      {items
+        .map((item, index) => (
+          <HistoryItem
+            key={item.id}
+            active={selectedItemIndex === index}
+            onClick={() => onItemSelect(index)}
+          >
+            <OperationSide>
+              <Star
+                onClick={() => onItemStarToggled(item.id)}
+                color={item.starred ? 'rgb(221,171,0)' : theme.colours.black40}
                 stroke={!item.starred}
                 strokeWidth={0.5}
                 width={25}
                 height={25}
               />
-            </div>
-            <div className="operation">
-              <div className="operation-text">
-                {item.operationName ||
-                  item.queryTypes.firstOperationName ||
-                  'New Session'}
-              </div>
-              {item.queryTypes.query && (
-                <div className="operation-icon query">Q</div>
-              )}
-              {item.queryTypes.mutation && (
-                <div className="operation-icon mutation">M</div>
-              )}
-              {item.queryTypes.subscription && (
-                <div className="operation-icon subscription">S</div>
-              )}
-            </div>
-          </div>
-          <div className="right">
-            {item.date && (
-              <div className="date">
-                {typeof item.date.getMonth === 'function' && (
-                  <span>
-                    {item.date.getMonth() + 1}/{item.date.getDate()}/{item.date
-                      .getFullYear()
-                      .toString()
-                      .slice(2, 4)}
-                  </span>
+              <Operation>
+                <OperationText>
+                  {item.operationName ||
+                    item.queryTypes.firstOperationName ||
+                    'New Session'}
+                </OperationText>
+                {item.queryTypes.query && <QueryIcon>Q</QueryIcon>}
+                {item.queryTypes.mutation && <MutationIcon>M</MutationIcon>}
+                {item.queryTypes.subscription && (
+                  <SubscriptionIcon>S</SubscriptionIcon>
                 )}
-              </div>
-            )}
-          </div>
-        </div>
-      ))
-      .toArray()
-      .map(x => x[1])}
-  </div>
+              </Operation>
+            </OperationSide>
+            <OperationSide>
+              {item.date && (
+                <Time>
+                  {typeof item.date.getMonth === 'function' &&
+                    item.date.getMonth() + 1}/{item.date.getDate()}/{item.date
+                    .getFullYear()
+                    .toString()
+                    .slice(2, 4)}
+                </Time>
+              )}
+            </OperationSide>
+          </HistoryItem>
+        ))
+        .toArray()
+        .map(x => x[1])}
+    </HistoryItems>
+  ),
 )
 
-export default HistoryItems
+const HistoryItems = styled.div`
+  overflow-y: scroll;
+  max-height: calc(100vh - 121px);
+`
+
+interface ItemProps {
+  active: boolean
+}
+
+const HistoryItem = styled<ItemProps, 'div'>('div')`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 25px 20px;
+  cursor: pointer;
+  border-bottom: 1px solid;
+  border-color: ${p => p.theme.colours.black10};
+  background: ${p =>
+    p.active ? p.theme.colours.black04 : p.theme.colours.white};
+`
+
+const Operation = styled.div`
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+`
+
+const OperationSide = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+const OperationText = styled.p`
+  font-weight: 300;
+  font-size: 20px;
+  margin-right: 16px;
+`
+
+const OperationIcon = styled.div`
+  height: 21px;
+  width: 21px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 4px;
+  border-radius: 2px;
+  font-weight: 700;
+  font-size: 12px;
+  color: ${p => p.theme.colours.white};
+`
+
+const QueryIcon = styled(OperationIcon)`
+  background: ${p => p.theme.colours.blue};
+`
+
+const MutationIcon = styled(OperationIcon)`
+  background: ${p => p.theme.colours.orange};
+`
+
+const SubscriptionIcon = styled(OperationIcon)`
+  background: ${p => p.theme.colours.purple};
+`
+
+const Time = styled.time`
+  color: ${p => p.theme.colours.black40};
+  font-size: 14px;
+  margin-left: 16px;
+`
diff --git a/packages/graphql-playground-react/src/components/Icons/Triangle.tsx b/packages/graphql-playground-react/src/components/Icons/Triangle.tsx
deleted file mode 100644
index ba5f34757..000000000
--- a/packages/graphql-playground-react/src/components/Icons/Triangle.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react'
-
-export const Triangle = () => (
-  <svg
-    width="6px"
-    height="7px"
-    viewBox="40 0 6 7"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <polygon
-      id="Triangle"
-      stroke="none"
-      fill="rgba(0, 0, 0, .2)"
-      fillRule="evenodd"
-      points="40 7 40 0 46 3.5"
-    />
-  </svg>
-)
diff --git a/packages/graphql-playground-react/src/components/Icons/index.tsx b/packages/graphql-playground-react/src/components/Icons/index.tsx
new file mode 100644
index 000000000..c1229b14d
--- /dev/null
+++ b/packages/graphql-playground-react/src/components/Icons/index.tsx
@@ -0,0 +1,203 @@
+import * as React from 'react'
+
+interface Props {
+  color?: string
+  width?: number
+  height?: number
+  stroke?: boolean
+  strokeWidth?: number
+  className?: string
+  onClick?: () => void
+}
+
+export const AddIcon = ({ width, height, strokeWidth }: Props) => (
+  <svg
+    width={width}
+    height={height}
+    strokeWidth={strokeWidth}
+    viewBox="0 0 50 50"
+  >
+    <line x1="25" y1="13.1" x2="25" y2="36.9" />
+    <line x1="36.9" y1="25" x2="13.1" y2="25" />
+  </svg>
+)
+
+export const AddFullIcon = ({ width, height, strokeWidth }: Props) => (
+  <svg
+    x="0px"
+    y="0px"
+    width={width}
+    height={height}
+    viewBox="-1 3 50 50"
+    strokeWidth={strokeWidth}
+  >
+    <line x1="24" y1="7.27" x2="24" y2="48.73" />
+    <line x1="44.73" y1="28" x2="3.27" y2="28" />
+  </svg>
+)
+
+export const FullArrowRightIcon = ({ width, height, color }: Props) => (
+  <svg width={width} height={height} fill={color} viewBox="0 0 14 11">
+    <path
+      d="M13.32,4.97L8.99,0.64c-0.29-0.29-0.77-0.29-1.06,0s-0.29,0.77,0,1.06l2.97,2.97H1.21
+	C0.8,4.67,0.46,5,0.46,5.42S0.8,6.17,1.21,6.17h9.85L7.93,9.3c-0.29,0.29-0.29,0.77,0,1.06c0.15,0.15,0.34,0.22,0.53,0.22
+	s0.38-0.07,0.53-0.22l4.33-4.33C13.61,5.74,13.61,5.26,13.32,4.97z"
+    />
+  </svg>
+)
+
+// export const ArrowRight = ({ width, height, color }: Props) => (
+//   <svg width="30px" height="50px" viewBox="0 0 30 50" stroke={color}>
+//     <polyline points="5,5 25,25 5,45 " />
+//   </svg>
+// )
+
+export const SettingsIcon = ({
+  color,
+  width,
+  height,
+  className,
+  onClick,
+}: Props) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    fill={color}
+    viewBox="0 0 50 50"
+    onClick={onClick}
+  >
+    <path
+      d="M48,21h-5.71c-0.4-1.58-0.91-3.33-1.56-4.66l4.06-4.06c0.19-0.19,0.29-0.44,0.29-0.71
+		c0-0.27-0.11-0.52-0.29-0.71L39.14,5.2c-0.39-0.39-1.02-0.39-1.41,0l-4.06,4.06C32.33,8.62,30.58,8.11,29,7.71V2c0-0.55-0.45-1-1-1
+		h-6c-0.55,0-1,0.45-1,1v5.71c-1.58,0.4-3.33,0.91-4.66,1.55L12.27,5.2c-0.39-0.39-1.02-0.39-1.41,0L5.2,10.86
+		c-0.39,0.39-0.39,1.02,0,1.41l4.07,4.07C8.62,17.66,8.11,19.42,7.71,21H2c-0.55,0-1,0.45-1,1v6c0,0.55,0.45,1,1,1h5.71
+		c0.4,1.58,0.91,3.34,1.56,4.66L5.2,37.73c-0.19,0.19-0.29,0.44-0.29,0.71s0.11,0.52,0.29,0.71l5.66,5.66c0.38,0.38,1.04,0.38,1.41,0
+		l4.07-4.06c1.32,0.65,3.08,1.15,4.66,1.56V48c0,0.55,0.45,1,1,1h6c0.55,0,1-0.45,1-1v-5.71c1.58-0.4,3.34-0.91,4.66-1.56l4.07,4.06
+		c0.39,0.39,1.02,0.39,1.41,0l5.66-5.66c0.39-0.39,0.39-1.02,0-1.41l-4.06-4.07c0.65-1.33,1.16-3.08,1.56-4.66H48c0.55,0,1-0.45,1-1
+		v-6C49,21.45,48.55,21,48,21 M25,33c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8S29.41,33,25,33"
+    />
+  </svg>
+)
+
+export const CrossIcon = ({
+  color,
+  width,
+  height,
+  strokeWidth,
+  className,
+}: Props) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    stroke={color}
+    strokeWidth={strokeWidth}
+    viewBox="0 0 50 50"
+  >
+    <line x1="4" y1="4" x2="46" y2="46" />
+    <line x1="46" y1="4" x2="4" y2="46" />
+  </svg>
+)
+
+export const ArrowRight = ({ width, height, color }: Props) => (
+  <svg width="14px" height="11px" viewBox="-1 -1 14 11">
+    <path
+      d="M5,8.79825579 L5,-1.79402089"
+      id="Stroke-3"
+      stroke="#FFFFFF"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+      transform="translate(5.750000, 3.502117) rotate(-90.000000) translate(-5.750000, -3.502117) "
+    />
+    <polyline
+      id="Stroke-5"
+      stroke="#FFFFFF"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      fill="none"
+      transform="translate(9.868295, 4.333992) rotate(-90.000000) translate(-9.868295, -4.333992) "
+      points="14.2022868 2.16699605 9.86829475 6.50098814 5.53430265 2.16699605"
+    />
+  </svg>
+)
+
+export const History = ({ width, height, color, strokeWidth }: Props) => (
+  <svg
+    width={width}
+    height={height}
+    stroke={color}
+    strokeWidth={strokeWidth}
+    viewBox="0 0 50 50"
+    fill="none"
+  >
+    <polyline points="4.33,19.64 9.7,27.69 15.95,20.54 " />
+    <path
+      d="M9.71,27.69C8.36,16.81,16.68,8.38,26.06,8.03c9.37-0.35,17.25,6.97,17.6,16.35
+	c0.35,9.38-6.97,17.26-16.35,17.6"
+    />
+    <polyline points="26.68,16.06 26.68,25.89 35.62,25.89 " />
+  </svg>
+)
+
+export const Star = ({
+  height,
+  width,
+  color,
+  stroke,
+  strokeWidth,
+  onClick,
+}: Props) => (
+  <svg
+    width={width}
+    height={height}
+    fill={!stroke ? color : 'none'}
+    stroke={stroke ? color : 'none'}
+    strokeWidth={strokeWidth}
+    viewBox="118 12 16 16"
+    onClick={onClick}
+  >
+    <polygon points="126 24 121.297718 26.472136 122.195774 21.236068 118.391548 17.527864 123.648859 16.763932 126 12 128.351141 16.763932 133.608452 17.527864 129.804226 21.236068 130.702282 26.472136" />
+  </svg>
+)
+
+export const Search = ({ height, width, strokeWidth, color }: Props) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 50 50"
+    strokeWidth={strokeWidth}
+    stroke={color}
+    fill="none"
+  >
+    <circle cx="17.82" cy="18.11" r="16.21" />
+    <line x1="29.28" y1="29.57" x2="48.21" y2="48.5" />
+  </svg>
+)
+
+export const ShareIcon = ({ width, height, color }: Props) => (
+  <svg width={width} height={height} viewBox="0 0 50 50" stroke={color}>
+    <path d="M16.47 15.56c-.36 0-.65.3-.65.67v20.22c0 .37.29.67.65.67h9.06c.36 0 .65-.3.65-.67s-.29-.67-.65-.67h-8.41V16.91h1.29v.67c0 .37.29.67.65.67h10.35c.36 0 .65-.3.65-.67v-.67h1.29v6.07c0 .37.29.67.65.67.36 0 .65-.3.65-.67v-6.74a.66.66 0 0 0-.65-.67h-1.94v-1.35h3.88v8.76c0 .37.29.67.65.67.36 0 .65-.3.65-.67v-9.44a.66.66 0 0 0-.65-.67h-4.53v-.67a.66.66 0 0 0-.65-.67H27.4c-.3-1.54-1.61-2.7-3.17-2.7-1.56 0-2.87 1.16-3.17 2.7h-2.01c-.36 0-.65.3-.65.67v.67h-4.53c-.36 0-.65.3-.65.67V40.5c0 .37.29.67.65.67h11.65c.36 0 .65-.3.65-.67s-.29-.67-.65-.67h-11V14.22h3.88v1.35h-1.93zm3.24-2.69h1.94c.36 0 .65-.3.65-.67 0-1.11.87-2.02 1.94-2.02 1.07 0 1.94.91 1.94 2.02 0 .37.29.67.65.67h1.94v4.04h-9.06v-4.04z" />
+    <path d="M28.71 20.96h-9.06c-.36 0-.65.3-.65.67 0 .37.29.67.65.67h9.06c.36 0 .65-.3.65-.67a.66.66 0 0 0-.65-.67M28.71 23.65h-9.06c-.36 0-.65.3-.65.67s.3.68.66.68h9.06c.36 0 .65-.3.65-.67s-.3-.68-.66-.68M28.71 26.35h-9.06c-.36 0-.65.3-.65.67s.29.67.65.67h9.06c.36 0 .65-.3.65-.67s-.29-.67-.65-.67M26.13 29.04h-6.47c-.36 0-.65.3-.65.67 0 .37.29.67.65.67h6.47c.36 0 .65-.3.65-.67-.01-.36-.3-.67-.65-.67M37.77 33.21h-6.13l1.43-1.38c.26-.25.28-.68.03-.95a.62.62 0 0 0-.91-.04l-2.63 2.54c-.13.13-.21.3-.21.49v.02c0 .2.09.38.23.5l2.6 2.56c.12.12.28.18.44.18.17 0 .34-.07.47-.21.25-.27.23-.7-.03-.95l-1.43-1.41h6.13c.36 0 .65-.3.65-.67s-.28-.68-.64-.68" />
+  </svg>
+)
+
+export const Triangle = () => (
+  <svg
+    width="6px"
+    height="7px"
+    viewBox="40 0 6 7"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <polygon
+      stroke="none"
+      fill="rgba(0, 0, 0, .2)"
+      fillRule="evenodd"
+      points="40 7 40 0 46 3.5"
+    />
+  </svg>
+)
diff --git a/packages/graphql-playground-react/src/components/Playground.tsx b/packages/graphql-playground-react/src/components/Playground.tsx
index fad6ac3df..4b0f8932e 100644
--- a/packages/graphql-playground-react/src/components/Playground.tsx
+++ b/packages/graphql-playground-react/src/components/Playground.tsx
@@ -3,7 +3,6 @@ import GraphQLEditor from './Playground/GraphQLEditor'
 import TabBar from './Playground/TabBar'
 import { ISettings } from '../types'
 import HistoryPopup from './HistoryPopup'
-import * as cx from 'classnames'
 import { styled } from '../styled'
 import Settings from './Settings'
 import { PlaygroundSettingsEditor, GraphQLConfigEditor } from './SettingsEditor'
@@ -272,7 +271,6 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
   }
 
   render() {
-    const theme = this.props.settings['editor.theme']
     const { version }: any = app
 
     window.version = version
@@ -280,11 +278,7 @@ export class Playground extends React.PureComponent<Props & ReduxProps, State> {
     return (
       <PlaygroundContainer className="playground">
         <TabBar onNewSession={this.createSession} isApp={this.props.isApp} />
-        <GraphiqlsContainer
-          className={cx('graphiqls-container', {
-            'docs-graphiql': theme === 'light',
-          })}
-        >
+        <GraphiqlsContainer>
           <GraphiqlWrapper className="graphiql-wrapper active">
             {this.props.isConfigTab ? (
               <GraphQLConfigEditor
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/Argument.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/Argument.tsx
index 9e35fa09a..c562278ab 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/Argument.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/Argument.tsx
@@ -18,12 +18,7 @@ export default function Argument({
 }: // sessionId,
 Props) {
   return (
-    <span className="arg">
-      <style jsx={true}>{`
-        .arg:after {
-          content: '';
-        }
-      `}</style>
+    <span>
       <TypeLink
         type={arg}
         x={x}
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/ArgumentInline.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/ArgumentInline.tsx
index 49cdd43fe..6af798b4d 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/ArgumentInline.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/ArgumentInline.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { astFromValue, print, GraphQLList, GraphQLNonNull } from 'graphql'
+import { styled } from '../../../styled'
 
 export interface Props {
   arg: any
@@ -8,12 +9,7 @@ export interface Props {
 
 export default function Argument({ arg, showDefaultValue }: Props) {
   return (
-    <div className="arg">
-      <style jsx={true}>{`
-        .arg {
-          @p: .ml16;
-        }
-      `}</style>
+    <ArgumentLine>
       <span className="arg-name">{arg.name}</span>
       {': '}
       <span className="type-name">{renderType(arg.type)}</span>
@@ -26,7 +22,7 @@ export default function Argument({ arg, showDefaultValue }: Props) {
             </span>
           </span>
         )}
-    </div>
+    </ArgumentLine>
   )
 }
 
@@ -50,3 +46,7 @@ function renderType(type) {
   }
   return <span>{type.name}</span>
 }
+
+const ArgumentLine = styled.div`
+  margin-left: 16px;
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/ColumnDoc.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/ColumnDoc.tsx
index 7715d1f28..07f927d20 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/ColumnDoc.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/ColumnDoc.tsx
@@ -1,37 +1,36 @@
 import * as React from 'react'
-import * as cx from 'classnames'
 import { columnWidth } from '../../../constants'
+import { styled } from '../../../styled'
 
 export interface Props {
   children: any
-  first?: boolean
   overflow?: boolean
   width?: number
 }
 
 const ColumnDoc = ({
   children,
-  first,
   overflow = true,
   width = columnWidth,
 }: Props) => {
   return (
-    <div
-      className={cx('graph-docs-column', { first, overflow })}
-      style={{ width }}
-    >
-      <style jsx={true}>{`
-        .graph-docs-column {
-          @p: .flexFixed, .pb20, .br, .bBlack10, .flex, .flexColumn;
-        }
-        .overflow {
-          overflow-x: hidden;
-          overflow-y: scroll;
-        }
-      `}</style>
+    <Column style={{ width }} overflow={overflow}>
       {children}
-    </div>
+    </Column>
   )
 }
 
 export default ColumnDoc
+
+interface ColumnProps {
+  overflow: boolean
+}
+
+const Column = styled<ColumnProps, 'div'>('div')`
+  display: flex;
+  flex: 0 0 auto;
+  flex-flow: column;
+  padding-bottom: 20px;
+  border-right: 1px solid ${p => p.theme.colours.black10};
+  overflow: ${p => (p.overflow ? 'hidden scroll' : 'auto auto')};
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocTypeSchema.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocTypeSchema.tsx
index 533855866..08cce26b3 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocTypeSchema.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocTypeSchema.tsx
@@ -1,6 +1,7 @@
 import { GraphQLInterfaceType } from 'graphql'
 import * as React from 'react'
 import TypeLink from './TypeLink'
+import { styled } from '../../../styled'
 
 export interface DocTypeSchemaProps {
   type: any
@@ -10,12 +11,7 @@ export interface DocTypeSchemaProps {
   sessionId: string
 }
 
-const DocTypeSchema = ({
-  type,
-  fields,
-  interfaces,
-  level,
-}: DocTypeSchemaProps) => {
+export default ({ type, fields, interfaces, level }: DocTypeSchemaProps) => {
   const nonDeprecatedFields = fields.filter(data => !data.isDeprecated)
   const deprecatedFields = fields.filter(data => data.isDeprecated)
 
@@ -23,58 +19,22 @@ const DocTypeSchema = ({
     type instanceof GraphQLInterfaceType ? 'interface ' : 'type'
 
   return (
-    <div className="doc-type-schema">
-      <style jsx={true} global={true}>{`
-        .doc-type-schema .doc-category-item {
-          padding-left: 32px;
-        }
-        .doc-type-interface .field-name {
-          color: rgb(245, 160, 0);
-        }
-        .doc-type-interface .type-name {
-          color: #f25c54;
-        }
-      `}</style>
-      <style jsx={true}>{`
-        .doc-type-schema {
-          @p: .overflowAuto, .f14;
-        }
-        .doc-type-schema-line {
-          @p: .ph16, .pv6;
-          white-space: nowrap;
-        }
-        .doc-value-comment {
-          @p: .pr16, .black50;
-          padding-left: 32px;
-        }
-        .doc-type-interface {
-          @p: .pl16;
-        }
-        .type-line .type-name {
-          color: #f25c54;
-        }
-        .brace {
-          @p: .darkBlue50, .fw6;
-        }
-      `}</style>
-      <div className="doc-type-schema-line type-line">
+    <DocTypeSchema>
+      <DocTypeLine>
         <span className="field-name">{typeInstance}</span>{' '}
-        <span className="type-name">{type.name}</span>{' '}
-        {interfaces.length === 0 && <span className="brace">{`{`}</span>}
-      </div>
+        <DocsTypeName>{type.name}</DocsTypeName>{' '}
+        {interfaces.length === 0 && <Brace>{`{`}</Brace>}
+      </DocTypeLine>
       {interfaces.map((data, index) => (
-        <TypeLink
+        <DocsTypeInferface
           key={data.name}
           type={data}
           x={level}
           y={index}
           collapsable={true}
-          className="doc-type-interface"
           beforeNode={<span className="field-name">implements</span>}
           afterNode={
-            index === interfaces.length - 1 ? (
-              <span className="brace">{'{'}</span>
-            ) : null
+            index === interfaces.length - 1 ? <Brace>{'{'}</Brace> : null
           }
           lastActive={false}
         />
@@ -92,9 +52,9 @@ const DocTypeSchema = ({
       {deprecatedFields.length > 0 && <br />}
       {deprecatedFields.map((data, index) => (
         <div key={data.name}>
-          <span className="doc-value-comment">
+          <DocsValueComment>
             # Deprecated: {data.deprecationReason}
-          </span>
+          </DocsValueComment>
           <TypeLink
             type={data}
             x={level}
@@ -104,11 +64,47 @@ const DocTypeSchema = ({
           />
         </div>
       ))}
-      <div className="doc-type-schema-line type-line">
-        <span className="brace">{'}'}</span>
-      </div>
-    </div>
+      <DocTypeLine>
+        <Brace>{'}'}</Brace>
+      </DocTypeLine>
+    </DocTypeSchema>
   )
 }
 
-export default DocTypeSchema
+const DocTypeSchema = styled.div`
+  font-size: 14px;
+  overflow: auto;
+  .doc-category-item {
+    padding-left: 32px;
+  }
+`
+
+const DocTypeLine = styled.div`
+  padding: 6px 16px;
+  white-space: nowrap;
+`
+
+const DocsTypeName = styled.span`
+  color: #f25c54;
+`
+
+const DocsTypeInferface = styled(TypeLink)`
+  padding-left: 16px;
+  .field-name {
+    color: rgb(245, 160, 0);
+  }
+  .type-name {
+    color: #f25c54;
+  }
+`
+
+const DocsValueComment = styled.span`
+  color: ${p => p.theme.colours.black50};
+  padding-right: 16px;
+  padding-left: 32px;
+`
+
+const Brace = styled.span`
+  font-weight: 600;
+  color: ${p => p.theme.colours.darkBlue50};
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/DocType.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/DocType.tsx
new file mode 100644
index 000000000..71182427f
--- /dev/null
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/DocType.tsx
@@ -0,0 +1,7 @@
+import { styled } from '../../../../styled'
+
+export default styled.div`
+  padding: 20px 16px 0 16px;
+  overflow: auto;
+  font-size: 14px;
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/EnumTypeSchema.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/EnumTypeSchema.tsx
index 5fbcadb31..4f642a652 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/EnumTypeSchema.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/EnumTypeSchema.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react'
+import { styled } from '../../../../styled'
+import DocTypeSchema from './DocType'
 
 export interface EnumTypeSchemaProps {
   type: any
@@ -8,18 +10,7 @@ const EnumTypeSchema = ({ type }: EnumTypeSchemaProps) => {
   const values = type.getValues()
   const deprecatedValues = values.filter((value: any) => value.isDeprecated)
   return (
-    <div className="doc-type-schema">
-      <style jsx={true}>{`
-        .doc-type-schema {
-          @p: .ph16, .pt20, .overflowAuto, .f14;
-        }
-        .doc-value .field-name {
-          @p: .ph16;
-        }
-        .doc-value-comment {
-          @p: .ph16, .black50;
-        }
-      `}</style>
+    <DocTypeSchema className="doc-type-schema">
       <span className="field-name">enum</span>{' '}
       <span className="type-name">{type.name}</span>{' '}
       <span className="brace">{'{'}</span>
@@ -38,7 +29,7 @@ const EnumTypeSchema = ({ type }: EnumTypeSchemaProps) => {
         />
       ))}
       <span className="brace">{'}'}</span>
-    </div>
+    </DocTypeSchema>
   )
 }
 
@@ -51,30 +42,30 @@ interface ValueProps {
 }
 
 const Value = ({ value, isDeprecated, first }: ValueProps) => (
-  <div className={`doc-value${first ? ' doc-value--first' : ''}`}>
-    <style jsx={true}>{`
-      .doc-value {
-        margin-top: 6px;
-      }
-      .doc-value--first {
-        margin-top: 0px;
-      }
-      .doc-value .field-name {
-        @p: .ph16;
-        color: red;
-      }
-      .doc-value-comment {
-        @p: .ph16, .black50;
-      }
-    `}</style>
+  <DocsValue first={first}>
     <div className="field-name">{value.name}</div>
     {value.description && (
-      <div className="doc-value-comment">{value.description}</div>
+      <DocsValueComment>{value.description}</DocsValueComment>
     )}
     {isDeprecated && (
-      <div className="doc-value-comment">
-        Deprecated: {value.deprecationReason}
-      </div>
+      <DocsValueComment>Deprecated: {value.deprecationReason}</DocsValueComment>
     )}
-  </div>
+  </DocsValue>
 )
+
+interface DocsValueProps {
+  first: boolean
+}
+
+const DocsValue = styled<DocsValueProps, 'div'>('div')`
+  margin-top: ${p => (p.first ? 0 : 6)}px;
+  .field-name {
+    padding: 0 16px;
+    color: red;
+  }
+`
+
+const DocsValueComment = styled.div`
+  padding: 0 16px;
+  color: ${p => p.theme.colours.black50};
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/ScalarType.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/ScalarType.tsx
index 7286b3b1e..fc29e5af5 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/ScalarType.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/ScalarType.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react'
+import DocTypeSchema from './DocType'
 
 export interface ScalarTypeSchemaProps {
   type: any
@@ -6,15 +7,10 @@ export interface ScalarTypeSchemaProps {
 
 const ScalarTypeSchema = ({ type }: ScalarTypeSchemaProps) => {
   return (
-    <div className="doc-type-schema">
-      <style jsx={true}>{`
-        .doc-type-schema {
-          @p: .ph16, .pt20, .overflowAuto, .f14;
-        }
-      `}</style>
+    <DocTypeSchema className="doc-type-schema">
       <span className="field-name">scalar</span>{' '}
       <span className="type-name">{type.name}</span>
-    </div>
+    </DocTypeSchema>
   )
 }
 
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/UnionTypeSchema.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/UnionTypeSchema.tsx
index 1b3ece2d4..880976a9f 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/UnionTypeSchema.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/DocsTypes/UnionTypeSchema.tsx
@@ -1,5 +1,6 @@
 import TypeLink from '../TypeLink'
 import * as React from 'react'
+import DocTypeSchema from './DocType'
 
 export interface EnumTypeSchemaProps {
   schema: any
@@ -16,15 +17,7 @@ const UnionTypeSchema = ({
 }: EnumTypeSchemaProps) => {
   const types = schema.getPossibleTypes(type)
   return (
-    <div className="doc-type-schema">
-      <style jsx={true}>{`
-        .doc-type-schema {
-          @p: .ph16, .pt20, .overflowAuto, .f14;
-        }
-        .doc-value {
-          @p: .ph16;
-        }
-      `}</style>
+    <DocTypeSchema className="doc-type-schema">
       <span className="field-name">union</span>{' '}
       <span className="type-name">{type.name}</span>
       {' = '}
@@ -39,7 +32,7 @@ const UnionTypeSchema = ({
           lastActive={false}
         />
       ))}
-    </div>
+    </DocTypeSchema>
   )
 }
 
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 fc1ce1266..1e330a79b 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/FieldDoc.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/FieldDoc.tsx
@@ -14,6 +14,7 @@ import EnumTypeSchema from './DocsTypes/EnumTypeSchema'
 import UnionTypeSchema from './DocsTypes/UnionTypeSchema'
 import { getDeeperType, serialize } from '../util/stack'
 import { CategoryTitle } from './DocsStyles'
+import { styled } from '../../../styled'
 
 export interface Props {
   schema: any
@@ -77,35 +78,7 @@ export default class FieldDoc extends React.Component<Props, State> {
 
     return (
       <div ref={this.setRef}>
-        <style jsx={true} global={true}>{`
-          .doc-header .doc-category-item {
-            @p: .fw6, .f14;
-          }
-          .doc-header .doc-category-item .field-name {
-            color: #f25c54;
-          }
-          .doc-description {
-            @p: .ph16, .black50;
-          }
-          .doc-type-description {
-            @p: .black50;
-          }
-        `}</style>
-        <style jsx={true}>{`
-          .doc-header {
-            @p: .bgBlack02, .pb10, .pt20;
-          }
-          .doc-type-description {
-            @p: .pb16;
-          }
-          .doc-deprecation {
-            @p: .ph16, .black50;
-          }
-          .markdown-content {
-            @p: .pb20;
-          }
-        `}</style>
-        <div className="doc-header">
+        <DocsHeader>
           <TypeLink
             type={field}
             x={level}
@@ -113,8 +86,8 @@ export default class FieldDoc extends React.Component<Props, State> {
             clickable={false}
             lastActive={false}
           />
-        </div>
-        <MarkdownContent
+        </DocsHeader>
+        <DocsDescription
           className="doc-type-description"
           markdown={field.description || ''}
         />
@@ -122,12 +95,7 @@ export default class FieldDoc extends React.Component<Props, State> {
         <CategoryTitle>{`${typeInstance} details`}</CategoryTitle>
         {type.description &&
           type.description.length > 0 && (
-            <div className="markdown-content">
-              <MarkdownContent
-                className="doc-description"
-                markdown={type.description || ''}
-              />
-            </div>
+            <DocsDescription markdown={type.description || ''} />
           )}
         {type instanceof GraphQLScalarType && <ScalarTypeSchema type={type} />}
         {type instanceof GraphQLEnumType && <EnumTypeSchema type={type} />}
@@ -202,3 +170,24 @@ const scrollToRight = (element: Element, to: number, duration: number) => {
     scrollToRight(element, to, duration - 10)
   }, 10)
 }
+
+const DocsHeader = styled.div`
+  background: ${p => p.theme.colours.black02};
+  padding-top: 20px;
+  padding-bottom: 10px;
+
+  .doc-category-item {
+    font-size: 14px;
+    font-weight: 600;
+    word-wrap: break-word;
+  }
+  .doc-category-item .field-name {
+    color: #f25c54;
+  }
+`
+
+const DocsDescription = styled(MarkdownContent)`
+  font-size: 14px;
+  padding: 0 16px 20px 16px;
+  color: rgba(0, 0, 0, 0.5);
+`
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 b2bc0cc56..adb62bd2c 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocs.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocs.tsx
@@ -15,7 +15,6 @@ import {
 import Spinner from '../../Spinner'
 import { columnWidth } from '../../../constants'
 import RootColumn from './RootColumn'
-import * as cn from 'classnames'
 import {
   serialize,
   getElementRoot,
@@ -125,82 +124,17 @@ class GraphDocs extends React.Component<
     }
 
     return (
-      <Docs
-        className={cn('graph-docs docExplorerWrap docs', { open: docsOpen })}
-        style={docsStyle}
-        innerRef={this.setRef}
-      >
-        <style jsx={true} global={true}>{`
-          .graph-docs .doc-category-title {
-            @p: .mh0, .ph16;
-            border: none;
-          }
-          .doc-type-description p {
-            @p: .pa16, .f14;
-          }
-          .graphiql-container .doc-type-description {
-            @p: .mh0, .ph16, .f14;
-          }
-          .doc-header .doc-category-item {
-            @p: .f16;
-            word-wrap: break-word;
-          }
-          .doc-description p {
-            @p: .f14;
-          }
-        `}</style>
-        <style jsx={true}>{`
-          .docs :global(.doc-category-title) {
-            @p: .pa16, .f14;
-          }
-          .graph-docs :global(code) {
-            @p: .mono, .br2;
-            padding: 1px 2px;
-            background: rgba(0, 0, 0, 0.06);
-          }
-          .docs-button {
-            @p: .absolute, .white, .bgGreen, .pv6, .z2, .ttu, .fw6, .f12, .ph10,
-              .pointer;
-            box-shadow: -1px 1px 6px 0 rgba(0, 0, 0, 0.3);
-            line-height: 17px;
-            letter-spacing: 0.45px;
-            padding-bottom: 8px;
-            transform: rotate(-90deg);
-            left: -50px;
-            top: 129px;
-            border-top-left-radius: 2px;
-            border-top-right-radius: 2px;
-          }
-          .doc-explorer-container {
-            @p: .flex, .relative, .h100, .w100;
-            overflow-x: auto;
-            overflow-y: hidden;
-          }
-          .doc-explorer-gradient {
-            @p: .z1, .absolute, .top0, .bottom0;
-            pointer-events: none;
-            content: '';
-            width: 20px;
-            left: 0px;
-            background: linear-gradient(
-              to right,
-              rgba(255, 255, 255, 1) 30%,
-              rgba(255, 255, 255, 0)
-            );
-          }
-        `}</style>
-        <div className="docs-button" onClick={this.handleToggleDocs}>
-          Schema
-        </div>
+      <Docs open={docsOpen} style={docsStyle} innerRef={this.setRef}>
+        <DocsButton onClick={this.handleToggleDocs}>Schema</DocsButton>
         <DocsResizer onMouseDown={this.handleDocsResizeStart} />
-        <div className="doc-explorer-gradient" />
+        <DocsGradient />
         <DocsExplorer
           onKeyDown={this.handleKeyDown}
           onMouseMove={this.handleMouseMove}
           tabIndex={0}
           innerRef={this.setDocExplorerRef}
         >
-          <div className="doc-explorer-container">
+          <DocsExplorerContainer>
             {emptySchema && <ColumnDoc>{emptySchema}</ColumnDoc>}
             {!emptySchema &&
               schema && (
@@ -225,7 +159,7 @@ class GraphDocs extends React.Component<
                 />
               </ColumnDoc>
             ))}
-          </div>
+          </DocsExplorerContainer>
         </DocsExplorer>
       </Docs>
     )
@@ -423,18 +357,23 @@ export default connect<StateFromProps, DispatchFromProps, Props>(
   { withRef: true },
 )(GraphDocs)
 
-const Docs = styled.div`
+interface DocsProps {
+  open: boolean
+}
+
+const Docs = styled<DocsProps, 'div'>('div')`
   background: white;
   box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
   position: absolute;
   right: -2px;
-  z-index: 3;
+  z-index: ${p => (p.open ? 2000 : 3)};
   height: 100%;
   font-family: 'Open Sans', sans-serif;
   -webkit-font-smoothing: antialiased;
 
-  &.open {
-    z-index: 2000;
+  .doc-type-description p {
+    padding: 16px;
+    font-size: 14px;
   }
 
   .field-name {
@@ -476,6 +415,15 @@ const DocsExplorer = styled.div`
   }
 `
 
+const DocsExplorerContainer = styled.div`
+  display: flex;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+`
+
 const DocsResizer = styled.div`
   cursor: col-resize;
   height: 100%;
@@ -499,3 +447,39 @@ const ErrorContainer = styled.div`
   top: 50%;
   transform: translate(0, -50%);
 `
+
+const DocsButton = styled.div`
+  position: absolute;
+  z-index: 2;
+  left: -50px;
+  top: 129px;
+  padding: 6px 10px;
+  transform: rotate(-90deg);
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  color: ${p => p.theme.colours.white};
+  background: ${p => p.theme.colours.green};
+  box-shadow: -1px 1px 6px 0 rgba(0, 0, 0, 0.3);
+  text-transform: uppercase;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 17px;
+  letter-spacing: 0.45px;
+  cursor: pointer;
+`
+
+const DocsGradient = styled.div`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 20px;
+  z-index: 1;
+  pointer-events: none;
+  content: '';
+  background: linear-gradient(
+    to right,
+    rgba(255, 255, 255, 1) 30%,
+    rgba(255, 255, 255, 0)
+  );
+`
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 d27a7fd17..b4e5a8db2 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocsRoot.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/GraphDocsRoot.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import TypeLink from './TypeLink'
 import { serializeRoot } from '../util/stack'
 import { CategoryTitle } from './DocsStyles'
+import { styled } from '../../../styled'
 
 export interface Props {
   schema: any
@@ -13,17 +14,7 @@ export default class GraphDocsRoot extends React.PureComponent<Props, {}> {
     const { schema, sessionId } = this.props
     const obj = serializeRoot(schema)
     return (
-      <div className="doc-root">
-        <style jsx={true}>{`
-          .doc-root {
-            padding-left: 6px;
-          }
-        `}</style>
-        <style jsx={true} global={true}>{`
-          .doc-root .doc-category-item .field-name {
-            color: #f25c54;
-          }
-        `}</style>
+      <DocsRoot className="doc-root">
         <ShowRootType
           name="Queries"
           fields={obj.queries}
@@ -46,7 +37,7 @@ export default class GraphDocsRoot extends React.PureComponent<Props, {}> {
             sessionId={sessionId}
           />
         )}
-      </div>
+      </DocsRoot>
     )
   }
 }
@@ -77,3 +68,11 @@ function ShowRootType({ name, fields, offset }: ShowRootTypeProps) {
     </div>
   )
 }
+
+const DocsRoot = styled.div`
+  padding-left: 6px;
+
+  .doc-category-item .field-name {
+    color: #f25c54;
+  }
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/RootColumn.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/RootColumn.tsx
index 9fb38411e..22d144158 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/RootColumn.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/RootColumn.tsx
@@ -17,7 +17,7 @@ export default class RootColumn extends React.PureComponent<Props, {}> {
     const { searchValue, schema, width, sessionId, handleSearch } = this.props
     return (
       <ColumnDoc width={width} overflow={false}>
-        <SearchBox isShown={true} onSearch={handleSearch} />
+        <SearchBox onSearch={handleSearch} />
         <div className="overflowAuto flexAuto">
           {searchValue && (
             <SearchResults
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/SearchBox.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/SearchBox.tsx
index 40a142d86..f66763e38 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/SearchBox.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/SearchBox.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react'
 import debounce from 'graphiql/dist/utility/debounce'
-import { Icon } from 'graphcool-styles'
-import * as cx from 'classnames'
+import { Search } from '../../Icons'
+import { styled } from '../../../styled'
 
 export interface Props {
-  isShown: boolean
   onSearch: (value: string) => void
   placeholder?: string
   clean?: boolean
@@ -28,52 +27,31 @@ export default class SearchBox extends React.Component<Props, State> {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    return (
-      nextProps.isShown !== this.props.isShown ||
-      nextState.value !== this.state.value
-    )
+    return nextState.value !== this.state.value
   }
 
   render() {
-    return (
-      <div className={cx(!this.props.clean && 'search-box')}>
-        <style jsx={true}>{`
-          .search-box {
-            @p: .pa25, .bgBlack02, .bb, .bBlack10, .relative, .flexFixed;
-            z-index: 1;
-            margin-left: 6px;
-          }
-          .label {
-            @p: .bgWhite, .bbox, .w100, .flex, .itemsCenter, .bgWhite;
-            padding: 12px 14px 13px 15px;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-          }
-          .input {
-            @p: .f16, .ml10;
-          }
-          .input::placeholder {
-            color: rgba(0, 0, 0, 0.3);
-          }
-        `}</style>
-        {this.props.isShown && (
-          <label className="label">
-            <Icon
-              src={require('graphcool-styles/icons/stroke/search.svg')}
-              stroke={true}
-              strokeWidth={3}
-              color={'rgba(0, 0, 0, 0.3)'}
-            />
-            <input
-              className="input"
-              onChange={this.handleChange}
-              type="text"
-              value={this.state.value}
-              placeholder={this.props.placeholder || 'Search the schema ...'}
-            />
-          </label>
-        )}
-      </div>
+    const LabelComponent = (
+      <Label>
+        <Search
+          height={16}
+          width={16}
+          strokeWidth={3}
+          color={'rgba(0, 0, 0, 0.3)'}
+        />
+        <Input
+          onChange={this.handleChange}
+          type="text"
+          value={this.state.value}
+          placeholder={this.props.placeholder || 'Search the schema ...'}
+        />
+      </Label>
     )
+    if (this.props.clean) {
+      return LabelComponent
+    }
+
+    return <SearchContainer>{LabelComponent}</SearchContainer>
   }
 
   handleChange = event => {
@@ -81,3 +59,34 @@ export default class SearchBox extends React.Component<Props, State> {
     this.debouncedOnSearch()
   }
 }
+
+const SearchContainer = styled.div`
+  position: relative;
+  flex: 0 0 auto;
+  z-index: 1;
+  display: flex;
+  margin-left: 6px;
+  padding: 25px;
+  background: ${p => p.theme.colours.black02};
+  border-bottom: 1px solid ${p => p.theme.colours.black10};
+  div {
+    width: 100%;
+  }
+`
+
+const Label = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  padding: 12px 14px 13px 15px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  background: ${p => p.theme.colours.white};
+`
+
+const Input = styled.input`
+  font-size: 16px;
+  margin-left: 10px;
+  &::placeholder {
+    color: ${p => p.theme.colours.black30};
+  }
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/SearchResults.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/SearchResults.tsx
index 7fb222643..7b42fd101 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/SearchResults.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/SearchResults.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-
+import { styled } from '../../../styled'
 import TypeLink from './TypeLink'
 
 export interface Props {
@@ -101,16 +101,7 @@ export default class SearchResults extends React.Component<Props, {}> {
       matchedWithin.length + matchedTypes.length + matchedFields.length ===
       0
     ) {
-      return (
-        <span className="doc-alert-text">
-          <style jsx={true}>{`
-            .doc-alert-text {
-              @p: .ml25, .mt16, .db;
-            }
-          `}</style>
-          {'No results found.'}
-        </span>
-      )
+      return <NoResult>No results found.</NoResult>
     }
 
     if (withinType && matchedTypes.length + matchedFields.length > 0) {
@@ -144,3 +135,9 @@ function isMatch(sourceText, searchValue) {
     return sourceText.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1
   }
 }
+
+const NoResult = styled.span`
+  display: block;
+  margin-top: 16px;
+  margin-left: 16px;
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/TypeLink.tsx b/packages/graphql-playground-react/src/components/Playground/DocExplorer/TypeLink.tsx
index bcf7d9f69..96535f67f 100644
--- a/packages/graphql-playground-react/src/components/Playground/DocExplorer/TypeLink.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/DocExplorer/TypeLink.tsx
@@ -1,10 +1,9 @@
 import * as React from 'react'
-import * as cx from 'classnames'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { GraphQLList, GraphQLNonNull, isType } from 'graphql'
 import ArgumentInline from './ArgumentInline'
-import { Triangle } from '../../Icons/Triangle'
+import { Triangle } from '../../Icons'
 import { toJS } from '../util/toJS'
 import { addStack } from '../../../state/docs/actions'
 import { getSessionDocsState } from '../../../state/docs/selectors'
@@ -13,6 +12,7 @@ import {
   getSelectedSessionIdFromRoot,
 } from '../../../state/sessions/selectors'
 import { createSelector } from 'reselect'
+import { styled } from '../../../styled'
 
 interface ReduxProps {
   keyMove: boolean
@@ -118,10 +118,8 @@ class TypeLink extends React.Component<
       className,
       beforeNode,
       afterNode,
-      keyMove,
       showParentName,
       isActive,
-      lastActive,
     } = this.props
     const isGraphqlType = isType(type)
 
@@ -135,62 +133,13 @@ class TypeLink extends React.Component<
       )
 
     return (
-      <div
-        className={cx('doc-category-item', className, {
-          clickable,
-          active: isActive,
-          'last-active': lastActive,
-          'no-hover': keyMove,
-        })}
+      <DocsCategoryItem
+        active={isActive}
+        clickable={clickable}
+        className={`doc-category-item${className ? className : ''}`}
         onClick={this.onClick}
-        ref={this.setRef}
+        innerRef={this.setRef}
       >
-        <style jsx={true}>{`
-          .doc-category-item {
-            @p: .mv0, .ph16, .pv6, .relative, .overflowAuto, .f14;
-            transition: $duration background-color;
-          }
-          .doc-category-item.clickable:hover {
-            @p: .pointer, .white, .bgBlue;
-          }
-          .doc-category-item.clickable:hover :global(.brace) {
-            @p: .white;
-          }
-          .doc-category-item.active {
-            @p: .bgBlack07;
-          }
-          .doc-category-icon {
-            @p: .absolute;
-            right: 10px;
-            top: 50%;
-            transform: translateY(-50%);
-          }
-        `}</style>
-        <style jsx={true} global={true}>{`
-          .doc-category-item.last-active,
-          .doc-category-item.clickable:hover:not(.no-hover) {
-            background-color: #2a7ed3 !important;
-            color: #fff !important;
-            z-index: 1;
-
-            & .field-name,
-            & .type-name,
-            & .arg-name {
-              color: #fff !important;
-            }
-          }
-          /*
-          .doc-category-item.active:not(.last-active) svg {
-            fill: #2a7ed3 !important;
-          }
-          */
-          .doc-category-item b {
-            @p: .fw6;
-          }
-          .dots {
-            @p: .fw6;
-          }
-        `}</style>
         {beforeNode}
         {beforeNode && ' '}
         {!isGraphqlType && (
@@ -201,7 +150,7 @@ class TypeLink extends React.Component<
                 '(',
                 <span key="args">
                   {this.state.collapsed ? (
-                    <span className="dots">...</span>
+                    <Dots>...</Dots>
                   ) : (
                     type.args.map(arg => (
                       <ArgumentInline key={arg.name} arg={arg} />
@@ -215,13 +164,13 @@ class TypeLink extends React.Component<
         )}
         <span className="type-name">{renderType(type.type || type)}</span>
         {clickable && (
-          <span className="doc-category-icon">
+          <IconBox>
             <Triangle />
-          </span>
+          </IconBox>
         )}
         {afterNode && ' '}
         {afterNode}
-      </div>
+      </DocsCategoryItem>
     )
   }
 }
@@ -284,3 +233,44 @@ export default connect<ReduxProps, DispatchFromProps, Props>(
   selector,
   mapDispatchToProps,
 )(toJS(TypeLink))
+
+interface DocsCategoryItemProps {
+  clickable?: boolean
+  active?: boolean
+}
+
+const DocsCategoryItem = styled<DocsCategoryItemProps, 'div'>('div')`
+  position: relative;
+  padding: 6px 16px;
+  overflow: auto;
+  font-size: 14px;
+  transition: 0.1s background-color;
+  background: ${p =>
+    p.active ? p.theme.colours.black07 : p.theme.colours.white};
+
+  cursor: ${p => (p.clickable ? 'pointer' : 'select')};
+
+  &:hover {
+    color: ${p => p.theme.colours.white};
+    background: #2a7ed3;
+    .field-name,
+    .type-name,
+    .arg-name {
+      color: ${p => p.theme.colours.white} !important;
+    }
+  }
+  b {
+    font-weight: 600;
+  }
+`
+
+const Dots = styled.span`
+  font-weight: 600;
+`
+
+const IconBox = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+`
diff --git a/packages/graphql-playground-react/src/components/Playground/DocExplorer/utils.ts b/packages/graphql-playground-react/src/components/Playground/DocExplorer/utils.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/graphql-playground-react/src/components/Playground/ExecuteButton.tsx b/packages/graphql-playground-react/src/components/Playground/ExecuteButton.tsx
index 06f731e6f..92542e8b6 100644
--- a/packages/graphql-playground-react/src/components/Playground/ExecuteButton.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/ExecuteButton.tsx
@@ -8,7 +8,7 @@
 
 import * as React from 'react'
 import ExecuteButtonOperation from './ExecuteButtonOperation'
-import { withProps, styled } from '../../styled'
+import { styled } from '../../styled'
 import { connect } from 'react-redux'
 import { runQuery, stopQuery } from '../../state/sessions/actions'
 import { createStructuredSelector } from 'reselect'
@@ -204,7 +204,7 @@ interface ButtonProps {
   isRunning: boolean
 }
 
-const Button = withProps<ButtonProps>()(styled.div)`
+const Button = styled<ButtonProps, 'div'>('div')`
   width: 60px;
   height: 60px;
 
@@ -226,7 +226,7 @@ const Button = withProps<ButtonProps>()(styled.div)`
   }
 
   &:hover {
-    background-color:${p =>
+    background-color: ${p =>
       p.isRunning
         ? p.theme.editorColours.executeButtonSubscriptionHover
         : p.theme.editorColours.executeButtonHover};
diff --git a/packages/graphql-playground-react/src/components/Playground/GenerateCodeButton.tsx b/packages/graphql-playground-react/src/components/Playground/GenerateCodeButton.tsx
deleted file mode 100644
index 0d1becca3..000000000
--- a/packages/graphql-playground-react/src/components/Playground/GenerateCodeButton.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import * as React from 'react'
-import Icon from 'graphcool-styles/dist/components/Icon/Icon'
-import Tooltip from '../Tooltip'
-import * as cn from 'classnames'
-
-export interface Props {
-  onOpenCodeGeneration: () => void
-}
-
-export interface State {
-  open: boolean
-}
-
-export default class GenerateCodeButton extends React.Component<Props, State> {
-  constructor(props) {
-    super(props)
-    this.state = {
-      open: false,
-    }
-  }
-  render() {
-    const { open } = this.state
-    return (
-      <div className="code-generation-button">
-        <style jsx={true}>{`
-          .code-generation-button {
-            @p: .absolute, .pointer;
-            z-index: 1005;
-            top: -59px;
-            right: 13px;
-            z-index: 2;
-          }
-          .tooltip-text {
-            @p: .mr10, .darkBlue50, .fw6, .ttu, .f14;
-            letter-spacing: 0.53px;
-          }
-          .icon {
-            @p: .pointer, .relative;
-          }
-          .generate-code {
-            padding: 8px;
-          }
-        `}</style>
-        <div className={cn('icon', { open })}>
-          <div className="generate-code" onClick={this.toggleTooltip}>
-            <Icon
-              width={4}
-              height={20}
-              src={require('../../assets/icons/dots.svg')}
-            />
-          </div>
-          <div className="tooltip">
-            <Tooltip
-              open={open}
-              onClose={this.toggleTooltip}
-              anchorOrigin={{
-                horizontal: 'center',
-                vertical: 'top',
-              }}
-            >
-              <div>
-                <div className="row">
-                  <span
-                    className="tooltip-text"
-                    onClick={this.props.onOpenCodeGeneration}
-                  >
-                    Generate Code
-                  </span>
-                </div>
-              </div>
-            </Tooltip>
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  private toggleTooltip = () => {
-    this.setState(state => ({ open: !state.open }))
-  }
-}
diff --git a/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx b/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx
index 281f6fc1b..ec4047153 100644
--- a/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx
@@ -12,10 +12,8 @@ import { connect } from 'react-redux'
 import Spinner from '../Spinner'
 import Results from './Results'
 import ResponseTracing from './ResponseTracing'
-import withTheme from '../Theme/withTheme'
-import { LocalThemeInterface } from '../Theme'
 import GraphDocs from './DocExplorer/GraphDocs'
-import { withProps, styled } from '../../styled/index'
+import { styled } from '../../styled/index'
 import TopBar from './TopBar/TopBar'
 import {
   VariableEditorComponent,
@@ -118,9 +116,7 @@ export interface ToolbarButtonProps extends SimpleProps {
   label: string
 }
 
-class GraphQLEditor extends React.PureComponent<
-  Props & LocalThemeInterface & ReduxProps
-> {
+class GraphQLEditor extends React.PureComponent<Props & ReduxProps> {
   public codeMirrorSizer
   public queryEditorComponent
   public variableEditorComponent
@@ -160,74 +156,6 @@ class GraphQLEditor extends React.PureComponent<
   render() {
     return (
       <Container>
-        <style jsx={true} global={true}>{`
-          .docs-button,
-          .schema-button {
-            @p: .absolute, .white, .bgGreen, .pa6, .br2, .z2, .ttu, .fw6, .f14,
-              .ph10, .pointer;
-            padding-bottom: 8px;
-            transform: rotate(-90deg);
-            left: -44px;
-            top: 195px;
-          }
-
-          div.schema-button {
-            @p: .bgLightOrange;
-            left: -53px;
-            top: 120px;
-          }
-
-          .queryWrap {
-            @p: .relative;
-            border-top: 8px solid $darkBlue;
-          }
-          .queryWrap.light {
-            border-top: 8px solid #eeeff0;
-          }
-
-          .graphiql-button {
-            @p: .white50, .bgDarkBlue, .ttu, .f14, .fw6, .br2, .pointer;
-            padding: 5px 9px 6px 9px;
-            letter-spacing: 0.53px;
-          }
-          .graphiql-button.prettify {
-            @p: .absolute;
-            top: -57px;
-            right: 38px;
-            z-index: 2;
-          }
-
-          .onboarding-hint {
-            @p: .absolute, .br2, .z999;
-          }
-          .onboarding-hint.step1 {
-            top: 207px;
-            left: 90px;
-          }
-          .onboarding-hint.step2 {
-            top: 207px;
-            left: 90px;
-          }
-        `}</style>
-        <style jsx={true} global={true}>{`
-          .query-header-enter {
-            opacity: 0.01;
-          }
-
-          .query-header-enter.query-header-enter-active {
-            opacity: 1;
-            transition: opacity 500ms ease-in;
-          }
-
-          .query-header-leave {
-            opacity: 1;
-          }
-
-          .query-header-leave.query-header-leave-active {
-            opacity: 0.01;
-            transition: opacity 300ms ease-in;
-          }
-        `}</style>
         <EditorWrapper>
           <TopBar shareEnabled={this.props.shareEnabled} />
           <EditorBar
@@ -614,31 +542,29 @@ const mapStateToProps = createStructuredSelector({
   sessionId: getSelectedSessionIdFromRoot,
 })
 
-export default withTheme<Props>(
-  // TODO fix redux types
-  connect<any, any, any>(
-    mapStateToProps,
-    {
-      updateQueryFacts,
-      stopQuery,
-      runQueryAtPosition,
-      openQueryVariables,
-      closeQueryVariables,
-      openVariables,
-      closeVariables,
-      openTracing,
-      closeTracing,
-      toggleTracing,
-      setEditorFlex,
-      toggleVariables,
-      fetchSchema,
-    },
-    null,
-    {
-      withRef: true,
-    },
-  )(GraphQLEditor),
-)
+export default // TODO fix redux types
+connect<any, any, any>(
+  mapStateToProps,
+  {
+    updateQueryFacts,
+    stopQuery,
+    runQueryAtPosition,
+    openQueryVariables,
+    closeQueryVariables,
+    openVariables,
+    closeVariables,
+    openTracing,
+    closeTracing,
+    toggleTracing,
+    setEditorFlex,
+    toggleVariables,
+    fetchSchema,
+  },
+  null,
+  {
+    withRef: true,
+  },
+)(GraphQLEditor)
 
 const EditorBar = styled.div`
   display: flex;
@@ -677,16 +603,19 @@ interface DrawerProps {
   height: number
 }
 
-const BottomDrawer = withProps<DrawerProps>()(styled.div)`
+const BottomDrawer = styled<DrawerProps, 'div'>('div')`
   display: flex;
   background: #0b1924;
   flex-direction: column;
   position: relative;
   height: ${props => (props.isOpen ? `${props.height}px` : '43px')};
-  `
+`
 
 interface TitleProps {
   isOpen: boolean
+  onMouseDown?: any
+  onClick?: any
+  innerRef?: any
 }
 
 const BottomDrawerTitle = styled.div`
@@ -714,12 +643,14 @@ const VariableEditor = styled(BottomDrawer)`
   }
 `
 
-const VariableEditorTitle = withProps<TitleProps>()(styled(BottomDrawerTitle))`
+const VariableEditorTitle = styled<TitleProps>(({ isOpen, ...rest }) => (
+  <BottomDrawerTitle {...rest} />
+))`
   cursor: ${p => (p.isOpen ? 'row-resize' : 'n-resize')};
   background: ${p => p.theme.editorColours.leftDrawerBackground};
 `
 
-const VariableEditorSubtitle = withProps<TitleProps>()(styled.span)`
+const VariableEditorSubtitle = styled<TitleProps, 'span'>('span')`
   margin-right: 10px;
   cursor: pointer;
   color: ${p =>
@@ -735,9 +666,9 @@ const ResponseTracking = styled(BottomDrawer)`
   background: ${p => p.theme.editorColours.rightDrawerBackground};
 `
 
-const ResponseTrackingTitle = withProps<TitleProps>()(
-  styled(BottomDrawerTitle),
-)`
+const ResponseTrackingTitle = styled<TitleProps>(({ isOpen, ...rest }) => (
+  <BottomDrawerTitle {...rest} />
+))`
   text-align: right;
   background: ${p => p.theme.editorColours.rightDrawerBackground};
   cursor: ${props => (props.isOpen ? 's-resize' : 'n-resize')};
@@ -748,7 +679,7 @@ interface QueryProps {
   flex: number
 }
 
-const QueryWrap = withProps<QueryProps>()(styled.div)`
+const QueryWrap = styled<QueryProps, 'div'>('div')`
   position: relative;
   display: flex;
   flex-direction: column;
diff --git a/packages/graphql-playground-react/src/components/Playground/HttpHeaders/HttpHeaders.tsx b/packages/graphql-playground-react/src/components/Playground/HttpHeaders/HttpHeaders.tsx
deleted file mode 100644
index 1f9d7a72f..000000000
--- a/packages/graphql-playground-react/src/components/Playground/HttpHeaders/HttpHeaders.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import * as React from 'react'
-import Tooltip from '../../Tooltip'
-import HttpListItem from './HttpListItem'
-
-export interface Header {
-  name: string
-  value: string
-}
-
-export interface Props {
-  headers?: Header[]
-  onChange?: (headers: Header[]) => void
-}
-
-export interface State {
-  open: boolean
-  newHeader: boolean
-}
-
-class HttpHeaders extends React.PureComponent<Props, State> {
-  static defaultProps = {
-    headers: [],
-  }
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      open: false,
-      newHeader: false,
-    }
-  }
-
-  render() {
-    const { headers } = this.props
-    const { open, newHeader } = this.state
-    return (
-      <div className="http-headers-container">
-        <style jsx={true} global={true}>{`
-          .http-headers-container .tooltip-content {
-            padding: 0 !important;
-          }
-        `}</style>
-        <style jsx={true}>{`
-          .http-headers-container {
-            @p: .absolute;
-            top: -57px;
-            left: 25px;
-            z-index: 3;
-          }
-          .graphiql-button {
-            @p: .white50, .bgDarkBlue, .ttu, .f14, .fw6, .br2, .pointer,
-              .relative;
-            padding: 5px 9px 6px 9px;
-          }
-          .http-headers-container .list-content {
-            @p: .flex, .flexColumn;
-            text-transform: none;
-            width: 400px;
-          }
-          .row {
-            @p: .flex, .flexRow, .itemsCenter, .bb, .bBlack10, .ph16, .pv10;
-          }
-          .row.row-inactive {
-            @p: .pointer, .darkBlue50;
-            border: none;
-          }
-        `}</style>
-        <div className="graphiql-button" onClick={this.handleToggle}>
-          Http Headers ({(headers && headers.length) || 0})
-        </div>
-        <Tooltip
-          open={open}
-          onClose={this.handleToggle}
-          anchorOrigin={{
-            vertical: 'top',
-            horizontal: 'left',
-          }}
-        >
-          <div className="list-content">
-            {headers &&
-              headers.map((header, index) => (
-                <HttpListItem
-                  key={index}
-                  index={index}
-                  header={header}
-                  onChange={this.handleChange}
-                  onDelete={this.handleDelete}
-                />
-              ))}
-            {newHeader && (
-              <HttpListItem
-                index={-1}
-                header={{ name: '', value: '' }}
-                onChange={this.handleChange}
-                onDelete={this.handleDelete}
-              />
-            )}
-            <div
-              className="row row-inactive"
-              onClick={this.handleClickNewHeader}
-            >
-              + add new Header
-            </div>
-          </div>
-        </Tooltip>
-      </div>
-    )
-  }
-
-  private handleToggle = () => {
-    this.setState({ open: !this.state.open })
-  }
-
-  private handleClickNewHeader = () => {
-    this.setState({ newHeader: true })
-  }
-
-  private handleChange = (index: number, header: Header) => {
-    let { headers } = this.props
-    if (typeof (headers as any).asMutable === 'function') {
-      headers = (headers as any).asMutable()
-    }
-    if (headers) {
-      // If new item add it at the end of the array
-      if (index === -1) {
-        headers = [...headers, header]
-      } else {
-        headers[index] = header
-      }
-      if (this.props.onChange) {
-        this.props.onChange(headers)
-      }
-    }
-    this.setState({ newHeader: false })
-  }
-
-  private handleDelete = (index: number) => {
-    // If delete new item
-    if (index === -1) {
-      this.setState({ newHeader: false })
-      return
-    }
-    let headers: any = this.props.headers as any
-    if (headers) {
-      if (headers.asMutable) {
-        headers = headers.asMutable()
-      }
-      headers.splice(index, 1)
-      if (this.props.onChange) {
-        this.props.onChange(headers)
-      }
-    }
-  }
-}
-
-export default HttpHeaders
diff --git a/packages/graphql-playground-react/src/components/Playground/HttpHeaders/HttpListItem.tsx b/packages/graphql-playground-react/src/components/Playground/HttpHeaders/HttpListItem.tsx
deleted file mode 100644
index b6563d00e..000000000
--- a/packages/graphql-playground-react/src/components/Playground/HttpHeaders/HttpListItem.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import * as React from 'react'
-import { Icon, $v } from 'graphcool-styles'
-import * as keycode from 'keycode'
-import { Header } from './HttpHeaders'
-
-export interface Props {
-  header: Header
-  index: number
-  onChange: (index: number, Header) => void
-  onDelete: (index: number) => void
-}
-
-export interface State {
-  name: string
-  value: string
-  editing: boolean
-}
-
-export default class HttpListItem extends React.Component<Props, State> {
-  private inputRef: any
-
-  constructor(props) {
-    super(props)
-    this.state = {
-      name: props.header.name,
-      value: props.header.value,
-      editing: false,
-    }
-  }
-
-  componentDidMount() {
-    // If new element focus it
-    if (this.props.index === -1) {
-      this.inputRef.focus()
-    }
-  }
-
-  render() {
-    const { editing, name, value } = this.state
-    return (
-      <div className="row">
-        <style jsx={true}>{`
-          .row {
-            @p: .flex, .flexRow, .itemsCenter, .bb, .bBlack10, .ph16, .pv10;
-          }
-          .row .name {
-            @p: .toe, .overflowHidden, .nowrap;
-            flex: 0 30%;
-          }
-          .row .value {
-            @p: .toe, .overflowHidden, .nowrap;
-            flex: 0 60%;
-          }
-          .row input {
-            @p: .f14, .darkBlue50, .w100;
-            background: transparent;
-          }
-          .row .icon {
-            @p: .pointer, .tr, .flex, .justifyCenter, .flex1;
-          }
-        `}</style>
-        <div className="name input">
-          <input
-            ref={this.setRef}
-            name="name"
-            placeholder="Type a name..."
-            value={name}
-            onChange={this.handleEditChange}
-            onKeyDown={this.handleKeyDown}
-          />
-        </div>
-        <div className="value input">
-          <input
-            name="value"
-            placeholder="Type the content..."
-            value={value}
-            onChange={this.handleEditChange}
-            onKeyDown={this.handleKeyDown}
-          />
-        </div>
-        {editing ? (
-          <div className="icon" onClick={this.handleValidate}>
-            <Icon
-              src={require('graphcool-styles/icons/fill/check.svg')}
-              color={$v.darkBlue50}
-              width={20}
-              height={20}
-            />
-          </div>
-        ) : (
-          <div className="icon" onClick={this.handleDelete}>
-            <Icon
-              src={require('graphcool-styles/icons/stroke/cross.svg')}
-              color={$v.darkBlue50}
-              width={10}
-              height={10}
-              stroke={true}
-              strokeWidth={6}
-            />
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  private setRef = ref => {
-    this.inputRef = ref
-  }
-
-  private handleKeyDown = e => {
-    // Handle enter press and save header
-    if (keycode(e) === 'enter' && this.state.editing) {
-      this.handleValidate()
-    }
-  }
-
-  private handleEditChange = ({ target }) => {
-    this.setState({ [target.name]: target.value, editing: true })
-  }
-
-  private handleValidate = () => {
-    if (this.state.name && this.state.value) {
-      this.props.onChange(this.props.index, {
-        name: this.state.name,
-        value: this.state.value,
-      })
-      this.setState({ editing: false })
-    }
-  }
-
-  private handleDelete = () => {
-    this.props.onDelete(this.props.index)
-  }
-}
diff --git a/packages/graphql-playground-react/src/components/Playground/HttpHeaders/index.ts b/packages/graphql-playground-react/src/components/Playground/HttpHeaders/index.ts
deleted file mode 100644
index 6808b9785..000000000
--- a/packages/graphql-playground-react/src/components/Playground/HttpHeaders/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import HttpHeaders, { Header } from './HttpHeaders'
-
-export default HttpHeaders
-export { Header }
diff --git a/packages/graphql-playground-react/src/components/Playground/QueryHeader.tsx b/packages/graphql-playground-react/src/components/Playground/QueryHeader.tsx
deleted file mode 100644
index 44db4faef..000000000
--- a/packages/graphql-playground-react/src/components/Playground/QueryHeader.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react'
-
-export interface Props {
-  onPrettify: any
-  showEndpoints?: boolean
-  showQueryTitle?: boolean
-}
-
-const QueryHeader = ({ onPrettify, showQueryTitle }: Props) => (
-  <div className="query-header">
-    <style jsx={true}>{`
-      .query-header {
-        @inherit: .bgDarkerBlue, .pa25, .flex, .justifyBetween, .itemsCenter;
-      }
-      .graphiql-button {
-        @inherit: .white50, .bgDarkBlue, .ttu, .f14, .fw6, .br2, .pointer;
-        margin-right: 33px;
-        padding: 5px 9px 6px 9px;
-        letter-spacing: 0.53px;
-      }
-    `}</style>
-    {showQueryTitle && <div className="editor-title">Query</div>}
-    <div className="graphiql-button" onClick={onPrettify}>
-      Prettify
-    </div>
-  </div>
-)
-
-export default QueryHeader
diff --git a/packages/graphql-playground-react/src/components/Playground/QueryHeader/Info.tsx b/packages/graphql-playground-react/src/components/Playground/QueryHeader/Info.tsx
deleted file mode 100644
index fcfcfdc7f..000000000
--- a/packages/graphql-playground-react/src/components/Playground/QueryHeader/Info.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react'
-
-const Info = props => (
-  <div className="info">
-    <style jsx={true}>{`
-      .question-mark {
-        @inherit: .bgWhite10, .flex, .itemsCenter, .justifyCenter, .white40,
-          .f12, .fw6, .br100, .pointer;
-        width: 18px;
-        height: 18px;
-      }
-      .tooltip {
-        @inherit: .dn, .absolute;
-        z-index: 20;
-        width: 250px;
-        padding-top: 5px;
-        left: -50px;
-      }
-      .tooltip-content {
-        @inherit: .br2, .bgWhite, .pa16, .black50, .f14, .fw4, .relative;
-        &:before {
-          @inherit: .absolute, .bgWhite;
-          content: '';
-          top: -4px;
-          left: 55px;
-          transform: rotate(45deg);
-          width: 8px;
-          height: 8px;
-        }
-      }
-      .info {
-        @inherit: .ml10, .relative;
-        &:hover .tooltip {
-          @inherit: .db;
-        }
-        &:hover .question-mark {
-          @inherit: .bgBlue, .white;
-        }
-      }
-    `}</style>
-    <div className="question-mark">?</div>
-    <div className="tooltip">
-      <div className="tooltip-content">{props.children}</div>
-    </div>
-  </div>
-)
-
-export default Info
diff --git a/packages/graphql-playground-react/src/components/Playground/ResultViewer.tsx b/packages/graphql-playground-react/src/components/Playground/ResultViewer.tsx
index 6372853ce..7bbaf9079 100644
--- a/packages/graphql-playground-react/src/components/Playground/ResultViewer.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/ResultViewer.tsx
@@ -7,7 +7,7 @@
  */
 
 import * as React from 'react'
-import { styled, withProps } from '../../styled'
+import { styled } from '../../styled'
 
 export interface Props {
   value: string
@@ -122,7 +122,7 @@ interface ResultProps {
   isSubscription: boolean
 }
 
-const Result = withProps<ResultProps>()(styled.div)`
+const Result = styled<ResultProps, 'div'>('div')`
   position: relative;
   display: flex;
   flex: 1;
@@ -134,6 +134,9 @@ const Result = withProps<ResultProps>()(styled.div)`
     background: none;
     padding-left: 38px;
   }
+  .CodeMirror-cursor {
+    display: none !important;
+  }
   .CodeMirror-scroll {
     overflow: auto !important;
     max-width: 50vw;
diff --git a/packages/graphql-playground-react/src/components/Playground/Results.tsx b/packages/graphql-playground-react/src/components/Playground/Results.tsx
index e6c92b55c..587d460f2 100644
--- a/packages/graphql-playground-react/src/components/Playground/Results.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/Results.tsx
@@ -5,7 +5,7 @@ import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
 import { getResponses } from '../../state/sessions/selectors'
 import { List } from 'immutable'
-import { styled, withProps } from '../../styled'
+import { styled } from '../../styled'
 import { ResponseRecord } from '../../state/sessions/reducers'
 
 export interface Props {
@@ -77,7 +77,7 @@ const mapStateToProps = createStructuredSelector({
 
 export default connect(mapStateToProps)(Results)
 
-const ResultWindow = withProps<ResultWrapperProps>()(styled.div)`
+const ResultWindow = styled<ResultWrapperProps, 'div'>('div')`
   flex: 1;
   height: ${props => (props.isSubscription ? 'auto' : '100%')};
   position: relative;
@@ -113,7 +113,7 @@ const ResultWindow = withProps<ResultWrapperProps>()(styled.div)`
   }
 `
 
-const Response = withProps<ResultWrapperProps>()(styled.div)`
+const Response = styled<ResultWrapperProps, 'div'>('div')`
   position: relative;
   display: flex;
   flex: 1;
@@ -150,7 +150,7 @@ interface ResultWrapperProps {
   isSubscription: boolean
 }
 
-const ResultWrapper = withProps<ResultWrapperProps>()(styled.div)`
+const ResultWrapper = styled<ResultWrapperProps, 'div'>('div')`
   display: flex;
   flex: 1;
   height: ${props => (props.isSubscription ? `auto` : '100%')};
diff --git a/packages/graphql-playground-react/src/components/Playground/SchemaExplorer.tsx b/packages/graphql-playground-react/src/components/Playground/SchemaExplorer.tsx
deleted file mode 100644
index 1c7f24298..000000000
--- a/packages/graphql-playground-react/src/components/Playground/SchemaExplorer.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as React from 'react'
-import { QueryEditor } from './QueryEditor'
-
-export interface Props {
-  idl?: string
-  ref?: any
-  modelName?: string
-}
-
-export default function SchemaExplorer({ idl, modelName }: Props) {
-  return (
-    <div className="schema-explorer">
-      <style jsx={true}>{`
-        .schema-explorer {
-          @p: .h100, .flex, .flexColumn, .bgDarkerBlue;
-        }
-        .header {
-          @p: .flexFixed, .f16, .fw6, .pt16, .pl16, .pr16, .white40, .ttu;
-          letter-spacing: 0.6px;
-        }
-        .schema-explorer :global(.CodeMirror-cursor) {
-          @p: .dn;
-        }
-      `}</style>
-      <div className="header">Schema for „{modelName}“</div>
-      <QueryEditor
-        schema={null}
-        value={idl || ''}
-        onClickReference={handleClickReference}
-      />
-    </div>
-  )
-}
-
-function handleClickReference() {
-  //
-}
diff --git a/packages/graphql-playground-react/src/components/Playground/Tab.tsx b/packages/graphql-playground-react/src/components/Playground/Tab.tsx
index f0f836b3e..7b0ed0049 100644
--- a/packages/graphql-playground-react/src/components/Playground/Tab.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/Tab.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
-import Icon from 'graphcool-styles/dist/components/Icon/Icon'
+import { SettingsIcon, CrossIcon } from '../Icons'
 import { connect } from 'react-redux'
 import { closeTab, selectTab, editName } from '../../state/sessions/actions'
-import { styled, withProps } from '../../styled'
+import { styled } from '../../styled'
 import { Session } from '../../state/sessions/reducers'
 import AutosizeInput from 'react-input-autosize'
 
@@ -52,12 +52,7 @@ class Tab extends React.PureComponent<Props & ReduxProps, State> {
             {queryTypes.query && <Query>Q</Query>}
             {(session.isSettingsTab || session.isConfigTab) && (
               <Query>
-                <Icon
-                  src={require('graphcool-styles/icons/fill/settings.svg')}
-                  width={12}
-                  height={12}
-                  color="white"
-                />
+                <SettingsIcon width={12} height={12} color="white" />
               </Query>
             )}
             {queryTypes.mutation && <Mutation>M</Mutation>}
@@ -88,13 +83,7 @@ class Tab extends React.PureComponent<Props & ReduxProps, State> {
           {session.isFile && session.changed && !this.state.overCross ? (
             <Circle>⬤</Circle>
           ) : (
-            <Icon
-              src={require('graphcool-styles/icons/stroke/cross.svg')}
-              stroke={true}
-              width={12}
-              height={11}
-              strokeWidth={7}
-            />
+            <CrossIcon width={12} height={11} strokeWidth={7} />
           )}
         </Close>
       </TabItem>
@@ -147,7 +136,7 @@ interface TabItemProps {
   hasCircle?: boolean
 }
 
-const TabItem = withProps<TabItemProps>()(styled.div)`
+const TabItem = styled<TabItemProps, 'div'>('div')`
   flex: 0 0 auto;
   display: flex;
   align-items: center;
@@ -173,7 +162,7 @@ const TabItem = withProps<TabItemProps>()(styled.div)`
   }
 `
 
-const OperationName = withProps<TabItemProps>()(styled.div)`
+const OperationName = styled<TabItemProps, 'div'>('div')`
   opacity: ${p => (p.active ? 1 : 0.5)};
   background: transparent;
   color: ${p => p.theme.editorColours.tabText};
@@ -194,7 +183,7 @@ const OperationNameInput = styled(AutosizeInput)`
   }
 `
 
-const Icons = withProps<TabItemProps>()(styled.div)`
+const Icons = styled<TabItemProps, 'div'>('div')`
   display: flex;
   align-items: center;
   opacity: ${p => (p.active ? 1 : 0.5)};
@@ -217,15 +206,15 @@ const QueryType = styled.div`
 `
 
 const Query = styled(QueryType)`
-  background: rgba(42, 126, 210, 1);
+  background: ${p => p.theme.colours.blue};
 `
 
 const Mutation = styled(QueryType)`
-  background: rgba(241, 143, 1, 1);
+  background: ${p => p.theme.colours.orange};
 `
 
 const Subscription = styled(QueryType)`
-  background: rgba(164, 3, 111, 1);
+  background: ${p => p.theme.colours.purple};
 `
 
 const RedDot = styled.div`
@@ -243,8 +232,9 @@ const Circle = styled.div`
   background: ${p => p.theme.editorColours.circle};
 `
 
-const Close = withProps<TabItemProps>()(styled.div)`
+const Close = styled<TabItemProps, 'div'>('div')`
   position: relative;
+  display: flex;
   margin-left: 10px;
   top: 1px;
   height: 13px;
diff --git a/packages/graphql-playground-react/src/components/Playground/TabBar.tsx b/packages/graphql-playground-react/src/components/Playground/TabBar.tsx
index c959ed736..f3b878479 100644
--- a/packages/graphql-playground-react/src/components/Playground/TabBar.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/TabBar.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
-import { styled, withProps } from '../../styled'
-import { Icon } from 'graphcool-styles'
+import { styled } from '../../styled'
+import { AddIcon } from '../Icons'
 import Tab from './Tab'
 import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
@@ -36,13 +36,7 @@ const TabBar = ({
         />
       ))}
       <Plus onClick={onNewSession}>
-        <Icon
-          src={require('graphcool-styles/icons/stroke/add.svg')}
-          width={34}
-          height={34}
-          stroke={true}
-          strokeWidth={4}
-        />
+        <AddIcon width={34} height={34} strokeWidth={4} />
       </Plus>
     </Tabs>
   </StyledTabBar>
@@ -70,7 +64,7 @@ interface TabsProps {
   isApp?: boolean
 }
 
-const Tabs = withProps<TabsProps>()(styled.div)`
+const Tabs = styled<TabsProps, 'div'>('div')`
   display: flex;
   align-items: center;
   margin-top: 16px;
diff --git a/packages/graphql-playground-react/src/components/Playground/TokenTooltip.tsx b/packages/graphql-playground-react/src/components/Playground/TokenTooltip.tsx
deleted file mode 100644
index 8bd7b3e75..000000000
--- a/packages/graphql-playground-react/src/components/Playground/TokenTooltip.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react'
-import Tooltip from '../Tooltip'
-
-export default class TokenTooltip extends React.Component {
-  render() {
-    return (
-      <Tooltip
-        open={true}
-        onClose={this.handleToggle}
-        anchorOrigin={{
-          vertical: 'top',
-          horizontal: 'left',
-        }}
-      >
-        <h1>This is the tooltip</h1>
-      </Tooltip>
-    )
-  }
-  handleToggle = () => {
-    //
-  }
-}
diff --git a/packages/graphql-playground-react/src/components/Playground/TopBar/ReloadIcon.tsx b/packages/graphql-playground-react/src/components/Playground/TopBar/ReloadIcon.tsx
index 1b6841b65..2484b85b9 100644
--- a/packages/graphql-playground-react/src/components/Playground/TopBar/ReloadIcon.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/TopBar/ReloadIcon.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { styled, keyframes, withProps } from '../../../styled/index'
+import { styled, keyframes } from '../../../styled/index'
 
 export interface Props {
   isReloadingSchema: boolean
@@ -75,18 +75,18 @@ const Svg = styled.svg`
   }
 `
 
-const Circle = withProps<Props>()(styled.circle)`
+const Circle = styled<Props, 'circle'>('circle')`
   fill: none;
   stroke: ${p => p.theme.editorColours.icon};
   stroke-dasharray: 37.68;
   transition: opacity 0.3s ease-in-out;
   opacity: ${p => (p.isReloadingSchema ? 1 : 0)};
   transform-origin: 9.5px 10px;
-  animation: ${refreshFrames} 2s linear ${p =>
-  p.isReloadingSchema ? 'infinite' : ''};
+  animation: ${refreshFrames} 2s linear
+    ${p => (p.isReloadingSchema ? 'infinite' : '')};
 `
 
-const Icon = withProps<Props>()(styled.path)`
+const Icon = styled<Props, 'path'>('path')`
   transition: opacity 0.3s ease-in-out;
   opacity: ${p => (p.isReloadingSchema ? 0 : 1)};
   transform-origin: 9.5px 10px;
diff --git a/packages/graphql-playground-react/src/components/Playground/TopBar/TopBar.tsx b/packages/graphql-playground-react/src/components/Playground/TopBar/TopBar.tsx
index 0dbc32bb8..36942f676 100644
--- a/packages/graphql-playground-react/src/components/Playground/TopBar/TopBar.tsx
+++ b/packages/graphql-playground-react/src/components/Playground/TopBar/TopBar.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { styled, withProps } from '../../../styled/index'
+import { styled } from '../../../styled/index'
 import * as copy from 'copy-to-clipboard'
 
 import Share from '../../Share'
@@ -185,7 +185,7 @@ interface UrlBarProps {
   active: boolean
 }
 
-const UrlBar = withProps<UrlBarProps>()(styled.input)`
+const UrlBar = styled<UrlBarProps, 'input'>('input')`
   background: ${p => p.theme.editorColours.button};
   border-radius: 4px;
   color: ${p =>
diff --git a/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx b/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx
index 9d4c2f3f9..55bd51fa6 100644
--- a/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx
+++ b/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx
@@ -17,7 +17,7 @@ import {
   lightEditorColours,
   EditorColours,
 } from '../styled/theme'
-import OldThemeProvider from './Theme/ThemeProvider'
+// import OldThemeProvider from './Theme/ThemeProvider'
 import { getActiveEndpoints } from './util'
 import { ISettings } from '../types'
 import { connect } from 'react-redux'
@@ -350,51 +350,49 @@ class PlaygroundWrapper extends React.Component<
             settings: this.props.settings,
           }}
         >
-          <OldThemeProvider theme={theme}>
-            <App>
-              {this.props.config &&
-                this.state.activeEnv && (
-                  <ProjectsSideNav
-                    config={this.props.config}
-                    folderName={this.props.folderName || 'GraphQL App'}
-                    theme={theme}
-                    activeEnv={this.state.activeEnv}
-                    onSelectEnv={this.handleSelectEnv}
-                    onNewWorkspace={this.props.onNewWorkspace}
-                    showNewWorkspace={Boolean(this.props.showNewWorkspace)}
-                    isElectron={Boolean(this.props.isElectron)}
-                    activeProjectName={this.state.activeProjectName}
-                    configPath={this.props.configPath}
-                  />
-                )}
-              <Playground
-                endpoint={this.state.endpoint}
-                subscriptionEndpoint={this.state.subscriptionEndpoint}
-                shareUrl={this.state.shareUrl}
-                onChangeEndpoint={this.handleChangeEndpoint}
-                onChangeSubscriptionsEndpoint={
-                  this.handleChangeSubscriptionsEndpoint
-                }
-                adminAuthToken={this.state.platformToken}
-                getRef={this.getPlaygroundRef}
-                config={this.props.config!}
-                configString={this.state.configString!}
-                configIsYaml={this.state.configIsYaml!}
-                canSaveConfig={Boolean(this.props.canSaveConfig)}
-                onChangeConfig={this.handleChangeConfig}
-                onSaveConfig={this.handleSaveConfig}
-                onUpdateSessionCount={this.handleUpdateSessionCount}
-                fixedEndpoints={Boolean(this.state.configString)}
-                headers={this.state.headers}
-                configPath={this.props.configPath}
-                workspaceName={
-                  this.props.workspaceName || this.state.activeProjectName
-                }
-                createApolloLink={this.props.createApolloLink}
-                schema={this.state.schema}
-              />
-            </App>
-          </OldThemeProvider>
+          <App>
+            {this.props.config &&
+              this.state.activeEnv && (
+                <ProjectsSideNav
+                  config={this.props.config}
+                  folderName={this.props.folderName || 'GraphQL App'}
+                  theme={theme}
+                  activeEnv={this.state.activeEnv}
+                  onSelectEnv={this.handleSelectEnv}
+                  onNewWorkspace={this.props.onNewWorkspace}
+                  showNewWorkspace={Boolean(this.props.showNewWorkspace)}
+                  isElectron={Boolean(this.props.isElectron)}
+                  activeProjectName={this.state.activeProjectName}
+                  configPath={this.props.configPath}
+                />
+              )}
+            <Playground
+              endpoint={this.state.endpoint}
+              subscriptionEndpoint={this.state.subscriptionEndpoint}
+              shareUrl={this.state.shareUrl}
+              onChangeEndpoint={this.handleChangeEndpoint}
+              onChangeSubscriptionsEndpoint={
+                this.handleChangeSubscriptionsEndpoint
+              }
+              adminAuthToken={this.state.platformToken}
+              getRef={this.getPlaygroundRef}
+              config={this.props.config!}
+              configString={this.state.configString!}
+              configIsYaml={this.state.configIsYaml!}
+              canSaveConfig={Boolean(this.props.canSaveConfig)}
+              onChangeConfig={this.handleChangeConfig}
+              onSaveConfig={this.handleSaveConfig}
+              onUpdateSessionCount={this.handleUpdateSessionCount}
+              fixedEndpoints={Boolean(this.state.configString)}
+              headers={this.state.headers}
+              configPath={this.props.configPath}
+              workspaceName={
+                this.props.workspaceName || this.state.activeProjectName
+              }
+              createApolloLink={this.props.createApolloLink}
+              schema={this.state.schema}
+            />
+          </App>
         </ThemeProvider>
       </div>
     )
diff --git a/packages/graphql-playground-react/src/components/ProjectsSideNav.tsx b/packages/graphql-playground-react/src/components/ProjectsSideNav.tsx
index 83f3f2515..7509b9683 100644
--- a/packages/graphql-playground-react/src/components/ProjectsSideNav.tsx
+++ b/packages/graphql-playground-react/src/components/ProjectsSideNav.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { GraphQLConfig, GraphQLConfigEnpointsMapData } from '../graphqlConfig'
 import ProjectsSideNavItem from './ProjectsSideNavItem'
-import { Icon } from 'graphcool-styles'
+import { SettingsIcon, AddFullIcon } from './Icons'
 import { styled } from '../styled/index'
 import { getEndpointFromEndpointConfig } from './util'
 import { createStructuredSelector } from 'reselect'
@@ -41,12 +41,10 @@ class ProjectsSideNav extends React.Component<Props & ReduxProps, {}> {
           <div>
             <TitleRow>
               <Title>{folderName}</Title>
-              <Icon
-                src={require('graphcool-styles/icons/fill/settings.svg')}
+              <SettingsIcon
                 width={18}
                 height={18}
                 onClick={this.props.openConfigTab}
-                className={'settings-icon'}
               />
             </TitleRow>
             {endpoints && this.renderEndpoints(endpoints)}
@@ -68,17 +66,10 @@ class ProjectsSideNav extends React.Component<Props & ReduxProps, {}> {
               })}
           </div>
         </List>
-        {/* this.props.showNewWorkspace  */}
         {true && (
           <Footer>
             <WorkspaceButton onClick={onNewWorkspace}>
-              <Icon
-                src={require('graphcool-styles/icons/stroke/addFull.svg')}
-                stroke={true}
-                width={14}
-                height={14}
-                strokeWidth={6}
-              />
+              <AddFullIcon width={14} height={14} strokeWidth={6} />
               NEW WORKSPACE
             </WorkspaceButton>
           </Footer>
@@ -167,17 +158,17 @@ const TitleRow = styled.div`
   padding-bottom: 20px;
   justify-content: space-between;
 
-  .settings-icon {
+  svg {
     cursor: pointer;
   }
 
-  .settings-icon svg {
+  svg {
     fill: ${p => p.theme.editorColours.icon};
     transition: 0.1s linear fill;
   }
 
   &:hover {
-    .settings-icon svg {
+    svg {
       fill: ${p => p.theme.editorColours.iconHover};
     }
   }
diff --git a/packages/graphql-playground-react/src/components/ProjectsSideNavItem.tsx b/packages/graphql-playground-react/src/components/ProjectsSideNavItem.tsx
index 170d72d6a..492f96634 100644
--- a/packages/graphql-playground-react/src/components/ProjectsSideNavItem.tsx
+++ b/packages/graphql-playground-react/src/components/ProjectsSideNavItem.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { styled, withProps } from '../styled/index'
+import { styled } from '../styled/index'
 
 export interface Props {
   env: string
@@ -41,7 +41,7 @@ interface SidebarItemProps {
   deep?: boolean
 }
 
-const ListItem = withProps<SidebarItemProps>()(styled.div)`
+const ListItem = styled<SidebarItemProps, 'div'>('div')`
   position: relative;
   padding: 10px 10px;
   font-weight: 600;
@@ -68,13 +68,13 @@ const ListItem = withProps<SidebarItemProps>()(styled.div)`
     left: -2px;
     width: 6px;
   }
-  
+
   &:hover {
     background: ${p => p.theme.editorColours.sidebarItemActive};
   }
 `
 
-const Count = withProps<SidebarItemProps>()(styled.div)`
+const Count = styled<SidebarItemProps, 'div'>('div')`
   border-radius: 6px;
   width: 18px;
   height: 18px;
@@ -86,6 +86,6 @@ const Count = withProps<SidebarItemProps>()(styled.div)`
   font-weight: bold;
   background: ${p => p.theme.editorColours.sidebarItemSessions};
   color: ${p => p.theme.editorColours.text};
-  opacity: ${p => (p.active ? '1' : '0.6')};
+  opacity: ${p => (p.active ? 1 : 0.6)};
   transition: 0.1s linear all;
 ` as any
diff --git a/packages/graphql-playground-react/src/components/SelectUserPopup/Table.tsx b/packages/graphql-playground-react/src/components/SelectUserPopup/Table.tsx
deleted file mode 100644
index dacc95d41..000000000
--- a/packages/graphql-playground-react/src/components/SelectUserPopup/Table.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-import * as React from 'react'
-import { InfiniteLoader, Table, Column } from 'react-virtualized'
-
-export interface Props {
-  rows: any[]
-  fields: any[]
-  rowCount: number
-  loadMoreRows: (settings: { startIndex: number; stopIndex: number }) => void
-  onRowSelection: (input: { index: number }) => void
-  scrollToIndex?: number
-}
-
-export interface State {
-  height: number
-  rowHeight: number
-  overscanRowCount: number
-  selectedRow: number
-}
-
-function pZ(n: number) {
-  return n < 10 ? `0${n}` : n
-}
-
-export default class TableComponent extends React.Component<Props, State> {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      height: 400,
-      rowHeight: 54,
-      overscanRowCount: 20,
-      selectedRow: -1,
-    } as any
-    ;(global as any).t = this
-  }
-
-  render() {
-    const { rowCount, fields } = this.props
-    const { height, rowHeight, overscanRowCount } = this.state
-
-    return (
-      <div className="popup-table">
-        <style jsx={true} global={true}>{`
-          .popup-table {
-            @inherit: .bgBlack02, .w100, .overflowXScroll;
-            padding-top: 30px;
-          }
-          .popup-table .table-row {
-            @inherit: .flex, .pointer;
-            &:focus {
-              outline: none;
-            }
-          }
-          .popup-table .table-row.selected {
-            @inherit: .bgBlue, .white;
-          }
-          .ReactVirtualized__Table__Grid {
-            @inherit: .bgWhite;
-            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-          }
-          .table-header {
-            @inherit: .fw6;
-          }
-          .ReactVirtualized__Table__headerColumn {
-            @inherit: .ph25, .pv16, .bbox, .overflowHidden, .toe, .black60;
-          }
-          .ReactVirtualized__Table__rowColumn {
-            @inherit: .overflowHidden, .ph25, .pv16, .toe, .br, .bb, .bBlack10,
-              .nowrap;
-          }
-        `}</style>
-        <InfiniteLoader
-          isRowLoaded={this.isRowLoaded}
-          loadMoreRows={this.props.loadMoreRows}
-          rowCount={rowCount}
-        >
-          {({ onRowsRendered, registerChild }) => (
-            <Table
-              headerHeight={54}
-              height={height}
-              noRowsRenderer={this.noRowsRenderer}
-              overscanRowCount={overscanRowCount}
-              rowHeight={rowHeight}
-              rowCount={rowCount}
-              rowGetter={this.rowGetter}
-              headerClassName="table-header"
-              ref={registerChild}
-              width={fields
-                .map(field => field.width)
-                .reduce((acc, value) => acc + value, 0)}
-              onRowsRendered={onRowsRendered}
-              onRowClick={this.props.onRowSelection}
-              rowClassName={this.rowClassName}
-              scrollToIndex={this.props.scrollToIndex}
-            >
-              {fields.map(field => (
-                <Column
-                  key={field.name}
-                  label={field.name}
-                  dataKey={field.name}
-                  width={field.width}
-                />
-              ))}
-            </Table>
-          )}
-        </InfiniteLoader>
-      </div>
-    )
-  }
-
-  private rowClassName = ({ index }) => {
-    return `table-row ${
-      this.props.rows[index] && this.props.rows[index].selected
-        ? 'selected'
-        : ''
-    }`
-  }
-
-  private noRowsRenderer = () => {
-    return (
-      <div className="no-rows">
-        <style jsx={true}>{`
-          .no-rows {
-            @inherit: .w100, .h100, .flex, .justifyCenter, .itemsCenter;
-          }
-        `}</style>
-        <div>No Users</div>
-      </div>
-    )
-  }
-
-  private rowGetter = ({ index }) => {
-    const row = this.props.rows[index]
-    if (!row) {
-      return {}
-    }
-
-    return Object.keys(row).reduce((prev, current) => {
-      prev[current] = this.textToString(row[current])
-      return prev
-    }, {})
-  }
-
-  private textToString(value) {
-    if (value instanceof Date) {
-      return (
-        `${pZ(value.getMonth() + 1)}/${pZ(value.getDate())}/${value
-          .getFullYear()
-          .toString()
-          .slice(2, 4)} ` +
-        `${value.getHours()}:${pZ(value.getMinutes())}:${pZ(
-          value.getSeconds(),
-        )}`
-      )
-    }
-    return String(value)
-  }
-
-  // private cellRenderer = ({key, style, columnIndex, rowIndex}) => {
-  //   const field = this.props.fields[columnIndex]
-  //   const {selectedRow} = this.state
-  //   return (
-  //     <div
-  //       key={key}
-  //       style={style}
-  //       className={`cell ${selectedRow === rowIndex ? 'selected' : ''}`}
-  //       onClick={() => this.selectRow(rowIndex)}
-  //     >
-  //       <style jsx>{`
-  //         .cell {
-  //           @inherit: .bbox, .pv16, .ph25, .f16;
-  //           &.selected {
-  //             @inherit: .bgBlue, .white;
-  //           }
-  //         }
-  //       `}</style>
-  //       {this.textToString(this.props.rows[rowIndex][field])}
-  //     </div>
-  //   )
-  // }
-
-  // private selectRow(rowIndex: number) {
-  //   this.setState({selectedRow: rowIndex} as State)
-  // }
-
-  private isRowLoaded = ({ index }) => {
-    const loaded = Boolean(this.props.rows[index])
-    return loaded
-  }
-}
diff --git a/packages/graphql-playground-react/src/components/Settings.tsx b/packages/graphql-playground-react/src/components/Settings.tsx
index b15ccca0c..775bf2818 100644
--- a/packages/graphql-playground-react/src/components/Settings.tsx
+++ b/packages/graphql-playground-react/src/components/Settings.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import Icon from 'graphcool-styles/dist/components/Icon/Icon'
+import { SettingsIcon } from './Icons'
 import { styled } from '../styled'
 import { openSettingsTab } from '../state/sessions/actions'
 import { connect } from 'react-redux'
@@ -13,13 +13,7 @@ class Settings extends React.Component<Props, {}> {
     return (
       <Wrapper>
         <IconWrapper>
-          <Icon
-            src={require('graphcool-styles/icons/fill/settings.svg')}
-            width={23}
-            height={23}
-            onClick={this.props.onClick}
-            className={'settings-icon'}
-          />
+          <SettingsIcon width={23} height={23} onClick={this.props.onClick} />
         </IconWrapper>
       </Wrapper>
     )
@@ -42,13 +36,13 @@ const IconWrapper = styled.div`
   position: relative;
   cursor: pointer;
 
-  .settings-icon svg {
+  svg {
     fill: ${p => p.theme.editorColours.icon};
     transition: 0.1s linear fill;
   }
 
   &:hover {
-    .settings-icon svg {
+    svg {
       fill: ${p => p.theme.editorColours.iconHover};
     }
   }
diff --git a/packages/graphql-playground-react/src/components/Share.tsx b/packages/graphql-playground-react/src/components/Share.tsx
index fe6af280a..7643c7e8a 100644
--- a/packages/graphql-playground-react/src/components/Share.tsx
+++ b/packages/graphql-playground-react/src/components/Share.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react'
-import Icon from 'graphcool-styles/dist/components/Icon/Icon'
-import { $v } from 'graphcool-styles'
+import { ShareIcon } from './Icons'
 import ToggleButton from './ToggleButton'
 import Tooltip from './Tooltip'
-import { LocalThemeInterface } from './Theme'
 import { Button } from './Button'
 import Copy from './Copy'
-import { keyframes, styled } from '../styled'
+import { keyframes, styled, ThemeInterface, withTheme } from '../styled'
 import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
 import {
@@ -22,10 +20,11 @@ import {
   share,
 } from '../state/sharing/actions'
 
-export interface SharingProps extends LocalThemeInterface {
+export interface SharingProps {
   allTabs: boolean
   headers: boolean
   history: boolean
+  theme: ThemeInterface
 
   toggleShareHistory: () => void
   toggleShareHeaders: () => void
@@ -51,7 +50,7 @@ class Share extends React.Component<SharingProps, State> {
   }
   render() {
     const { open } = this.state
-    const { allTabs, headers, history, shareUrl, reshare } = this.props
+    const { allTabs, headers, history, shareUrl, reshare, theme } = this.props
     return (
       <Wrapper>
         <IconWrapper>
@@ -100,9 +99,8 @@ class Share extends React.Component<SharingProps, State> {
                       <Input value={shareUrl} disabled={true} />
                       <CopyWrapper>
                         <Copy text={shareUrl}>
-                          <Icon
-                            src={require('graphcool-styles/icons/fill/copy.svg')}
-                            color={$v.darkBlue30}
+                          <ShareIcon
+                            color={theme.colours.darkBlue30}
                             width={25}
                             height={25}
                           />
@@ -149,15 +147,17 @@ const mapStateToProps = createStructuredSelector({
   shareUrl: getShareUrl,
 })
 
-export default connect(
-  mapStateToProps,
-  {
-    toggleShareAllTabs,
-    toggleShareHeaders,
-    toggleShareHistory,
-    share,
-  },
-)(Share)
+export default withTheme(
+  connect(
+    mapStateToProps,
+    {
+      toggleShareAllTabs,
+      toggleShareHeaders,
+      toggleShareHistory,
+      share,
+    },
+  )(Share),
+)
 
 const AuthSharingWarning = () => (
   <Message>
diff --git a/packages/graphql-playground-react/src/components/Theme/ThemeProvider.tsx b/packages/graphql-playground-react/src/components/Theme/ThemeProvider.tsx
deleted file mode 100644
index 6a4341b7d..000000000
--- a/packages/graphql-playground-react/src/components/Theme/ThemeProvider.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as React from 'react'
-import * as PropTypes from 'prop-types'
-
-export class Theme {
-  theme: string
-  subscriptions: any[]
-
-  constructor(theme: string) {
-    this.theme = theme
-    this.subscriptions = []
-  }
-
-  setTheme(theme) {
-    this.theme = theme
-    this.subscriptions.forEach(f => f())
-  }
-
-  subscribe(f) {
-    this.subscriptions.push(f)
-  }
-
-  unsubscribe(f) {
-    const i = this.subscriptions.indexOf(f)
-    this.subscriptions.splice(i, 1)
-  }
-}
-
-export interface ThemeProviderProps {
-  theme: string
-}
-
-// tslint:disable-next-line
-export default class ThemeProvider extends React.PureComponent<
-  ThemeProviderProps,
-  {}
-> {
-  static childContextTypes = {
-    localTheme: PropTypes.object,
-  }
-
-  private theme: Theme
-
-  constructor(p, c) {
-    super(p, c)
-    // theme provider uses the same Theme object
-    // during it's entire lifecycle
-    this.theme = new Theme(this.props.theme)
-  }
-
-  // update theme whenever needed. This propagate changes to subscribed components
-  componentWillReceiveProps(next) {
-    this.theme.setTheme(next.theme)
-  }
-
-  getChildContext() {
-    return { localTheme: this.theme }
-  }
-
-  render() {
-    return this.props.children as any
-  }
-}
diff --git a/packages/graphql-playground-react/src/components/Theme/index.ts b/packages/graphql-playground-react/src/components/Theme/index.ts
deleted file mode 100644
index 9dea80649..000000000
--- a/packages/graphql-playground-react/src/components/Theme/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import withTheme from './withTheme'
-import ThemeProvider from './ThemeProvider'
-
-type ThemeType = 'dark' | 'light'
-
-interface LocalThemeInterface {
-  localTheme: ThemeType
-}
-
-interface OptionalLocalThemeInterface {
-  localTheme?: ThemeType
-}
-
-export {
-  withTheme,
-  ThemeProvider,
-  ThemeType,
-  LocalThemeInterface,
-  OptionalLocalThemeInterface,
-}
diff --git a/packages/graphql-playground-react/src/components/Theme/withTheme.tsx b/packages/graphql-playground-react/src/components/Theme/withTheme.tsx
deleted file mode 100644
index d6343cec0..000000000
--- a/packages/graphql-playground-react/src/components/Theme/withTheme.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from 'react'
-import * as PropTypes from 'prop-types'
-
-export interface ThemeProps {
-  onRef?: any
-}
-
-function withTheme<Props = { onRef?: any }>(
-  Component,
-): React.ComponentClass<Props> {
-  return class WithTheme extends React.Component<Props & ThemeProps, {}> {
-    static contextTypes = {
-      localTheme: PropTypes.object,
-    }
-    mounted: boolean
-
-    rerender = () => {
-      if (this.mounted) {
-        this.forceUpdate()
-      }
-    }
-
-    componentDidMount() {
-      // subscribe to future theme changes
-      this.mounted = true
-      this.context.localTheme.subscribe(this.rerender)
-    }
-
-    componentWillUnmount() {
-      this.mounted = false
-      this.context.localTheme.unsubscribe(this.rerender)
-    }
-
-    render() {
-      return (
-        <Component
-          localTheme={this.context.localTheme.theme}
-          {...this.props}
-          ref={this.props.onRef}
-        />
-      )
-    }
-  }
-}
-
-export default withTheme
diff --git a/packages/graphql-playground-react/src/components/ToggleButton.tsx b/packages/graphql-playground-react/src/components/ToggleButton.tsx
index 64ef30e81..460eded02 100644
--- a/packages/graphql-playground-react/src/components/ToggleButton.tsx
+++ b/packages/graphql-playground-react/src/components/ToggleButton.tsx
@@ -1,6 +1,5 @@
-/* tslint:disable */
 import * as React from 'react'
-import { css, styled } from '../styled'
+import { styled } from '../styled'
 
 export interface Props {
   checked: boolean
@@ -35,7 +34,7 @@ interface SliderProps {
   checked: boolean
 }
 
-const Slider = styled.div`
+const Slider = styled<SliderProps, 'div'>('div')`
   position: absolute;
   top: 0;
   left: 0;
@@ -61,11 +60,6 @@ const Slider = styled.div`
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
     transition: transform 70ms linear;
 
-    ${(p: SliderProps) =>
-      p.checked
-        ? css`
-            transform: translateX(19px);
-          `
-        : ''};
+    transform: ${p => (p.checked ? 'translateX(19px)' : '')};
   }
 `
diff --git a/packages/graphql-playground-react/src/styled/styled.ts b/packages/graphql-playground-react/src/styled/styled.ts
index 511064208..e66268d3a 100644
--- a/packages/graphql-playground-react/src/styled/styled.ts
+++ b/packages/graphql-playground-react/src/styled/styled.ts
@@ -4,19 +4,24 @@ import { ComponentClass } from 'react' // tslint:disable-line
 
 import { ThemeInterface, theme } from './theme'
 
-const withProps = <U>() => <P, T, O>(
-  fn: styledComponents.ThemedStyledFunction<P, T, O>,
-) => fn as styledComponents.ThemedStyledFunction<P & U, T, O & U>
-
 const {
   default: styled,
   css,
   injectGlobal,
   keyframes,
   ThemeProvider,
+  withTheme,
 } = styledComponents as ThemedStyledComponentsModule<ThemeInterface>
 
-export { css, injectGlobal, keyframes, ThemeProvider, theme, withProps }
+export {
+  css,
+  injectGlobal,
+  keyframes,
+  ThemeProvider,
+  theme,
+  withTheme,
+  ThemeInterface,
+}
 export default styled
 
 export { ComponentClass }
diff --git a/packages/graphql-playground-react/src/styled/theme.ts b/packages/graphql-playground-react/src/styled/theme.ts
index 34a30bb99..8bd101dff 100644
--- a/packages/graphql-playground-react/src/styled/theme.ts
+++ b/packages/graphql-playground-react/src/styled/theme.ts
@@ -19,10 +19,18 @@ export interface Colours {
   white20: string
   white10: string
   white: string
+  black02: string
+  black04: string
+  black07: string
+  black10: string
+  black30: string
   black40: string
+  black50: string
   paleText: string
   paleGrey: string
   red: string
+  blue: string
+  orange: string
   purple: string
   lightGrey: string
   lighterGrey: string
@@ -104,8 +112,16 @@ export const darkColours: Colours = {
   white70: 'rgba(255, 255, 255, 0.7)',
   white80: 'rgba(255, 255, 255, 0.8)',
   white: 'rgba(255, 255, 255, 1)',
+  black02: 'rgba(0, 0, 0, 0.02)',
+  black07: 'rgba(0, 0, 0, 0.07)',
+  black04: 'rgba(0, 0, 0, 0.04)',
+  black10: 'rgba(0, 0, 0, 0.1)',
+  black30: 'rgba(0, 0, 0, 0.3)',
   black40: 'rgba(0, 0, 0, 0.4)',
+  black50: 'rgba(0, 0, 0, 0.5)',
   red: '#f25c54',
+  orange: 'rgba(241, 143, 1, 1)',
+  blue: 'rgba(42, 126, 210, 1)',
   purple: 'rgb(164, 3, 111)',
 
   paleText: 'rgba(0, 0, 0, 0.5)',
@@ -135,8 +151,16 @@ export const lightColours: Colours = {
   white70: 'rgba(255, 255, 255, 0.7)',
   white80: 'rgba(255, 255, 255, 0.8)',
   white: 'rgba(255, 255, 255, 1)',
+  black02: 'rgba(0, 0, 0, 0.02)',
+  black04: 'rgba(0, 0, 0, 0.04)',
+  black10: 'rgba(0, 0, 0, 0.1)',
+  black07: 'rgba(0, 0, 0, 0.07)',
+  black30: 'rgba(0, 0, 0, 0.3)',
   black40: 'rgba(0, 0, 0, 0.4)',
+  black50: 'rgba(0, 0, 0, 0.5)',
   red: '#f25c54',
+  orange: 'rgba(241, 143, 1, 1)',
+  blue: 'rgba(42, 126, 210, 1)',
   purple: 'rgb(164, 3, 111)',
 
   paleText: 'rgba(0, 0, 0, 0.5)',
diff --git a/packages/graphql-playground-react/tsconfig.build.json b/packages/graphql-playground-react/tsconfig.build.json
index 847e0417a..160ef0127 100644
--- a/packages/graphql-playground-react/tsconfig.build.json
+++ b/packages/graphql-playground-react/tsconfig.build.json
@@ -11,6 +11,7 @@
     "noImplicitThis": true,
     "noImplicitAny": false,
     "strictNullChecks": true,
+    "skipLibCheck": true,
     "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": false,
     "declaration": true
diff --git a/packages/graphql-playground-react/tslint.json b/packages/graphql-playground-react/tslint.json
index dd368c101..2978f302f 100644
--- a/packages/graphql-playground-react/tslint.json
+++ b/packages/graphql-playground-react/tslint.json
@@ -1,13 +1,13 @@
 {
-  "extends": [
-    "tslint-graphcool-frontend"
-  ],
+  "extends": ["tslint-graphcool-frontend"],
   "rules": {
     "forin": false,
     "no-submodule-imports": false,
     "prefer-conditional-expression": false,
     "no-implicit-dependencies": false,
     "no-empty": false,
-    "no-shadowed-variable": false
+    "no-shadowed-variable": false,
+    "prefer-for-of": false,
+    "no-string-literal": false
   }
 }
diff --git a/packages/graphql-playground-react/yarn.lock b/packages/graphql-playground-react/yarn.lock
index c4144d4da..fbc226810 100644
--- a/packages/graphql-playground-react/yarn.lock
+++ b/packages/graphql-playground-react/yarn.lock
@@ -24,6 +24,10 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@emmetio/extract-abbreviation@0.1.6":
+  version "0.1.6"
+  resolved "https://registry.yarnpkg.com/@emmetio/extract-abbreviation/-/extract-abbreviation-0.1.6.tgz#e4a9856c1057f0aff7d443b8536477c243abe28c"
+
 "@types/deasync@0.1.0":
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/@types/deasync/-/deasync-0.1.0.tgz#b2bd6c3fcde3cf67b8be4c2f70136ba8f157b45a"
@@ -200,10 +204,6 @@ any-observable@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.2.0.tgz#c67870058003579009083f54ac0abafb5c33d242"
 
-any-promise@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-0.1.0.tgz#830b680aa7e56f33451d4b049f3bd8044498ee27"
-
 anymatch@^1.3.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
@@ -415,18 +415,7 @@ atob@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.0.3.tgz#19c7a760473774468f20b2d2d03372ad7d4cbf5d"
 
-autoprefixer@7.2.5:
-  version "7.2.5"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.2.5.tgz#04ccbd0c6a61131b6d13f53d371926092952d192"
-  dependencies:
-    browserslist "^2.11.1"
-    caniuse-lite "^1.0.30000791"
-    normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    postcss "^6.0.16"
-    postcss-value-parser "^3.2.3"
-
-autoprefixer@^6.0.2, autoprefixer@^6.3.1:
+autoprefixer@^6.3.1:
   version "6.7.7"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
   dependencies:
@@ -462,7 +451,7 @@ axios@^0.17.0:
     follow-redirects "^1.2.5"
     is-buffer "^1.1.5"
 
-babel-cli@6.26.0, babel-cli@^6.9.0:
+babel-cli@6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.26.0.tgz#502ab54874d7db88ad00b887a06383ce03d002f1"
   dependencies:
@@ -483,7 +472,7 @@ babel-cli@6.26.0, babel-cli@^6.9.0:
   optionalDependencies:
     chokidar "^1.6.1"
 
-babel-code-frame@6.26.0, babel-code-frame@^6.20.0, babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
+babel-code-frame@6.26.0, babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
   dependencies:
@@ -515,7 +504,7 @@ babel-core@6.26.3:
     slash "^1.0.0"
     source-map "^0.5.7"
 
-babel-core@^6.0.0, babel-core@^6.26.0, babel-core@^6.9.1:
+babel-core@^6.0.0, babel-core@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.0.tgz#af32f78b31a6fcef119c87b0fd8d9753f03a0bb8"
   dependencies:
@@ -676,31 +665,18 @@ babel-loader@7.1.4:
     loader-utils "^1.0.2"
     mkdirp "^0.5.1"
 
-babel-messages@^6.23.0, babel-messages@^6.8.0:
+babel-messages@^6.23.0:
   version "6.23.0"
   resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.23.0.tgz#f3cdf4703858035b2a2951c6ec5edf6c62f2630e"
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-add-module-exports@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-add-module-exports/-/babel-plugin-add-module-exports-0.2.1.tgz#9ae9a1f4a8dc67f0cdec4f4aeda1e43a5ff65e25"
-
 babel-plugin-check-es2015-constants@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-check-es2015-constants/-/babel-plugin-check-es2015-constants-6.22.0.tgz#35157b101426fd2ffd3da3f75c7d1e91835bbf8a"
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-istanbul@^2.0.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-2.0.3.tgz#266b304b9109607d60748474394676982f660df4"
-  dependencies:
-    find-up "^1.1.2"
-    istanbul-lib-instrument "^1.1.4"
-    object-assign "^4.1.0"
-    test-exclude "^2.1.1"
-
 babel-plugin-istanbul@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.5.tgz#6760cdd977f411d3e175bb064f2bc327d99b2b6e"
@@ -713,10 +689,6 @@ babel-plugin-jest-hoist@^22.1.0:
   version "22.1.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-22.1.0.tgz#c1281dd7887d77a1711dc760468c3b8285dde9ee"
 
-babel-plugin-precompile-charcodes@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-precompile-charcodes/-/babel-plugin-precompile-charcodes-1.1.0.tgz#8ac6bacb196c001146296467700df3e8e6079714"
-
 babel-plugin-styled-components@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.5.1.tgz#31dbeb696d1354d1585e60d66c7905f5e474afcd"
@@ -741,7 +713,7 @@ babel-plugin-syntax-flow@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
 
-babel-plugin-syntax-jsx@6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
 
@@ -1008,7 +980,7 @@ babel-polyfill@^6.26.0:
     core-js "^2.5.0"
     regenerator-runtime "^0.10.5"
 
-babel-preset-es2015@6.24.1, babel-preset-es2015@^6.9.0:
+babel-preset-es2015@6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz#d44050d6bc2c9feea702aaf38d727a0210538939"
   dependencies:
@@ -1077,7 +1049,7 @@ babel-preset-stage-3@6.24.1:
     babel-plugin-transform-exponentiation-operator "^6.24.1"
     babel-plugin-transform-object-rest-spread "^6.22.0"
 
-babel-register@^6.11.6, babel-register@^6.26.0:
+babel-register@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.26.0.tgz#6ed021173e2fcb486d7acb45c6009a856f647071"
   dependencies:
@@ -1089,7 +1061,7 @@ babel-register@^6.11.6, babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@^6.18.0, babel-runtime@^6.20.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -1106,21 +1078,7 @@ babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
     babylon "^6.18.0"
     lodash "^4.17.4"
 
-babel-traverse@6.21.0:
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.21.0.tgz#69c6365804f1a4f69eb1213f85b00a818b8c21ad"
-  dependencies:
-    babel-code-frame "^6.20.0"
-    babel-messages "^6.8.0"
-    babel-runtime "^6.20.0"
-    babel-types "^6.21.0"
-    babylon "^6.11.0"
-    debug "^2.2.0"
-    globals "^9.0.0"
-    invariant "^2.2.0"
-    lodash "^4.2.0"
-
-babel-traverse@^6.18.0, babel-traverse@^6.21.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
+babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
   dependencies:
@@ -1134,7 +1092,7 @@ babel-traverse@^6.18.0, babel-traverse@^6.21.0, babel-traverse@^6.24.1, babel-tr
     invariant "^2.2.2"
     lodash "^4.17.4"
 
-babel-types@6.26.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.21.0, babel-types@^6.24.1, babel-types@^6.26.0:
+babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
   dependencies:
@@ -1143,11 +1101,7 @@ babel-types@6.26.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.21.
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
-babylon@6.14.1:
-  version "6.14.1"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.14.1.tgz#956275fab72753ad9b3435d7afe58f8bf0a29815"
-
-babylon@^6.11.0, babylon@^6.14.1, babylon@^6.18.0:
+babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
 
@@ -1155,15 +1109,7 @@ backo2@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
 
-balanced-match@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.1.0.tgz#b504bd05869b39259dd0c5efc35d843176dccc4a"
-
-balanced-match@^0.2.0:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.2.1.tgz#7bc658b4bed61eee424ad74f75f5c3e2c4df3cc7"
-
-balanced-match@^0.4.1, balanced-match@^0.4.2:
+balanced-match@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
 
@@ -1213,10 +1159,6 @@ binary-extensions@^1.0.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
 
-bindings@~1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.2.1.tgz#14ad6113812d2d37d72e67b4cacb4bb726505f11"
-
 bl@^1.0.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.2.tgz#a160911717103c07410cef63ef51b397c025af9c"
@@ -1406,20 +1348,13 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-browserslist@^1.0.0, browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
+browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
   version "1.7.7"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9"
   dependencies:
     caniuse-db "^1.0.30000639"
     electron-to-chromium "^1.2.7"
 
-browserslist@^2.11.1:
-  version "2.11.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.3.tgz#fe36167aed1bbcde4827ebfe71347a2cc70b99b2"
-  dependencies:
-    caniuse-lite "^1.0.30000792"
-    electron-to-chromium "^1.3.30"
-
 bser@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
@@ -1458,8 +1393,8 @@ buffer@^4.3.0:
     isarray "^1.0.0"
 
 buffer@^5.0.3:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.1.0.tgz#c913e43678c7cb7c8bd16afbcddb6c5505e8f9fe"
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.2.1.tgz#dd57fa0f109ac59c602479044dca7b8b3d0b71d6"
   dependencies:
     base64-js "^1.0.2"
     ieee754 "^1.1.4"
@@ -1543,7 +1478,7 @@ camelcase@^4.0.0, camelcase@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
 
-caniuse-api@^1.5.2, caniuse-api@^1.5.3:
+caniuse-api@^1.5.2:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
   dependencies:
@@ -1556,10 +1491,6 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   version "1.0.30000791"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000791.tgz#06787f56caef4300a17e35d137447123bdf536f9"
 
-caniuse-lite@^1.0.30000791, caniuse-lite@^1.0.30000792:
-  version "1.0.30000792"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000792.tgz#d0cea981f8118f3961471afbb43c9a1e5bbf0332"
-
 capture-stack-trace@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
@@ -1803,10 +1734,6 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
-
 color-convert@^1.3.0, color-convert@^1.9.0:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
@@ -1823,14 +1750,7 @@ color-string@^0.3.0:
   dependencies:
     color-name "^1.0.0"
 
-color@^0.10.1:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/color/-/color-0.10.1.tgz#c04188df82a209ddebccecdacd3ec320f193739f"
-  dependencies:
-    color-convert "^0.5.3"
-    color-string "^0.3.0"
-
-color@^0.11.0, color@^0.11.3, color@^0.11.4:
+color@^0.11.0:
   version "0.11.4"
   resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
   dependencies:
@@ -1943,11 +1863,7 @@ content-type@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
 
-convert-source-map@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.3.0.tgz#e9f3e9c6e2728efc2676696a70eb382f73106a67"
-
-convert-source-map@1.5.1, convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
+convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
 
@@ -1985,18 +1901,6 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
-cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.2.2.tgz#6173cebd56fac042c1f4390edf7af6c07c7cb892"
-  dependencies:
-    is-directory "^0.3.1"
-    js-yaml "^3.4.3"
-    minimist "^1.2.0"
-    object-assign "^4.1.0"
-    os-homedir "^1.0.1"
-    parse-json "^2.2.0"
-    require-from-string "^1.1.0"
-
 cosmiconfig@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-4.0.0.tgz#760391549580bbd2df1e562bc177b13c290972dc"
@@ -2039,7 +1943,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.5.1, create-react-class@^15.5.2:
+create-react-class@^15.5.1:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.2.tgz#cf1ed15f12aad7f14ef5f2dfe05e6c42f91ef02a"
   dependencies:
@@ -2104,15 +2008,6 @@ crypto-random-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e"
 
-css-color-function@^1.2.0:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/css-color-function/-/css-color-function-1.3.3.tgz#8ed24c2c0205073339fafa004bc8c141fccb282e"
-  dependencies:
-    balanced-match "0.1.0"
-    color "^0.11.0"
-    debug "^3.1.0"
-    rgb "~0.1.0"
-
 css-color-keywords@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05"
@@ -2140,17 +2035,6 @@ css-loader@0.28.11:
     postcss-value-parser "^3.3.0"
     source-list-map "^2.0.0"
 
-css-modules-loader-core@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz#5908668294a1becd261ae0a4ce21b0b551f21d16"
-  dependencies:
-    icss-replace-symbols "1.1.0"
-    postcss "6.0.1"
-    postcss-modules-extract-imports "1.1.0"
-    postcss-modules-local-by-default "1.2.0"
-    postcss-modules-scope "1.1.0"
-    postcss-modules-values "1.3.0"
-
 css-select@^1.1.0, css-select@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
@@ -2276,13 +2160,6 @@ date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-deasync@^0.1.9:
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/deasync/-/deasync-0.1.12.tgz#0159492a4133ab301d6c778cf01e74e63b10e549"
-  dependencies:
-    bindings "~1.2.1"
-    nan "^2.0.7"
-
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -2581,18 +2458,10 @@ electron-to-chromium@^1.2.7:
   dependencies:
     electron-releases "^2.1.0"
 
-electron-to-chromium@^1.3.30:
-  version "1.3.31"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.31.tgz#00d832cba9fe2358652b0c48a8816c8e3a037e9f"
-
 elegant-spinner@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
 
-element-class@^0.2.0:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/element-class/-/element-class-0.2.2.tgz#9d3bbd0767f9013ef8e1c8ebe722c1402a60050e"
-
 elliptic@^6.0.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@@ -2896,10 +2765,6 @@ execa@^0.8.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-exenv@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.0.tgz#3835f127abf075bfe082d0aed4484057c78e3c89"
-
 exenv@^1.2.0, exenv@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
@@ -2957,7 +2822,7 @@ expect@^22.1.0:
     jest-message-util "^22.1.0"
     jest-regex-util "^22.1.0"
 
-express@^4.13.3, express@^4.16.2:
+express@^4.16.2:
   version "4.16.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.16.2.tgz#e35c6dfe2d64b7dca0a5cd4f21781be3299e076c"
   dependencies:
@@ -3185,7 +3050,7 @@ find-parent-dir@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/find-parent-dir/-/find-parent-dir-0.3.0.tgz#33c44b429ab2b2f0646299c5f9f718f376ff8d54"
 
-find-up@^1.0.0, find-up@^1.1.2:
+find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
   dependencies:
@@ -3341,12 +3206,6 @@ gauge@~2.7.3:
     strip-ansi "^3.0.1"
     wide-align "^1.1.0"
 
-generic-names@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-1.0.3.tgz#2d786a121aee508876796939e8e3bff836c20917"
-  dependencies:
-    loader-utils "^0.2.16"
-
 get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
@@ -3438,7 +3297,7 @@ global-prefix@^1.0.1:
     is-windows "^1.0.1"
     which "^1.2.14"
 
-globals@^9.0.0, globals@^9.18.0:
+globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
 
@@ -3472,41 +3331,6 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6,
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
-graphcool-styles@0.2.9:
-  version "0.2.9"
-  resolved "https://registry.yarnpkg.com/graphcool-styles/-/graphcool-styles-0.2.9.tgz#addef08ecbe44f35281a177394fe30da2f83c615"
-  dependencies:
-    html-webpack-plugin "^2.24.1"
-    interactive "^0.1.9"
-    isomorphic-fetch "^2.2.1"
-    object-assign "^4.1.0"
-    webpack-dev-server "^1.16.2"
-
-graphcool-styles@^0.1.31:
-  version "0.1.43"
-  resolved "https://registry.yarnpkg.com/graphcool-styles/-/graphcool-styles-0.1.43.tgz#da6b72118c890923ef5c4a964405aa3e4541dc82"
-  dependencies:
-    html-webpack-plugin "^2.24.1"
-    interactive "^0.1.9"
-    object-assign "^4.1.0"
-    react-dom "^15.3.2"
-    webpack-dev-server "^1.16.2"
-
-graphcool-tmp-ui@^0.0.11:
-  version "0.0.11"
-  resolved "https://registry.yarnpkg.com/graphcool-tmp-ui/-/graphcool-tmp-ui-0.0.11.tgz#86cfaf0754394419642cc2542a2b5f8a48245659"
-  dependencies:
-    classnames "^2.2.5"
-    graphcool-styles "^0.1.31"
-    react-modal "^1.6.5"
-
-graphcool-ui@0.0.14:
-  version "0.0.14"
-  resolved "https://registry.yarnpkg.com/graphcool-ui/-/graphcool-ui-0.0.14.tgz#f3c83f4fef2c862ee899618cb6654af2c8f638b6"
-  dependencies:
-    classnames "^2.2.5"
-    react-modal "^1.6.5"
-
 graphiql@^0.11.2:
   version "0.11.11"
   resolved "https://registry.yarnpkg.com/graphiql/-/graphiql-0.11.11.tgz#eeaf9a38927dbe8c6ecbf81e700735e16ec50e71"
@@ -3846,7 +3670,7 @@ html-minifier@^3.2.3:
     relateurl "0.2.x"
     uglify-js "3.3.x"
 
-html-webpack-plugin@2.30.1, html-webpack-plugin@^2.24.1:
+html-webpack-plugin@2.30.1:
   version "2.30.1"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-2.30.1.tgz#7f9c421b7ea91ec460f56527d78df484ee7537d5"
   dependencies:
@@ -3903,7 +3727,7 @@ 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"
 
-http-proxy-middleware@0.17.4, http-proxy-middleware@~0.17.1, http-proxy-middleware@~0.17.4:
+http-proxy-middleware@0.17.4, http-proxy-middleware@~0.17.4:
   version "0.17.4"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.17.4.tgz#642e8848851d66f09d4f124912846dbaeb41b833"
   dependencies:
@@ -3957,7 +3781,7 @@ iconv-lite@~0.4.13:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-icss-replace-symbols@1.1.0, 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"
 
@@ -3980,7 +3804,7 @@ iltorb@^1.0.9:
     node-gyp "^3.6.2"
     prebuild-install "^2.3.0"
 
-immutable@4.0.0-rc.9:
+immutable@^4.0.0-rc.9:
   version "4.0.0-rc.9"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0-rc.9.tgz#1e6e0094e649013ec3742d2b5aeeca5eeda4f0bf"
 
@@ -4055,10 +3879,6 @@ inquirer@3.3.0:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
-interactive@^0.1.9:
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/interactive/-/interactive-0.1.9.tgz#6dd3e2f9a00341863bc7dd84afce9d191b6f9e8e"
-
 internal-ip@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-1.2.0.tgz#ae9fbf93b984878785d50a8de1b356956058cf5c"
@@ -4075,7 +3895,7 @@ invariant@^2.0.0, invariant@^2.2.1:
   dependencies:
     loose-envify "^1.0.0"
 
-invariant@^2.2.0, invariant@^2.2.2:
+invariant@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
   dependencies:
@@ -4398,10 +4218,6 @@ isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
 
-isnumeric@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/isnumeric/-/isnumeric-0.2.0.tgz#a2347ba360de19e33d0ffd590fddf7755cbf2e64"
-
 isobject@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
@@ -4449,7 +4265,7 @@ istanbul-lib-hook@^1.1.0:
   dependencies:
     append-transform "^0.4.0"
 
-istanbul-lib-instrument@^1.1.4, istanbul-lib-instrument@^1.7.5, istanbul-lib-instrument@^1.8.0, istanbul-lib-instrument@^1.9.1:
+istanbul-lib-instrument@^1.7.5, istanbul-lib-instrument@^1.8.0, istanbul-lib-instrument@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.9.1.tgz#250b30b3531e5d3251299fdd64b0b2c9db6b558e"
   dependencies:
@@ -4776,7 +4592,7 @@ js-yaml@^3.10.0:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.0:
+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:
@@ -4865,6 +4681,10 @@ json5@^0.5.0, json5@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
 
+jsonc-parser@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-1.0.3.tgz#1d53d7160e401a783dbceabaad82473f80e6ad7e"
+
 jsonfile@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
@@ -5182,7 +5002,7 @@ lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
 
-lodash.template@^4.2.4, lodash.template@^4.4.0:
+lodash.template@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
   dependencies:
@@ -5532,7 +5352,7 @@ mute-stream@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
 
-nan@^2.0.7, nan@^2.3.0:
+nan@^2.3.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a"
 
@@ -5838,7 +5658,7 @@ object.assign@^4.0.4, object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
-object.entries@1.0.4, object.entries@^1.0.4:
+object.entries@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.0.4.tgz#1bf9a4dd2288f5b33f3a993d257661f05d161a5f"
   dependencies:
@@ -5896,10 +5716,6 @@ once@^1.3.0, once@^1.3.1, once@^1.3.3, once@^1.4.0:
   dependencies:
     wrappy "1"
 
-onecolor@~2.4.0:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/onecolor/-/onecolor-2.4.2.tgz#a53ec3ff171c3446016dd5210d1a1b544bf7d874"
-
 onetime@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789"
@@ -5910,10 +5726,6 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
-open@0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/open/-/open-0.0.5.tgz#42c3e18ec95466b6bf0dc42f3a2945c3f0cad8fc"
-
 opener@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.4.3.tgz#5c6da2c5d7e5831e8ffa3964950f8d6674ac90b8"
@@ -5930,7 +5742,7 @@ opn@^5.1.0:
   dependencies:
     is-wsl "^1.1.0"
 
-optimist@^0.6.1, optimist@~0.6.1:
+optimist@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
   dependencies:
@@ -6186,7 +5998,7 @@ performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
 
-pify@^2.0.0, pify@^2.3.0:
+pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
 
@@ -6204,27 +6016,12 @@ pinkie@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
 
-pixrem@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/pixrem/-/pixrem-3.0.2.tgz#30d1bafb4c3bdce8e9bb4bd56a13985619320c34"
-  dependencies:
-    browserslist "^1.0.0"
-    postcss "^5.0.0"
-    reduce-css-calc "^1.2.7"
-
 pkg-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
   dependencies:
     find-up "^2.1.0"
 
-pleeease-filters@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/pleeease-filters/-/pleeease-filters-3.0.1.tgz#4dfe0e8f1046613517c64b728bc80608a7ebf22f"
-  dependencies:
-    onecolor "~2.4.0"
-    postcss "^5.0.4"
-
 pn@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
@@ -6241,21 +6038,7 @@ posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
 
-postcss-apply@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/postcss-apply/-/postcss-apply-0.3.0.tgz#a2f37c5bdfa881e4c15f4f245ec0cd96dd2e70d5"
-  dependencies:
-    balanced-match "^0.4.1"
-    postcss "^5.0.21"
-
-postcss-attribute-case-insensitive@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-1.0.1.tgz#ceb73777e106167eb233f1938c9bd9f2e697308d"
-  dependencies:
-    postcss "^5.1.1"
-    postcss-selector-parser "^2.2.0"
-
-postcss-calc@^5.0.0, postcss-calc@^5.2.0:
+postcss-calc@^5.2.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
   dependencies:
@@ -6263,71 +6046,6 @@ postcss-calc@^5.0.0, postcss-calc@^5.2.0:
     postcss-message-helpers "^2.0.0"
     reduce-css-calc "^1.2.6"
 
-postcss-color-function@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-color-function/-/postcss-color-function-2.0.1.tgz#9ad226f550e8a7c7f8b8a77860545b6dd7f55241"
-  dependencies:
-    css-color-function "^1.2.0"
-    postcss "^5.0.4"
-    postcss-message-helpers "^2.0.0"
-    postcss-value-parser "^3.3.0"
-
-postcss-color-gray@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-3.0.1.tgz#74432ede66dd83b1d1363565c68b376e18ff6770"
-  dependencies:
-    color "^0.11.3"
-    postcss "^5.0.4"
-    postcss-message-helpers "^2.0.0"
-    reduce-function-call "^1.0.1"
-
-postcss-color-hex-alpha@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-2.0.0.tgz#44fd6ecade66028648c881cb6504cdcbfdc6cd09"
-  dependencies:
-    color "^0.10.1"
-    postcss "^5.0.4"
-    postcss-message-helpers "^2.0.0"
-
-postcss-color-hsl@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/postcss-color-hsl/-/postcss-color-hsl-1.0.5.tgz#f53bb1c348310ce307ad89e3181a864738b5e687"
-  dependencies:
-    postcss "^5.2.0"
-    postcss-value-parser "^3.3.0"
-    units-css "^0.4.0"
-
-postcss-color-hwb@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-color-hwb/-/postcss-color-hwb-2.0.1.tgz#d63afaf9b70cb595f900a29c9fe57bf2a32fabec"
-  dependencies:
-    color "^0.11.4"
-    postcss "^5.0.4"
-    postcss-message-helpers "^2.0.0"
-    reduce-function-call "^1.0.1"
-
-postcss-color-rebeccapurple@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-2.0.1.tgz#74c6444e7cbb7d85613b5f7286df7a491608451c"
-  dependencies:
-    color "^0.11.4"
-    postcss "^5.0.4"
-
-postcss-color-rgb@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/postcss-color-rgb/-/postcss-color-rgb-1.1.4.tgz#f29243e22e8e8c13434474092372d4ce605be8bc"
-  dependencies:
-    postcss "^5.2.0"
-    postcss-value-parser "^3.3.0"
-
-postcss-color-rgba-fallback@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-rgba-fallback/-/postcss-color-rgba-fallback-2.2.0.tgz#6d29491be5990a93173d47e7c76f5810b09402ba"
-  dependencies:
-    postcss "^5.0.0"
-    postcss-value-parser "^3.0.2"
-    rgb-hex "^1.0.0"
-
 postcss-colormin@^2.1.8:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.2.tgz#6631417d5f0e909a3d7ec26b24c8a8d1e4f96e4b"
@@ -6343,63 +6061,6 @@ postcss-convert-values@^2.3.4:
     postcss "^5.0.11"
     postcss-value-parser "^3.1.2"
 
-postcss-cssnext@2.11.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/postcss-cssnext/-/postcss-cssnext-2.11.0.tgz#31e68f001e409604da703b66de14b8b8c8c9f2b1"
-  dependencies:
-    autoprefixer "^6.0.2"
-    caniuse-api "^1.5.3"
-    chalk "^1.1.1"
-    pixrem "^3.0.0"
-    pleeease-filters "^3.0.0"
-    postcss "^5.0.4"
-    postcss-apply "^0.3.0"
-    postcss-attribute-case-insensitive "^1.0.1"
-    postcss-calc "^5.0.0"
-    postcss-color-function "^2.0.0"
-    postcss-color-gray "^3.0.0"
-    postcss-color-hex-alpha "^2.0.0"
-    postcss-color-hsl "^1.0.5"
-    postcss-color-hwb "^2.0.0"
-    postcss-color-rebeccapurple "^2.0.0"
-    postcss-color-rgb "^1.1.4"
-    postcss-color-rgba-fallback "^2.0.0"
-    postcss-custom-media "^5.0.0"
-    postcss-custom-properties "^5.0.0"
-    postcss-custom-selectors "^3.0.0"
-    postcss-font-family-system-ui "^1.0.1"
-    postcss-font-variant "^2.0.0"
-    postcss-image-set-polyfill "^0.3.3"
-    postcss-initial "^1.3.1"
-    postcss-media-minmax "^2.1.0"
-    postcss-nesting "^2.0.5"
-    postcss-pseudo-class-any-link "^1.0.0"
-    postcss-pseudoelements "^3.0.0"
-    postcss-replace-overflow-wrap "^1.0.0"
-    postcss-selector-matches "^2.0.0"
-    postcss-selector-not "^2.0.0"
-
-postcss-custom-media@^5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-5.0.1.tgz#138d25a184bf2eb54de12d55a6c01c30a9d8bd81"
-  dependencies:
-    postcss "^5.0.0"
-
-postcss-custom-properties@^5.0.0:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-5.0.2.tgz#9719d78f2da9cf9f53810aebc23d4656130aceb1"
-  dependencies:
-    balanced-match "^0.4.2"
-    postcss "^5.0.0"
-
-postcss-custom-selectors@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-3.0.0.tgz#8f81249f5ed07a8d0917cf6a39fe5b056b7f96ac"
-  dependencies:
-    balanced-match "^0.2.0"
-    postcss "^5.0.0"
-    postcss-selector-matches "^2.0.0"
-
 postcss-discard-comments@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
@@ -6438,122 +6099,6 @@ postcss-filter-plugins@^2.0.0:
     postcss "^5.0.4"
     uniqid "^4.0.0"
 
-postcss-flexbugs-fixes@3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-3.3.1.tgz#0783cc7212850ef707f97f8bc8b6fb624e00c75d"
-  dependencies:
-    postcss "^6.0.1"
-
-postcss-font-family-system-ui@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-font-family-system-ui/-/postcss-font-family-system-ui-1.0.2.tgz#3e1a5e3fb7e31e5e9e71439ccb0e8014556927c7"
-  dependencies:
-    lodash "^4.17.4"
-    postcss "^5.2.12"
-    postcss-value-parser "^3.3.0"
-
-postcss-font-variant@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-2.0.1.tgz#7ca29103f59fa02ca3ace2ca22b2f756853d4ef8"
-  dependencies:
-    postcss "^5.0.4"
-
-postcss-image-set-polyfill@^0.3.3:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/postcss-image-set-polyfill/-/postcss-image-set-polyfill-0.3.5.tgz#0f193413700cf1f82bd39066ef016d65a4a18181"
-  dependencies:
-    postcss "^6.0.1"
-    postcss-media-query-parser "^0.2.3"
-
-postcss-import@9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-9.1.0.tgz#95fe9876a1e79af49fbdc3589f01fe5aa7cc1e80"
-  dependencies:
-    object-assign "^4.0.1"
-    postcss "^5.0.14"
-    postcss-value-parser "^3.2.3"
-    promise-each "^2.2.0"
-    read-cache "^1.0.0"
-    resolve "^1.1.7"
-
-postcss-inherit-parser@^0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/postcss-inherit-parser/-/postcss-inherit-parser-0.1.4.tgz#fd8685e1042609b75691ecd75678ca29217c6e11"
-  dependencies:
-    babel-cli "^6.9.0"
-    babel-core "^6.9.1"
-    babel-plugin-add-module-exports "^0.2.1"
-    babel-plugin-istanbul "^2.0.0"
-    babel-plugin-precompile-charcodes "^1.0.0"
-    babel-preset-es2015 "^6.9.0"
-    babel-register "^6.11.6"
-    debug "^2.2.0"
-    postcss "^5.0.10"
-
-postcss-inherit@timsuchanek/postcss-inherit#build3:
-  version "4.0.2"
-  resolved "https://codeload.github.com/timsuchanek/postcss-inherit/tar.gz/1382250ae64c5938cc47d749049dc17ac6f52c9b"
-  dependencies:
-    debug "^2.2.0"
-    postcss "^5.0.10"
-    postcss-inherit-parser "^0.1.3"
-
-postcss-initial@^1.3.1:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-1.5.3.tgz#20c3e91c96822ddb1bed49508db96d56bac377d0"
-  dependencies:
-    lodash.template "^4.2.4"
-    postcss "^5.0.19"
-
-postcss-inject@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-inject/-/postcss-inject-1.0.1.tgz#b981f15647ae666cb479400948bc825b1b1845d7"
-  dependencies:
-    object-assign "^4.1.0"
-    postcss "^5.0.21"
-
-postcss-load-config@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
-  dependencies:
-    cosmiconfig "^2.1.0"
-    object-assign "^4.1.0"
-    postcss-load-options "^1.2.0"
-    postcss-load-plugins "^2.3.0"
-
-postcss-load-options@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-options/-/postcss-load-options-1.2.0.tgz#b098b1559ddac2df04bc0bb375f99a5cfe2b6d8c"
-  dependencies:
-    cosmiconfig "^2.1.0"
-    object-assign "^4.1.0"
-
-postcss-load-plugins@^2.2.0, postcss-load-plugins@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-plugins/-/postcss-load-plugins-2.3.0.tgz#745768116599aca2f009fad426b00175049d8d92"
-  dependencies:
-    cosmiconfig "^2.1.1"
-    object-assign "^4.1.0"
-
-postcss-loader@2.1.5:
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.1.5.tgz#3c6336ee641c8f95138172533ae461a83595e788"
-  dependencies:
-    loader-utils "^1.1.0"
-    postcss "^6.0.0"
-    postcss-load-config "^1.2.0"
-    schema-utils "^0.4.0"
-
-postcss-media-minmax@^2.1.0:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-2.1.2.tgz#444c5cf8926ab5e4fd8a2509e9297e751649cdf8"
-  dependencies:
-    postcss "^5.0.4"
-
-postcss-media-query-parser@^0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
-
 postcss-merge-idents@^2.1.5:
   version "2.1.7"
   resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
@@ -6615,60 +6160,33 @@ postcss-minify-selectors@^2.0.4:
     postcss "^5.0.14"
     postcss-selector-parser "^2.0.0"
 
-postcss-modules-extract-imports@1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz#b614c9720be6816eaee35fb3a5faa1dba6a05ddb"
-  dependencies:
-    postcss "^6.0.1"
-
 postcss-modules-extract-imports@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz#66140ecece38ef06bf0d3e355d69bf59d141ea85"
   dependencies:
     postcss "^6.0.1"
 
-postcss-modules-local-by-default@1.2.0, postcss-modules-local-by-default@^1.2.0:
+postcss-modules-local-by-default@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
   dependencies:
     css-selector-tokenizer "^0.7.0"
     postcss "^6.0.1"
 
-postcss-modules-scope@1.1.0, postcss-modules-scope@^1.1.0:
+postcss-modules-scope@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
   dependencies:
     css-selector-tokenizer "^0.7.0"
     postcss "^6.0.1"
 
-postcss-modules-values@1.3.0, postcss-modules-values@^1.3.0:
+postcss-modules-values@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
   dependencies:
     icss-replace-symbols "^1.1.0"
     postcss "^6.0.1"
 
-postcss-modules@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-1.1.0.tgz#c9f94f76ff6addf7c35b842e69ed442118156bb0"
-  dependencies:
-    css-modules-loader-core "^1.1.0"
-    generic-names "^1.0.2"
-    postcss "^6.0.1"
-    string-hash "^1.1.1"
-
-postcss-nested@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-1.0.1.tgz#91f28f4e6e23d567241ac154558a0cfab4cc0d8f"
-  dependencies:
-    postcss "^5.2.17"
-
-postcss-nesting@^2.0.5:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-2.3.1.tgz#94a6b6a4ef707fbec20a87fee5c957759b4e01cf"
-  dependencies:
-    postcss "^5.0.19"
-
 postcss-normalize-charset@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
@@ -6691,19 +6209,6 @@ postcss-ordered-values@^2.1.0:
     postcss "^5.0.4"
     postcss-value-parser "^3.0.1"
 
-postcss-pseudo-class-any-link@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-1.0.0.tgz#903239196401d335fe73ac756186fa62e693af26"
-  dependencies:
-    postcss "^5.0.3"
-    postcss-selector-parser "^1.1.4"
-
-postcss-pseudoelements@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-pseudoelements/-/postcss-pseudoelements-3.0.0.tgz#6c682177c7900ba053b6df17f8c590284c7b8bbc"
-  dependencies:
-    postcss "^5.0.4"
-
 postcss-reduce-idents@^2.2.2:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3"
@@ -6725,35 +6230,7 @@ postcss-reduce-transforms@^1.0.3:
     postcss "^5.0.8"
     postcss-value-parser "^3.0.1"
 
-postcss-replace-overflow-wrap@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-1.0.0.tgz#f0a03b31eab9636a6936bfd210e2aef1b434a643"
-  dependencies:
-    postcss "^5.0.16"
-
-postcss-selector-matches@^2.0.0:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-2.0.5.tgz#fa0f43be57b68e77aa4cd11807023492a131027f"
-  dependencies:
-    balanced-match "^0.4.2"
-    postcss "^5.0.0"
-
-postcss-selector-not@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-2.0.0.tgz#c73ad21a3f75234bee7fee269e154fd6a869798d"
-  dependencies:
-    balanced-match "^0.2.0"
-    postcss "^5.0.0"
-
-postcss-selector-parser@^1.1.4:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-1.3.3.tgz#d2ee19df7a64f8ef21c1a71c86f7d4835c88c281"
-  dependencies:
-    flatten "^1.0.2"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.0, postcss-selector-parser@^2.2.2:
+postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
   dependencies:
@@ -6761,12 +6238,6 @@ postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.0, postcss-selector
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss-simple-vars@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-simple-vars/-/postcss-simple-vars-3.1.0.tgz#62c0657214ef1f43a3c5893ade89de414f31b6ff"
-  dependencies:
-    postcss "^5.2.16"
-
 postcss-svgo@^2.1.1:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
@@ -6796,15 +6267,7 @@ postcss-zindex@^2.0.1:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss@6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.1.tgz#000dbd1f8eef217aa368b9a212c5fc40b2a8f3f2"
-  dependencies:
-    chalk "^1.1.3"
-    source-map "^0.5.6"
-    supports-color "^3.2.3"
-
-postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.19, postcss@^5.0.2, postcss@^5.0.21, postcss@^5.0.3, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.1.1, postcss@^5.2.0, postcss@^5.2.12, postcss@^5.2.16, postcss@^5.2.17, postcss@^5.2.8:
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16:
   version "5.2.18"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
   dependencies:
@@ -6813,7 +6276,7 @@ postcss@^5.0.0, postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.16:
+postcss@^6.0.1:
   version "6.0.16"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.16.tgz#112e2fe2a6d2109be0957687243170ea5589e146"
   dependencies:
@@ -6904,12 +6367,6 @@ process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
-promise-each@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/promise-each/-/promise-each-2.2.0.tgz#3353174eff2694481037e04e01f77aa0fb6d1b60"
-  dependencies:
-    any-promise "^0.1.0"
-
 promise@8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.1.tgz#e45d68b00a17647b6da711bf85ed6ed47208f450"
@@ -6930,14 +6387,6 @@ prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0,
     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:
-    fbjs "^0.8.16"
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 proxy-addr@~2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.3.tgz#355f262505a621646b3130a728eb647e22055341"
@@ -7147,19 +6596,6 @@ react-display-name@^0.2.3:
   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"
-  resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.2.tgz#eb7705c4db36fb501b3aa38ff759616aa0ff96e0"
-
-react-dom@^15.3.2:
-  version "15.6.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
-  dependencies:
-    fbjs "^0.8.9"
-    loose-envify "^1.1.0"
-    object-assign "^4.1.0"
-    prop-types "^15.5.10"
-
 react-dom@^16.3.1:
   version "16.4.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.0.tgz#099f067dd5827ce36a29eaf9a6cdc7cbf6216b1e"
@@ -7200,17 +6636,6 @@ 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"
-  dependencies:
-    create-react-class "^15.5.2"
-    element-class "^0.2.0"
-    exenv "1.2.0"
-    lodash.assign "^4.2.0"
-    prop-types "^15.5.7"
-    react-dom-factories "^1.0.0"
-
 react-modal@^3.1.11:
   version "3.4.4"
   resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.4.4.tgz#e9dde25e9e85a59c76831f2a2b468712a546aded"
@@ -7307,12 +6732,6 @@ react@^16.3.1:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-read-cache@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
-  dependencies:
-    pify "^2.3.0"
-
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -7425,7 +6844,7 @@ redent@^1.0.0:
     indent-string "^2.1.0"
     strip-indent "^1.0.1"
 
-reduce-css-calc@^1.2.6, reduce-css-calc@^1.2.7:
+reduce-css-calc@^1.2.6:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
   dependencies:
@@ -7658,10 +7077,6 @@ require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
 
-require-from-string@^1.1.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418"
-
 require-from-string@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.1.tgz#c545233e9d7da6616e9d59adfb39fc9f588676ff"
@@ -7707,7 +7122,7 @@ resolve@1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
 
-resolve@^1.1.7, resolve@^1.3.2:
+resolve@^1.3.2:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
   dependencies:
@@ -7731,14 +7146,6 @@ ret@~0.1.10:
   version "0.1.15"
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
 
-rgb-hex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rgb-hex/-/rgb-hex-1.0.0.tgz#bfaf8cd9cd9164b5a26d71eb4f15a0965324b3c1"
-
-rgb@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/rgb/-/rgb-0.1.0.tgz#be27b291e8feffeac1bd99729721bfa40fc037b5"
-
 right-align@^0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
@@ -7823,13 +7230,6 @@ schema-utils@^0.3.0:
   dependencies:
     ajv "^5.0.0"
 
-schema-utils@^0.4.0, schema-utils@^0.4.5:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"
-  dependencies:
-    ajv "^6.1.0"
-    ajv-keywords "^3.1.0"
-
 schema-utils@^0.4.3:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.3.tgz#e2a594d3395834d5e15da22b48be13517859458e"
@@ -7837,6 +7237,13 @@ schema-utils@^0.4.3:
     ajv "^5.0.0"
     ajv-keywords "^2.1.0"
 
+schema-utils@^0.4.5:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"
+  dependencies:
+    ajv "^6.1.0"
+    ajv-keywords "^3.1.0"
+
 seamless-immutable@^7.0.1:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/seamless-immutable/-/seamless-immutable-7.1.3.tgz#d32a8a202a331dffa69e4069a367a2159252490e"
@@ -8057,7 +7464,7 @@ sntp@2.x.x:
   dependencies:
     hoek "4.x.x"
 
-sockjs-client@1.1.4, sockjs-client@^1.0.3:
+sockjs-client@1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.4.tgz#5babe386b775e4cf14e7520911452654016c8b12"
   dependencies:
@@ -8068,7 +7475,7 @@ sockjs-client@1.1.4, sockjs-client@^1.0.3:
     json3 "^3.3.2"
     url-parse "^1.1.8"
 
-sockjs@0.3.19, sockjs@^0.3.15:
+sockjs@0.3.19:
   version "0.3.19"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.19.tgz#d976bbe800af7bd20ae08598d582393508993c0d"
   dependencies:
@@ -8119,24 +7526,20 @@ source-map-url@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
 
-source-map@0.5.6:
-  version "0.5.6"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
-
 source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
-
 source-map@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
   dependencies:
     amdefine ">=0.0.4"
 
+source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
 spdx-correct@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
@@ -8232,10 +7635,6 @@ stream-browserify@^2.0.1:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
-stream-cache@~0.0.1:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/stream-cache/-/stream-cache-0.0.2.tgz#1ac5ad6832428ca55667dbdee395dad4e6db118f"
-
 stream-http@^2.7.2:
   version "2.7.2"
   resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.2.tgz#40a050ec8dc3b53b33d9909415c02c0bf1abfbad"
@@ -8256,14 +7655,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"
 
-string-hash@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.1.tgz#8e85bed291e0763b8f6809d9c3368fea048db3dc"
-
-string-hash@1.1.3, string-hash@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b"
-
 string-length@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
@@ -8361,69 +7752,24 @@ style-loader@0.20.1:
     loader-utils "^1.1.0"
     schema-utils "^0.4.3"
 
-styled-components@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.3.2.tgz#087b96830ee3d60d9a8b5ef17c132b4f29cc71df"
+styled-components@^3.4.9:
+  version "3.4.9"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.4.9.tgz#519abeb351b37be5b7de6a15ff9e4efeb9d772da"
   dependencies:
     buffer "^5.0.3"
     css-to-react-native "^2.0.3"
     fbjs "^0.8.16"
     hoist-non-react-statics "^2.5.0"
-    is-plain-object "^2.0.1"
     prop-types "^15.5.4"
     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:
-  version "0.2.0"
-  resolved "https://codeload.github.com/timsuchanek/styled-jsx-postcss/tar.gz/677ee0fb7f9138047a00e03c8c3e44adbb33cf2a"
-  dependencies:
-    babel-traverse "^6.21.0"
-    babylon "^6.14.1"
-    deasync "^0.1.9"
-    postcss "^5.2.8"
-    postcss-load-plugins "^2.2.0"
-    styled-jsx "^0.5.7"
-
-styled-jsx@^0.5.7:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-0.5.7.tgz#2cb02263ffa719b1435a864fdd6c62802ae86669"
-  dependencies:
-    babel-plugin-syntax-jsx "6.18.0"
-    babel-traverse "6.21.0"
-    babylon "6.14.1"
-    convert-source-map "1.3.0"
-    escape-string-regexp "1.0.5"
-    object.entries "1.0.4"
-    source-map "0.5.6"
-    string-hash "1.1.1"
-
-styled-jsx@^2.2.1:
-  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.10"
-    stylis-rule-sheet "0.0.8"
-
-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-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:
   version "3.4.8"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.8.tgz#94380babbcd4c75726215794ca985b38ec96d1a3"
@@ -8449,7 +7795,7 @@ supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
 
-supports-color@^3.1.1, supports-color@^3.1.2, supports-color@^3.2.3:
+supports-color@^3.1.2, supports-color@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
   dependencies:
@@ -8595,16 +7941,6 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
-test-exclude@^2.1.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-2.1.3.tgz#a8d8968e1da83266f9864f2852c55e220f06434a"
-  dependencies:
-    arrify "^1.0.1"
-    micromatch "^2.3.11"
-    object-assign "^4.1.0"
-    read-pkg-up "^1.0.1"
-    require-main-filename "^1.0.1"
-
 test-exclude@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.1.1.tgz#4d84964b0966b0087ecc334a2ce002d3d9341e26"
@@ -8828,21 +8164,22 @@ type-is@~1.6.15:
     media-typer "0.3.0"
     mime-types "~2.1.18"
 
-typescript-styled-plugin@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/typescript-styled-plugin/-/typescript-styled-plugin-0.4.0.tgz#c97e9d243d3f9ced21d613954ce7d93631ad79a7"
+typescript-styled-plugin@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/typescript-styled-plugin/-/typescript-styled-plugin-0.11.0.tgz#5d6045fb0c86ac8b6085341497eabe0321110da8"
   dependencies:
-    typescript-template-language-service-decorator "^1.1.0"
-    vscode-css-languageservice "^2.1.10"
-    vscode-languageserver-types "^3.4.0"
+    typescript-template-language-service-decorator "^1.7.1"
+    vscode-css-languageservice "^3.0.10"
+    vscode-emmet-helper "1.2.11"
+    vscode-languageserver-types "^3.13.0"
 
-typescript-template-language-service-decorator@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/typescript-template-language-service-decorator/-/typescript-template-language-service-decorator-1.1.0.tgz#0b3dacebc1442fea1e8288b0952ec01ba6bfa595"
+typescript-template-language-service-decorator@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/typescript-template-language-service-decorator/-/typescript-template-language-service-decorator-1.7.1.tgz#60f825b6b2bab725c9a73eaff65cb598e81a1bc8"
 
-typescript@2.8.3:
-  version "2.8.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.8.3.tgz#5d817f9b6f31bb871835f4edf0089f21abe6c170"
+typescript@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.0.1.tgz#43738f29585d3a87575520a4b93ab6026ef11fdb"
 
 ua-parser-js@^0.7.9:
   version "0.7.18"
@@ -8932,13 +8269,6 @@ unique-string@^1.0.0:
   dependencies:
     crypto-random-string "^1.0.0"
 
-units-css@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/units-css/-/units-css-0.4.0.tgz#d6228653a51983d7c16ff28f8b9dc3b1ffed3a07"
-  dependencies:
-    isnumeric "^0.2.0"
-    viewport-dimensions "^0.2.0"
-
 universalify@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
@@ -9108,30 +8438,34 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
-viewport-dimensions@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/viewport-dimensions/-/viewport-dimensions-0.2.0.tgz#de740747db5387fd1725f5175e91bac76afdf36c"
-
 vm-browserify@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"
   dependencies:
     indexof "0.0.1"
 
-vscode-css-languageservice@^2.1.10:
-  version "2.1.11"
-  resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-2.1.11.tgz#051ad9681d50ceee5f83a20142c8c659a8011ede"
+vscode-css-languageservice@^3.0.10:
+  version "3.0.11"
+  resolved "https://registry.yarnpkg.com/vscode-css-languageservice/-/vscode-css-languageservice-3.0.11.tgz#0e75e1870d59fddbfb6021efd5d80df08c9faaeb"
   dependencies:
-    vscode-languageserver-types "^3.4.0"
-    vscode-nls "^2.0.1"
+    vscode-languageserver-types "^3.13.0"
+    vscode-nls "^4.0.0"
 
-vscode-languageserver-types@^3.4.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.5.0.tgz#e48d79962f0b8e02de955e3f524908e2b19c0374"
+vscode-emmet-helper@1.2.11:
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/vscode-emmet-helper/-/vscode-emmet-helper-1.2.11.tgz#4de78223666bf917eb6dc4b225b6c40f6901950c"
+  dependencies:
+    "@emmetio/extract-abbreviation" "0.1.6"
+    jsonc-parser "^1.0.0"
+    vscode-languageserver-types "^3.6.0-next.1"
 
-vscode-nls@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/vscode-nls/-/vscode-nls-2.0.2.tgz#808522380844b8ad153499af5c3b03921aea02da"
+vscode-languageserver-types@^3.13.0, vscode-languageserver-types@^3.6.0-next.1:
+  version "3.13.0"
+  resolved "https://registry.yarnpkg.com/vscode-languageserver-types/-/vscode-languageserver-types-3.13.0.tgz#b704b024cef059f7b326611c99b9c8753c0a18b4"
+
+vscode-nls@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/vscode-nls/-/vscode-nls-4.0.0.tgz#4001c8a6caba5cedb23a9c5ce1090395c0e44002"
 
 walker@~1.0.5:
   version "1.0.7"
@@ -9187,7 +8521,7 @@ webpack-bundle-analyzer@^2.9.2:
     opener "^1.4.3"
     ws "^4.0.0"
 
-webpack-dev-middleware@1.12.2, webpack-dev-middleware@^1.10.2:
+webpack-dev-middleware@1.12.2:
   version "1.12.2"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.2.tgz#f8fc1120ce3b4fc5680ceecb43d777966b21105e"
   dependencies:
@@ -9229,24 +8563,6 @@ webpack-dev-server@2.11.1:
     webpack-dev-middleware "1.12.2"
     yargs "6.6.0"
 
-webpack-dev-server@^1.16.2:
-  version "1.16.5"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-1.16.5.tgz#0cbd5f2d2ac8d4e593aacd5c9702e7bbd5e59892"
-  dependencies:
-    compression "^1.5.2"
-    connect-history-api-fallback "^1.3.0"
-    express "^4.13.3"
-    http-proxy-middleware "~0.17.1"
-    open "0.0.5"
-    optimist "~0.6.1"
-    serve-index "^1.7.2"
-    sockjs "^0.3.15"
-    sockjs-client "^1.0.3"
-    stream-cache "~0.0.1"
-    strip-ansi "^3.0.0"
-    supports-color "^3.1.1"
-    webpack-dev-middleware "^1.10.2"
-
 webpack-manifest-plugin@1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-1.3.2.tgz#5ea8ee5756359ddc1d98814324fe43496349a7d4"