All right. Now what we need to do is rename our button to new-newsletter-form__submit or it's not going to go anywhere we want it to go. Let's go to newsletterNewForm.js and change it from sign-in.

newsletterNewForm.js

        <Field
          className="new-newsletter-form__submit"
          small={true}
          danger={true}
          name="submit"
          type="submit"
          title="Submit"
          component={FormButton}
        />  

Now we can place it somewhere. Let's go into newsletter-new-form.scss and then add in a selector for submit.

newsletter-new-form.scss

    &__submit {
        grid-column: 1/-1;
        grid-row: 1/-1;
        justify-self: end;
        align-self: start;
    }

So, we can pull this up in Firefox to see where it is on the grid.

I recommend using Firefox for grids. Basically we want to put it on this first row that new newsletter is on, and then put at the end of that row with it. We have a problem, and that's because we didn't specfically declare any rows. All of our items on the grid are just flowing into where they are now.

THe problem with declaring rows right now is that it will ruin the rest of our placement and make all of our items the same size. So here's what we'll do instead. We'll change where the title sits, and then use margins and other styles to pull the button down.

newsletter-new-form.scss

    &__title {
        width: 100%;
        margin-top: 6.6rem;
        grid-column: s/e;
        grid-row: 1;
    }

And now for our button.

newsletter-new-form.scss

    &__submit {
        grid-column: 1/-1;
        grid-row: 1/-1;
        justify-self: end;
        align-self: end;

        margin-left: .2rem;
        margin-bottom: 1.2rem;
    }

Let's check it out in our browser.

that looks excellent. I'm going to change the color just a bit since the red we picked is really bright. Let's go into variables.scss and let's just change this red to go down a bit to 201. That's a lot better red. It looks more like our design.

Okay, so that should be good. Now we should put in our cancel button. Let's open up newsletter-new-form.scss and add in our selector for cancel.

newsletter-new-form.scss

    &__submit,
    &__cancel {
        grid-column: 1/-1;
        grid-row: 1/-1;
        justify-self: end;
        align-self: end;

        margin-left: .2rem;
        margin-bottom: 1.2rem;
    }

    &__cancel {

    }

Now let's go to newsletterNewForm.js and we'll copy and paste our submit button again.

newsletterNewForm.js

        <Field
          className="new-newsletter-form__cancel"
          small={true}
          name="cancel"
          // type="button"
          title="Cancel"
          component={FormButton}
        />  

Now if we go to the app, we can see that these overlap each other.

or if you go to or they're going to be on top of each other seem. It's covering it up you can barely see the border of the red. What we want to do is translate it over as much as we need to. So let's go in and add that in.

newsletter-new-form.scss

    &__cancel {
        transform: translateX(-15.5rem);
    }

Now if we look at our application, it's exactly where it needs to be.

Looks great, although you'll see it's a little bit bigger than this and that's because cancel has a one pixel border where as submit doesn't have a border. So we still don't want this to appear to have a border, but we want it to be the same width and height.

So what we can just do is go into our code and then we can go into our custom buttons and we can add in a border but make it the same color as our button, so it won't look like a border.

form-fields.scss

    &__danger {
        border: 1px solid $color-red-BA;
        color: white;
        background-color: $color-red-BA;
    }

And now it's wonderful. So what we want to do now is we want to make it so these are functional. When we click on cancel, it still says "trying to handle submit", just like our other button. There are many ways to fix this. We'll need to add an onClick={onClick} variable in our formFields.js so that the program will recognise that we're clicking selecting seperate buttons..

formFields.js

export class FormButton extends Component {
    render() {
        const { className, title, input, type, small, danger, onClick } = this.props;
        return (
            <div className={`${className} ${small ? 'form-button-small' : 'form-button'}`}>
                <button
                    className={`
                        ${small ? 'form-button-small' : 'form-button'}__button 
                        ${danger ? 'form-button-small__danger' : ''}
                    `}
                    type={type}
                    {...input} 
                    onClick={onClick}
                >
                {title}
                </button>
            </div>
        )
    }
}  

Let's go into our newsletterNew.js and let's change up what we're doing.

newsletterNew.js

class NewNewsletter extends Component {

    onSubmit = (fields) => {

        // if(button == 'submit') {
        //   // save new newsletter on the backend. perform a post request here.
        //   console.log('trying to submit to backend.');
        // } 
        // this.props.history.push('/dashboard')
        console.log('trying to submit');
    }

    onCancel = () => {
        // this.props.history.push('/dashboard')
        console.log('trying to cancel');
    }

    render() {
        return (
            <div className='new-newsletter'>
                <NewNewsletterForm onCancel={() => this.onCancel()} onSubmit={(event) => this.onSubmit(event)}/>
            </div>
        )
    }
}

Now we want to tell it to call this onCancel function when we click the cancel button, so let's open up newsletterNewForm.js and set that up.

newsletterNewForm.js

        <Field
          className="new-newsletter-form__cancel"
          small={true}
          name="cancel"
          type="button"
          title="Cancel"
          component={FormButton}
          onClick={this.props.onCancel}
        /> 

And you can see that we set the type for our cancel button to button, and that's because we don't want this button to be defaulting to submit. Let's go to the browser and check that out.

And it's working. So now that it's functional, we just need to push the user back when we hit cancel and we need to get rid of the focus on the button, but let's do that in the next video so you can nail this down if you got stuck anywhere, since it's a really long video.

Let's commit our code.

git status
git add .
git commit -m "built cancel button and placed form buttons on grid"

See you in the next video.

Resources

Code at this stage