Instructor: 0:00 Looking at the examples, the obvious two things that we should change style-wise is the background overlay color and the button colors. Let's look at the markup for the modal and start with the background overlay.

0:11 Here it is, and this class here, bg-indigo-300, should probably be the one made dynamic. Let's go in the toneClasses object, and we'll start with default. Here, we'll go with bg-indigo-300, and then for danger, let's go bg-red-300. Finally for success, bg-green-300. That should do the trick nicely.

0:34 Then to implement that, we are going to replace this hardcoded class here. Let's turn the className attribute to use the cx function, like so. Then instead of having the class in there, we can remove it and pass it as toneClasses reaching out for the tone.

0:55 That still works, but now the Danger has the nice red overlay, and the Success has the nice green overlay. Obviously, the buttons are still using the default tone. Here you might start thinking, I need to pass some classes to the buttons to style them as well but remember the button component does have a tone prop already.

1:13 Instead of passing classes to style the buttons, we can pass the tone prop that we receive inside the modal and pass it to the Button component and this should do the trick. Where we have our action buttons down here, all we need to do is to pass the tone prop.

1:29 You can see here it tells us what possible values are, and here we will pass the tone prop further down to the buttons. Let's try. Danger, nice. Success, excellent. It's working great.