Redesign

.eslintrc.json

@@ -17,12 +17,11 @@
       }
     ],
     "react/jsx-filename-extension": "off",
-    "react/no-typos": "off"
+    "react/no-typos": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/no-danger": "off"
   },
   "env": {
     "browser": true
-  },
-  "globals": {
-    "graphql": false
   }
 }

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "all"
+}

gatsby-config.js

@@ -3,11 +3,10 @@ module.exports = {
     title: 'Feather – Simply beautiful open source icons',
     description:
       'Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.',
-    siteUrl: 'https://feathericons.netlify.com',
   },
   plugins: [
     'gatsby-plugin-react-helmet',
-    'gatsby-plugin-styled-components',
+    'gatsby-plugin-emotion',
     {
       resolve: 'gatsby-plugin-manifest',
       options: {

package.json

@@ -15,32 +15,33 @@
     "*.js": "eslint"
   },
   "dependencies": {
+    "@emotion/core": "^10.0.10",
     "classnames": "2.2.5",
     "copy-to-clipboard": "^3.0.8",
     "downloadjs": "1.4.7",
     "feather-icons": "^4.22.0",
     "fuse.js": "3.2.0",
-    "gatsby": "1.9.261",
-    "gatsby-link": "1.6.28",
-    "gatsby-plugin-google-analytics": "1.0.14",
-    "gatsby-plugin-manifest": "^1.0.22",
-    "gatsby-plugin-react-helmet": "2.0.1",
-    "gatsby-plugin-styled-components": "2.0.4",
+    "gatsby": "^2.10.4",
+    "gatsby-plugin-emotion": "^4.1.0",
+    "gatsby-plugin-google-analytics": "^2.1.0",
+    "gatsby-plugin-manifest": "^2.2.0",
+    "gatsby-plugin-react-helmet": "^3.1.0",
+    "gatsby-source-filesystem": "^2.1.0",
     "polished": "^1.9.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-helmet": "5.2.0",
-    "styled-components": "^3.3.0",
-    "styled-system": "^2.2.5",
-    "system-components": "^2.0.3"
+    "react-responsive": "^7.0.0"
   },
   "devDependencies": {
-    "babel-eslint": "8.2.1",
-    "eslint": "4.11.0",
+    "babel-eslint": "^8.2.1",
+    "eslint": "^4.11.0",
     "eslint-config-airbnb": "16.1.0",
     "eslint-config-prettier": "2.8.0",
     "eslint-plugin-import": "2.8.0",
     "eslint-plugin-jsx-a11y": "6.0.3",
     "eslint-plugin-prettier": "2.4.0",
-    "eslint-plugin-react": "7.5.1",
+    "eslint-plugin-react": "^7.5.1",
     "husky": "0.14.3",
     "lint-staged": "6.0.0",
     "prettier": "1.8.2"

src/components/Button.js

@@ -1,43 +1,38 @@
-import { rgba } from 'polished'
-import { themeGet } from 'styled-system'
-import system from 'system-components'
+import { func, oneOf, string } from 'prop-types'
+import theme from '../theme'
 
-const Button = system(
-  {
-    is: 'button',
-    m: 0,
-    px: 5,
-    py: 4,
-    fontSize: 2,
-    fontWeight: 'medium',
-    lineHeight: 'tight',
-    color: 'white',
-    bg: 'base',
-    borderRadius: 1,
-    border: 0,
-    textAlign: 'center',
-    hover: {
-      boxShadow: 'inset 0 0 0 999px rgba(0, 0, 0, 0.1)',
-    },
-  },
-  props => ({
-    fontFamily: 'inherit',
-    display: 'inline-block',
-    verticalAlign: 'middle',
-    textDecoration: 'none',
-    appearance: 'none',
-    cursor: 'pointer',
+function Button({ as: Component, ...props }) {
+  return (
+    <Component
+      css={{
+        display: 'inline-block',
+        margin: 0,
+        padding: `${theme.space[4]} ${theme.space[5]}`,
+        fontSize: theme.fontSizes[2],
+        fontWeight: theme.fontWeights.medium,
+        fontFamily: 'inherit',
+        lineHeight: theme.lineHeights.none,
+        textDecoration: 'none',
+        border: 0,
+        borderRadius: theme.radii[1],
+        appearance: 'none',
+        cursor: 'pointer',
+        '&:disabled': {
+          opacity: 0.5,
+          cursor: 'default',
+        },
+      }}
+      {...props}
+    />
+  )
+}
 
-    '&:focus': {
-      outline: 0,
-      boxShadow: `0 0 0 3px ${rgba(themeGet('colors.base')(props), 1 / 2)}`,
-    },
-  }),
-  'width',
-  'hover',
-  'focus',
-)
+Button.propTypes = {
+  as: oneOf([func, string]),
+}
 
-Button.displayName = 'Button'
+Button.defaultProps = {
+  as: 'button',
+}
 
 export default Button

src/components/Footer.js

@@ -1,20 +1,27 @@
-import React from 'react'
+import theme from '../theme'
 import logOutboundLink from '../utils/logOutboundLink'
-import Flex from './Flex'
 import Link from './Link'
+import OutboundLink from './OutboundLink'
 
 function Footer() {
   return (
-    <Flex is="footer" flexDirection="column" alignItems="center" py={7}>
+    <footer
+      css={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        padding: theme.space[5],
+        fontSize: theme.fontSizes[1],
+      }}
+    >
       <Link
+        as={OutboundLink}
         href="https://twitter.com/colebemis"
-        target="_blank"
-        rel="noopener noreferrer"
         onClick={() => logOutboundLink('made by @colebemis')}
       >
         Made by @colebemis
       </Link>
-    </Flex>
+    </footer>
   )
 }
 

src/components/GlobalStyles.js

@@ -0,0 +1,25 @@
+import { Global } from '@emotion/core'
+import theme from '../theme'
+
+function GlobalStyles() {
+  return (
+    <Global
+      styles={{
+        '*, *:before, *:after': {
+          boxSizing: 'inherit',
+        },
+
+        body: {
+          boxSizing: 'border-box',
+          margin: 0,
+          fontFamily: theme.fonts.sansSerif,
+          lineHeight: theme.lineHeights.normal,
+          color: theme.colors.gray[8],
+          backgroundColor: theme.colors.gray[0],
+        },
+      }}
+    />
+  )
+}
+
+export default GlobalStyles