refactor: migrate footer

package.json

@@ -112,6 +112,7 @@
     "@techstack/styled-system": "~1.0.341",
     "@tippyjs/react": "~4.2.6",
     "@vercel/analytics": "~1.1.1",
+    "babel-plugin-styled-components": "~2.1.4",
     "beauty-error": "~1.2.18",
     "cssnano": "~6.0.2",
     "cssnano-preset-advanced": "~6.0.2",

src/components/elements/Button/ButtonBase.js

@@ -1,34 +1,40 @@
 import styled from 'styled-components'
-import { transition } from 'theme'
+import { transition, themeCss } from 'theme'
 import Text from '../Text'
 
-const Button = styled(Text)({
-  transition: `background-color ${transition.medium}, color ${transition.medium}, box-shadow ${transition.medium}`,
-  appearance: 'none',
-  display: 'inline-block',
-  textAlign: 'center',
-  lineHeight: 16 / 14,
-  textDecoration: 'none',
-  verticalAlign: 'middle',
-  WebkitFontSmoothing: 'antialiased',
-  whiteSpace: 'nowrap',
-  outline: 0,
-  '&:hover': {
-    cursor: 'pointer'
-  }
-})
+const Button = styled(Text).withConfig({
+  shouldForwardProp: prop => !['color', 'bg'].includes(prop)
+})(
+  {
+    transition: `background-color ${transition.medium}, color ${transition.medium}, box-shadow ${transition.medium}`,
+    appearance: 'none',
+    display: 'inline-block',
+    textAlign: 'center',
+    lineHeight: 16 / 14,
+    textDecoration: 'none',
+    verticalAlign: 'middle',
+    WebkitFontSmoothing: 'antialiased',
+    whiteSpace: 'nowrap',
+    outline: 0,
+    '&:hover': {
+      cursor: 'pointer'
+    }
+  },
+  themeCss({
+    fontFamily: 'sans',
+    fontSize: 1,
+    fontWeight: 'bold',
+    px: 3,
+    py: 2,
+    border: 0,
+    borderRadius: 2
+  })
+)
 
 Button.defaultProps = {
   as: 'button',
-  fontFamily: 'sans',
-  fontSize: 1,
-  fontWeight: 'bold',
-  px: 3,
-  py: 2,
   color: 'white',
-  bg: 'link',
-  border: 0,
-  borderRadius: 2
+  bg: 'link'
 }
 
 export default Button

src/components/elements/Input/Input.js

@@ -1,34 +1,36 @@
-import { transition, colors, borders } from 'theme'
+import { transition, colors, borders, themeCss } from 'theme'
 import React, { useMemo, useState } from 'react'
 import styled, { css } from 'styled-components'
 
 import Text from '../Text'
 import Flex from '../Flex'
 
-const InputBase = styled(Text)({
-  maxWidth: '100%',
-  display: 'inline-block',
-  verticalAlign: 'middle',
-  border: 0,
-  appearance: 'none',
-  '&:focus': {
-    outline: '0'
+const InputBase = styled(Text)(
+  {
+    maxWidth: '100%',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    appearance: 'none',
+    '&:focus': {
+      outline: '0'
+    },
+    '&:disabled': {
+      opacity: 1 / 4
+    }
   },
-  '&:disabled': {
-    opacity: 1 / 4
-  }
-})
+  themeCss({
+    lineHeight: 'inherit',
+    border: 0,
+    p: 0,
+    mx: 2,
+    color: 'inherit',
+    bg: 'transparent'
+  })
+)
 
 InputBase.defaultProps = {
   as: 'input',
-  type: 'text',
-  lineHeight: 'inherit',
-  width: 1,
-  border: 0,
-  p: 0,
-  mx: 2,
-  color: 'inherit',
-  bg: 'transparent'
+  type: 'text'
 }
 
 const focusStyle = css`
@@ -77,13 +79,15 @@ const Input = ({
   return (
     <InputWrapper
       as='label'
-      alignItems='center'
-      borderRadius={2}
       focus={isFocus}
       isDark={isDark}
-      py='12px'
-      pl={2}
-      pr={suggestions ? 0 : 2}
+      css={themeCss({
+        pr: suggestions ? 0 : 2,
+        py: '12px',
+        pl: 2,
+        alignItems: 'center',
+        borderRadius: 2
+      })}
     >
       {Icon && <Flex>{Icon}</Flex>}
       <InputBase

src/components/elements/Link/solid.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import styled, { css } from 'styled-components'
 import { createCssState } from 'helpers/style'
-import { textGradient, colors } from 'theme'
+import { textGradient, colors, themeCss } from 'theme'
 import { lighten } from 'polished'
 
 import Box from '../Box'
@@ -56,15 +56,14 @@ LinkSolidWrapper.defaultProps = {
   fontWeight: 'regular'
 }
 
-const LinkSolid = ({ fontWeight, href, children, color, theme, ...props }) => {
+const LinkSolid = ({ href, children, theme, ...props }) => {
   return (
     <Box display='inline'>
       <LinkSolidWrapper
         {...props}
-        color={color}
         href={href}
-        fontWeight={fontWeight}
         isDark={theme === 'dark'}
+        css={themeCss({ fontWeight: 'regular' })}
       >
         {children}
       </LinkSolidWrapper>