developed sign up form and modified formbutton to have short gray case

src/components/auth/signup.js

@@ -1,10 +1,19 @@
 import React, { Component } from 'react';
 
+import SignUpForm from './signupForm';
+import PageTitle from '../pageTitle';
+
 class SignUp extends Component {
+
+    onSubmit = (fields) => {
+        console.log(fields);
+    }
+
     render() {
         return (
             <div className='sign-up'>
-                sign uppp
+                <PageTitle className='sign-up__page-title' title='Register' />
+                <SignUpForm onSubmit={this.onSubmit} className='sign-up__form' />
             </div>
         )
     }

src/components/auth/signupForm.js

@@ -0,0 +1,81 @@
+import React, { Component } from 'react';
+
+import { reduxForm, Field } from 'redux-form';
+
+import { FormInput, FormButton } from '../formFields';
+import Details from '../details';
+
+import history from '../../history';
+
+class SignUpForm extends Component {
+    render() {
+        const { className, handleSubmit } = this.props;
+        const links = [
+            {
+                _id: 0,
+                title: 'Not registered? Create account here',
+                onClick: () => history.push('/signup')
+            },
+            {
+                _id: 1,
+                title: 'Forgot account email?',
+                onClick: () => console.log('forgot email')
+            },
+            {
+                _id: 2,
+                title: 'Forgot password?',
+                onClick: () => console.log('forgot password')
+            }
+        ]
+        return (
+            <form onSubmit={handleSubmit} className={`${className} sign-up-form`}>
+                <Field className='sign-up-form__name'
+                type='name'
+                title='Name'
+                placeholder='Name'
+                name='name'
+                component={FormInput}/>
+                <Field className='sign-up-form__email'
+                type='email'
+                title='Email'
+                placeholder='Email'
+                name='email'
+                component={FormInput}/>
+                <Field className='sign-up-form__password'
+                type='password'
+                title='Password'
+                placeholder='Password'
+                name='password'
+                component={FormInput}/>
+                <Field className='sign-up-form__confirm-password'
+                type='password'
+                title='Confirm Password'
+                placeholder='Confirm Password'
+                name='confirm'
+                component={FormInput}/>
+
+                <div className='sign-up-form__line'></div>
+                <Field className='sign-up-form__login'
+                onClick={() => console.log('tryna submit')}
+                type='submit'
+                title='Login'
+                name='login'
+                component={FormButton}/>
+                <Field className='sign-up-form__back'
+                onClick={() => console.log('tryna go back')}
+                type='button'
+                title='Back'
+                name='back'
+                short={true}
+                component={FormButton}/>
+                <Details className='sign-up-form__details' title='QuickLinks' links={links}/>
+            </form>
+        )
+    }
+}
+
+SignUpForm = reduxForm({
+    form: 'SignUpForm'
+})(SignUpForm);
+
+export default SignUpForm;

src/components/formFields.js

@@ -14,10 +14,10 @@ export class FormInput extends Component {
 
 export class FormButton extends Component {
     render() {
-        const { className, title, type, onClick, input } = this.props;
+        const { className, title, type, onClick, input, short } = this.props;
         return (
             <div className={`${className} form-button`}>
-                <button className={`form-button__button`}
+                <button className={`form-button__button ${short ? 'form-button__gray-button' : ''}`}
                         type={type}
                         {...input}
                         onClick={onClick}

src/style/auth/signup.scss

@@ -1,4 +1,40 @@
 .sign-up {
     grid-row: content-s/content-e;
     grid-column: s/e;
+
+    &__page-title {
+
+    }
+
+    &__form {
+        display: grid;
+        grid-template-rows: [email-s] 64px [email-e password-s] 64px [password-e] minmax(20px, 289px) [line-s] 2px [line-e login-s] 38px [login-e];
+        grid-template-columns: 1fr;
+    }
+}
+
+.sign-up-form {
+    & > * {
+        grid-column: 1/-1;
+    }
+    &__email {
+        grid-row: email-s/email-e;
+    }
+    &__password {
+        margin-top: 15px;
+        grid-row: password-s/password-e;
+    }
+    &__line {
+        grid-row: line-s/line-e;
+        border-top: 1px solid #ccc;
+    }
+    &__login {
+        margin-top: 39px;
+        grid-row: login-s/login-e;
+    }
+    &__details {
+        grid-row: 1/-1;
+        justify-self: end;
+        align-self: start;
+    }
 }

src/style/form-fields.scss

@@ -34,4 +34,9 @@
             outline: none;
         }
     }
+
+    &__gray-button {
+        background: #999;
+        width: 137px;
+    }
 }