finished sign up form and grid

src/components/auth/signinForm.js

@@ -43,7 +43,7 @@ class SignInForm extends Component {
                 component={FormInput}/>
                 <div className='sign-in-form__line'></div>
                 <Field className='sign-in-form__login'
-                onClick={() => console.log('tryna submit')}
+                onClick={() => history.push('/account')}
                 type='submit'
                 title='Login'
                 name='login'

src/components/auth/signupForm.js

@@ -10,21 +10,18 @@ import history from '../../history';
 class SignUpForm extends Component {
     render() {
         const { className, handleSubmit } = this.props;
-        const links = [
+        const info = [
             {
                 _id: 0,
-                title: 'Not registered? Create account here',
-                onClick: () => history.push('/signup')
+                title: 'At least 6 characters'
             },
             {
                 _id: 1,
-                title: 'Forgot account email?',
-                onClick: () => console.log('forgot email')
+                title: 'At least one number'
             },
             {
                 _id: 2,
-                title: 'Forgot password?',
-                onClick: () => console.log('forgot password')
+                title: 'At least one symbol'
             }
         ]
         return (
@@ -47,7 +44,7 @@ class SignUpForm extends Component {
                 placeholder='Password'
                 name='password'
                 component={FormInput}/>
-                <Field className='sign-up-form__confirm-password'
+                <Field className='sign-up-form__confirm'
                 type='password'
                 title='Confirm Password'
                 placeholder='Confirm Password'
@@ -56,19 +53,19 @@ class SignUpForm extends Component {
 
                 <div className='sign-up-form__line'></div>
                 <Field className='sign-up-form__login'
-                onClick={() => console.log('tryna submit')}
+                onClick={() => history.push('/account')}
                 type='submit'
-                title='Login'
+                title='Creat Account'
                 name='login'
                 component={FormButton}/>
                 <Field className='sign-up-form__back'
-                onClick={() => console.log('tryna go back')}
+                onClick={() => history.push('/signin')}
                 type='button'
                 title='Back'
                 name='back'
                 short={true}
                 component={FormButton}/>
-                <Details className='sign-up-form__details' title='QuickLinks' links={links}/>
+                <Details className='sign-up-form__details' title='Password Requirements' info={info}/>
             </form>
         )
     }

src/components/details.js

@@ -1,16 +1,30 @@
 import React, { Component } from 'react';
 
 class Details extends Component {
+
+    renderChildren = () => {
+        const { links, info } = this.props;
+        let children = [];
+        if(links) {
+            children = links.map(link => {
+                return <a key={link._id} onClick={link.onClick} className='details__link'>{link.title}</a>
+            })
+        } else if(info) {
+            children = info.map(item => {
+                return <div key={item._id} className='details__item'>{item.title}</div>
+            })
+        }
+        return children;
+    }
+
     render() {
-        const { className, title, links } = this.props;
+        const { className, title } = this.props;
         return (
             <div className={`${className} details`}>
                 <div className='details__title'>{title}</div>
                 <div className='details__links'>
                     {
-                        links.map(link => {
-                            return <a key={link._id} onClick={link.onClick} className='details__link'>{link.title}</a>
-                        })
+                        this.renderChildren()
                     }
                 </div>
             </div>

src/style/auth/signup.scss

@@ -8,29 +8,41 @@
 
     &__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;
+        grid-template-rows: [name-s] 64px [name-e email-s] 64px [email-e space-s] 35px [space-e password-s] 64px [password-e confirm-s] 64px [confirm-e] minmax(20px, 81px) [line-s] 26px [line-e buttons-s] 38px [buttons-e];
+        grid-template-columns: [back-s] 137px [back-e space-s] 40px [space-e create-s] 1fr [create-e] 1fr;
+        grid-row-gap: 15px;
     }
 }
 
 .sign-up-form {
     & > * {
         grid-column: 1/-1;
     }
+    &__name {
+        grid-row: name-s/name-e;
+    }
     &__email {
         grid-row: email-s/email-e;
     }
     &__password {
-        margin-top: 15px;
         grid-row: password-s/password-e;
     }
+    &__confirm {
+        grid-row: confirm-s/confirm-e;
+    }
+
     &__line {
         grid-row: line-s/line-e;
         border-top: 1px solid #ccc;
+        margin-bottom: 24px;
     }
     &__login {
-        margin-top: 39px;
-        grid-row: login-s/login-e;
+        grid-row: buttons-s/buttons-e;
+        grid-column: create-s/create-e;
+    }
+    &__back {
+        grid-row: buttons-s/buttons-e;
+        grid-column: back-s/back-e;
     }
     &__details {
         grid-row: 1/-1;

src/style/details.scss

@@ -16,5 +16,8 @@
         & > * {
             text-decoration-line: underline;
         }
+        .details__item {
+            text-decoration-line: none;
+        }
     }
 }