Upgrade packages

src/components/App.js

@@ -2,7 +2,7 @@ import React, { Component } from "react"
 import { Router } from "@reach/router"
 import { compose } from "recompose"
 import styled from "@emotion/styled"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { SIZES } from "styles/constants"
 

src/components/Footer.js

@@ -2,7 +2,7 @@ import React from "react"
 import { Link } from "gatsby"
 import { css } from "@emotion/core"
 import styled from "@emotion/styled"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import Logo from "components/Logo"
 

src/components/Icon.js

@@ -21,7 +21,7 @@ import {
   Sun,
   User,
 } from "react-feather"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 const IconBase = styled.div`
   display: flex;

src/components/Layout.js

@@ -3,7 +3,7 @@ import { Helmet } from "react-helmet"
 import { Global, css } from "@emotion/core"
 import styled from "@emotion/styled"
 
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 const Layout = ({ children, theme }) => (
   <>

src/components/Navbar.js

@@ -5,7 +5,7 @@ import styled from "@emotion/styled"
 /** @jsx jsx */
 import { jsx } from "@emotion/core"
 import { compose } from "recompose"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { SIZES } from "styles/constants"
 import { todayUrl, yearUrl } from "utils/date"

src/components/ResendNotice.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 { withFirebase } from "components/firebase"

src/components/Seek.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 Icon from "components/Icon"
 import { H1 } from "components/elements"

src/components/SignOut.js

@@ -1,6 +1,6 @@
 import React from "react"
 import { compose } from "recompose"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { Button } from "components/elements"
 

src/components/elements.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 import { Link } from "gatsby"
 import styled from "@emotion/styled"
 

src/components/firebase/fire.js

@@ -6,11 +6,12 @@ import "firebase/firestore"
 // the prefix GATSBY_ is necessary here
 const config = {
   apiKey: process.env.GATSBY_FIREBASE_API_KEY,
-  authDomain: process.env.GATSBY_DEV_AUTH_DOMAIN,
-  databaseURL: process.env.GATSBY_DEV_DATABASE_URL,
-  projectId: process.env.GATSBY_DEV_PROJECT_ID,
-  storageBucket: process.env.GATSBY_DEV_STORAGE_BUCKET,
-  messagingSenderId: process.env.GATSBY_DEV_MESSAGING_SENDER_ID,
+  authDomain: process.env.GATSBY_AUTH_DOMAIN,
+  databaseURL: process.env.GATSBY_DATABASE_URL,
+  projectId: process.env.GATSBY_PROJECT_ID,
+  storageBucket: process.env.GATSBY_STORAGE_BUCKET,
+  messagingSenderId: process.env.GATSBY_MESSAGING_SENDER_ID,
+  appId: process.env.GATSBY_APP_ID,
 }
 
 class Firebase {

src/pages/[...].js

@@ -8,8 +8,9 @@ import Layout from "components/Layout"
    Context providers are moved to gatsby-browser.js
    to wrap the root element with necessary providers
    and context */
-export default () => (
+const app = () => (
   <Layout>
     <App />
   </Layout>
 )
+export default app;

src/pages/index.js

@@ -7,7 +7,7 @@ import Container from "components/container"
 // the landing page is generated like other Gatsby pages
 // other unprotected routes like /login, /privacy, etc
 // are completely server side rendered by gatsby build
-export default () => (
+const index = () => (
   <Layout>
     <SimpleNavbar />
     <Container>
@@ -15,3 +15,4 @@ export default () => (
     </Container>
   </Layout>
 )
+export default index

src/pages/login.js

@@ -3,7 +3,7 @@ import { navigate, Link } from "gatsby"
 import styled from "@emotion/styled"
 import { compose } from "recompose"
 import { format } from "date-fns"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { SimpleNavbar } from "components/Navbar"
 import { Input, Button, P } from "components/elements"
@@ -108,5 +108,3 @@ class LoginFormBase extends Component {
 const LoginForm = compose(withTheme)(LoginFormBase)
 
 export default withTheme(LoginPage)
-
-export { LoginForm }

src/pages/privacy.js

@@ -4,7 +4,7 @@ import { SimpleH1, SimpleH2, P, Em } from "components/elements"
 import Layout from "components/Layout"
 import Container from "components/container"
 import { SimpleNavbar } from "components/Navbar"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 const Terms = ({ theme }) => (
   <Layout>

src/pages/register.js

@@ -2,7 +2,7 @@ import React, { Component } from "react"
 import styled from "@emotion/styled"
 import { navigate, Link } from "gatsby"
 import { compose } from "recompose"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { SimpleNavbar } from "components/Navbar"
 import { Input, Button, P } from "components/elements"
@@ -151,5 +151,3 @@ class RegisterFormBase extends Component {
 const RegisterForm = compose(withTheme)(RegisterFormBase)
 
 export default withTheme(RegisterPage)
-
-export { RegisterForm }

src/pages/resetpassword.js

@@ -3,7 +3,7 @@ import { navigate, Link } from "gatsby"
 import styled from "@emotion/styled"
 import { compose } from "recompose"
 import { format } from "date-fns"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 import { SimpleNavbar } from "components/Navbar"
 import { Input, Button, P } from "components/elements"
@@ -99,5 +99,3 @@ class LoginFormBase extends Component {
 const LoginForm = compose(withTheme)(LoginFormBase)
 
 export default withTheme(LoginPage)
-
-export { LoginForm }

src/pages/terms.js

@@ -4,7 +4,7 @@ import { SimpleH1, SimpleH2, P, Em } from "components/elements"
 import Layout from "components/Layout"
 import Container from "components/container"
 import { SimpleNavbar } from "components/Navbar"
-import { withTheme } from "emotion-theming"
+import { withTheme } from "@emotion/react"
 
 const Terms = ({ theme }) => (
   <Layout>

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"