Let's pick up our work on the confirmation model and finish off the UI. Okay, so we've got something that looks like this and we want something that looks like that. Now there's going to be a bunch of markup here and our active cart file is starting to be quite long. So what I want to do to begin with is grab the actual popover here and I guess this is still the context of the cart. So let's keep the component inside the cart directory, but I have a new file called confirmation that blade that PHP in which I will paste that. And so now

but I have a new file called confirmation that blade that PHP in which I will paste that. And so now in the active cart, instead of having that, I can call the X cart confirmation component. All right , and let's check that it still works. And yeah, it does. Now remember the popover element can be anywhere in the markup. It doesn't have to be at the end of the DOM, basically. So we could have put this X cart confirmation component anywhere in the templates in the side sidebar anywhere

this X cart confirmation component anywhere in the templates in the side sidebar anywhere we want. I think here it makes sense to have it in the active cart, collocated with the toggle button that is responsible for opening it. All right, so from now on, we're going to work in that file. Step one is to grab our tick icon. So let's go in the challenge files and find this one. I'm going to open it as a text file. I'll copy this. You've seen me do that a million times.

I'm going to open it as a text file. I'll copy this. You've seen me do that a million times. I will go in the icons here. Let's call this one confirmation that blade that PHP and paste the code. Now we want to remove the width and height and set the fill color here. And I think there is two elements yet to current color. And then like we've done for other elements, we want to merge the class attributes. So I will borrow this and paste it here. I'm going real quick, but you've seen

the class attributes. So I will borrow this and paste it here. I'm going real quick, but you've seen that a few times. And so inside of here, we can start with our first element being the X icons dot confirmation. And we need to pass some classes here. So the size was 48 pixel, which is size 12. And the text was text green. So we should have a nice check icon. And there it is. That's a good start. Next, we're going to have a heading order confirmed and a subheading. We

is. That's a good start. Next, we're going to have a heading order confirmed and a subheading. We hope you enjoy your food. All right, so let's get rid of this. I am a cool popover, because now we have real content order confirmed. P I always like when a copilot tries to figure out text, we hope you enjoy your desserts are your food. It was close enough. All right, not bad. So we're going to have some margin top here. And here, and here, this is bold. And I don't know to

we're going to have some margin top here. And here, and here, this is bold. And I don't know to excel. Let's go H2, class, empty four points, bold text to excel. Whoops. And here go class, empty two. And yes, we could have a flex container with some gap. But I think that works here. How does that look? Looks pretty good. This is too small. I'll go for Excel. And yes, in a real world, you would look at the Figma specs. But here, we are eyeballing everything. That

world, you would look at the Figma specs. But here, we are eyeballing everything. That might be a little too big, but I'm quite happy with that. And no, actually, that's all right. Okay, next, we're going to have a box, which is this beige color, like the page is background. And for each list item, we're going to have, once again, a boarded bottom. I feel like I can borrow a lot of the styles from the sidebar up here, because it's a similar setup. So we

borrow a lot of the styles from the sidebar up here, because it's a similar setup. So we might use that as a base. So in my active card, what I'm talking about is this an ordered list for each list item. So I'll grab that. And I'm going to below here, have a div to contain it. And let's give that BG rose 50 class. And yeah, probably P for rounded LG that'll do and then paste that it. Now we're not going to keep everything. For example, we are not going to have the delete

that it. Now we're not going to keep everything. For example, we are not going to have the delete button on each. But beyond that, this is not going to work just yet. And I hope you understand why it's because we are not passing the card to that component. So in our active card, and what I'm here, let me copy the card props, just like we are receiving the card, we need to also pass it to our confirmation here. So card equals card. And then like I just mentioned, in the confirmation

it to our confirmation here. So card equals card. And then like I just mentioned, in the confirmation component, we define the card props. So now the component knows what to do with the card items. And as a result, we should have made a big jump forward. Look at that. This is not bad. It's definitely starting to look like something. Okay, so we have the same sort of information in this design. We have the image as an extra, and then the sub total for this line item is on

in this design. We have the image as an extra, and then the sub total for this line item is on the right, instead of next to that. So we're going to have to redefine our flex containers to make it work, and add the image. Right now, this is how this looks. But we want to move the 35 to the right. And let's also add some margin top here. I'll go with empty eight. Okay, so here, let's go empty eight before we forget. And then here we can actually keep our

here, let's go empty eight before we forget. And then here we can actually keep our flex container with justify between and all the other classes. But what we want to do, this is the first item on the left. And I feel like the second item yet was the form that we removed. So if I had another div here, what we could do is go and move our formatted total inside of there. And really, instead of moving this inside that div, I could get rid of the div and the span

And really, instead of moving this inside that div, I could get rid of the div and the span becomes the top level element or the right side. I know I'm going really fast and it's a bit messy, but I got to remind myself, this is a challenge. This is not me teaching you every step of the way. I cannot help myself but teach you, but I also cannot get into this challenge mode. All right, so let's look at the updated version. And yeah, this is not bad. From the design, I think

right, so let's look at the updated version. And yeah, this is not bad. From the design, I think this is a tiny bit bigger. I also just noticed that the UL as a margin top that we don't want here, because the margin is handled here. Yeah, okay, that's better. And so like I was saying, the formatted price can be text LG. Yeah, okay, that's nice. And and we are going to want to add the image on the left next to all of these other info. So basically, I need another level of flex, which

on the left next to all of these other info. So basically, I need another level of flex, which is going to be this div. So here I'll go class, flex items, center and gap two. And then we're going to have our image. And all the other elements will be wrapped in a common parent. So I'll have the H two, and then this wrap inside a div. Hopefully that makes sense. Here, let's have the image. Let's quickly check in the product, how we pull the image. Yep, like this, because we're going to

Let's quickly check in the product, how we pull the image. Yep, like this, because we're going to do something very similar. So let me replace the source attribute. But as copilot suggests, we need to go item product image. And for the alt tag, let's get copilot to help us as well. Come on, picture of item product name. Let's try that. We might need to add some classes to the image, because yep, they're going to be way too big. There are a square with some

to the image, because yep, they're going to be way too big. There are a square with some rounded corners. So let's go class size, let's try 12 and rounded MD. How does that look? It looks all right, except the image is squished, because I need to use object fit cover. And I think I'll increase the gap a little bit gap for so object cover. And this time, it should look pretty decent. All right, let's keep that in mind and compare it with the design. And I think

pretty decent. All right, let's keep that in mind and compare it with the design. And I think that's pretty good. Let's then display the order total below. And that looks, if I look up there to the right as a replica of that one. So once again, if I go in the active card, I should actually have an element already made just for that. These can go inside our little box here. So I can collapse the UL. And after that, have our order total, it might need some margin top. And indeed

collapse the UL. And after that, have our order total, it might need some margin top. And indeed , it does. But you know what, it's looking pretty good. Let's go empty six. And I have a funny feeling our order confirmation is going to start looking pretty good. Okay, so I feel like there's a tiny bit too much spacing at the top and not enough at the bottom. If we look at the design here, the gap is the same as on the left. And then there is a bit more spacing here.

design here, the gap is the same as on the left. And then there is a bit more spacing here. So how shall we fix that? There's probably some internal padding in the UL or the first L.I. Yeah, P Y four. So we could go PT zero P before, but I think I want to only handle the horizontal padding on the parent. So see now it fixed the top, but obviously here it's missing, but we can handle that inside the order total. So let's scroll down. And instead of empty six,

but we can handle that inside the order total. So let's scroll down. And instead of empty six, I can go P Y six to have spacing top and bottom. And that my friend, I believe is going to make everything look really nice. So let's nope out of this and add a few items to the card to make it a bit longer. And so now we have a slightly more beefy order. And so let's try to confirm it. All right, that's looking good. As you can imagine, we might hit some problems when

to confirm it. All right, that's looking good. As you can imagine, we might hit some problems when the height of the confirmation is bigger than the parent. So a quick and dirty way to handle this on the popover element might be to go max height screen, or even better instead of 100 V H, let's do it dynamic viewport height. So that's going to factor in the address bar and other things on mobile. And I think that this should make it auto scroll if there's not enough space. And look

on mobile. And I think that this should make it auto scroll if there's not enough space. And look at this, a nicer way might be to put the scrolling container inside the items list. So you always see the top and the total, but I think that is good enough for what we're doing here. All right, this is looking pretty good to me. The next step is going to tackle the start new order at the bottom of the confirmation model.

of the confirmation model.