Upgrade packages

src/routes/Day.js

@@ -5,7 +5,7 @@ import styled from "@emotion/styled"
 /** @jsx jsx */
 import { jsx, css, keyframes } from "@emotion/core"
 import { compose } from "recompose"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { withFirebase } from "components/firebase"
 import { withAuthentication } from "components/session"

src/routes/Search.js

@@ -3,7 +3,7 @@ import { Component } from "react"
 import { jsx, css, keyframes } from "@emotion/core"
 import styled from "@emotion/styled"
 import { compose } from "recompose"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 import { BeatLoader } from "react-spinners"
 
 import { AppLink as Link } from "components/elements"

src/routes/Start.js

@@ -1,9 +1,9 @@
 import React, { Component } from "react"
 import { Helmet } from "react-helmet"
 import { Link, StaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
+import { GatsbyImage } from "gatsby-plugin-image"
 import styled from "@emotion/styled"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { SIZES } from "styles/constants"
 import { Button, P } from "components/elements"
@@ -116,42 +116,42 @@ class Start extends Component {
                   relativePath: { eq: "landing-graphic-light.png" }
                 ) {
                   childImageSharp {
-                    fluid(maxWidth: 320) {
-                      ...GatsbyImageSharpFluid
-                    }
+                    gatsbyImageData(layout: CONSTRAINED)
                   }
                 }
                 landingGraphicDark: file(
                   relativePath: { eq: "landing-graphic-dark.png" }
                 ) {
                   childImageSharp {
-                    fluid(maxWidth: 320) {
-                      ...GatsbyImageSharpFluid
-                    }
+                    gatsbyImageData(layout: CONSTRAINED)
                   }
                 }
               }
             `}
             render={data => {
               return theme.name === "LIGHT" ? (
-                <Img
+                <GatsbyImage
+                  alt="splash"
                   style={{
                     maxWidth: 320,
                     width: "100%",
                     maxHeight: 350,
                     height: "100%",
                   }}
-                  fluid={data.landingGraphicLight.childImageSharp.fluid}
+                  image={data.landingGraphicLight.childImageSharp.gatsbyImageData}
+                  layout="constrained"
                 />
               ) : (
-                <Img
+                <GatsbyImage
+                  alt="splash"
                   style={{
                     maxWidth: 320,
                     width: "100%",
                     maxHeight: 350,
                     height: "100%",
                   }}
-                  fluid={data.landingGraphicDark.childImageSharp.fluid}
+                  image={data.landingGraphicDark.childImageSharp.gatsbyImageData}
+                  layout="constrained"
                 />
               )
             }}
@@ -169,8 +169,8 @@ class Start extends Component {
           of the things you don't:
         </P>
         <FeatureGrid>
-          {features.map(feature => (
-            <FeatureRow>
+          {features.map((feature, index) => (
+            <FeatureRow key={index}>
               <div
                 style={{
                   display: "flex",

src/routes/User.js

@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 import { compose } from "recompose"
 import { format } from "date-fns"
 import { BeatLoader } from "react-spinners"

src/routes/Welcome.js

@@ -2,7 +2,7 @@ import React, { Component } from "react"
 import { Helmet } from "react-helmet"
 import { Link } from "gatsby"
 import styled from "@emotion/styled"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 import { getDayOfYear } from "date-fns"
 
 import { SIZES } from "styles/constants"

src/routes/Year.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react"
 import { addYears, subYears, format, isThisYear, getMonth } from "date-fns"
 import styled from "@emotion/styled"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { AppLink as Link } from "components/elements"
 import Seek from "components/Seek"