chore: migrate from styled-components to emotion

src/components/button.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.button`
   background-color: transparent;

src/components/card.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link as GatsbyLink } from "gatsby";
 import Img from "gatsby-image";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.div`
   display: flex;

src/components/content.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.div`
   transform: ${props =>

src/components/custom-slick.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import Slick from "react-slick";
-import styled, { css } from "styled-components";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 import LeftArrow from "../icons/left-arrow.svg";
 import RightArrow from "../icons/right-arrow.svg";
 import "slick-carousel/slick/slick.css";

src/components/footer.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.footer`
   background-color: var(--color-white);

src/components/header-logo.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
-import styled, { css } from "styled-components";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 import LogoArrows from "../icons/logo-arrows.svg";
 
 const Container = styled.div`

src/components/header.js

@@ -1,6 +1,6 @@
 import React from "react";
 import Img from "gatsby-image";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.header`
   position: relative;
@@ -29,7 +29,7 @@ export default function Header({ image, children }) {
 /*
 
 import React, { useState } from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import MenuButton from "./menu-button";
 import Nav from "./nav";
 

src/components/icon-with-content.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import { Icon } from "./";
 
 const Container = styled.div`

src/components/icon.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.span`
   display: inline-block;

src/components/input-text.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.div`
   max-width: 320px;

src/components/link.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import { Link as GatsbyLink } from "gatsby";
 
 const StyledLink = styled.a`

src/components/menu-button.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Container = styled.button`
   position: relative;

src/components/nav-item.js

@@ -1,5 +1,6 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 import NavLink from "./nav-link";
 
 const SubList = styled.ul`

src/components/nav-link.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link as GatsbyLink } from "gatsby";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 
 const Link = styled(GatsbyLink)`
   display: inline-block;

src/components/nav.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "gatsby";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import NavItem from "./nav-item";
 import MenuButton from "./menu-button";
 import LogoArrows from "../icons/logo-arrows.svg";

src/components/review-summary.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled from "styled-components";
+import styled from "@emotion/styled";
 import Text from "./text";
 import RatedPeople from "../icons/rated-people.svg";
 import Bark from "../icons/bark.svg";

src/components/section.js

@@ -1,5 +1,6 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 
 const Container = styled.div`
   padding: var(--spacing-y-lg) var(--spacing-x-sm);

src/components/text.js

@@ -1,5 +1,6 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 
 const StyledText = styled.p`
   margin-bottom: var(--spacing-y-xs);

src/layout.js

@@ -2,12 +2,12 @@ import React, { useState } from "react";
 import { useStaticQuery, graphql } from "gatsby";
 import { Helmet } from "react-helmet";
 import { Footer, Nav } from "./components";
-import { createGlobalStyle } from "styled-components";
+import { css, Global } from "@emotion/react";
 import "@fontsource/cooper-hewitt/400.css";
 import "@fontsource/cooper-hewitt/400-italic.css";
 import "@fontsource/cooper-hewitt/700.css";
 
-const GlobalStyle = createGlobalStyle`
+const GlobalStyles = css`
   :root {
     --theme-max-width: 960px;
     --theme-color-primary: #9c0905;
@@ -66,12 +66,13 @@ const GlobalStyle = createGlobalStyle`
   body {
     box-sizing: border-box;
     margin: 0;
-    font-family: 'Cooper Hewitt', sans-serif; 
+    font-family: "Cooper Hewitt", sans-serif;
     overflow-x: hidden;
-    overflow-y: ${props => (props.navOpen ? "hidden" : "auto")};
   }
 
-  *, *:before, *:after {
+  *,
+  *:before,
+  *:after {
     box-sizing: inherit;
   }
 
@@ -108,7 +109,6 @@ export default function Layout({ children }) {
   `);
   const { title, description, keywords, navData } = data.site.siteMetadata;
   const [navOpen, setNavOpen] = useState();
-  const [loaded, setLoaded] = useState();
   return (
     <>
       <main>
@@ -121,17 +121,21 @@ export default function Layout({ children }) {
           htmlAttributes={{
             lang: "en"
           }}
-          onChangeClientState={() => setLoaded(true)}
         />
-        <GlobalStyle navOpen={navOpen} />
-        {loaded && (
-          <>
-            {children}
-            <Footer />
-          </>
-        )}
+        <Global styles={GlobalStyles} />
+        <Global
+          styles={
+            navOpen && {
+              body: {
+                "overflow-y": "hidden"
+              }
+            }
+          }
+        />
+        {children}
+        <Footer />
       </main>
-      {loaded && <Nav data={navData} open={navOpen} setOpen={setNavOpen} />}
+      <Nav data={navData} open={navOpen} setOpen={setNavOpen} />
     </>
   );
 }