Switch to theme-ui 0.6! (#108)

components/announcement.js

@@ -1,5 +1,5 @@
 import { Card, Text } from 'theme-ui'
-import { keyframes } from '@emotion/core'
+import { keyframes } from '@emotion/react'
 import Icon from './icon'
 
 const unfold = keyframes({

components/fade-in.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Box } from 'theme-ui'
 import styled from '@emotion/styled'
-import { keyframes } from '@emotion/core'
+import { keyframes } from '@emotion/react'
 
 const fadeIn = keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })
 

components/flag.js

@@ -1,6 +1,6 @@
 import theme from '../lib/theme'
 import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/core'
+import { css, keyframes } from '@emotion/react'
 import Link from 'next/link'
 
 const waveFlag = keyframes`

components/nav.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import styled from '@emotion/styled'
-import { css, keyframes } from '@emotion/core'
+import { css, keyframes } from '@emotion/react'
 import { Box, Container, Flex, Link, Text } from 'theme-ui'
 import theme from '../lib/theme'
 import Icon from './icon'

components/slide-down.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Box } from 'theme-ui'
 import styled from '@emotion/styled'
-import { keyframes } from '@emotion/core'
+import { keyframes } from '@emotion/react'
 
 const slideDown = keyframes({
   from: { transform: 'translateY(-100%)', opacity: 0 },

components/slide-up.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Box } from 'theme-ui'
 import styled from '@emotion/styled'
-import { keyframes } from '@emotion/core'
+import { keyframes } from '@emotion/react'
 
 const slideUp = keyframes({
   from: { transform: 'translateY(100%)', opacity: 0 },

components/sparkles.js

@@ -1,7 +1,7 @@
 // Full credit to https://joshwcomeau.com/react/animated-sparkles-in-react/
 import { useState } from 'react'
 import styled from '@emotion/styled'
-import { keyframes } from '@emotion/core'
+import { keyframes } from '@emotion/react'
 import { range, sample, random } from 'lodash'
 import { Text } from 'theme-ui'
 import theme from '@hackclub/theme'

package.json

@@ -10,6 +10,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@emotion/react": "^11.1.5",
     "@hackclub/icons": "^0.0.9",
     "@hackclub/meta": "1.1.0",
     "@hackclub/theme": "^0.3.1",
@@ -26,6 +27,6 @@
     "react-reveal": "^1.2.2",
     "react-scrolllock": "^5.0.1",
     "react-use-websocket": "2.5.0",
-    "theme-ui": "^0.3.1"
+    "theme-ui": "^0.6"
   }
 }

pages/404.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from '@emotion/styled'
-import { keyframes } from '@emotion/core'
+import { keyframes } from '@emotion/react'
 import { Heading, Container, Button, Text } from 'theme-ui'
 import NextLink from 'next/link'
 import Head from 'next/head'

pages/index.js

@@ -10,7 +10,7 @@ import {
   Text
 } from 'theme-ui'
 import styled from '@emotion/styled'
-import { keyframes } from '@emotion/core'
+import { keyframes } from '@emotion/react'
 import { Slide } from 'react-reveal'
 import NextLink from 'next/link'
 import Head from 'next/head'

pages/night.js

@@ -17,7 +17,7 @@ import SlideDown from '../components/slide-down'
 import FadeIn from '../components/fade-in'
 import Icon from '../components/icon'
 import Footer from '../components/footer'
-import { keyframes } from '@emotion/core'
+import { keyframes } from '@emotion/react'
 
 const floating = keyframes`
   from {

pages/ship.js

@@ -22,7 +22,7 @@ import Posts from '../components/posts'
 import Footer from '../components/footer'
 import { timeSince } from '../lib/dates'
 import { orderBy, filter, take, map, uniq, reverse } from 'lodash'
-import { keyframes } from '@emotion/core'
+import { keyframes } from '@emotion/react'
 
 const ShipBadge = props => (
   <Badge

pages/slack.js

@@ -9,7 +9,7 @@ import {
   Link,
   Text
 } from 'theme-ui'
-import { keyframes } from '@emotion/core'
+import { keyframes } from '@emotion/react'
 import Head from 'next/head'
 import NextLink from 'next/link'
 import Meta from '@hackclub/meta'