Update an old beta project & live to tell the tale

12 files changed, 46 insertions, 46 deletions

diff --git a/src/components/about-entry.js b/src/components/about-entry.js
index 2c55c5f..f5228e0 100644
--- a/src/components/about-entry.js
+++ b/src/components/about-entry.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { css } from 'react-emotion'
+import { css } from '@emotion/core'
 import { margins } from './globals'
 
 const { md, lg } = margins
@@ -15,7 +15,7 @@ const aboutListStyle = css`
 `
 
 export const AboutEntry = ({ header, listItems }) => (
-  <article className={aboutListStyle}>
+  <article css={aboutListStyle}>
     <h2>{header}</h2>
     {listItems ? (
       <ul>
diff --git a/src/components/button.js b/src/components/button.js
index 1b860f3..a80e93d 100644
--- a/src/components/button.js
+++ b/src/components/button.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { css } from 'react-emotion'
+import { css } from '@emotion/core'
 import { Link } from 'gatsby'
 
 import { margins, radius, transitions, colours } from './globals'
@@ -26,7 +26,7 @@ const makeButtonStyle = p =>
 export const Button = p => {
   const buttonStyle = makeButtonStyle(p)
   return (
-    <Link to={p.to} className={buttonStyle} role="button">
+    <Link to={p.to} css={buttonStyle} role="button">
       {p.children}
     </Link>
   )
diff --git a/src/components/container.js b/src/components/container.js
index 4ccd822..df63a42 100644
--- a/src/components/container.js
+++ b/src/components/container.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { css } from 'react-emotion'
+import { css } from '@emotion/core'
 import { breakpoints, margins } from './globals'
 
 const mq = breakpoints
@@ -20,4 +20,4 @@ const containerStyle = css`
   ${mq}
 `
 
-export const Container = p => <div className={containerStyle}>{p.children}</div>
+export const Container = p => <div css={containerStyle}>{p.children}</div>
diff --git a/src/components/font-awesome.js b/src/components/font-awesome.js
index e5d383f..1e555f8 100644
--- a/src/components/font-awesome.js
+++ b/src/components/font-awesome.js
@@ -1,5 +1,5 @@
 import React from 'react'
 
-export const FontAwesome = ({ name }) => (
-  <i className={`fa fa-${name}`} aria-hidden="true" />
+export const FontAwesome = ({ name, css }) => (
+  <i css={`fa fa-${name} ${css || ''}`} aria-hidden="true" />
 )
diff --git a/src/components/header.js b/src/components/header.js
index 6e1c857..c84ef74 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { css } from 'react-emotion'
+import { css } from '@emotion/core'
 import { Link } from 'gatsby'
 import { Nav } from './nav'
 import { Social } from './social'
@@ -23,10 +23,10 @@ const headerLeftStyle = css`
 `
 
 export const Header = p => (
-  <header className={headerStyle}>
-    <div className={headerLeftStyle}>
+  <header css={headerStyle}>
+    <div css={headerLeftStyle}>
       <h1>
-        <Link to="/" className={headerLinkStyle}>
+        <Link to="/" css={headerLinkStyle}>
           {p.siteName}
         </Link>
       </h1>
diff --git a/src/components/nav.js b/src/components/nav.js
index 5aa4b88..26b1373 100644
--- a/src/components/nav.js
+++ b/src/components/nav.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { css } from 'react-emotion'
+import { css } from '@emotion/core'
 import { Link } from 'gatsby'
 import { margins } from './globals'
 
@@ -23,11 +23,11 @@ export const Nav = p => {
     }
   `
   return (
-    <nav className={navStyle}>
+    <nav css={navStyle}>
       {p.links
         ? p.links.map(({ name, link }) => (
             <Link
-              className={linkStyle}
+              css={linkStyle}
               to={link}
               key={link}
               activeStyle={{ borderColor: 'initial' }}
diff --git a/src/components/personal.js b/src/components/personal.js
index 5a08568..b168cbb 100644
--- a/src/components/personal.js
+++ b/src/components/personal.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { css } from 'react-emotion'
+import { css } from '@emotion/core'
 
 import { margins } from './globals'
 
@@ -16,10 +16,10 @@ const taglineStyle = css`
 `
 
 export const Personal = ({ name, email, imgUrl, imgAlt, tagline }) => (
-  <article className={personalStyle}>
+  <article css={personalStyle}>
     {name}
-    <img src={imgUrl} alt={imgAlt} className={photoStyle} />
-    <h3 className={taglineStyle}>{tagline}</h3>
+    <img src={imgUrl} alt={imgAlt} css={photoStyle} />
+    <h3 css={taglineStyle}>{tagline}</h3>
     {email}
   </article>
 )
diff --git a/src/components/project.js b/src/components/project.js
index e92d511..f3385ca 100644
--- a/src/components/project.js
+++ b/src/components/project.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { css } from 'react-emotion'
+import { css } from '@emotion/core'
 
 import { Tag } from './tag'
 import { FontAwesome } from './font-awesome'
@@ -81,34 +81,34 @@ export const Project = p => {
     }
   `
   return (
-    <article className={projectStyle}>
-      <div className={projectHeadingContainerStyle}>
-        <div className={projectTagContainerStyle}>
+    <article css={projectStyle}>
+      <div css={projectHeadingContainerStyle}>
+        <div css={projectTagContainerStyle}>
           <a
-            className={linkStyle}
+            css={linkStyle}
             href={p.url}
             target="_blank"
             rel="noopener noreferrer"
           >
-            <div className={linkIconStyle}>
-              <h2 className={projectHeadingStyle}>{p.name}</h2>
+            <div css={linkIconStyle}>
+              <h2 css={projectHeadingStyle}>{p.name}</h2>
               <FontAwesome name="link" />
             </div>
           </a>
           {p.inProd ? <Tag fontSize="0.8em">In Prod</Tag> : null}
         </div>
-        <p className={dateStyle}>{p.date}</p>
+        <p css={dateStyle}>{p.date}</p>
       </div>
-      <h3 className={projectBriefStyle}>{p.brief}</h3>
-      <div className={projectBlockStyle}>
+      <h3 css={projectBriefStyle}>{p.brief}</h3>
+      <div css={projectBlockStyle}>
         {p.imgUrl ? (
-          <div className={imgContainerStyle}>
-            <img src={p.imgUrl} alt={p.imgAlt} className={imgStyle} />
+          <div css={imgContainerStyle}>
+            <img src={p.imgUrl} alt={p.imgAlt} css={imgStyle} />
           </div>
         ) : null}
         {p.desc ? (
-          <div className={descContainerStyle}>
-            <p className={descStyle}>{p.desc}</p>
+          <div css={descContainerStyle}>
+            <p css={descStyle}>{p.desc}</p>
             {p.links ? p.links : null}
           </div>
         ) : null}
diff --git a/src/components/social.js b/src/components/social.js
index 2298fa0..dec639f 100644
--- a/src/components/social.js
+++ b/src/components/social.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { css } from 'react-emotion'
+import { css } from '@emotion/core'
 import { margins } from './globals'
 
 import { FontAwesome } from './font-awesome'
@@ -15,7 +15,7 @@ export const SocialEntry = p => (
     href={p.href}
     target="_blank"
     rel="noopener noreferrer"
-    className={socialEntryStyle}
+    css={socialEntryStyle}
     role="button"
   >
     <FontAwesome name={p.iconName} />
diff --git a/src/components/splash.js b/src/components/splash.js
index 74e5911..eebc17e 100644
--- a/src/components/splash.js
+++ b/src/components/splash.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { css } from 'react-emotion'
+import { css } from '@emotion/core'
 import { Button } from './button'
 import { colours } from './globals'
 
@@ -29,18 +29,18 @@ const subHeadingStyle = css({
 
 export class Splash extends Component {
   render = () => (
-    <div className={splashStyle}>
+    <div css={splashStyle}>
       <div>
-        <h2 className={headingStyle}>{this.props.heading} </h2>
+        <h2 css={headingStyle}>{this.props.heading} </h2>
         {this.props.subHeadings
           ? this.props.subHeadings.map(subHeading => (
-              <h3 key={subHeading} className={subHeadingStyle}>
+              <h3 key={subHeading} css={subHeadingStyle}>
                 {subHeading}
               </h3>
             ))
           : null}
       </div>
-      <div className={buttonContainer}>
+      <div css={buttonContainer}>
         <Button
           fontSize="1.5em"
           fontWeight="800"
diff --git a/src/components/split-container.js b/src/components/split-container.js
index 651772f..d69c610 100644
--- a/src/components/split-container.js
+++ b/src/components/split-container.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { css } from 'react-emotion'
+import { css } from '@emotion/core'
 
 import { breakpoints } from './globals'
 
@@ -15,5 +15,5 @@ const splitSyle = css`
 `
 
 export const SplitContainer = ({ children }) => (
-  <div className={splitSyle}>{children}</div>
+  <div css={splitSyle}>{children}</div>
 )
diff --git a/src/components/tag.js b/src/components/tag.js
index b9fb884..9b84218 100644
--- a/src/components/tag.js
+++ b/src/components/tag.js
@@ -1,6 +1,6 @@
 import React from 'react'
-import FA from 'react-fontawesome'
-import { css } from 'react-emotion'
+import { FontAwesome } from '../components/font-awesome'
+import { css } from '@emotion/core'
 import { margins, colours } from './globals'
 
 const tagIconStyle = css`
@@ -18,8 +18,8 @@ export const Tag = p => {
     line-height: 1.5em;
   `
   return (
-    <div className={tagStyle}>
-      <FA name="tag" className={tagIconStyle} />
+    <div css={tagStyle}>
+      <FontAwesome name="tag" css={tagIconStyle} />
       {p.children}
     </div>
   )