All right, the next thing I want to do is start with the container with the rounded corners and the padding. So maybe I will keep this div as the wrapper and then have my container in another inner div. So here we'll have some classes, BG, white, padding, eight, rounded, LG, how do we look so far? Okay, so it looks like our rounded corners are not respected.

so far? Okay, so it looks like our rounded corners are not respected. And I guess that the actual popover has a background color of white and also I want a minimum width to our container. So on the parent here, I will go BG transparent to remove that white background that should fix our rounded corners. And yep, it does. And then on this div here, let's go with 120 if there is enough space.

And yep, it does. And then on this div here, let's go with 120 if there is enough space. So let's go max with full so that it's never wider than the actual viewport. All right. Good. Look, ah, much nicer. Okay, next to add a little bit of delight, I feel like this is very abrupt the way it enters and leaves. And let's see if we can add a little transition for in and out.

and leaves. And let's see if we can add a little transition for in and out. So on the popover element, I will add a transition class. And maybe let's set the duration to 300 milliseconds and say we want our pop over panel to start from 0% opacity. And so we can use the starting styles here at starting styles in CSS and go opacity 0. And let's go also starting scale 95. So now I'm hoping that when I click on confirm order, the popover is not going

And let's go also starting scale 95. So now I'm hoping that when I click on confirm order, the popover is not going to flash abruptly, but it's going to scale from 95% and fade in. Let's check it out. I'm going to click on the button and hey, that's pretty nice. Let's take a look one more time. Beautiful. As you can see, it doesn't leave as elegantly as it enters, but we can also fix that.

As you can see, it doesn't leave as elegantly as it enters, but we can also fix that. Okay, so a bit confusing, but we have our starting styles in place. And we can also set our ending styles there without the starting property. So when it goes away, we also want the opacity to be zero. And let's maybe go translate Y one. Remember, these two are the ending styles, so for that to work, while the pop over is open, we want to have translate Y zero and open opacity 100. I know it's quite confusing, but the starting styles are what's applied before

we want to have translate Y zero and open opacity 100. I know it's quite confusing, but the starting styles are what's applied before the element enters. While it's open, the open prefix takes care of that. And then as it goes away, it falls back to the non-perfect classes. Let's take a look. Now when I open the element fades in and scales in and when I leave, it still doesn't do anything. And I don't want to go into details here because I have a little bit on this

doesn't do anything. And I don't want to go into details here because I have a little bit on this exact topic, but we need to enable allow discrete with transition discrete in tail wind. So here I'm going to add transition discrete and this time check it out, scale in, fade down. Did you see that? Scales in, fades down.

Did you see that? Scales in, fades down. Although it feels like the fade in is not working when entering. I see the scale, but it doesn't seem to fade in as well. Let's slow the animation right down with a duration of one second. And indeed, you can see that it fades out, but it doesn't fade in here. Let me see if I can move all these classes directly on this element and remove the internal div. So I just need to get rid of BG transparent.

div. So I just need to get rid of BG transparent. All right, let's take a look. And no, we still have the same fade in issue. Huh, maybe, maybe, maybe we need to go starting open, opacity zero, so it sets the starting styles of it when it's open. Let's try it. Ah, here we go. It seems to be working now.

Ah, here we go. It seems to be working now. Okay, cool. Let me go back to a duration that is less annoying, probably 200 milliseconds is good here. And let's give it a shot. Appear, disappear, appear, disappear. I'm getting carried away here, but I want to do one more delightful touch and it's to

I'm getting carried away here, but I want to do one more delightful touch and it's to also animate the backdrop. Right now, when I click on the confirm, we have this really nice fade of the dialogue itself, the popover itself, but the backdrop is still abrupt. All right, let's try this. We have a backdrop style of black 50, but we want this to be the case when the popover is open.

popover is open. So open backdrop opacity 100 and otherwise backdrop opacity zero. Remember, this is the living styles. This is the current styles. And for the enter, we want to go starting open backdrop opacity zero super confusing. I know. But basically, we're going to define starting styles and if the popover is open , we're

But basically, we're going to define starting styles and if the popover is open , we're going to set an opacity of zero. It is still not going to work. You can see that it's still abrupt. Now, remember, we have the allowed discrete behavior that allows us to transition something like display non to display block, but we actually need to enable the transition for that element.

transition for that element. So for the backdrop specifically, we want to set the transitionable properties. And here I'll use an arbitrary value because we want the opacity and we also want the display property. So I'm setting here for the backdrop that we want the animatable properties to be opacity and display. And that time, watch the backdrop animate smoothly on enter and leave.

and display. And that time, watch the backdrop animate smoothly on enter and leave. And this starts to feel much nicer. All right, we got a little bit of track, but I think for the better. This is really a nice delight addition to users when they confirm the order. I think it's going to put a smile on people's faces. So in the next lesson, we can now actually have the list items. If I look at the design, we want things to look like this. So we're going to have an icon heading and then the list items with the total and this

So we're going to have an icon heading and then the list items with the total and this button here starts new order should probably clear the entire card to start a new order. Let's take a look at all of these in the next lesson.