Switch to styled-components

config-overrides.js

@@ -1,12 +1,8 @@
-const {
-  override,
-  disableEsLint,
-  addBabelPlugin
-} = require('customize-cra');
+const { override, disableEsLint, addBabelPlugin } = require('customize-cra');
 
 module.exports = override(
   disableEsLint(),
-  addBabelPlugin('emotion'),
+  addBabelPlugin('styled-components'),
   addBabelPlugin([
     'inline-react-svg',
     {

package.json

@@ -3,15 +3,13 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "emotion": "^9.1.3",
-    "emotion-theming": "^9.1.2",
     "react": "^16.7.0-alpha.1",
     "react-cache": "^2.0.0-alpha.1",
     "react-dom": "^16.7.0-alpha.1",
     "react-dom-confetti": "^0.0.10",
-    "react-emotion": "^9.1.3",
     "react-hanger": "^1.0.8",
     "react-pose": "^4.0.1",
+    "styled-components": "^4.1.1",
     "styles-debugger": "^0.0.5"
   },
   "scripts": {
@@ -30,7 +28,7 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "babel-plugin-emotion": "^9.2.11",
+    "babel-plugin-styled-components": "^1.8.0",
     "babel-plugin-import": "^1.11.0",
     "babel-plugin-inline-react-svg": "^1.0.1",
     "customize-cra": "^0.2.4",

src/components/App/index.js

@@ -19,7 +19,7 @@ import Compose from 'components/Compose';
 import ToggleCount from 'components/ToggleCount';
 import BuyButton from 'components/BuyButton';
 import Background from 'components/Background';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from 'styled-components';
 
 //hooks
 import {
@@ -145,7 +145,9 @@ function Home() {
             <S.Link href="mailto:contact@twizzy.app">Contact</S.Link>
             <S.Link href="privacy.html">Privacy</S.Link>
             <S.Link href="disclaimer.html">Disclaimer</S.Link>
-            <S.Link target="_blank" rel="noopener" href="https://github.com/kitze/twizzy-landing">View source</S.Link>
+            <S.Link target="_blank" rel="noopener" href="https://github.com/kitze/twizzy-landing">
+              View source
+            </S.Link>
           </S.Links>
         </S.Footer>
       </S.Home>

src/components/App/styles.js

@@ -1,4 +1,4 @@
-import emotion from 'react-emotion';
+import emotion from 'styled-components';
 import flex from 'styles/flex';
 import WindowShell from 'components/Window';
 import pose from 'react-pose';

src/components/Background/styles.js

@@ -1,4 +1,4 @@
-import emotion from 'react-emotion';
+import emotion from 'styled-components';
 import { ELEMENTS, zIndexFor } from 'styles/zindex';
 import { when } from 'styles/mixins';
 

src/components/BuyButton/styles.js

@@ -1,4 +1,4 @@
-import emotion from 'react-emotion';
+import emotion from 'styled-components';
 import flex from 'styles/flex';
 import { applyTheme, getThemeColor, hover, when } from 'styles/mixins';
 

src/components/Compose/styles.js

@@ -1,4 +1,4 @@
-import emotion from 'react-emotion';
+import emotion from 'styled-components';
 import flex from 'styles/flex';
 import Icon from 'icons/Icon';
 import pose from 'react-pose';

src/components/DayNightSwitch/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from 'styled-components';
 
 //icons
 import faMoon from '../../icons/moon-inv.svg';

src/components/DayNightSwitch/styles.js

@@ -1,4 +1,4 @@
-import emotion from 'react-emotion';
+import emotion from 'styled-components';
 import FontAwesomeIcon from 'icons/Icon.js';
 import flex from 'styles/flex';
 import { hover, fixedSize } from 'styles/mixins';

src/components/MenuBar/styles.js

@@ -1,4 +1,4 @@
-import emotion from 'react-emotion';
+import emotion from 'styled-components';
 import flex from 'styles/flex';
 import posed from 'react-pose';
 import FontAwesomeIcon from 'icons/Icon.js';

src/components/Messages/styles.js

@@ -1,4 +1,4 @@
-import emotion from 'react-emotion';
+import emotion from 'styled-components';
 import flex from 'styles/flex';
 import posed from 'react-pose';
 import FontAwesomeIcon from 'icons/Icon.js';

src/components/ToggleCount/styles.js

@@ -1,4 +1,4 @@
-import emotion from "react-emotion";
+import emotion from "styled-components";
 import {getThemeColor} from "styles/mixins";
 
 export const ToggleCount = emotion.div(

src/components/TweetCircle/styles.js

@@ -1,4 +1,4 @@
-import emotion from 'react-emotion';
+import emotion from 'styled-components';
 import flex from 'styles/flex';
 
 export const Circle = emotion.div({

src/components/Window/styles.js

@@ -1,4 +1,4 @@
-import emotion from 'react-emotion';
+import emotion from 'styled-components';
 import flex from 'styles/flex';
 import { applyTheme } from 'styles/mixins';
 

src/styles/flex-components.js

@@ -1,4 +1,4 @@
-import emotion from 'react-emotion';
+import emotion from 'styled-components';
 import flex from './flex';
 
 const margin = {

src/styles/shared-components.js

@@ -1,5 +1,5 @@
 import flex from '../styles/flex';
-import emotion from 'react-emotion';
+import emotion from 'styled-components';
 import { Horizontal as $Horizontal, Vertical as $Vertical } from './flex-components';
 import {hover, whenTheme} from "styles/mixins";