Skip to content
This repository has been archived by the owner on Jul 24, 2023. It is now read-only.

Commit

Permalink
feat: upgrade to emotion 10
Browse files Browse the repository at this point in the history
  • Loading branch information
@CanRau
CanRau committed Mar 16, 2019
1 parent 948c730 commit d0cfc11
Show file tree
Hide file tree
Showing 34 changed files with 1,702 additions and 1,556 deletions.
24 changes: 12 additions & 12 deletions gatsby-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,12 @@ module.exports = {
},
plugins: [
// `gatsby-plugin-fastclick`,
{
resolve: `gatsby-plugin-emotion`,
options: {
labelFormat: `[filename]--[local]`,
},
},
{
resolve: `gatsby-plugin-layout`,
options: {
Expand Down Expand Up @@ -287,23 +293,17 @@ module.exports = {
},
},
{
resolve: `gatsby-plugin-netlify`,
options: {
headers: {
'/*': isMaster ? [] : [`X-Robots-Tag: noindex, follow`],
},
},
},
{
resolve: `gatsby-plugin-emotion`,
resolve: `gatsby-plugin-offline`,
options: {
// Accepts all options defined by `babel-plugin-emotion` plugin.
// globPatterns: [`**/*.{js,css,html}`],
},
},
{
resolve: `gatsby-plugin-offline`,
resolve: `gatsby-plugin-netlify`,
options: {
// globPatterns: [`**/*.{js,css,html}`],
headers: {
'/*': isMaster ? [] : [`X-Robots-Tag: noindex, follow`],
},
},
},
],
Expand Down
7 changes: 3 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@
"contributors:generate": "all-contributors generate"
},
"dependencies": {
"@emotion/core": "^10.0.9",
"@emotion/styled": "^10.0.9",
"@fortawesome/fontawesome-svg-core": "1.2.15",
"@fortawesome/free-brands-svg-icons": "5.5.0",
"@fortawesome/free-regular-svg-icons": "5.5.0",
Expand All @@ -56,21 +58,19 @@
"cryptocurrency-icons": "0.9.2",
"cuid": "2.1.6",
"date-fns": "1.29.0",
"emotion": "9.2.12",
"emotion-server": "9.2.12",
"feed": "2.0.2",
"gatsby": "2.1.17",
"gatsby-image": "2.0.29",
"gatsby-plugin-canonical-urls": "2.0.10",
"gatsby-plugin-catch-links": "2.0.11",
"gatsby-mdx": "^0.4.3",
"gatsby-plugin-compile-es6-packages": "^1.0.6",
"gatsby-plugin-emotion": "2.0.7",
"gatsby-plugin-layout": "1.0.12",
"gatsby-plugin-nprogress": "2.0.8",
"gatsby-plugin-offline": "2.0.24",
"gatsby-plugin-react-helmet": "3.0.6",
"gatsby-remark-autolink-headers": "2.0.14",
"gatsby-plugin-emotion": "^4.0.6",
"gray-percentage": "2.0.0",
"hex2rgba": "0.0.1",
"js-yaml": "3.12.1",
Expand All @@ -82,7 +82,6 @@
"ramda": "0.26.1",
"react": "16.7.0",
"react-dom": "16.7.0",
"react-emotion": "9.2.12",
"react-head": "3.0.2",
"react-headroom": "2.2.4",
"react-helmet": "5.2.0",
Expand Down
2 changes: 1 addition & 1 deletion src/components/ArticlePreview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'
import PropTypes from 'prop-types'
import { Link } from 'gatsby'
import Img from 'gatsby-image'
import styled from 'react-emotion'
import styled from '@emotion/styled'
import { colors } from '@/theme'

const StyledLink = styled(Link)`
Expand Down
136 changes: 75 additions & 61 deletions src/components/ContactForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/* global document, window */
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styled from 'react-emotion'
import styled from '@emotion/styled'
import { css } from '@emotion/core'
import axios from 'axios'
import isEmail from 'validator/lib/isEmail'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
Expand Down Expand Up @@ -205,12 +206,12 @@ export default class ContactForm extends Component {
return (
<div
id="success"
css={{
background: colors.white,
border: `1px solid ${colors.success}`,
color: colors.success,
padding: `.5rem .5rem .4rem`,
}}
css={css`
background: ${colors.white};
border: 1px solid ${colors.success};
color: ${colors.success};
padding: 0.5rem 0.5rem 0.4rem;
`}
>
{this.props.success}
</div>
Expand All @@ -225,16 +226,21 @@ export default class ContactForm extends Component {
noValidate
>
<div
css={{
position: `relative`,
paddingBottom: `1.4rem`,
'& input': {
borderColor: errors.email && colors.failure,
},
}}
css={css`
position: relative;
padding-bottom: 1.4rem;
& input {
border-color: ${errors.email && colors.failure};
}
`}
>
<label>
<div css={{ fontFamily: fontFamilies.accent, fontSize: `1.5rem` }}>
<div
css={css`
font-family: ${fontFamilies.accent};
font-size: 1.5rem;
`}
>
{emailLabel}
</div>
<StyledInput
Expand All @@ -248,11 +254,11 @@ export default class ContactForm extends Component {
/>
{errors.email && (
<div
css={{
position: `absolute`,
color: colors.failure,
fontSize: `.9rem`,
}}
css={css`
position: absolute;
color: ${colors.failure};
font-size: 0.9rem;
`}
>
{errors.email}
</div>
Expand All @@ -261,16 +267,21 @@ export default class ContactForm extends Component {
</div>

<div
css={{
position: `relative`,
paddingBottom: `1.4rem`,
'& textarea': {
borderColor: errors.email && colors.failure,
},
}}
css={css`
position: relative;
padding-bottom: 1.4rem;
& textarea {
border-color: ${errors.email && colors.failure};
}
`}
>
<label>
<div css={{ fontFamily: fontFamilies.accent, fontSize: `1.5rem` }}>
<div
css={css`
font-family: ${fontFamilies.accent};
font-size: 1.5rem;
`}
>
{messageLabel}
</div>
<StyledTextarea
Expand All @@ -280,18 +291,18 @@ export default class ContactForm extends Component {
maxRows={10}
readOnly={this.state.isSubmitting}
required
css={{
minHeight: `8rem`,
width: `100%`,
}}
css={css`
min-height: 8rem;
width: 100%;
`}
/>
{errors.message && (
<div
css={{
position: `absolute`,
color: colors.failure,
fontSize: `.9rem`,
}}
css={css`
position: absolute;
color: ${colors.failure};
font-size: 0.9rem;
`}
>
{errors.message}
</div>
Expand All @@ -300,11 +311,11 @@ export default class ContactForm extends Component {
</div>

<div
css={{
position: `relative`,
paddingBottom: `1.4rem`,
color: errors.consent && colors.failure,
}}
css={css`
position: relative;
padding-bottom: 1.4rem;
color: ${errors.consent && colors.failure};
`}
>
<label>
<input
Expand All @@ -316,26 +327,29 @@ export default class ContactForm extends Component {
disabled={this.state.isSubmitting}
/>
<span
css={{ fontSize: `.9rem`, margin: `0 .5rem` }}
css={css`
font-size: 0.9rem;
margin: 0 0.5rem;
`}
dangerouslySetInnerHTML={{ __html: consentLabel }}
/>
<a
href={privacyLink}
target="_blank"
rel="noopener noreferrer"
css={`
css={css`
border: none;
`}
>
{privacyLabel}
</a>
{errors.consent && (
<div
css={{
position: `absolute`,
color: colors.failure,
fontSize: `.9rem`,
}}
css={css`
position: absolute;
color: ${colors.failure};
font-size: 0.9rem;
`}
>
{errors.consent}
</div>
Expand All @@ -345,13 +359,13 @@ export default class ContactForm extends Component {

{generalError && (
<div
css={{
border: `1px solid red`,
padding: `.5rem .5rem .4rem`,
marginBottom: `.5rem`,
color: colors.failure,
fontSize: `.9rem`,
}}
css={css`
border: 1px solid red;
padding: 0.5rem 0.5rem 0.4rem;
margin-bottom: 0.5rem;
color: ${colors.failure};
font-size: 0.9rem;
`}
>
{generalError}
</div>
Expand All @@ -360,11 +374,11 @@ export default class ContactForm extends Component {
<Button
label="Submit"
disabled={isSubmitting}
css={{
...styles.button,
background: colors.purpleDark,
color: colors.darkWhite,
}}
css={css`
${styles.button};
background: ${colors.purpleDark};
color: ${colors.darkWhite};
`}
>
{isSubmitting ? (
<FontAwesomeIcon icon={faSpinner} size="xs" spin />
Expand Down
Loading

0 comments on commit d0cfc11

Please sign in to comment.