It's not too difficult. So let's start with that. So I'm going to go into my show.blade.php, and we'll just work in here for now. So we'll put it right here above the models container. So it has to be fixed. Let's say bottom: 0, right: 0. So I want it to come in from the bottom right, maybe slide in, because if you look at the Laracasts form, it does have some success messages coming in from the bottom right. So let's try to stay consistent with that. So fixed bottom right, make it white, let's make it rounded, xl, let's give it a shadow,

So let's try to stay consistent with that. So fixed bottom right, make it white, let's make it rounded, xl, let's give it a shadow, make it large, let's give it a border, and let's give it some padding, px-6, py-5, and some margin, mx-6, and my-8 is what I have. And let's just add something in here and see how it looks. So for now, let's just say idea was updated successfully, and let's see how this looks. So that looks pretty decent. Let's add a close button. So we have to make this a flex container and say justify-between, and this will be the second flex item.

So we have to make this a flex container and say justify-between, and this will be the second flex item. So let's say, give it a margin-left, sorry, not margin-left. Actually this is the first flex item, and we'll add the typography styles on this. So let's say font-semibold, say text-gray-500, and text-base, I believe it's already this size, but we'll just be explicit here, okay? So that's a little bigger. And the next flex item is the close button, so it's a button, and let's give this a color as well. So let's say text-gray-400, and hover:text-gray-500.

as well. So let's say text-gray-400, and hover text-gray-500. And let's grab the close icon from heroicons here. So let's say close, and we'll grab this one here, copy SVG, paste this in, let's go ahead and re-indent that, okay? And I usually like to get rid of this, since we don't need it. And let's see how this looks. Okay, let's make it a bit longer, so I'm going to say max-width-small, and give it a width-full. See if that works, and it does.

And we have to make this one a flex container, so let's say flexItemsCenter, so it's centered vertically. And now the text is going to be the second flex item. So we'll wrap this in a span, and give it a margin-left of 2, and then this one will be the icon. So let's paste that in. Again, let's get rid of this. And then let's make it green. So say text-green here. Okay, see if that works.

So this should be a bit smaller. I guess that doesn't make a difference at this width. Let's make the margin smaller. So small and above mx-6, but on mobile mx-2. Okay, so that pushes over a bit. Let's make the text smaller on mobile. I'm actually going to move this typography stuff to the actual element with the text. So I'll put it here. And let's make the text smaller. So small and above text-base, but text-sm for mobile.

So now let's work on showing and hiding it. And for now, we'll just make a temporary button that does this, and then we'll hook it up to the actual actions in our app. So for example, these ones in the next video. So let's do that. So let me just look at one of the other components we have here. So the ModalConfirm, let's just grab all of this. And make this an Alpine component here. Okay. So it's this one here.

Okay. So it's this one here. Let's go ahead and reformat this and paste all of that stuff in. And for this one, we don't need to listen for this event. So let's get rid of it. And now this should be hidden because it's set to false here. And we have x-show is open. So let's see if it hides event to close modal. So this is the event we have to listen for. So let me just hard code something in here for now.

So this is the event we have to listen for. So let me just hard code something in here for now. So let's say the wasUpdated is one of the events we have to listen for. So let's see if this works. Okay. And now it's hidden. So like I said, let's just make a temporary button in here that allows us to toggle the visibility of this notification. So I'm going to wrap this div in another div and put a button there. So let's wrap this in another div.

And there it is. So again, this is just a toggle the notification. So now when we click on this, click, let's just toggle that. So isOpen is not isOpen. Okay. And let's see if it toggles it and it does. Cool. So we've been making use of the transition helpers in Alpine, which are great. So for example, in here we have, where is it here? transition.opacity.

And there you go. I believe is much slower. So let's go ahead and try to make it slide in from the right. So let's put that back. And I still want to fade in. So we'll leave the opacity. But all we want to do to make it slide in is add the translate classes. So in this case, translate-x, because we want to slide in from the right. So we'll start here, translate it over eight units, and then we'll end up here. translate-x-0 when it's done.

This is just a simple explanation with no code.

So in this case, they're both Z 20. So here Z 20, but the model gets defined later in this container. So that should be on top. So let's try that again. Let's toggle this and then open a model and now it's behind. And let's also make this a Blade component while we're here. So let's grab this. Let's call it XNotificationSuccess. Okay. And let's go ahead and add that in our components.

Okay. And let's go ahead and add that in our components. Notification success, the Blade PHP, paste that in and make sure to indent this correctly. And this should still work. toggle and it does cool. Actually I think I forgot to hook up the X button here. So let's do that. And I also want it to hide after a certain amount of time. So let's work on those. So first I'm going to change this toggle to just open it.

So let's work on those. So first I'm going to change this toggle to just open it. So isOpen is true. And then we'll do the same thing for close though. So where's that SVG? I believe it's this one here. So you just paste that in, say false, and that should close it. So open, close, okay. And now let's make it hide after a certain amount of time. So I believe I did do this for the successMessage in adding an Idea.

And now let's make it hide after a certain amount of time. So I believe I did do this for the success message in adding an Idea. So let's try that. And let's submit that. And you see this message here, but it's going to be hidden after like five seconds or something. And there it is. So let's take a look at how I did that. CreateIdea. And here it is. We're just using a setTimeout.

And here it is. We're just using setTimeout. It's five seconds. So let's do that. So back to our component in our toggleButton, we can do it in there. So let me just reformat this. And in addition to opening the notification, we also want to add that setTimeout. So let's add it after this statement. So setTimeout isVisible is false after five seconds. So let's see if that works.

So setTimeout is visible is false after five seconds. So let's see if that works. So let's go ahead and toggle this and see if it disappears after five seconds. And it doesn't. What I do wrong here. So yeah, this is the wrong variable name is open. Let's try that again. Refresh toggle. Let's wait five seconds for three, two, one, and it hides. So now I'm actually done.

Let's wait five seconds for three, two, one, and it hides. So now I'm actually done. So now we can make a commit. Let's go ahead and git add. This is episode 46. git commit episode 46. Say success message notification CSS.