diff --git a/gatsby-config.js b/gatsby-config.js
index 26ddb30..4d6c306 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -98,6 +98,7 @@ module.exports = {
},
`gatsby-plugin-react-helmet`,
`gatsby-transformer-sharp`,
- `gatsby-plugin-sharp`
+ `gatsby-plugin-sharp`,
+ `gatsby-plugin-emotion`
]
};
diff --git a/package-lock.json b/package-lock.json
index ec9e45d..063b889 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1134,29 +1134,151 @@
"to-fast-properties": "^2.0.0"
}
},
- "@emotion/is-prop-valid": {
- "version": "0.8.8",
- "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
- "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+ "@emotion/babel-plugin": {
+ "version": "11.1.2",
+ "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.1.2.tgz",
+ "integrity": "sha512-Nz1k7b11dWw8Nw4Z1R99A9mlB6C6rRsCtZnwNUOj4NsoZdrO2f2A/83ST7htJORD5zpOiLKY59aJN23092949w==",
"requires": {
- "@emotion/memoize": "0.7.4"
+ "@babel/helper-module-imports": "^7.7.0",
+ "@babel/plugin-syntax-jsx": "^7.12.1",
+ "@babel/runtime": "^7.7.2",
+ "@emotion/hash": "^0.8.0",
+ "@emotion/memoize": "^0.7.5",
+ "@emotion/serialize": "^1.0.0",
+ "babel-plugin-macros": "^2.6.1",
+ "convert-source-map": "^1.5.0",
+ "escape-string-regexp": "^4.0.0",
+ "find-root": "^1.1.0",
+ "source-map": "^0.5.7",
+ "stylis": "^4.0.3"
+ },
+ "dependencies": {
+ "@emotion/memoize": {
+ "version": "0.7.5",
+ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+ "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+ },
+ "escape-string-regexp": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+ "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+ },
+ "source-map": {
+ "version": "0.5.7",
+ "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+ "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+ }
}
},
+ "@emotion/babel-plugin-jsx-pragmatic": {
+ "version": "0.1.5",
+ "resolved": "https://registry.npmjs.org/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.1.5.tgz",
+ "integrity": "sha512-y+3AJ0SItMDaAgGPVkQBC/S/BaqaPACkQ6MyCI2CUlrjTxKttTVfD3TMtcs7vLEcLxqzZ1xiG0vzwCXjhopawQ==",
+ "requires": {
+ "@babel/plugin-syntax-jsx": "^7.2.0"
+ }
+ },
+ "@emotion/babel-preset-css-prop": {
+ "version": "11.0.0",
+ "resolved": "https://registry.npmjs.org/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-11.0.0.tgz",
+ "integrity": "sha512-E7z3jMf1OyThGpp3ngYGxOSGX5AdoSQTuqM9QgJNAHFh3Fi8N5CbWx6g+IdySJ8bjPiMgFQsIeEhkyy+4mDpCQ==",
+ "requires": {
+ "@babel/plugin-transform-react-jsx": "^7.12.1",
+ "@babel/runtime": "^7.7.2",
+ "@emotion/babel-plugin": "^11.0.0",
+ "@emotion/babel-plugin-jsx-pragmatic": "^0.1.5"
+ }
+ },
+ "@emotion/cache": {
+ "version": "11.1.3",
+ "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.1.3.tgz",
+ "integrity": "sha512-n4OWinUPJVaP6fXxWZD9OUeQ0lY7DvtmtSuqtRWT0Ofo/sBLCVSgb4/Oa0Q5eFxcwablRKjUXqXtNZVyEwCAuA==",
+ "requires": {
+ "@emotion/memoize": "^0.7.4",
+ "@emotion/sheet": "^1.0.0",
+ "@emotion/utils": "^1.0.0",
+ "@emotion/weak-memoize": "^0.2.5",
+ "stylis": "^4.0.3"
+ }
+ },
+ "@emotion/hash": {
+ "version": "0.8.0",
+ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+ "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+ },
"@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
},
- "@emotion/stylis": {
- "version": "0.8.5",
- "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
- "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+ "@emotion/react": {
+ "version": "11.1.4",
+ "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.1.4.tgz",
+ "integrity": "sha512-9gkhrW8UjV4IGRnEe4/aGPkUxoGS23aD9Vu6JCGfEDyBYL+nGkkRBoMFGAzCT9qFdyUvQp4UUtErbKWxq/JS4A==",
+ "requires": {
+ "@babel/runtime": "^7.7.2",
+ "@emotion/cache": "^11.1.3",
+ "@emotion/serialize": "^1.0.0",
+ "@emotion/sheet": "^1.0.1",
+ "@emotion/utils": "^1.0.0",
+ "@emotion/weak-memoize": "^0.2.5",
+ "hoist-non-react-statics": "^3.3.1"
+ }
+ },
+ "@emotion/serialize": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.0.tgz",
+ "integrity": "sha512-zt1gm4rhdo5Sry8QpCOpopIUIKU+mUSpV9WNmFILUraatm5dttNEaYzUWWSboSMUE6PtN2j1cAsuvcugfdI3mw==",
+ "requires": {
+ "@emotion/hash": "^0.8.0",
+ "@emotion/memoize": "^0.7.4",
+ "@emotion/unitless": "^0.7.5",
+ "@emotion/utils": "^1.0.0",
+ "csstype": "^3.0.2"
+ }
+ },
+ "@emotion/sheet": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz",
+ "integrity": "sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g=="
+ },
+ "@emotion/styled": {
+ "version": "11.0.0",
+ "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.0.0.tgz",
+ "integrity": "sha512-498laccxJlBiJqrr2r/fx9q+Pr55D0URP2UyOkoSGLjevb8LLAFWueqthsQ5XijE66iGo7y3rzzEYdA7CHmZEQ==",
+ "requires": {
+ "@babel/runtime": "^7.7.2",
+ "@emotion/babel-plugin": "^11.0.0",
+ "@emotion/is-prop-valid": "^1.0.0",
+ "@emotion/serialize": "^1.0.0",
+ "@emotion/utils": "^1.0.0"
+ },
+ "dependencies": {
+ "@emotion/is-prop-valid": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.0.0.tgz",
+ "integrity": "sha512-G5X0t7eR9pkhUvAY32QS3lToP9JyNF8It5CcmMvbWjmC9/Yq7IhevaKqxl+me2BKR93iTPiL/h3En1ZX/1G3PQ==",
+ "requires": {
+ "@emotion/memoize": "^0.7.4"
+ }
+ }
+ }
},
"@emotion/unitless": {
"version": "0.7.5",
"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
"integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
},
+ "@emotion/utils": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+ "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
+ },
+ "@emotion/weak-memoize": {
+ "version": "0.2.5",
+ "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+ "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+ },
"@endemolshinegroup/cosmiconfig-typescript-loader": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@endemolshinegroup/cosmiconfig-typescript-loader/-/cosmiconfig-typescript-loader-3.0.2.tgz",
@@ -3410,22 +3532,6 @@
"resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.13.0.tgz",
"integrity": "sha512-6sL3JVKDa3OjXtmBYrr467BnQeUjNI7p2dy+aBwbB8WqChHLJOFh5+lxfzC0z/7hBehqmWpBV7xHfZdIP1lAzQ=="
},
- "babel-plugin-styled-components": {
- "version": "1.12.0",
- "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.12.0.tgz",
- "integrity": "sha512-FEiD7l5ZABdJPpLssKXjBUJMYqzbcNzBowfXDCdJhOpbhWiewapUaY+LZGT8R4Jg2TwOjGjG4RKeyrO5p9sBkA==",
- "requires": {
- "@babel/helper-annotate-as-pure": "^7.0.0",
- "@babel/helper-module-imports": "^7.0.0",
- "babel-plugin-syntax-jsx": "^6.18.0",
- "lodash": "^4.17.11"
- }
- },
- "babel-plugin-syntax-jsx": {
- "version": "6.18.0",
- "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
- "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
- },
"babel-plugin-transform-react-remove-prop-types": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -4445,11 +4551,6 @@
}
}
},
- "camelize": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
- "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
- },
"caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -5410,11 +5511,6 @@
}
}
},
- "css-color-keywords": {
- "version": "1.0.0",
- "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
- "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
- },
"css-color-names": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -5539,16 +5635,6 @@
"fastparse": "^1.1.2"
}
},
- "css-to-react-native": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
- "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
- "requires": {
- "camelize": "^1.0.0",
- "css-color-keywords": "^1.0.0",
- "postcss-value-parser": "^4.0.2"
- }
- },
"css-tree": {
"version": "1.0.0-alpha.37",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -7809,6 +7895,11 @@
"pkg-dir": "^4.1.0"
}
},
+ "find-root": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+ "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+ },
"find-up": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -8735,6 +8826,15 @@
"micromatch": "^4.0.2"
}
},
+ "gatsby-plugin-emotion": {
+ "version": "5.3.0",
+ "resolved": "https://registry.npmjs.org/gatsby-plugin-emotion/-/gatsby-plugin-emotion-5.3.0.tgz",
+ "integrity": "sha512-zDbEOb5MvL4ve1OTZCtgVuEJUoyBgqJBByPO+xq87TsuKPJyzE2aRD7mtCcwivh4Yo7KBl1X9bl3EiOm5m50IA==",
+ "requires": {
+ "@babel/runtime": "^7.11.2",
+ "@emotion/babel-preset-css-prop": "^11.0.0"
+ }
+ },
"gatsby-plugin-manifest": {
"version": "2.10.0",
"resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.10.0.tgz",
@@ -17401,38 +17501,6 @@
"inline-style-parser": "0.1.1"
}
},
- "styled-components": {
- "version": "5.2.1",
- "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz",
- "integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==",
- "requires": {
- "@babel/helper-module-imports": "^7.0.0",
- "@babel/traverse": "^7.4.5",
- "@emotion/is-prop-valid": "^0.8.8",
- "@emotion/stylis": "^0.8.4",
- "@emotion/unitless": "^0.7.4",
- "babel-plugin-styled-components": ">= 1",
- "css-to-react-native": "^3.0.0",
- "hoist-non-react-statics": "^3.0.0",
- "shallowequal": "^1.1.0",
- "supports-color": "^5.5.0"
- },
- "dependencies": {
- "has-flag": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
- "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
- },
- "supports-color": {
- "version": "5.5.0",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
- "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
- "requires": {
- "has-flag": "^3.0.0"
- }
- }
- }
- },
"stylehacks": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -17455,6 +17523,11 @@
}
}
},
+ "stylis": {
+ "version": "4.0.6",
+ "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.6.tgz",
+ "integrity": "sha512-1igcUEmYFBEO14uQHAJhCUelTR5jPztfdVKrYxRnDa5D5Dn3w0NxXupJNPr/VV/yRfZYEAco8sTIRZzH3sRYKg=="
+ },
"sudo-prompt": {
"version": "8.2.5",
"resolved": "https://registry.npmjs.org/sudo-prompt/-/sudo-prompt-8.2.5.tgz",
diff --git a/package.json b/package.json
index e046e22..3fcb876 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,12 @@
]
},
"dependencies": {
+ "@emotion/react": "^11.1.4",
+ "@emotion/styled": "^11.0.0",
"@fontsource/cooper-hewitt": "^4.1.0",
"gatsby": "^2.29.3",
"gatsby-image": "^2.8.0",
+ "gatsby-plugin-emotion": "^5.3.0",
"gatsby-plugin-manifest": "^2.10.0",
"gatsby-plugin-react-helmet": "^3.7.0",
"gatsby-plugin-react-svg": "^3.0.0",
@@ -30,8 +33,7 @@
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-slick": "^0.27.13",
- "slick-carousel": "^1.8.1",
- "styled-components": "^5.2.1"
+ "slick-carousel": "^1.8.1"
},
"devDependencies": {
"eslint": "^7.17.0",
diff --git a/src/components/button.js b/src/components/button.js
index 4f8607e..e7756a2 100644
--- a/src/components/button.js
+++ b/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;
diff --git a/src/components/card.js b/src/components/card.js
index 89d4434..a638da3 100644
--- a/src/components/card.js
+++ b/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;
diff --git a/src/components/content.js b/src/components/content.js
index ad28bb5..841a562 100644
--- a/src/components/content.js
+++ b/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 =>
diff --git a/src/components/custom-slick.js b/src/components/custom-slick.js
index 043bbc5..398f3df 100644
--- a/src/components/custom-slick.js
+++ b/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";
diff --git a/src/components/footer.js b/src/components/footer.js
index c3e37e8..ea611c3 100644
--- a/src/components/footer.js
+++ b/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);
diff --git a/src/components/header-logo.js b/src/components/header-logo.js
index e7e4a54..c8e4fee 100644
--- a/src/components/header-logo.js
+++ b/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`
diff --git a/src/components/header.js b/src/components/header.js
index 330fce2..34c0b7a 100644
--- a/src/components/header.js
+++ b/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";
diff --git a/src/components/icon-with-content.js b/src/components/icon-with-content.js
index c735940..29a334f 100644
--- a/src/components/icon-with-content.js
+++ b/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`
diff --git a/src/components/icon.js b/src/components/icon.js
index eab38cc..443b6e1 100644
--- a/src/components/icon.js
+++ b/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;
diff --git a/src/components/input-text.js b/src/components/input-text.js
index 79c3757..c833cdf 100644
--- a/src/components/input-text.js
+++ b/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;
diff --git a/src/components/link.js b/src/components/link.js
index 24e2099..9fe6a4d 100644
--- a/src/components/link.js
+++ b/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`
diff --git a/src/components/menu-button.js b/src/components/menu-button.js
index bb2b7b6..5de5108 100644
--- a/src/components/menu-button.js
+++ b/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;
diff --git a/src/components/nav-item.js b/src/components/nav-item.js
index fcede2d..0a5b4c8 100644
--- a/src/components/nav-item.js
+++ b/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`
diff --git a/src/components/nav-link.js b/src/components/nav-link.js
index 6718178..ba7758d 100644
--- a/src/components/nav-link.js
+++ b/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;
diff --git a/src/components/nav.js b/src/components/nav.js
index acf9009..ecc070c 100644
--- a/src/components/nav.js
+++ b/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";
diff --git a/src/components/review-summary.js b/src/components/review-summary.js
index 11f0f0b..64fc580 100644
--- a/src/components/review-summary.js
+++ b/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";
diff --git a/src/components/section.js b/src/components/section.js
index 5391166..b435bc0 100644
--- a/src/components/section.js
+++ b/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);
diff --git a/src/components/text.js b/src/components/text.js
index f673a07..13cc203 100644
--- a/src/components/text.js
+++ b/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);
diff --git a/src/layout.js b/src/layout.js
index f244294..0c57d12 100644
--- a/src/layout.js
+++ b/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 (
<>
@@ -121,17 +121,21 @@ export default function Layout({ children }) {
htmlAttributes={{
lang: "en"
}}
- onChangeClientState={() => setLoaded(true)}
/>
-
- {loaded && (
- <>
- {children}
-
-
- )}
+
+
+ {children}
+
- {loaded && }
+
);
}