So let's start with our product. I think the plus and minus are going white on hover whenever there's an item in the card. And I think we have already taken care of the stars for the hover when it's the add to card button. Yeah. Yeah. So here's what I mean. There is a white background and the icon becomes red, which is why precisely we

So here's what I mean. There is a white background and the icon becomes red, which is why precisely we 've used SVGs in line so we can change that sort of stuff. So let's do exactly that. This happened in the product template and if we have a quantity greater than zero, it means we show the increment decrement, which is what we're looking for. And so let's find, oh, we had them in line here. Okay.

And so let's find, oh, we had them in line here. Okay. So here we don't want to change the SVG itself because we hover the button here . So I'll need to give a class of group. So we can do group hover on the SVG and here on the button itself on the hover, we want to go BG white so that's the circle becomes white. And now thanks to that group class, I can go group hover here, text red. I like my chances.

And now thanks to that group class, I can go group hover here, text red. I like my chances. Check it out. Hey, nice. Okay, let's do the same for the plus. I will copy the classes on the button. This might actually be a dedicated component, but whatever. And here you can see copilot suggesting to add group hover text read like we did for the other one, and that should take care of our plus minus we can increment.

did for the other one, and that should take care of our plus minus we can increment. It's working nicely decrement with the hover styles and go back to add to cart. Very cool. Okay. While we are on the product component, remember the red border when there is an item in the cart. So let's fix that as well. And I guess we can use the add quantity variable that we store in our templates

So let's fix that as well. And I guess we can use the add quantity variable that we store in our templates because if it's greater than zero, we want to show that red border. So this is on the product card itself or the image, I guess, let me find the design. So it looks like a two pixel border or maybe outline that goes around the image . So let's find the image. There it is.

So let's find the image. There it is. And we are going to do some dodgy computation inside the class attribute at if quantity. Can I do this in line like this? We'll find out border, border, red. And if I'm not sure if this is a blade syntax, basically, I'm trying to have this condition in line and we got a token error. Maybe I just need to use the quantity and have a ternary operator like this.

in line and we got a token error. Maybe I just need to use the quantity and have a ternary operator like this. Yeah, that feels a bit better. And okay, it's working. Now we have a border on the elements that have been added to the cart still feels a little bit thin. No, I think it's okay. Okay, there might be better ways to do this, but it's working. And so we have hover for this button, this toggle increment decrement.

Okay, there might be better ways to do this, but it's working. And so we have hover for this button, this toggle increment decrement. And it looks like this one is the last one. Okay, so interesting. The confirmation button on hover is getting darker, but we don't have any color that is darker. Remember, we just have text red or color red. And so we can probably do a fancy little color mix with black to make it darker .

And so we can probably do a fancy little color mix with black to make it darker . We might expand the theme to include that color or we can just do it in line. Here we're going to do it in two places on this button and probably this button as well. So we might want to abstract that. Let's go in our app that CSS theme and maybe go dash dash color red dark. And because we are in CSS here, I can probably do color mix and copilot works that out. We want 70% of the red and 30% of the black.

that out. We want 70% of the red and 30% of the black. This might be a little too dark, but this is a really cool use case of the color mix function. And by the way, if you didn't know this, tell you CSS uses color mix under the hood. When you want to do transparency, let me show you what happens when we use something like slash 50% opacity, like we did for the backdrop of the model confirmation.

something like slash 50% opacity, like we did for the backdrop of the model confirmation. So if I go in confirmation here and we find the backdrop background color, this is BG black here, check this out under the hood. It's going to use color mix color black at 50% mixed with transparent. That is super cool. Here I'm not sure S RGB is the best color space, but let's try that. You can use multiple ones and have different results. But for now, we should have this hover red dash dark generated from this.

You can use multiple ones and have different results. But for now, we should have this hover red dash dark generated from this. So if I go in the active cart, this is the element that has BG red and we can go hover BG red dark. And so now when I hover, we have 30% of black mixed with our red. That's pretty cool. It actually looks quite aligned with the design. I'm happy with that. Maybe let's add a little transition on that hover.

I'm happy with that. Maybe let's add a little transition on that hover. So it's going to have a default duration of 150 mils and this is pretty nice. So we can go do the same effect on the start new order button. And that's the reason I abstracted it because we are using it in two places. So here I can go hover BG red dark. And really I've copied and pasted that button and this should probably be its own component in a real more ambitious project. So now we should also be able to have the hover state for that button to clear

in a real more ambitious project. So now we should also be able to have the hover state for that button to clear the cart. All right, I am super happy with everything. Let's do one final UI browser testing manual testing check before we think about submitting our application. The user should be able to add items to the cart. Can they? Yes, they can.

Can they? Yes, they can. They should be able to increase the quantity of set items in the cart. Can they? Sure can. They should be able to remove an item from the cart by decreasing the quantity they can. They should be able to remove an item from the cart completely by deleting it from the cart.

from the cart. They can. They should be able to confirm a selection of product and have a confirmation model by clicking confirm order they can and they should be able to start over new and clear the cart by clicking start new order they can. You know what? I think we've done a pretty good job.

You know what? I think we've done a pretty good job.