From 05e7c2babd72204111e2f9fd889d87c4f91c7d33 Mon Sep 17 00:00:00 2001
From: Eric Jinks <ericjinks@gmail.com>
Date: Tue, 23 Jan 2018 12:21:56 +1000
Subject: [PATCH] To Vanilla!

---
 package.json                                 |  21 ++--
 public/images/logo.png                       | Bin 0 -> 12943 bytes
 public/index.html                            |   2 +-
 src/components/BackgroundImage.css           |  18 +++
 src/components/BackgroundImage.js            |  74 ++++++++++++
 src/components/Content.css                   |   8 ++
 src/components/Content.js                    |  24 ++--
 src/components/EnquiryFormSimple.css         |  60 ++++++++++
 src/components/EnquiryFormSimple.js          |  62 ++++++++++
 src/components/GithubCorner.css              |  48 ++++++++
 src/components/GithubCorner.js               |  65 ++--------
 src/components/LazyEmbed.css                 |  18 +++
 src/components/LazyEmbed.js                  |  55 +++++++++
 src/components/LazyImage.css                 |  14 +++
 src/components/LazyImage.js                  |  80 +++++++++----
 src/components/Logo.css                      |   9 ++
 src/components/Logo.js                       |  17 ++-
 src/components/Nav.css                       |   6 +
 src/components/Nav.js                        |  46 +++----
 src/components/NavLink.css                   |  17 +++
 src/components/NavLink.js                    |  31 +----
 src/components/NetlifySimpleForm.js          | 119 -------------------
 src/components/Page.js                       |   7 --
 src/components/PageHeader.css                |  13 ++
 src/components/PageHeader.js                 |  36 ++----
 src/components/ServiceWorkerNotifications.js |  45 +------
 src/components/common.js                     |  82 -------------
 src/globalStyles.css                         |   4 +-
 src/views/About.css                          |   2 +
 src/views/About.js                           |  23 ++--
 src/views/Contact.css                        |   2 +
 src/views/Contact.js                         |  28 ++---
 src/views/Home.css                           |   2 +
 src/views/Home.js                            |  16 +--
 src/views/NoMatch.css                        |   5 +
 src/views/NoMatch.js                         |  29 +++--
 yarn.lock                                    |  67 +----------
 37 files changed, 610 insertions(+), 545 deletions(-)
 create mode 100644 public/images/logo.png
 create mode 100644 src/components/BackgroundImage.css
 create mode 100644 src/components/BackgroundImage.js
 create mode 100644 src/components/Content.css
 create mode 100644 src/components/EnquiryFormSimple.css
 create mode 100644 src/components/EnquiryFormSimple.js
 create mode 100644 src/components/GithubCorner.css
 create mode 100644 src/components/LazyEmbed.css
 create mode 100644 src/components/LazyEmbed.js
 create mode 100644 src/components/LazyImage.css
 create mode 100644 src/components/Logo.css
 create mode 100644 src/components/Nav.css
 create mode 100644 src/components/NavLink.css
 delete mode 100644 src/components/NetlifySimpleForm.js
 delete mode 100644 src/components/Page.js
 create mode 100644 src/components/PageHeader.css
 delete mode 100644 src/components/common.js
 create mode 100644 src/views/About.css
 create mode 100644 src/views/Contact.css
 create mode 100644 src/views/Home.css
 create mode 100644 src/views/NoMatch.css

diff --git a/package.json b/package.json
index 09be3b4..be5a9e9 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "glob": "^7.1.2",
     "gray-matter": "^3.1.1",
     "js-yaml": "^3.10.0",
+    "prop-types": "^15.6.0",
     "react-scripts": "^1.0.10",
     "sharp": "^0.18.4",
     "snazzy": "^7.0.0",
@@ -23,35 +24,33 @@
     "sw-precache": "^5.2.0"
   },
   "dependencies": {
-    "@researchgate/react-intersection-observer": "^0.5.0",
+    "@researchgate/react-intersection-observer": "^0.6.0",
     "core-js": "^2.5.3",
     "intersection-observer": "^0.5.0",
     "lodash": "^4.17.4",
     "netlify-identity-widget": "^1.2.0",
     "normalize.css": "^7.0.0",
-    "polished": "^1.7.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-helmet": "^5.1.3",
     "react-markdown": "^2.5.0",
     "react-router-dom": "^4.1.1",
-    "react-snapshot": "^1.1.0",
-    "styled-components": "^2.1.0"
+    "react-snapshot": "^1.1.0"
   },
   "scripts": {
-    "start": "npm run watch:content & react-scripts start",
-    "build": "npm run prepare-content && react-scripts build && react-snapshot && npm run sw",
+    "start": "npm run watch:content && react-scripts start",
+    "build":
+      "npm run prepare-content && react-scripts build && react-snapshot && npm run sw",
     "parse-content": "node ./functions/parse-content.js",
     "resize-images": "node ./functions/resize-images.js",
-    "prepare-content": "npm run parse-content & npm run resize-images",
-    "watch:content": "chokidar 'content/**/**' -c 'npm run prepare-content' --initial",
+    "prepare-content": "npm run parse-content && npm run resize-images",
+    "watch:content":
+      "chokidar 'content/**/**' -c 'npm run prepare-content' --initial",
     "sw": "sw-precache --config='sw-precache-config.js'",
     "test": "standard | snazzy && react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
   "reactSnapshot": {
-    "include": [
-      "/404"
-    ]
+    "include": ["/404"]
   }
 }
diff --git a/public/images/logo.png b/public/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..820aca9746550ccac2bf77ba70d403f93a33790c
GIT binary patch
literal 12943
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
FV1g*Q(hdLs

literal 0
HcmV?d00001

diff --git a/public/index.html b/public/index.html
index 061420a..77be9f4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,7 +14,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>Netlify CMS + React Starter</title>
-
+    <!-- Place Google Fonts css here -->
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/components/BackgroundImage.css b/src/components/BackgroundImage.css
new file mode 100644
index 0000000..59d1da2
--- /dev/null
+++ b/src/components/BackgroundImage.css
@@ -0,0 +1,18 @@
+.BackgroundImage {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background-position: center;
+  transition: opacity 0.5s ease;
+  overflow: hidden;
+}
+
+.BackgroundImage-lazy {
+  filter: blur(5px);
+}
+
+.BackgroundImage-lazy-loaded {
+  filter: blur(0);
+}
diff --git a/src/components/BackgroundImage.js b/src/components/BackgroundImage.js
new file mode 100644
index 0000000..25f4130
--- /dev/null
+++ b/src/components/BackgroundImage.js
@@ -0,0 +1,74 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import 'intersection-observer'
+import Observer from '@researchgate/react-intersection-observer'
+
+import './BackgroundImage.css'
+import { getImageSrc } from '../util/getImageUrl'
+
+export default class BackgroundImage extends React.Component {
+  static defaultProps = {
+    lazy: false,
+    src: ''
+  }
+
+  state = {
+    src:
+      this.props.src.indexOf('http') === 0
+        ? ''
+        : getImageSrc(this.props.src, this.props.lazy ? 10 : 1800),
+    dataSrc: getImageSrc(this.props.src, 1800),
+    loaded: false
+  }
+
+  handleIntersection = e => {
+    if (e.isIntersecting) {
+      const img = new Image()
+      img.src = this.state.dataSrc
+      img.onload = () => {
+        this.setState({
+          src: this.state.dataSrc,
+          loaded: true
+        })
+      }
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (this.props.src === nextProps.src) return
+
+    this.setState({
+      src: getImageSrc(nextProps.src, nextProps.lazy ? 10 : 1800),
+      dataSrc: getImageSrc(nextProps.src, 1800)
+    })
+  }
+
+  render () {
+    let className = this.props.className || ''
+    if (this.state.loaded) className += ' BackgroundImage-lazy-loaded'
+    if (this.props.lazy) className += ' BackgroundImage-lazy'
+    const options = {
+      onChange: this.handleIntersection,
+      onlyOnce: true,
+      rootMargin: '0% 0% 100%'
+    }
+
+    return (
+      <Observer {...options}>
+        <div
+          className={`BackgroundImage absolute ${className || ''}`}
+          src={this.state.src}
+          style={{
+            backgroundImage: `url(${this.state.src})`,
+            backgroundSize: this.props.contain ? 'contain' : 'cover',
+            opacity: this.props.opacity || 1
+          }}
+        />
+      </Observer>
+    )
+  }
+}
+
+BackgroundImage.propTypes = {
+  src: PropTypes.string.isRequired
+}
diff --git a/src/components/Content.css b/src/components/Content.css
new file mode 100644
index 0000000..07463a3
--- /dev/null
+++ b/src/components/Content.css
@@ -0,0 +1,8 @@
+.Content {
+  white-space: pre-line;
+}
+
+.Content--Image {
+  max-width: 100%;
+  height: auto;
+}
diff --git a/src/components/Content.js b/src/components/Content.js
index d03d5a0..9f70e04 100644
--- a/src/components/Content.js
+++ b/src/components/Content.js
@@ -1,10 +1,12 @@
 import React from 'react'
-import styled from 'styled-components'
 import Marked from 'react-markdown'
+
 import { getImageSrc, getImageSrcset } from '../util/getImageUrl'
+import './Content.css'
 
 export default ({ source }) => (
-  <Content
+  <Marked
+    className='Content'
     source={source}
     renderers={{
       Image: ImageWithSrcset
@@ -12,18 +14,12 @@ export default ({ source }) => (
   />
 )
 
-const Image = styled.img`
-  max-width: 100%;
-  height: auto;
-`
-const Content = styled(Marked)`
-  white-space: pre-line;
-`
-
-const ImageWithSrcset = props => (
-  <Image
+const ImageWithSrcset = ({ nodeKey, src, alt, ...props }) => (
+  <img
+    className='Content--Image'
     {...props}
-    src={getImageSrc(props.src)}
-    srcSet={getImageSrcset(props.src)}
+    src={getImageSrc(src)}
+    srcSet={getImageSrcset(src)}
+    alt={alt}
   />
 )
diff --git a/src/components/EnquiryFormSimple.css b/src/components/EnquiryFormSimple.css
new file mode 100644
index 0000000..6ae5d2f
--- /dev/null
+++ b/src/components/EnquiryFormSimple.css
@@ -0,0 +1,60 @@
+.EnquiryForm {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  max-width: 500px;
+  margin: 2.5rem 0;
+}
+
+.EnquiryForm > * + * {
+  margin-top: 1.5rem;
+}
+
+.EnquiryForm--Label {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.EnquiryForm--Input,
+.EnquiryForm--Textarea {
+  font-family: inherit;
+  font-weight: 400;
+  flex-grow: 1;
+  box-sizing: border-box;
+  display: block;
+  margin: 0;
+  border: none;
+  padding: 1em;
+  line-height: 1;
+  transition: border-color 0.2s;
+  resize: none;
+  background: var(--lightGrey);
+  border-radius: 0;
+}
+
+.EnquiryForm--Input:-webkit-autofill {
+  -webkit-box-shadow: 0 0 0 1000px var(--lightGrey) inset !important;
+}
+
+.EnquiryForm--Input:focus {
+  outline: none;
+  border-color: black;
+}
+
+.EnquiryForm--Input[disabled] {
+  opacity: 0.4;
+  pointer-events: none;
+  cursor: progress;
+}
+
+.EnquiryForm--Input::placeholder {
+  text-transform: uppercase;
+}
+
+.EnquiryForm--SubmitButton {
+  width: 90%;
+  margin: 2rem auto 0;
+}
diff --git a/src/components/EnquiryFormSimple.js b/src/components/EnquiryFormSimple.js
new file mode 100644
index 0000000..401db84
--- /dev/null
+++ b/src/components/EnquiryFormSimple.js
@@ -0,0 +1,62 @@
+import React from 'react'
+
+import './EnquiryFormSimple.css'
+
+export default ({
+  name = 'Simple Form',
+  subject = '', // optional subject of the notification email
+  action = ''
+}) => (
+  <form
+    className='EnquiryForm'
+    name={name}
+    action={action}
+    data-netlify=''
+    data-netlify-honeypot='_gotcha'
+  >
+    <label className='EnquiryForm--Label'>
+      <input
+        className='EnquiryForm--Input'
+        type='text'
+        placeholder='Name'
+        name='name'
+        required
+      />
+    </label>
+    <label className='EnquiryForm--Label'>
+      <input
+        className='EnquiryForm--Input'
+        type='phone'
+        placeholder='Phone'
+        name='phone'
+        required
+      />
+    </label>
+    <label className='EnquiryForm--Label'>
+      <input
+        className='EnquiryForm--Input'
+        type='email'
+        placeholder='Email'
+        name='email'
+        required
+      />
+    </label>
+    <label className='EnquiryForm--Label'>
+      <textarea
+        className='EnquiryForm--Textarea'
+        placeholder='Message'
+        name='message'
+        rows='10'
+        required
+      />
+    </label>
+    <input type='text' name='_gotcha' style={{ display: 'none' }} />
+    {!!subject && <input type='hidden' name='subject' value={subject} />}
+    <input type='hidden' name='form-name' value={name} />
+    <input
+      className='Button Button--tertiary EnquiryForm--SubmitButton'
+      type='submit'
+      value='Enquire'
+    />
+  </form>
+)
diff --git a/src/components/GithubCorner.css b/src/components/GithubCorner.css
new file mode 100644
index 0000000..066e38b
--- /dev/null
+++ b/src/components/GithubCorner.css
@@ -0,0 +1,48 @@
+.GithubCorner {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: 2;
+}
+.GithubCorner svg {
+  fill: #151513;
+  color: #fff;
+  border: 0;
+  max-width: 12.5vmin;
+  max-height: 12.5vmin;
+}
+
+.GithubCorner .octo-arm {
+  transform-origin: 130px 106px;
+}
+
+.GithubCorner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out;
+}
+
+@media (max-width: 500px) {
+  .GithubCorner:hover .octo-arm {
+    animation: none;
+  }
+
+  .GithubCorner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+
+  20%,
+  60% {
+    transform: rotate(-25deg);
+  }
+
+  40%,
+  80% {
+    transform: rotate(10deg);
+  }
+}
diff --git a/src/components/GithubCorner.js b/src/components/GithubCorner.js
index ae35974..708f46e 100644
--- a/src/components/GithubCorner.js
+++ b/src/components/GithubCorner.js
@@ -1,59 +1,20 @@
 import React from 'react'
-import styled from 'styled-components'
-
-const GithubCorner = styled.a`
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: 2;
-
-  svg {
-    fill: #151513;
-    color: #fff;
-    border: 0;
-    max-width: 12.5vmin;
-    max-height: 12.5vmin;
-  }
-
-  .octo-arm {
-    transform-origin: 130px 106px;
-  }
-
-  &:hover .octo-arm {
-    animation: octocat-wave 560ms ease-in-out;
-  }
-
-  @keyframes octocat-wave {
-    0%, 100% {
-      transform: rotate(0);
-    }
-
-    20%, 60% {
-      transform: rotate(-25deg);
-    }
-
-    40%, 80% {
-      transform: rotate(10deg)
-    }
-  }
-
-  @media (max-width:500px) {
-    &:hover .octo-arm {
-      animation: none;
-    }
-
-    .octo-arm {
-      animation: octocat-wave 560ms ease-in-out;
-    }
-  }
-`
+import './GithubCorner.css'
 
 export default ({ url }) => (
-  <GithubCorner href={url} aria-label='View source on Github'>
+  <a className='GithubCorner' href={url} aria-label='View source on Github'>
     <svg width='80' height='80' viewBox='0 0 250 250' aria-hidden='true'>
       <path d='M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z' />
-      <path className='octo-arm' d='M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2' fill='currentColor' />
-      <path className='octo-body' d='M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z' fill='currentColor' />
+      <path
+        className='octo-arm'
+        d='M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2'
+        fill='currentColor'
+      />
+      <path
+        className='octo-body'
+        d='M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z'
+        fill='currentColor'
+      />
     </svg>
-  </GithubCorner>
+  </a>
 )
diff --git a/src/components/LazyEmbed.css b/src/components/LazyEmbed.css
new file mode 100644
index 0000000..ac21799
--- /dev/null
+++ b/src/components/LazyEmbed.css
@@ -0,0 +1,18 @@
+.LazyEmbed {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+  height: auto;
+}
+
+.LazyEmbed iframe,
+.LazyEmbed object,
+.LazyEmbed embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/components/LazyEmbed.js b/src/components/LazyEmbed.js
new file mode 100644
index 0000000..a982d9f
--- /dev/null
+++ b/src/components/LazyEmbed.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import 'intersection-observer'
+import Observer from '@researchgate/react-intersection-observer'
+
+import './LazyEmbed.css'
+
+class LazyEmbed extends React.Component {
+  static defaultProps = {
+    lazy: true
+  }
+
+  state = {
+    src: null,
+    dataSrc: this.props.src,
+    loaded: !this.props.lazy
+  }
+
+  handleIntersection = e => {
+    if (e.isIntersecting) {
+      this.setState({
+        src: this.state.dataSrc,
+        loaded: true
+      })
+    }
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (this.props.src === nextProps.src) return
+    this.setState({
+      src: nextProps.src,
+      dataSrc: nextProps.src
+    })
+  }
+
+  render () {
+    let className = this.props.className || ''
+    if (this.state.loaded) className += ' loaded'
+    const options = {
+      onChange: this.handleIntersection,
+      onlyOnce: true,
+      rootMargin: '0% 0% 100%'
+    }
+
+    return (
+      <Observer {...options}>
+        <div
+          className={`LazyEmbed ${className}`}
+          dangerouslySetInnerHTML={{ __html: this.state.src }}
+        />
+      </Observer>
+    )
+  }
+}
+
+export default LazyEmbed
diff --git a/src/components/LazyImage.css b/src/components/LazyImage.css
new file mode 100644
index 0000000..f649246
--- /dev/null
+++ b/src/components/LazyImage.css
@@ -0,0 +1,14 @@
+.LazyImage {
+  display: block;
+  width: 100%;
+  margin-bottom: 2.5rem;
+  filter: blur(5px);
+}
+
+.LazyImage.loaded {
+  filter: blur(0);
+}
+
+.LazyImage:last-child {
+  margin-bottom: 0;
+}
diff --git a/src/components/LazyImage.js b/src/components/LazyImage.js
index 1e0c2dc..ccf7756 100644
--- a/src/components/LazyImage.js
+++ b/src/components/LazyImage.js
@@ -1,53 +1,85 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
-import { getImageSrc, getImageSrcset } from '../util/getImageUrl'
 import 'intersection-observer'
 import Observer from '@researchgate/react-intersection-observer'
 
-const Image = styled.img`
-  display: block;
-  width: 100%;
-  margin-bottom: 2.5rem;
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-`
+import { getImageSrc, getImageSrcset } from '../util/getImageUrl'
+import './LazyImage.css'
 
 class LazyImage extends React.Component {
+  static defaultProps = {
+    lazy: false,
+    enableSrcset: true,
+    imageSize: '300'
+  }
+
   state = {
-    src: getImageSrc(this.props.src, '10'),
-    srcSet: '',
-    dataSrc: getImageSrc(this.props.src, '300'),
-    dataSrcSet: getImageSrcset(this.props.src)
+    src: getImageSrc(
+      this.props.src,
+      this.props.lazy ? '10' : this.props.imageSize
+    ),
+    srcSet: this.props.lazy ? '' : getImageSrcset(this.props.src),
+    dataSrc: getImageSrc(this.props.src, this.props.imageSize),
+    dataSrcSet: getImageSrcset(this.props.src),
+    loaded: !this.props.lazy
   }
 
   handleIntersection = e => {
     if (e.isIntersecting) {
-      this.setState({
-        src: this.state.dataSrc,
-        srcSet: this.state.dataSrcSet
-      })
+      const img = new Image()
+      img.src = this.state.dataSrc
+      img.onload = () => {
+        this.setState({
+          src: this.state.dataSrc,
+          srcSet: this.state.dataSrcSet,
+          loaded: true
+        })
+      }
     }
   }
 
+  componentWillReceiveProps (nextProps) {
+    if (this.props.src === nextProps.src) return
+    this.setState({
+      src: getImageSrc(nextProps.src, '10'),
+      srcSet: '',
+      dataSrc: getImageSrc(nextProps.src, '300'),
+      dataSrcSet: getImageSrcset(nextProps.src)
+    })
+  }
+
   render () {
-    const { sizes, alt, className } = this.props
+    const { sizes, lazy, onClick, alt } = this.props
+    let className = this.props.className || ''
+    if (this.state.loaded) className += ' loaded'
     const options = {
       onChange: this.handleIntersection,
       onlyOnce: true,
-      rootMargin: '0% 0% 50%'
+      rootMargin: '0% 0% 100%'
+    }
+
+    if (!lazy) {
+      return (
+        <img
+          className={`LazyImage ${className}`}
+          src={this.state.src}
+          srcSet={this.props.enableSrcset ? this.state.srcSet : undefined}
+          sizes={sizes || '100vw'}
+          onClick={onClick}
+          alt={alt}
+        />
+      )
     }
 
     return (
       <Observer {...options}>
-        <Image
+        <img
+          className={`LazyImage ${className}`}
           src={this.state.src}
-          srcSet={this.state.srcSet}
+          srcSet={this.props.enableSrcset ? this.state.srcSet : undefined}
           sizes={sizes || '100vw'}
+          onClick={onClick}
           alt={alt}
-          className={className}
         />
       </Observer>
     )
diff --git a/src/components/Logo.css b/src/components/Logo.css
new file mode 100644
index 0000000..c60470e
--- /dev/null
+++ b/src/components/Logo.css
@@ -0,0 +1,9 @@
+.Logo {
+  display: block;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  height: 2rem;
+  width: 2.5rem;
+  margin-right: 1rem;
+}
diff --git a/src/components/Logo.js b/src/components/Logo.js
index 40c72d2..f520316 100644
--- a/src/components/Logo.js
+++ b/src/components/Logo.js
@@ -1,7 +1,12 @@
-import styled from 'styled-components'
+import React from 'react'
 
-export default styled.span`
-  display: block;
-  font-size: 2rem;
-  padding: 0 1rem;
-`
+import './Logo.css'
+
+export default ({ inverted }) => (
+  <div
+    className='Logo'
+    style={{
+      backgroundImage: 'url(/images/logo.png)'
+    }}
+  />
+)
diff --git a/src/components/Nav.css b/src/components/Nav.css
new file mode 100644
index 0000000..477ec7a
--- /dev/null
+++ b/src/components/Nav.css
@@ -0,0 +1,6 @@
+.Nav {
+  background: white;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
diff --git a/src/components/Nav.js b/src/components/Nav.js
index 053e31e..fabc736 100644
--- a/src/components/Nav.js
+++ b/src/components/Nav.js
@@ -1,27 +1,27 @@
 import React from 'react'
-import styled from 'styled-components'
-import { Container, Flex } from './common'
-import NavLink from './NavLink'
+import { Link } from 'react-router-dom'
+
 import Logo from './Logo'
+import NavLink from './NavLink'
+import './Nav.css'
 
-const Nav = styled.div`
-  background: white;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-`
-
-export default (props) => (
-  <Nav>
-    <Container>
-      <Flex alignCenter>
-        <Logo>
-          <span role='img' aria-label='Chili'>🌶</span>
-        </Logo>
-        <NavLink to='/' exact>Home</NavLink>
-        <NavLink to='/about/' exact>About</NavLink>
-        <NavLink to='/contact/' exact>Contact</NavLink>
-      </Flex>
-    </Container>
-  </Nav>
+export default ({ handlePopupOpen }) => (
+  <nav className='Nav'>
+    <div className='Container'>
+      <div className='Flex alignCenter justifyStart'>
+        <Link to='/'>
+          <Logo />
+        </Link>
+        <NavLink to='/' exact>
+          Home
+        </NavLink>
+        <NavLink to='/about/' exact>
+          About
+        </NavLink>
+        <NavLink to='/contact/' exact>
+          Contact
+        </NavLink>
+      </div>
+    </div>
+  </nav>
 )
diff --git a/src/components/NavLink.css b/src/components/NavLink.css
new file mode 100644
index 0000000..b890151
--- /dev/null
+++ b/src/components/NavLink.css
@@ -0,0 +1,17 @@
+.NavLink {
+  padding: 0.5rem 1rem;
+  display: block;
+  font-weight: 400;
+  transition: color 0.2s, border-bottom-color 0.2s;
+  color: inherit;
+  text-decoration: none;
+  border-bottom: 1px solid;
+  border-bottom-color: transparent;
+}
+
+.NavLink:hover,
+.NavLink:active,
+.NavLink:focus {
+  color: var(--primary);
+  border-bottom-color: currentColor;
+}
diff --git a/src/components/NavLink.js b/src/components/NavLink.js
index 0f34342..a7ef290 100644
--- a/src/components/NavLink.js
+++ b/src/components/NavLink.js
@@ -1,29 +1,10 @@
 import React from 'react'
-import { Route, Link } from 'react-router-dom'
-import styled from 'styled-components'
+import { NavLink } from 'react-router-dom'
 
-import { color } from '../globalStyles'
+import './NavLink.css'
 
-const NavLink = styled.span`
-  a {
-    padding: .5rem 1rem;
-    display: block;
-    font-weight: 400;
-    transition: color 0.2s, border-bottom-color 0.2s;
-    color: ${props => props.active ? color.primary : 'inherit'};
-    text-decoration: none;
-    border-bottom: 1px solid;
-    border-bottom-color: ${props => props.active ? color.primary : 'transparent'};
-    &:hover, &:active, &:focus {
-      color: ${props => props.active ? color.primary : 'inherit'};
-    }
-  }
-`
-
-export default ({ to, exact, match, children }) => (
-  <Route path={to} exact={exact} children={({match}) => (
-    <NavLink active={match}>
-      <Link to={to}>{children}</Link>
-    </NavLink>
-  )} />
+export default ({ className, children, ...props }) => (
+  <NavLink {...props} className={`NavLink ${className || ''}`}>
+    {children}
+  </NavLink>
 )
diff --git a/src/components/NetlifySimpleForm.js b/src/components/NetlifySimpleForm.js
deleted file mode 100644
index ab10a09..0000000
--- a/src/components/NetlifySimpleForm.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-import { color } from '../globalStyles'
-
-export default ({
-  name = 'Simple Form',
-  subject = '', // optional subject of the notification email
-  action = ''
-}) => (
-  <StyledForm
-    name={name}
-    action={action}
-    data-netlify=''
-    data-netlify-honeypot='_gotcha'
-  >
-    <Label className='Label'>
-      <Input
-        className='Input'
-        type='text'
-        placeholder='Your Name'
-        name='name'
-        required
-      />
-    </Label>
-    <Label className='Label'>
-      <Input
-        className='Input'
-        type='email'
-        placeholder='Your Email'
-        name='email'
-        required
-      />
-    </Label>
-    <Label className='Label'>
-      <Textarea
-        className='Input'
-        placeholder='Message'
-        name='message'
-        rows='10'
-        required
-      />
-    </Label>
-    <Input type='text' name='_gotcha' style={{ display: 'none' }} />
-    {!!subject && <Input type='hidden' name='subject' value={subject} />}
-    <Input type='hidden' name='form-name' value={name} />
-    <Button className='button' type='submit' value='Send' />
-  </StyledForm>
-)
-
-const StyledForm = styled.form`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  max-width: 500px;
-  margin: 2.5rem 0;
-
-  & > * + * {
-    margin-top: 1.5rem;
-  }
-`
-const Label = styled.label`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-`
-
-const Input = styled.input`
-  font-family: inherit;
-  font-weight: 400;
-  flex-grow: 1;
-  box-sizing: border-box;
-  display: block;
-  margin: 0;
-  border: none;
-  border-bottom: 1px solid #bababa;
-  padding: 0.5em 0;
-  line-height: 1;
-  transition: border-color 0.2s;
-  resize: none;
-
-  &:focus {
-    outline: none;
-    border-color: black;
-  }
-
-  &[disabled] {
-    opacity: 0.4;
-    pointer-events: none;
-    cursor: progress;
-  }
-`
-const Textarea = Input.withComponent('textarea')
-const Button = styled.input`
-  background: ${color.primary};
-  color: white;
-  text-transform: uppercase;
-  text-decoration: none;
-  font-weight: 400;
-  letter-spacing: 0.15em;
-  font-size: 1.4rem;
-  display: inline-block;
-  padding: 1rem 2rem;
-  border: none;
-  transition: all 0.2s ease;
-  cursor: pointer;
-
-  &:hover,
-  &:focus {
-    color: white;
-  }
-
-  &[disabled] {
-    opacity: 0.4;
-    pointer-events: none;
-    cursor: progress;
-  }
-`
diff --git a/src/components/Page.js b/src/components/Page.js
deleted file mode 100644
index 8470b7c..0000000
--- a/src/components/Page.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from 'styled-components'
-
-export default styled.div`
-  p {
-    margin-bottom: 1rem;
-  }
-`
diff --git a/src/components/PageHeader.css b/src/components/PageHeader.css
new file mode 100644
index 0000000..0fd2571
--- /dev/null
+++ b/src/components/PageHeader.css
@@ -0,0 +1,13 @@
+.PageHeader {
+  line-height: 1em;
+  color: var(--primary);
+  background: var(--primary);
+  color: white;
+}
+
+.PageHeader--Title {
+}
+
+.PageHeader--Subtitle {
+  font-weight: 200;
+}
diff --git a/src/components/PageHeader.js b/src/components/PageHeader.js
index 30e4211..737739b 100644
--- a/src/components/PageHeader.js
+++ b/src/components/PageHeader.js
@@ -1,35 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import styled from 'styled-components'
 
-import { Section, Container, BackgroundImage } from './common'
-import { getImageSrc } from '../util/getImageUrl'
-import { color } from '../globalStyles'
-
-const Header = styled(Section)`
-  line-height: 1em;
-  color: ${color.primary};
-  background: ${color.primary};
-  color: white;
-
-  h2 {
-    font-weight: 200;
-  }
-`
+import BackgroundImage from './BackgroundImage'
+import './PageHeader.css'
 
 const PageHeader = ({ title, subtitle, backgroundImage }) => (
-  <Header relative>
-    {backgroundImage && (
-      <BackgroundImage
-        image={getImageSrc(backgroundImage, '1200')}
-        opacity={0.5}
-      />
-    )}
-    <Container relative>
-      <h1>{title}</h1>
-      {subtitle ? <h2>{subtitle}</h2> : ''}
-    </Container>
-  </Header>
+  <div className='Section PageHeader relative'>
+    {backgroundImage && <BackgroundImage src={backgroundImage} opacity={0.5} />}
+    <div className='Container relative'>
+      <h1 className='PageHeader--Title'>{title}</h1>
+      {subtitle ? <h2 className='PageHeader--Subtitle'>{subtitle}</h2> : ''}
+    </div>
+  </div>
 )
 
 PageHeader.propTypes = {
diff --git a/src/components/ServiceWorkerNotifications.js b/src/components/ServiceWorkerNotifications.js
index 09b8ec2..64c74ce 100644
--- a/src/components/ServiceWorkerNotifications.js
+++ b/src/components/ServiceWorkerNotifications.js
@@ -1,40 +1,4 @@
-import React, { Component } from 'react'
-import styled from 'styled-components'
-import { color } from '../globalStyles'
-
-const Notification = styled.div`
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  text-align: center;
-  background: ${color.primary};
-  color: white;
-  padding: 1rem;
-  min-height: 5rem;
-  transition: transform 0.1s ease-in-out;
-  transform: translateY(${props => (props.message ? '0' : '100%')});
-`
-const CloseButton = styled.button.attrs({
-  children: 'x'
-})`
-  border: none;
-  background: white;
-  color: ${color.primary};
-  border-radius: 100%;
-  width: 2.5rem;
-  height: 2.5rem;
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-  cursor: pointer;
-
-  &:hover,
-  &:focus {
-    opacity: 0.7;
-    outline: none;
-  }
-`
+import { Component } from 'react'
 
 export default class ServiceWorkerNotifications extends Component {
   static defaultProps = {
@@ -93,11 +57,6 @@ export default class ServiceWorkerNotifications extends Component {
 
   render () {
     this.props.reloadOnUpdate && this.reloadIfUpdated()
-    return this.state.message ? (
-      <Notification message={this.state.message}>
-        {this.state.message}
-        <CloseButton onClick={this.handleDismiss} />
-      </Notification>
-    ) : null
+    return null
   }
 }
diff --git a/src/components/common.js b/src/components/common.js
deleted file mode 100644
index 9181eae..0000000
--- a/src/components/common.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import styled, { css } from 'styled-components'
-
-const mixin = {
-  position: css`
-    ${props => {
-      if (props.relative) return 'position: relative;'
-      if (props.absolute) return 'position: absolute;'
-    }};
-  `,
-  textAlign: css`
-    ${props => {
-      if (props.taCenter) return 'text-align: center;'
-      if (props.taLeft) return 'text-align: left;'
-      if (props.taRight) return 'text-align: right;'
-    }};
-  `
-}
-
-export const Absolute = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-`
-
-export const Relative = styled.div`
-  position: relative;
-  z-index: 0;
-`
-
-export const Section = styled.section`
-  ${mixin.position}
-
-  width: 100%;
-  padding: ${props => {
-    if (props.thick) return '10rem 0'
-    if (props.thin) return '2.5rem 0'
-    return '5rem 0'
-  }};
-`
-
-export const Container = styled.div`
-  ${mixin.position}
-  ${mixin.textAlign}
-
-  margin: 0 auto;
-  width: 90vw;
-  max-width: ${props => {
-    if (props.skinny) return '888px'
-    if (props.skinnier) return '555px'
-    return '1111px'
-  }};
-`
-
-export const Flex = styled.div`
-  display: flex;
-  flex-direction: ${props => props.column ? 'column' : 'row'};
-  justify-content: ${props => {
-    if (props.justifyCenter) return 'center'
-    if (props.justifyEnd) return 'flex-end'
-    if (props.justifyBetween) return 'space-between'
-    if (props.justifyAround) return 'space-around'
-    return 'flex-start'
-  }};
-  align-items: ${props => {
-    if (props.alignStart) return 'flex-start'
-    if (props.alignEnd) return 'flex-end'
-    if (props.alignStretch) return 'stretch'
-    return 'center'
-  }};
-  height: ${props => props.fill ? '100%' : 'auto'};
-  width: ${props => props.fill ? '100%' : 'auto'};
-`
-
-export const BackgroundImage = styled(Absolute)`
-  background-size: cover;
-  background-position: center;
-  background-image: url(${props => props.image});
-  opacity: ${props => props.opacity || 1};
-  transition: opacity .5s ease;
-`
diff --git a/src/globalStyles.css b/src/globalStyles.css
index 7b1656a..6efbfb7 100644
--- a/src/globalStyles.css
+++ b/src/globalStyles.css
@@ -142,8 +142,8 @@ pre code:after {
 }
 
 .Container {
-  max-width: 1467px;
-  width: 90vw;
+  max-width: 1111px;
+  width: 90%;
   margin: 0 auto;
 }
 .Container.skinny {
diff --git a/src/views/About.css b/src/views/About.css
new file mode 100644
index 0000000..d0851cb
--- /dev/null
+++ b/src/views/About.css
@@ -0,0 +1,2 @@
+.About {
+}
diff --git a/src/views/About.js b/src/views/About.js
index 9e31e8d..00285e9 100644
--- a/src/views/About.js
+++ b/src/views/About.js
@@ -1,14 +1,13 @@
 import React from 'react'
 import Helmet from 'react-helmet'
 
-import Page from '../components/Page'
 import PageHeader from '../components/PageHeader'
 import LazyImage from '../components/LazyImage'
-import { Container, Section } from '../components/common'
 import Content from '../components/Content.js'
+import './About.css'
 
 export default ({ page }) => (
-  <Page>
+  <div className='About'>
     <Helmet>
       <title>{page.title}</title>
     </Helmet>
@@ -17,17 +16,17 @@ export default ({ page }) => (
       subtitle={page.subtitle}
       backgroundImage={page.featuredImage}
     />
-    <Section thin>
-      <Container>
+    <div className='Section thin'>
+      <div className='Container'>
         <Content source={page.section1} />
-      </Container>
-    </Section>
-    <Section thin>
-      <Container>
+      </div>
+    </div>
+    <div className='Seciton thin'>
+      <div className='Container'>
         <Content source={page.section2} />
         <p>The image below is a {'<LazyImage />'}</p>
         <LazyImage src={page.featuredImage} alt='LazyImage' />
-      </Container>
-    </Section>
-  </Page>
+      </div>
+    </div>
+  </div>
 )
diff --git a/src/views/Contact.css b/src/views/Contact.css
new file mode 100644
index 0000000..a5c31ad
--- /dev/null
+++ b/src/views/Contact.css
@@ -0,0 +1,2 @@
+.Contact {
+}
diff --git a/src/views/Contact.js b/src/views/Contact.js
index 0f553c6..0f3e207 100644
--- a/src/views/Contact.js
+++ b/src/views/Contact.js
@@ -1,31 +1,31 @@
 import React from 'react'
 import Helmet from 'react-helmet'
-import Page from '../components/Page'
+
 import PageHeader from '../components/PageHeader'
-import NetlifyControlledForm from '../components/NetlifyControlledForm'
-import NetlifySimpleForm from '../components/NetlifySimpleForm'
-import { Container, Section } from '../components/common'
-import Marked from 'react-markdown'
+// import NetlifyControlledForm from '../components/NetlifyControlledForm'
+import EnquiryFormSimple from '../components/EnquiryFormSimple'
+import Content from '../components/Content'
+import './Contact.css'
 
 export default ({ page }) => (
-  <Page>
+  <div className='Contact'>
     <PageHeader title={page.title} subtitle='<Contact />' />
-    <Section thin>
-      <Container>
-        <Marked source={page.content} />
+    <div className='Section thin'>
+      <div className='Container'>
+        <Content source={page.content} />
         <br />
         <h3>{'<NetlifyControlledForm />'}</h3>
-        <NetlifyControlledForm name={'Controlled Form'} />
+        {/* <NetlifyControlledForm name={'Controlled Form'} /> */}
         <br />
         <h3>{'<NetlifySimpleForm />'}</h3>
-        <NetlifySimpleForm name='Simple Form' />
+        <EnquiryFormSimple name='Simple Form' />
         <em>Note: these will only work when deployed on Netlify</em>
         <br />
         <em>Also, they are active and I will receive submissions</em> 😉
-      </Container>
-    </Section>
+      </div>
+    </div>
     <Helmet>
       <title>{page.title}</title>
     </Helmet>
-  </Page>
+  </div>
 )
diff --git a/src/views/Home.css b/src/views/Home.css
new file mode 100644
index 0000000..c24c1b2
--- /dev/null
+++ b/src/views/Home.css
@@ -0,0 +1,2 @@
+.Home {
+}
diff --git a/src/views/Home.js b/src/views/Home.js
index 98ae247..b5884f7 100644
--- a/src/views/Home.js
+++ b/src/views/Home.js
@@ -1,23 +1,23 @@
 import React from 'react'
 import Helmet from 'react-helmet'
-import Page from '../components/Page'
-import { Container, Section } from '../components/common'
+
 import Content from '../components/Content'
 import PageHeader from '../components/PageHeader'
+import './Home.css'
 
 export default ({ page }) => {
   const { title, subtitle } = page
   return (
-    <Page>
+    <main className='Home'>
       <PageHeader title={title} subtitle={subtitle} />
-      <Section thin>
-        <Container>
+      <div className='Section thin'>
+        <div className='Container'>
           <Content source={page.content} />
-        </Container>
-      </Section>
+        </div>
+      </div>
       <Helmet>
         <title>{title}</title>
       </Helmet>
-    </Page>
+    </main>
   )
 }
diff --git a/src/views/NoMatch.css b/src/views/NoMatch.css
new file mode 100644
index 0000000..717edb6
--- /dev/null
+++ b/src/views/NoMatch.css
@@ -0,0 +1,5 @@
+.body--NoMatch .React-Wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
diff --git a/src/views/NoMatch.js b/src/views/NoMatch.js
index 42a8b17..80cb11c 100644
--- a/src/views/NoMatch.js
+++ b/src/views/NoMatch.js
@@ -1,19 +1,24 @@
 import React from 'react'
 import Helmet from 'react-helmet'
-import Page from '../components/Page'
-import PageHeader from '../components/PageHeader'
-import { Section, Container } from '../components/common'
 
-export default () => (
-  <Page>
-    <PageHeader title='404' subtitle='<NoMatch />' />
-    <Section>
-      <Container taCenter>
-        <h3>404 – Page Not Found</h3>
-      </Container>
-    </Section>
+import './NoMatch.css'
+
+export default ({ siteUrl }) => (
+  <div className='Page'>
+    <section className='Section thick'>
+      <div className='Container taCenter'>
+        <h1>404 - Page Not Found</h1>
+        <p>
+          We can't find the page you are looking for!<br />Head back to{' '}
+          <a href={siteUrl}>
+            {siteUrl.replace(/(^https?:\/\/)/, '').replace(/\/$/, '')}
+          </a>
+        </p>
+      </div>
+    </section>
     <Helmet>
       <title>404 – Page Not Found</title>
+      <body className='body--NoMatch' />
     </Helmet>
-  </Page>
+  </div>
 )
diff --git a/yarn.lock b/yarn.lock
index c98e9a4..e676164 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -54,9 +54,9 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
-"@researchgate/react-intersection-observer@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@researchgate/react-intersection-observer/-/react-intersection-observer-0.5.0.tgz#c83341fe2d86467816373e9141c37b71b90798d9"
+"@researchgate/react-intersection-observer@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@researchgate/react-intersection-observer/-/react-intersection-observer-0.6.0.tgz#505f20b62c8941a035442b61ac448870afb5d8a2"
   dependencies:
     invariant "^2.2.2"
     prop-types "^15.6.0"
@@ -1260,13 +1260,6 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-buffer@^5.0.3:
-  version "5.0.8"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.0.8.tgz#84daa52e7cf2fa8ce4195bc5cf0f7809e0930b24"
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-
 builtin-modules@^1.0.0, builtin-modules@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -1776,10 +1769,6 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
-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"
-
 css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
@@ -1820,14 +1809,6 @@ css-selector-tokenizer@^0.7.0:
     fastparse "^1.1.1"
     regexpu-core "^1.0.0"
 
-css-to-react-native@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.0.4.tgz#cf4cc407558b3474d4ba8be1a2cd3b6ce713101b"
-  dependencies:
-    css-color-keywords "^1.0.0"
-    fbjs "^0.8.5"
-    postcss-value-parser "^3.3.0"
-
 css-what@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
@@ -2844,7 +2825,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.16, fbjs@^0.8.5, fbjs@^0.8.9:
+fbjs@^0.8.16:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -3380,10 +3361,6 @@ hoek@4.x.x:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d"
 
-hoist-non-react-statics@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb"
-
 hoist-non-react-statics@^2.3.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz#343db84c6018c650778898240135a1420ee22ce0"
@@ -3733,10 +3710,6 @@ is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
 
-is-function@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
-
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
@@ -3802,12 +3775,6 @@ is-plain-obj@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
 
-is-plain-object@^2.0.1:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
-  dependencies:
-    isobject "^3.0.1"
-
 is-posix-bracket@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
@@ -3896,10 +3863,6 @@ isobject@^2.0.0:
   dependencies:
     isarray "1.0.0"
 
-isobject@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
-
 isomorphic-fetch@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
@@ -5238,10 +5201,6 @@ pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
 
-polished@^1.7.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/polished/-/polished-1.9.0.tgz#76d277d6610dbcb85477dbba1bd1aa8e642741b6"
-
 portfinder@^1.0.9:
   version "1.0.13"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -6730,24 +6689,6 @@ style-loader@0.19.0:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
 
-styled-components@^2.1.0:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-2.2.3.tgz#154575c269880c840f903f580287dab155cf684c"
-  dependencies:
-    buffer "^5.0.3"
-    css-to-react-native "^2.0.3"
-    fbjs "^0.8.9"
-    hoist-non-react-statics "^1.2.0"
-    is-function "^1.0.1"
-    is-plain-object "^2.0.1"
-    prop-types "^15.5.4"
-    stylis "3.x"
-    supports-color "^3.2.3"
-
-stylis@3.x:
-  version "3.4.3"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.3.tgz#875bd0db3db37bb6de08f89275fc38ee2e32ee75"
-
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"