Implement emotion & chakra

docs/best-practices.md

@@ -111,7 +111,7 @@ export default ComponentName
   ```tsx
   // Example of styling syntax using styled-components
 
-  import styled from "styled-components"
+  import styled from "@emotion/styled"
 
   const GenericButton = styled.div`
     width: 200px;
@@ -135,7 +135,7 @@ export default ComponentName
   ```tsx
   // Example of theme.ts usage
 
-  import styled from "styled-components"
+  import styled from "@emotion/styled"
 
   const Container = styled.div`
     background: ${(props) => props.theme.colors.background};

gatsby-config.ts

@@ -185,7 +185,7 @@ const config: GatsbyConfig = {
       },
     },
     // CSS in JS
-    `gatsby-plugin-styled-components`,
+    `gatsby-plugin-emotion`,
     // Source assets
     {
       resolve: `gatsby-source-filesystem`,

package.json

@@ -9,13 +9,14 @@
   "private": false,
   "dependencies": {
     "@apollo/client": "^3.3.13",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@formatjs/intl-locale": "^2.4.14",
     "@formatjs/intl-numberformat": "^6.1.4",
     "@mdx-js/mdx": "^1.6.5",
     "@mdx-js/react": "^1.6.5",
     "algoliasearch": "^4.3.0",
     "axios": "^0.21.2",
-    "babel-plugin-styled-components": "^1.10.7",
     "browser-lang": "^0.1.0",
     "browserslist": "^4.21.0",
     "clipboard": "^2.0.6",
@@ -26,6 +27,7 @@
     "focus-trap-react": "^8.11.2",
     "framer-motion": "^4.1.3",
     "gatsby": "^4.15.0",
+    "gatsby-plugin-emotion": "^7.19.0",
     "gatsby-plugin-gatsby-cloud": "^4.3.0",
     "gatsby-plugin-image": "^2.0.0",
     "gatsby-plugin-manifest": "^4.10.1",
@@ -37,7 +39,6 @@
     "gatsby-plugin-react-svg": "^3.1.0",
     "gatsby-plugin-sharp": "^4.10.0",
     "gatsby-plugin-sitemap": "^5.0.0",
-    "gatsby-plugin-styled-components": "^5.0.0",
     "gatsby-remark-autolink-headers": "^5.0.0",
     "gatsby-remark-copy-linked-files": "^5.0.0",
     "gatsby-remark-images": "^6.0.0",
@@ -67,7 +68,6 @@
     "react-intl": "^3.12.1",
     "react-select": "^4.3.0",
     "recharts": "^2.1.9",
-    "styled-components": "^5.1.1",
     "styled-system": "^5.1.5",
     "unist-util-visit-parents": "^2.1.2"
   },
@@ -80,7 +80,6 @@
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/react-instantsearch-dom": "^6.12.3",
-    "@types/styled-components": "^5.1.25",
     "@types/styled-system": "^5.1.15",
     "babel-preset-gatsby": "^2.14.0",
     "github-slugger": "^1.3.0",

src/components/Accordion.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components"
+import styled from "@emotion/styled"
 // TODO add motion animation
 // import { motion } from "framer-motion"
 import { FakeLink } from "./SharedStyledComponents"

src/components/ActionCard.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import Link from "./Link"

src/components/AdoptionChart.tsx

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

src/components/AssetDownload.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage, getImage, getSrc } from "gatsby-plugin-image"
 
 import Translation from "../components/Translation"

src/components/BannerGrid/index.tsx

@@ -1,4 +1,4 @@
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 export const Banner = styled.div`
   width: 100%;

src/components/BannerNotification.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 export interface IStyledBanner {
   shouldShow: boolean

src/components/BeaconChainActions.tsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 import { getImage } from "gatsby-plugin-image"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 
 import { translateMessageId } from "../utils/translations"

src/components/BoxGrid.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Emoji from "./Emoji"
 
 export interface IBoxItem {

src/components/Breadcrumbs.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 
 import Link from "./Link"

src/components/BugBountyCards.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { TranslationKey } from "../utils/translations"
 import ButtonLink from "./ButtonLink"
 

src/components/BugBountyPoints.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, useState, useEffect } from "react"
-import { ThemeContext } from "styled-components"
+import { useTheme } from "@emotion/react"
 import { useStaticQuery, graphql } from "gatsby"
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import axios from "axios"
 
 import Emoji from "./Emoji"
@@ -103,8 +103,8 @@ const BugBountyPoints: React.FC<IProps> = () => {
     currentDAIPriceUSD: 1,
     hasError: false,
   })
-  const themeContext = useContext(ThemeContext)
-  const isDarkTheme = themeContext.isDark
+  const theme = useTheme()
+  const isDarkTheme = theme.isDark
 
   useEffect(() => {
     axios

src/components/ButtonDropdown.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, { useState, createRef } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { useIntl } from "react-intl"
 import { motion } from "framer-motion"
 

src/components/ButtonLink.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { margin, MarginProps } from "styled-system"
 
 import { scrollIntoView } from "../utils/scrollIntoView"

src/components/CallToContribute.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Link from "./Link"
 import ButtonLink from "./ButtonLink"
 import Icon from "./Icon"

src/components/Callout.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 import Translation from "./Translation"
 import { TranslationKey } from "../utils/translations"

src/components/CalloutBanner.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import Translation from "./Translation"

src/components/Card.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Emoji from "./Emoji"
 
 const StyledCard = styled.div`

src/components/CardList.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import Link from "./Link"

src/components/Checkbox.tsx

@@ -1,12 +1,12 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 const CheckboxContainer = styled.div`
   display: inline-block;
   vertical-align: middle;
 `
 
-const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
+const HiddenCheckbox = styled.input`
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
@@ -76,7 +76,7 @@ const Checkbox: React.FC<IProps> = ({
   }
   return (
     <CheckboxContainer className={className} onClick={handleClick}>
-      <HiddenCheckbox checked={checked} readOnly {...rest} />
+      <HiddenCheckbox type="checkbox" checked={checked} readOnly {...rest} />
       <StyledCheckbox
         aria-hidden="true"
         checked={checked}

src/components/CodeModal.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { motion } from "framer-motion"
 
 import Icon from "./Icon"

src/components/Codeblock.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useContext } from "react"
-import styled, { ThemeContext } from "styled-components"
+import styled from "@emotion/styled"
+import { useTheme } from "@emotion/react"
 import Highlight, {
   defaultProps,
   Language,
@@ -283,8 +284,8 @@ const Codeblock: React.FC<IProps> = ({
   )
   const shouldShowLineNumbers = language !== "bash"
   const totalLines = codeText.split("\n").length
-  const themeContext = useContext(ThemeContext)
-  const theme = themeContext.isDark ? codeTheme.dark : codeTheme.light
+  const theme = useTheme()
+  const selectedTheme = theme.isDark ? codeTheme.dark : codeTheme.light
   return (
     <Container>
       <HightlightContainer
@@ -295,7 +296,7 @@ const Codeblock: React.FC<IProps> = ({
           {...defaultProps}
           code={codeText}
           language={language as Language}
-          theme={theme as PrismTheme}
+          theme={selectedTheme as PrismTheme}
         >
           {({ className, style, tokens, getLineProps, getTokenProps }) => (
             <StyledPre

src/components/Contributors.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { shuffle } from "lodash"
 
 import ActionCard from "./ActionCard"

src/components/DataProductCard.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { GatsbyImage } from "gatsby-plugin-image"
 
 import Link from "./Link"

src/components/DismissibleCard.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import Icon from "./Icon"
 

src/components/DocLink.tsx

@@ -1,5 +1,6 @@
 import React from "react"
-import styled, { useTheme } from "styled-components"
+import { useTheme } from "@emotion/react"
+import styled from "@emotion/styled"
 import Icon from "./Icon"
 import Link from "./Link"
 import Emoji from "./Emoji"

src/components/DocsNav.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import Link from "./Link"
 import Emoji from "./Emoji"

src/components/Emoji.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Twemoji } from "react-emoji-render"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { margin, MarginProps } from "styled-system"
 
 export interface IProps extends MarginProps {

src/components/EnergyConsumptionChart.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from "react"
-import styled, { useTheme } from "styled-components"
+import { useTheme } from "@emotion/react"
+import styled from "@emotion/styled"
 import {
   BarChart,
   Bar,
@@ -20,6 +21,7 @@ const Container = styled.div`
   border-radius: 0.3rem;
 `
 
+// @ts-ignore
 const StyledText = styled(Text)`
   font-size: 10px;
 

src/components/EthExchanges.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { useStaticQuery, graphql } from "gatsby"
 import { getImage } from "gatsby-plugin-image"
 import { useIntl } from "react-intl"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 
 import CardList from "./CardList"
 import Link from "./Link"

src/components/EthPriceCard.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import axios from "axios"
 
 import Translation from "./Translation"

src/components/EthVideo.tsx

@@ -1,5 +1,5 @@
-import React, { useContext } from "react"
-import { ThemeContext } from "styled-components"
+import React from "react"
+import { useTheme } from "@emotion/react"
 
 import darkVideo from "../assets/ethereum-hero-dark.mp4"
 import lightVideo from "../assets/ethereum-hero-light.mp4"
@@ -10,8 +10,8 @@ export interface IProps {
 }
 
 const EthVideo: React.FC<IProps> = ({ className, videoSrc }) => {
-  const themeContext = useContext(ThemeContext)
-  const isDarkTheme = themeContext.isDark
+  const theme = useTheme()
+  const isDarkTheme = theme.isDark
 
   const src = videoSrc ? videoSrc : isDarkTheme ? darkVideo : lightVideo
 

src/components/EventCard.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import Emoji from "./Emoji"
 import ButtonLink from "./ButtonLink"
 

src/components/ExpandableCard.tsx

@@ -1,6 +1,6 @@
 // Libraries
 import React, { ComponentType, ReactNode, SVGProps, useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { motion } from "framer-motion"
 
 // Components

src/components/ExpandableInfo.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, useState } from "react"
-import styled from "styled-components"
+import styled from "@emotion/styled"
 import { motion } from "framer-motion"
 import { GatsbyImage } from "gatsby-plugin-image"