feat: upgrade emotion (#214)

.babelrc

@@ -1,6 +1,10 @@
 {
   "presets": [
     "@babel/preset-env",
-    "@babel/preset-react"
+    "@babel/preset-react",
+    "@emotion/babel-preset-css-prop"
+  ],
+  "plugins": [
+    "emotion"
   ]
 }

client/components/CreateGameForm.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import axios from '../axios';
 import Button from './Utils/Button';
 import Input from './Utils/Input';

client/components/Game/Canvas/SketchPad.jsx

@@ -86,7 +86,7 @@ const SketchPad = (props) => {
   return (
     <canvas
       ref={canvas}
-      className={BorderStyles}
+      css={BorderStyles}
       width={CANVAS_WIDTH}
       height={CANVAS_HEIGHT}
       onMouseDown={handleMouseDown}

client/components/Game/Canvas/options/Fill/Fill.jsx

@@ -1,15 +1,11 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { connect, useSelector } from 'react-redux';
-import { css } from 'react-emotion';
+import styled from '@emotion/styled';
 import ToolButton from '../../../../Utils/ToolButton';
 import FullInput from '../../../../Utils/FullInput';
 import { setFillAction, setFillColorAction } from '../../../../../store/actions/game.actions';
 
-const relativeStyle = css`
-  position: relative;
-`;
-
 const FillOption = (props) => {
   const { dispatchFill, dispatchFillColor } = props;
   const fill = useSelector(state => state.game.canvas.options.fill);
@@ -27,11 +23,11 @@ const FillOption = (props) => {
 
   return (
     <div>
-      <ToolButton onClick={handleToggleFill} active={fill} className={relativeStyle}>
+      <ToolButton onClick={handleToggleFill} active={fill}>
         <i className="fas fa-adjust" />
       </ToolButton>
       {fill ? (
-        <ToolButton color={fillColor} className={relativeStyle}>
+        <ToolButton color={fillColor}>
           <i className="fas fa-adjust" />
           <FullInput type="color" onChange={handleChangeFillColor} />
         </ToolButton>

client/components/Game/Canvas/options/Stroke/Stroke.jsx

@@ -1,15 +1,10 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { connect, useSelector } from 'react-redux';
-import { css } from 'react-emotion';
 import ToolButton from '../../../../Utils/ToolButton';
 import FullInput from '../../../../Utils/FullInput';
 import { setSizeAction, setStrokeColorAction } from '../../../../../store/actions/game.actions';
 
-const relativeStyle = css`
-  position: relative;
-`;
-
 const MIN_SIZE = 2;
 const MAX_SIZE = 18;
 const STEP = 2;
@@ -31,7 +26,7 @@ const StrokeOption = (props) => {
 
   return (
     <div>
-      <ToolButton color={strokeColor} activeColor={strokeColor} className={relativeStyle}>
+      <ToolButton color={strokeColor} activeColor={strokeColor}>
         <i className="fas fa-tint" />
         <FullInput onChange={handleChangeColor} type="color" />
       </ToolButton>

client/components/Game/Chat/Box.jsx

@@ -77,7 +77,7 @@ const ChatBox = (props) => {
 
   return (
     <Container>
-      <div ref={chatWindow} className={WindowStyles}>
+      <div ref={chatWindow} css={WindowStyles}>
         {messages.map((message, index) => (
           <ChatMessage
             key={index}

client/components/Game/Chat/Message.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 
 const Message = styled('div')`

client/components/Game/Chat/styles.js

@@ -1,4 +1,5 @@
-import styled, { css } from 'react-emotion';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
 import { BorderStyles } from '../../../styles';
 import Input from '../../Utils/Input';
 import Button from '../../Utils/Button';

client/components/Game/ScoreBoard.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import styled, { css } from 'react-emotion';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
 import Flex from '../Utils/Flex';
 import Button from '../Utils/Button';
 

client/components/Game/StartGame.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import Button from '../Utils/Button';
 import { startAction } from '../../store/actions/game.actions';
 

client/components/Game/TopBar.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import StartGame from './StartGame';
 import Flex from '../Utils/Flex';
 import Button from '../Utils/Button';

client/components/GoogleLogin.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import Centered from './Utils/Centered';
 import Button from './Utils/Button';
 

client/components/Play/CreateGame.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
 import Button from '../Utils/Button';
 

client/components/Utils/Button.jsx

@@ -1,4 +1,5 @@
-import styled, { css } from 'react-emotion';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
 
 const width = '180px';
 const fontSize = '20px';

client/components/Utils/Centered.jsx

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 const Centered = styled('div')`
   position: absolute;

client/components/Utils/Flex.jsx

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 const Inline = styled('div')`
   display: flex;

client/components/Utils/FullInput.jsx

@@ -1,11 +1,11 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 const FullInput = styled('input')`
-  width: 100%;
-  height: 100%;
   position: absolute;
-  top: 0;
   left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
   opacity: 0;
   cursor: pointer;
 `;

client/components/Utils/Input.jsx

@@ -1,4 +1,4 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import { BorderStyles } from '../../styles';
 
 const width = '180px';

client/components/Utils/ToolButton.jsx

@@ -1,4 +1,5 @@
-import styled, { css } from 'react-emotion';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
 import withProps from 'recompose/withProps';
 import Button from './Button';
 
@@ -8,6 +9,7 @@ const activeToolButtonStyles = (activeColor = '#f8f8f8') => css`
 `;
 
 const ToolButton = withProps({ circle: true })(styled(Button)`
+  position: relative;
   transition: background 300ms ease-in-out, color 300ms ease-in-out;
   width: 50px;
   height: 50px;

client/screens/ScreenGame.jsx

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 import { connect, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import NotificationSystem from 'react-notification-system';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
 import Flex from '../components/Utils/Flex';
 import NicknameForm from '../components/Game/NicknameForm';

client/screens/ScreenPlay.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import JoinGame from '../components/Play/Join';
 import CreateGame from '../components/Play/CreateGame';
 import Centered from '../components/Utils/Centered';

client/styles.js

@@ -1,4 +1,5 @@
-import { injectGlobal, css } from 'react-emotion';
+import { injectGlobal } from 'emotion';
+import { css } from '@emotion/core';
 
 export const injectGlobalStyles = () => injectGlobal`
   html, body, #app {