added better config and more examples for emotion

Author: dvidsilva

.eslintrc

@@ -12,6 +12,7 @@
     "__DEV__": true
   },
   "rules": {
+    "emotion/jsx-import": "error",
     "no-var": 2,                     // http://eslint.org/docs/rules/no-var
     "prefer-const": 2,               // http://eslint.org/docs/rules/prefer-const
 
@@ -170,6 +171,7 @@
     "react/jsx-wrap-multilines": 2
   },
   "plugins": [
-    "react"
+    "react",
+    "emotion"
   ]
 }

package-lock.json

@@ -10,6 +10,7 @@
     "css-loader": "^0.28.7",
     "eslint": "^4.13.1",
     "eslint-loader": "^1.9.0",
+    "eslint-plugin-emotion": "^10.0.7",
     "eslint-plugin-react": "^7.4.0",
     "gh-pages": "^1.1.0",
     "node-sass": "^4.11.0",

package.json

@@ -1,23 +1,35 @@
+/** @jsx jsx */
 import React from 'react';
-import Link from 'Lib/buttons/Link';
+import StyledLink from 'Lib/buttons/Link';
 import blueBg from 'Images/blue-bg.jpg';
 import femaleOctocat from 'Images/femalecodertocat.png';
 import { BACKEND_URL } from 'Constants';
+import { jsx } from '@emotion/core';
+import { Link } from 'react-router-dom';
 
 class JoinForm extends React.Component {
     render() {
         return (
-            <section id="hero" className="dark-bg img-bg img-bg-soft" style={{ backgroundImage: `url(${blueBg})` }}>
+            <section css={{  backgroundImage: `url(${blueBg})` }}>
                 <div className="container inner-top-md inner-bottom-sm">
                     <div className="row">
                         <div className="col-md-5 inner-right inner-bottom-xs">
                             <header>
-                                <h1>Signup</h1>
-                                <p>Use github to create or access your account.</p>
+                                <h1>Join</h1>
+                                <p>You'll use your email to log in, your username is used when displaying submissions and comments.</p>
                                 <p>
-                                    <Link to={`${BACKEND_URL}/api/auth/github`} target="_self" css={{ fontSize: '18px', padding: '15px 35px 17px', marginTop: '35px' }}>
-                                        <i className="icon-github" />
-                                        Github Signup
+                                    <StyledLink to={`${BACKEND_URL}/api/auth/github`} css={{ fontSize: '18px', padding: '15px 35px 17px', marginTop: '35px' }}>
+                                        Submit
+                                    </StyledLink>
+                                </p>
+                                <p> Have an account?
+                                    <Link to={`${BACKEND_URL}/api/auth/github`}>
+                                        Log in
+                                    </Link>
+                                </p>
+                                <p>
+                                    <Link to={`${BACKEND_URL}/api/auth/github`}>
+                                        Forgot Password?
                                     </Link>
                                 </p>
                             </header>

src/assets/images/art/pattern-background03.png

@@ -1,6 +1,4 @@
 import styled from '@emotion/styled';
-// import React from 'react';
-// import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
 const StyledLink = styled(Link)(