‫Next in line for styling is the Cart
‫So let's go there
‫and let's jump right in.
‫So let's actually start by adding now
‫some space here.
‫So between the beginning of the page and the content.
‫And so let's do that right here.
‫So some horizontal padding here
‫of three.
‫And also let's add some on the sides.
‫Yeah, that looks nice.
‫And here we don't need a lot of space
‫at the top
‫because I want this link here
‫actually to be pretty close
‫to the top.
‫Then where we will have
‫a bit more space
‫is between that NDH1.
‫So let's add then some space here.
‫So margin to the top
‫of seven, let's say.
‫And then let's also increase
‫the text here a lot.
‫So to extra large.
‫And let's make it semi bold.
‫All right.
‫Now here of course
‫later we will then replace this
‫with the real name.
‫But for now, let's just leave it.
‫And then let's actually display
‫so kind of render this fake card
‫also here on this page.
‫So we already have these card
‫item components here.
‫Let's just include
‫or import this module here.
‫And so
‫as always, we will render
‫one of those card items
‫for each object in that array.
‫So let's do that right here
‫inside an unordered list.
‫So card.map,
‫and the card has multiple items
‫and for each of them
‫we will render one card item
‫and we will pass in
‫the item as an item
‫and then the key will be item.key.
‫So pretty standard stuff.
‫Let's just close this right here.
‫And there we go.
‫So here we have
‫these cart items
‫and let's immediately add
‫again a divider between them.
‫So divide-y.
‫Let's also give it
‫again the same color.
‫So stone 200
‫and nice.
‫The only problem
‫is that these dividers
‫are basically only between the elements.
‫But here we also want one
‫at the end
‫basically to close that list.
‫And so let's add a border
‫to the bottom
‫and it will automatically use
‫the color of this divider right here.
‫'Cause basically what this does
‫is to set the border color.
‫All right?
‫Then let's also add some spacing here to the top.
‫So margin top, let's say three.
‫Okay,
‫and then let's also add
‫some margin there.
‫So class name margin top of
‫six and nice.
‫And since we are here,
‫let's also add some margin.
‫So some space between those buttons.
‫And for that we can again use
‫that trick of space.
‫So the space helper class.
‫So vertical space, let's say two.
‫So that's very little,
‫but when we will style this button
‫we will see that this is enough.
‫So let's leave that button for the end.
‫And now let's style
‫each of these card items.
‫And let's start by adding
‫some space between them.
‫So by giving each of them
‫some padding like this.
‫So here we can have a bit more padding
‫than in the menu
‫because we have usually not so many items in the cart.
‫Now later on,
‫we will also have some buttons here
‫for deleting the item from the cart
‫and to change the quantity.
‫And actually let me add
‫one of those buttons here temporarily
‫right now.
‫So let's use our button
‫with the type
‫of small
‫and then let's say
‫delete.
‫And of course these should be side by side.
‫So as always
‫we use our friend Flexbox
‫then justify between
‫and items
‫center as well.
‫Now let's change this one here a little bit
‫as well.
‫So here we want the text to be a bit smaller.
‫So text small
‫and let's make it in bold
‫just like this.
‫And now here,
‫just some space vertically.
‫So let's say margin bottom one
‫to give it a bit more breathing room
‫because of this button.
‫And so like this,
‫it will look great
‫at least on smaller screens.
‫So on something like this
‫this is going to look really great.
‫So keep in mind that we will also have
‫like some buttons here to change the quantity.
‫And so if all of this was side by side
‫then there wouldn't really be enough space.
‫However, at a certain point
‫there is so much space
‫that it actually starts looking
‫a little bit strange.
‫So at some point
‫we should probably have
‫all of this side by side here.
‫'Cause like this, the content looks a bit lost.
‫So let's actually start doing that here
‫at this small view port.
‫So, we can
‫of course use Flexbox
‫also at different breakpoints.
‫So just like this.
‫And there we go.
‫And now we just need to do
‫our regular things
‫which is
‫items center
‫and also
‫justify between
‫and all of these only at a small breakpoint.
‫Now due to the nature of Flexbox
‫now this content here
‫doesn't stretch over one entire line.
‫And so therefore this justify
‫between here no longer takes effect.
‫But that's not a problem
‫because here at this point
‫we actually don't even want that behavior.
‫So here we only want some space between them.
‫And so here at this breakpoint
‫let's just add a gap,
‫for example, of six.
‫All right.
‫And we will then adapt this a little bit
‫as soon as
‫we add these other buttons here
‫to update the quantity.
‫Now we also don't
‫need this margin here anymore
‫at this point.
‫And so we can remove that also
‫at this breakpoint
‫by saying margin bottom zero.
‫And so that's basically
‫what these zeros here are for.
‫So sometimes we need to set
‫or reset something to zero
‫and that's when these classes
‫with the zero come into place.
‫So you saw a small change here
‫and now everything is nicely aligned again.
‫So with this,
‫I think we finished this cart item for now.
‫And so let's turn our attention
‫to this other button here.
‫So here we want
‫a really de-emphasized button
‫which might even be transparent
‫and just with a light gray border.
‫So basically what we're gonna do
‫is to create yet another variation in our button.
‫So let's make just a type
‫of secondary and then clear cart.
‫All right.
‫Now, of course that type doesn't exist yet
‫so let's create it.
‫So right here
‫and this button is actually gonna be
‫really, really different.
‫And so here I will not even update the base styles.
‫I will just copy all of this
‫and then change
‫what we want to change.
‫For example, the background
‫should actually be transparent.
‫So really no background.
‫And this one is actually
‫not even necessary
‫because by default the button is already transparent.
‫But we want to have some border as well
‫with the width of two.
‫And let's give it a color
‫of stone 300.
‫And if we save this
‫then you see that actually
‫it is already taking effect.
‫All right.
‫Now, let's just also copy these paddings
‫because they should be similar.
‫Place them right here.
‫We just need to decrease them a little bit.
‫So let's basically do some hack here
‫where we just slightly decrease the padding
‫to take into account the border.
‫So that looks a bit more natural.
‫And then here at the media Query,
‫let's set it to 3.5.
‫Then here,
‫let's just decrease the color there.
‫And then finally,
‫all the other hover styles
‫and also the focus style.
‫So this one, we also want to be very different.
‫So here let's have
‫stone 800, let's say.
‫And for the focus
‫the same.
‫So background stone.
‫And actually I think
‫800 is gonna be way too much.
‫So that's more like black.
‫So what we actually want
‫is 300 here,
‫just like this.
‫But let's then of course
‫make the text also a little bit darker.
‫So hover
‫text-stone,
‫anterior, let's use
‫that 800.
‫And then finally
‫let's change the focus ring as well
‫to stone 200.
‫All right,
‫let's change the focus as well.
‫And so what we have to do here
‫to finish is
‫also having this one for the focus.
‫Place that right here
‫because here, of course
‫the prettier plugin
‫is no longer sorting these classes.
‫So that only works when
‫we have the classes right here
‫in the class name,
‫but not here.
‫Okay.
‫So that looks great.
‫And I believe that with this
‫we finished yet another page.
‫And so let's move on
‫straight to the next one
‫which is going to be our order form.