So what I want to do is go to the application and I want to close out the terminal and let's going to shopCart.js. Okay, in here we're going to need a couple of things, we're going to need a component called and we'll type it in here because we're only going to use it in here, so it's going to be really small. I'll say function and we'll call it back, or we'll just say, we're actually going to use it in two places because you'll see in the design we have this X and then back on the home screen, we're supposed to have one that has a little cart icon on it.

So we'll just call it CartButton or something, and then we'll say that it takes in some parameters okay, so it can take in some props and this prop this first one is going to be className obviously, then the next one is going to be icon okay. And then in here, we're just going to return a div with a class name of cart-button. Alright now in cart-button we want to actually also make it so it takes in a className. So let's refactor this a bit, okay let's throw in the class name and we are good.

Now what we want to do is put in the icon so let's say I or we could really actually even put it in the div but it doesn't matter so we'll put it in here, we'll say I and we'll say className is equal to fas fa-times I think it is or crossing I don't know we'll check later on. Okay, so now that we have this we actually want to pass it in as a prop, so we'll get rid of that and we'll put in braces and we'll say icon.

Now let's use it and put that in, it's let's go into shopCart and let's say, what was it? Yeah, CartButton, I am out of it. Okay, so we have className and we have is equal to shop-cart__toggle, I guess we're going to call it toggle. Okay, now what we're going to do is we're going to pass in an icon and we're going to say fas fa-times.

shopCart.js

import React, { Component } from 'react';

function CartButton({className, icon}) {
    return (
        <div className={`${className} cart-button`}>
            <i className={icon}/>
        </div>
    )
}

class ShopCart extends Component {
    render() {
        const { className } = this.props;
        return {
            <div className={`${className} shop-cart`}>
                <CartButton className='shop-cart__toggle' icon='fas fa-times'/>
            </div>
        }
    }
}

export default ShopCart;

So let's go ahead and apply some styles to this by going into the shop-cart.scss file and say in .shop-cart, we'll say &__toggle and we'll just say that the background color is the same color so #333, and let's see, font size is let's just go with 20 pixels and see how big that is, maybe 18 pixels, and that should be good to be honest, but we need a border of 25 pixels 00 25 pixels, or not a border but a what is it? I don't even remember the thing. Border radius, yeah that's right. Okay, that should be good.

shop-cart.scss

.shop-cart {
    height: 675px;
    width: 520px;
    background-color: #333;
    box-shadow: -3px 20px 20px 0 rgba(0,0,0,0.2);
}

.shop-cart {
    &__toggle {
        background-color: #333;
        font-size: 18px;
        border: 25px 0 0 25px;
    }
}

Now what we need is to make this a grid okay, we need this bottom part to contain the content and then we need this top part to contain this X button, so let's go see the X button in here. Okay, so you see the X but you can't really tell where it is.

So what we need to do is instead of making the entire shop cart have a background color of black, we actually need it to be clear right because we want this top part to be clear okay, then we want the bottom part to be that background color. Okay so let's go into shop-cart.scss and let's say that the shop cart doesn't have these properties and actually let's get rid of these.

Let's see the design real quick, okay so this is the height of... where are the units? It's showing me in percent, we don't want to see it in percent. Okay, pixels those are not pixels they are percent. I'm going to reload the design so I can see it.

Okay, so height is 675 for this. Remember it's just this box it's not the top here where the X is.

So what we need to do is not put that on the shop cart but instead, we need to take this all out and we need to go in here and say &__content and then put that in there.

shop-cart.scss

.shop-cart {

}

.shop-cart {
    &__toggle {
        background-color: #333;
        font-size: 18px;
        border: 25px 0 0 25px;
    }
    &__content {
        height: 675px;
        width: 520px;
        background-color: #333;
        box-shadow: -3px 20px 20px 0 rgba(0,0,0,0.2);
    }
}

Now we have to make a div for this because we obviously don't have a div for it. So let's go back to shopCart.js and let's say that we have a div in here, and as a matter of fact let's just make a component. So what we'll do is we will put another functional component beneath CartButton and I'll say function CartContent and I'll say that's a function that takes in a className and that's it for now I believe.

If we even add anything more and we'll just return a div, well we're going to have to add in the items right, we're going to have to have the items to map over those but we won't worry about that now. className is equal to bracket's and in braces we'll say, well first let's wrap it with these back tic dudes, let's say className and we'll say cart-content okay cool.

Now we can throw this in here and have it be more consistent with the rest of our JSX design here. So let's say cart content, and we'll say class name is equal to shop-cart__content, and yeah we're good. Now we have this content component right, and it's just a div it's just that we're separating it into a component to make it more readable.

All right let's go back into shop-cart.scss, see we have content and now we can even reference it like this right, we can say .shop-card because we also have it named individually right. We also have it named in here cart content, my bad it should be .cart-content see we also have it named in here as cart content, same with cart button so really we can say cart button in all reality we want to put these cart button styles in here because when we use this component again we want to have the same style. So let's cut this cart button toggle styles and put it in cart button.

shop-cart.scss

.shop-cart {

}

.shop-cart {
    &__toggle {

    }
    &__content {
        height: 675px;
        width: 520px;
        background-color: #333;
        box-shadow: -3px 20px 20px 0 rgba(0,0,0,0.2);
    }
}

.cart-button {
    background-color: #333;
    font-size: 18px;
    border: 25px 0 0 25px;
}

.cart-content {

}

Now we're not going to ever use the cart content again we're only going to use it in this component. But again for readability and everything we're going to do it this way. Okay so this should be good, let's go ahead and see what this looks like in the browser, okay sweet, so it looks a little bit better although it's still a little bit nasty right.

We need to specify how big this top part is, and then we need to put it all the way to the right and we'll do that with a grid. Then we also need to put in a little grid gap of 15 pixels or margin or just another row of 15 pixels. Okay, so let's go back into our application we're already specifying the height, okay I guess we're not, let's say height is 40 pixels.

Let's go see if that's what it was in the design, yeah, and the width is 76 pixels so we'll say width is 76 pixels. Now we have a width of 76 pixels and a height of 40 pixels and we've got a border of 25 0 0 25 okay. And we have the font size of 18 pixels and the background color of 333. Now what we can do is we can look at our design and then we'll put it on a grid or we'll look at our application then put it on a grid.

See that looks a bit better, now let's push it over here by using a grid by using CSS grid, and then by using justify items or justify self end right, we want it to be at the end of our grid. So let's go to vs code, and let's go to shop-cart.scss and let's say the display is grid, and then let's say the grid-template-rows is 40 pixels. All right so we'll say cart start or toggle, we'll say tog start and tog end and then we got content end so will say con start and con end, just to keep it clean and short and easy.

Okay, then we'll say 40 pixels and then we want this to just be 675 pixels or you can even put 1fr. I think that'll work either way let's try 1fr and see what that looks like and then we'll change back to 675 just to be exact. Okay now, what we need to do is we need to say grid template columns and we'll just say start to end and we'll say 1fr.

Now what we need to do is say &__toggle has a grid row of tog start to tog end and it has a grid column of start to end and then let's copy it right and change this to content, now we want to align this to con. All right, sweet that should be good, go ahead and get all the styles in.

All I did here was just add in the grid and then we aligned everything so we have the rows 40 pixels and 1fr, so 40 pixels at the top and then the remaining space and then we have a column just 1fr to contain all the content from left to right, then I aligned it.

Okay, so going to google chrome and then we'll have to do one more thing. See it kind of looks the same but it's really not, it's actually on a grid now, so if you hover over it you'll see there's like those grid lines.

So what we need to do is say justify self on this item here, which belongs at the end. So let's go into our application in the code and say on toggle, justify self is end and then if you go back to our application you'll see that it ends now, so that's exactly what we want. If you look at the design obviously it's there.

Now one thing we need to add in is a grid-gap okay, we need to add in a grid-gap there to get this 15 pixels.

Okay so let's go ahead and go to our code and what we need to do too is rename this cart button to border-radius. I thought it was already set to border-radius so I was confused. Okay, because now the border-radius will work, there you go.

All right, so we're good to go there, let's go ahead and go back to our application code and let's say... let's see, where are we at? Let's go up here and let's say what were we doing? Oh grid-gap, okay a grid-gap of 15 pixels and make sure we just say grid let's try grid-gap, and it might affect our columns but if it does then I want to show you. But we know it's going to affect the rows, so let's go into our application and you'll see that grid-gap there now.

It didn't affect our columns but it's still a good idea just to specify that we only want it on the row just to be extra exact right. Because if CSS grid updates and for some reason, it applies that to a single column on the right or something we want it to not do that, we want it only on the row.

All right, so that's clean let's go look at our application again, it looks good to me. Let's finish off this little X here and then in the next video we'll move on to the content component. So let's go into our application code and let's say that the toggle has a display grid of its own right. And what we'll do is, yeah we'll leave it in here because it's kind of like all of our grids here, and then we'll just say justify items is center and align-items is center.

And that would put it directly in between the toggle right. Because if you remember in shopCart.js in this cart button we have the icon within it, so we want a grid in here and then we want to center it right in the grid. Okay so put these three lines in for the toggle, and feel free to structure it however you want, I'm just trying to do this for maximum readability for you guys.

Let's go into Chrome and you'll see it's directly in the center. Now it looks a little small and it's not white. So let's change that, let's go into toggle and let's just say that font size, well we'll go into cart button here and we'll say font size is 20 pixels and the color is, not the background color, but the color is white okay.

shop-cart.scss

.cart-button {
    background-color: #333;
    color: white;
    font-size: 28px;
    border-radius: 25px 0 0 25px;
    height: 40px;
    width: 76px;
}

Let's go back into our app and you'll see it looks like our design now.

Obviously it looks a little different because this is just a random x whereas we're using font awesome, I think font awesome looks better here, it matches the font a bit better. So we're good there, and yeah that's how you build this, that's how you get that grid in there.

So in the next video what we're going to do is we're going to work on the shop cart content component. So we're going to get the content in there and then move on to things like the footer and the items in here. Okay, so we have three main components in here right. You've got the title, you've got the items we're going to map over, and then we've got this footer deal.

So let's commit our code.

Terminal

git status
git add .
git commit -m "structured shop cart component and styled"

Okay, I'll see you in the next video.

Resources

Source code