It will be really easy to implement since we just built the grid for the product which is exactly the same minus the image, so we'll literally just need to remove the image and paste in the grid and we're good. First thing I'm going to do is head over to reviewProduct.scss. Now what we're going to do is we are going to basically just see if we can use this exact grid without renaming anything in here okay.

Now let's go see if we can do this okay, so let's go into... let's see where is it? reviewProducts.js now in review products what we're going to do is we are going to essentially not do anything, because we don't want it to be in here because we already have this div. So what we do is we want to do is go to review.js right, and then head into review form.

Okay, so we haven't done anything in this video, no coding nothing, we just navigated to the component we need to be in okay. So we're in reviewForm.js alright, in reviewForm.js what we need to do is basically add in this other line okay. So above products let's add in a div, and let's say className is equal to review-form_line-top. Now we want to do is this is going to contain some items, almost like a legend. So what we'll do is we'll call it `review-form_legend` okay.

In here what we'll do is we'll put in a few div's. We need a dev here, we need to give this a className of review-form__legend and we'll say underscore underscore and we'll say what is it? Price or title right. We'll have a title and this is going to say title okay. Now it's actually going to say name, so what we want to do is say name and then change this to name.

Now let's copy this div a few times, let's tab it over a bit and then let's change this one to quantity and we'll say quantity, and then we'll say price and then we'll say price, okay so we have our items here.

reviewForm.js

return (
    <form onSubmit={handleSubmit} className={`${className} review-form`}>
        <div className='review-form__legend'>
            <div className='review-form__legend__name'>Name</div>
            <div className='review-form__legend__quantity'>quantity</div>
            <div className='review-form__legend__price'>price</div>
        </div>

Now what we need to do is head over to reviewProduct.scss and we need to basically copy all of this okay, and then paste it right below it, so we have two copies of this scss code right here. Now what we do is get rid of the image tags but we want to leave that 80 pixels okay, we want that 80 pixels to stay there. Because in the design it still has that 80 pixels right there, it still starts in the same place.

So now what we need to do is rename title to name and then what we'll do is we'll get rid of this font size and font family on all these. And we'll we've justify-self end, but we'll get rid of &image okay, so this is the code we want. All right, now what we need to do is we need to basically say instead of review product we'll say review-formlegend so get this code in here, on my screen lines 35 to 57, make sure you get all this code okay.

reviewProduct.scss

.review-form__legend {
    display: grid;
    grid-template-columns: 80px [name-s] 1fr [name-e quantity-s] 1fr [quantity=e price-s] .5fr [price-e];
    grid-template-rows: [s] 1fr [e];
    grid-column-gap: 30px;

    align-itmes: center;

    & > * {
        grid-row: s/e;
    }

    &__name {
        grid-column: name-s/name-e;
    }
    &__quantity {
        grid-column: quantity-s/quantity-e;
    }
    &__price {
        grid-column: price-s/price-e;
        justify-self: end;
    }
}

Now let's go ahead and check reviewForm.js and see what it is. Okay so review-form__legend with name, quantity, and price. Okay, so that should be the same, so that should be good. What we need to do now is check it, it should be in there. Okay now it might be a little messed up for a few reasons, and look it's empty.

So let's go into a shop, oh yeah, so it's mess stuff up here. That's just because we have a grid and it's doing something okay, so no errors, it's just styling errors. So reviewForm.js, review-form__legend. Okay, so what we need to do is check our reviewForm.scss and the reason this is broken is because we don't really have a grid on review form at least... well we do, but it's not in here it's actually in review.scss, see how it's in here on the grid?

So what we need to do is introduce another line up here okay, we need to say how high it is. Let's just say something like 30 pixels right, and we'll say legend start to legend end. Okay so I'm in review.scss, put in this code right here into the grid template rows, you want this before your products.

review.scss

&__form {
    display: grid;
    grid-template-rows: [legend-s] 30px [legend-e products-s] 400px [products-e line-s] 26px [line-e buttons-s] 38px [buttons-e];
    grid-template-columns: [back-s] 137px [back-e space-s] 40px [space-e proceed-s] 1fr [proceed-e] 1fr;
    grid-row-gap: 15px;
}

Come back to reviewForm.scss and let's head back to... yeah let's go in here and let's say &__legend, and we'll say grid row is legend start to legend end, and the grid column needs to go from 1/-1.

reviewForm.scss

.review-form {
    grid-row: legend-s/legend-e;
    grid-column: 1/-1;

All right let's check this out and see what it looks like.

You'll see we have name, quantity, and price. Let's go back and let's add and item to the cart, let's hit check out, and you'll see we have all of the items and that everything's looking good. Okay so let's go back again, let's add in a couple more items just to get it to fit all right. So check out looks like it's cutting off an item okay. All right let's go back a bit, let's go to JavaScript, let's go to all and add a couple things.

Let's say advanced OOP, okay we have four items in here, let's hit check out, we have four items. Okay so that looks good, all we need to do now is add in the line and the styles here. So let's start with these labels here, so it's going to be the same color, it just needs to be a bit bigger okay, so about 14 pixels. So let's go to legend here and let's just say font size 14 pixels, and that should fill up the items in our legend okay.

&__legend {
    grid-row: legend-s/legend-e;
    grid-column: 1/-1;
    font-size: 14px;
}

All right, and they're all 14 pixels now.

Now all we need is that line which is the same as this bottom line. So let's add that in, let's say on the legend that it has a border bottom of one pixel solid #CCC and that should be good okay. So we have our border now, so let's go ahead and let's check it out in chrome. Let's go to your application, and you'll see we have our border but it doesn't have that padding, so let's add in that padding and then will be done. So about 11 pixels, let's say that it also has a padding bottom of 11 pixels.

reviewForm.scss

&__legend {
    grid-row: legend-s/legend-e;
    grid-column: 1/-1;
    font-size: 14px;
    border-bottom: 1px solid #CCC;
    padding-bottom: 11px;
}

Okay, that should be good, let's go to Chrome, let's go to our app, and I'm not seeing it... oh there it is, it just went, so that's good.

Let's go ahead and look at it one more time. okay yeah, that should be good. One thing I want to do before we end it is, you see how the price doesn't reach the end here and neither does it right here?

What we need to do is make sure that's doing that in our app too. So what we need to do is go into our grids and put like 80 pixels or like 40 pixels or something right, we need to give it some space. So what we'll do is we'll go into our app and we'll go to reviewProduct.scss and on these grids we just need to say 40 pixels at the end here on each of these.

reviewProduct.scss

.review-form__legend {
    display: grid;
    grid-template-columns: 80px [name-s] 1fr [name-e quantity-s] 1fr [quantity-e price-s] .5fr [price-e] 40px;
    grid-template-rows: [s] 1fr [e];
    grid-column-gap: 30px;

So again reviewProduct.scss 40 pixels at the end of those. Let's save it, let's go to Chrome, let's go to this right here and it looks great.

So that finishes that off, it has the same gaps here, everything looks good. Okay so that's how you do that, what we'll do in the next video is we'll add one more component into this page which is going to be the details down here, this component right here, we'll add that in and then we'll be done with this component. Okay, let's commit our code.

Terminal

git status
git add .
git commit -m "order review products title bar"

I'll see you in the next video.

Resources

Source code