removed old class names from the join form component

Author: dvidsilva

src/components/join/form.js

@@ -12,36 +12,42 @@ import { BasicInput } from 'Components/fields/';
 class JoinForm extends React.Component {
     render() {
         return (
-            <section css={{  backgroundImage: `url(${blueBg})` }}>
-                <div className="container inner-top-md inner-bottom-sm">
-                    <div className="row">
-                        <div className="col-md-6 inner-right inner-bottom-xs">
-                            <header css={{ p: { fontSize: 16 }}}>
-                                <form css={{ background: 'white', borderRadius: '8px', padding: '18px', margin: '0 10px' }}>
-                                    <h1>Create an account</h1>
-                                    <p>You'll use your email to log in, your username is used when displaying submissions and comments.</p>
-                                    <Field name="username" component={ BasicInput } type="text" required placeholder="Username" />
-                                    <Field name="email" component={ BasicInput } type="email" required placeholder="Email"/>
-                                    <Field name="password" component={ BasicInput } type="password" required placeholder="Password"/>
-                                    <p>
-                                        <StyledLink to={`${BACKEND_URL}/api/auth/github`} css={{ fontSize: '18px', padding: '15px 35px 17px' }}>
-                                            Submit
-                                        </StyledLink>
-                                    </p>
-                                    <p> Have an account?&nbsp;
-                                        <Link to={`${BACKEND_URL}/api/auth/github`}>
-                                            Log in
-                                        </Link>
-                                    </p>
-                                </form>
-                            </header>
-                        </div>
-                        <div className="col-md-6">
-                            <div css={{ margin: '10x 20px', textAlign: 'center', }}>
-                                <img src={logoSquared} alt="codecorgi logo" ariaIgnore />
-                            </div>
-                        </div>
-                    </div>
+            <section css={{  backgroundImage: `url(${blueBg})`,
+                backgroundSize: 'cover',
+                padding: '40px 20px 80px',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                '> div': { padding: '10px 20px', flexGrow: 1, maxWidth: 450, },
+                '@media (max-width: 860px)': {
+                    flexDirection: 'column',
+                    paddingBottom: 40,
+                    '> div': { maxWidth: '90%' },
+                }
+            }}>
+                <div css={{ background: 'white', borderRadius: '6px', padding: '18px', margin: '0 20px' }}>
+                    <header css={{ p: { fontSize: 16 }}}>
+                        <form css={{  }}>
+                            <h1>Create an account</h1>
+                            <p>You&apos;ll use your email to log in, your username is used when displaying submissions and comments.</p>
+                            <Field name="username" component={ BasicInput } type="text" required placeholder="Username" />
+                            <Field name="email" component={ BasicInput } type="email" required placeholder="Email"/>
+                            <Field name="password" component={ BasicInput } type="password" required placeholder="Password"/>
+                            <p>
+                                <StyledLink to={`${BACKEND_URL}/api/auth/github`} css={{ fontSize: '18px', padding: '15px 35px 17px' }}>
+                                    Submit
+                                </StyledLink>
+                            </p>
+                            <p> Have an account?&nbsp;
+                                <Link to={`${BACKEND_URL}/api/auth/github`}>
+                                    Log in
+                                </Link>
+                            </p>
+                        </form>
+                    </header>
+                </div>
+                <div css={{ }}>
+                    <img src={logoSquared} alt="codecorgi logo" ariaIgnore />
                 </div>
             </section>
         );

src/lib/buttons/Link.js

@@ -3,10 +3,7 @@ import { Link } from 'react-router-dom';
 
 const StyledLink = styled(Link)(
     {
-        '-webkit-transition': 'background 200ms ease-out, font 200ms ease-out, padding 200ms ease-out, margin 200ms ease-out',
-        '-moz-transition': 'background 200ms ease-out, font 200ms ease-out, padding 200ms ease-out, margin 200ms ease-out',
-        '-o-transition': 'background 200ms ease-out, font 200ms ease-out, padding 200ms ease-out, margin 200ms ease-out',
-        'transition': 'background 200ms ease-out, font 200ms ease-out, padding 200ms ease-out, margin 200ms ease-out',
+        transition: 'background 200ms ease-out, font 200ms ease-out, padding 200ms ease-out, margin 200ms ease-out',
         display: 'inline-block',
         padding: '6px 12px',
         marginBottom: 0,
@@ -16,13 +13,9 @@ const StyledLink = styled(Link)(
         textAlign: 'center',
         whiteSpace: 'nowrap',
         verticalAlign: 'middle',
-        '-ms-touch-action': 'manipulation',
         touchAction: 'manipulation',
         cursor: 'pointer',
-        '-webkit-user-select': 'none',
-        '-moz-user-select': 'none',
-        '-ms-user-select': 'none',
-        'user-select': 'none',
+        userSelect: 'none',
         backgroundImage: 'none',
         border: '1px solid transparent',
         borderRadius: '4px',

src/styles/emotion/index.js

@@ -0,0 +1,3 @@
+import Layout from './layout';
+
+export { Layout };

src/styles/emotion/layout.js

@@ -0,0 +1,7 @@
+const Layout = {
+    cols: {
+
+    }
+};
+
+export default Layout;