feat: update <Link/> imports & use everywhere

src/components/ContactForm.js

@@ -9,6 +9,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faSpinner } from '@fortawesome/free-solid-svg-icons/faSpinner'
 import { colors, fontFamilies } from '@src/theme'
 import { Button } from '@components/layout/Button'
+import { Link } from '@components/Link'
 import TextareaAutosize from 'react-textarea-autosize'
 import localStore from '@src/utils/local-store'
 
@@ -335,16 +336,9 @@ export default class ContactForm extends Component {
               }}
               dangerouslySetInnerHTML={{ __html: consentLabel }}
             />
-            <a
-              href={privacyLink}
-              target="_blank"
-              rel="noopener noreferrer"
-              sx={{
-                border: `none`,
-              }}
-            >
+            <Link to={privacyLink} variant="plain">
               {privacyLabel}
-            </a>
+            </Link>
             {errors.consent && (
               <div
                 sx={{

src/components/DonateButton.js

@@ -6,7 +6,7 @@ import { faPaypal } from '@fortawesome/free-brands-svg-icons/faPaypal'
 import { faCcVisa } from '@fortawesome/free-brands-svg-icons/faCcVisa'
 import { faCcMastercard } from '@fortawesome/free-brands-svg-icons/faCcMastercard'
 import { faCcAmex } from '@fortawesome/free-brands-svg-icons/faCcAmex'
-import Link from '@components/Link'
+import { Link } from '@components/Link'
 
 export const DonateButton = ({ paymentOptions = false, ...props }) => (
   <div

src/components/Footer/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import MDXRenderer from 'gatsby-plugin-mdx/mdx-renderer'
 import { css } from '@emotion/core'
-import Link from '@components/Link'
+import { Link } from '@components/Link'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faComments } from '@fortawesome/free-regular-svg-icons'
 import { colors, media } from '@src/theme'

src/components/Header/index.js

@@ -2,7 +2,7 @@
 import { useState } from 'react'
 import PropTypes from 'prop-types'
 import { jsx, useColorMode } from 'theme-ui'
-import Link from '@components/Link'
+import { Link } from '@components/Link'
 import Img from 'gatsby-image/withIEPolyfill'
 import Headroom from 'react-headroom'
 import { visible } from '@src/theme'
@@ -19,7 +19,9 @@ const HeaderWrapper = props => <header sx={style.header} {...props} />
 const HeaderTop = props => <div sx={style.headerTop} {...props} />
 const TopInner = props => <div sx={style.topInner} {...props} />
 const Brand = props => <div sx={style.headerBrand} {...props} />
-const HeaderLink = props => <Link sx={style.headerLink} {...props} />
+const HeaderLink = props => (
+  <Link variant="plain" sx={style.headerLink} {...props} />
+)
 const MetaLink = props => (
   <HeaderLink sx={style.headerMeta_headerLink} {...props} />
 )

src/components/NewsletterWidget/index.js

@@ -10,6 +10,7 @@ import { colors, fontFamilies } from '@src/theme'
 import { Button } from '@components/layout/Button'
 import localStore from '@src/utils/local-store'
 import axios from 'axios'
+import { Link } from '@components/Link'
 
 const StyledInput = () => (
   <input
@@ -272,16 +273,9 @@ export class Newsletter extends Component {
             >
               {consentLabel}
             </span>
-            <a
-              href={privacyLink}
-              target="_blank"
-              rel="noopener noreferrer"
-              sx={{
-                border: `none`,
-              }}
-            >
+            <Link to={privacyLink} variant="plain">
               {privacyLabel}
-            </a>
+            </Link>
           </label>
         </div>
 

src/gatsby-plugin-theme-ui/index.js

@@ -104,4 +104,35 @@ export default {
   },
 
   shadows: {},
+
+  styles: {},
+
+  links: {
+    plain: {
+      transition: `all 0.3s ease`,
+      color: `gray80`,
+      ':hover': {
+        backgroundColor: `primaryLite`,
+        color: `white`,
+      },
+    },
+    default: theme => ({
+      ...theme.links.plain,
+      borderBottom: `2px solid`,
+      borderBottomColor: `primaryLite`,
+    }),
+    cta: theme => ({
+      ...theme.links.plain,
+      fontWeight: `400`,
+      borderRadius: `sm`,
+      fontSize: `1.2rem`,
+      backgroundColor: `cta`,
+      color: `#042f37`,
+      padding: `0.5rem 1rem`,
+      ':hover': {
+        color: `white`,
+        backgroundColor: `primary`,
+      },
+    }),
+  },
 }

src/layouts/index.js

@@ -4,7 +4,7 @@
  */
 import React from 'react'
 import { MDXProvider } from '@mdx-js/react'
-import Link from '@components/Link'
+import { Link } from '@components/Link'
 import { DonateButton } from '@components/DonateButton'
 // import { VideoPlayer } from '@gaiama/react-video-player'
 // import { TableOfContents } from "@gaiama/react-mdx-table-of-contents"
@@ -16,6 +16,7 @@ import { DonateButton } from '@components/DonateButton'
 
 /* components={{ VideoPlayer }} */
 const components = {
+  a: Link,
   Link,
   DonateButton,
 }

src/templates/ContactPage.js

@@ -1,22 +1,16 @@
-import React from 'react'
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
-import styled from '@emotion/styled'
-import { css } from '@emotion/core'
+import Img from 'gatsby-image/withIEPolyfill'
+import { Box, Flex, Text, Grid } from '@theme-ui/components'
 import MainLayout from '@components/MainLayout'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-// import { faRssSquare } from '@fortawesome/free-solid-svg-icons/faRssSquare'
-import { colors, media } from '@src/theme'
+import { media } from '@src/theme'
 import TitledCopy from '@components/TitledCopy'
 import { Newsletter } from '@components/NewsletterWidget'
 import ContactForm from '@components/ContactForm'
-
-const StyledA = styled.a`
-  border: none;
-  :hover {
-    background-color: transparent;
-  }
-`
+import { Link } from '@components/Link'
 
 const ContactPage = props => {
   const { page } = props.data

src/templates/HomePage.js

@@ -17,7 +17,7 @@ import { MDXProvider } from '@mdx-js/react'
 import { Box, Heading, Text, Grid /*, Flex*/ } from '@theme-ui/components'
 import space from '@styled-system/space'
 import { createShouldForwardProp } from '@styled-system/should-forward-prop'
-import Link from '@components/Link'
+import { Link } from '@components/Link'
 import { VideoPlayer } from '@components/VideoPlayer'
 
 // const Flex = props => (
@@ -160,7 +160,7 @@ const ContentBlocks = ({ mdx, stacked = false }) => {
           {!!actions.length && (
             <Box sx={{ '> * + *': { ml: `1rem` } }}>
               {actions.map(x => (
-                <Link key={x.link} cta={x.type === `cta`} to={x.link}>
+                <Link key={x.link} variant={x.variant} to={x.link}>
                   {x.text}
                 </Link>
               ))}

src/templates/SupportPage.js

@@ -4,6 +4,7 @@ import { jsx } from 'theme-ui'
 import PropTypes from 'prop-types'
 import { graphql, Link } from 'gatsby'
 import Img from 'gatsby-image/withIEPolyfill'
+import { Link } from '@components/Link'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faNewspaper } from '@fortawesome/free-solid-svg-icons/faNewspaper'
 // import { faRssSquare } from '@fortawesome/free-solid-svg-icons/faRssSquare'