Alright, this should start becoming fun. We have all our bits and pieces wired up together technically, now we can put our designer cap on and do some UI styling. Okay, these non-square images trigger me, so let's write off the bat, go ahead and change that. So in the image tag here, I will add classes and I will go aspect square, which is going to tragically distort a poor desserts, but we can fix this with object fit

is going to tragically distort a poor desserts, but we can fix this with object fit cover, which is object dash cover in tailwind. And it's going to crop the images perfectly from the center. We also want to add some border radius to the images and I feel like the gap could be increased just a little bit. Yeah, that gap's too small. So first let's add the rounded LG with that work.

Yeah, that gap's too small. So first let's add the rounded LG with that work. Yeah, that works pretty good. Maybe Excel is better. Okay, yeah, let's go with Excel and I'm going to maybe double, maybe not double . Let's go gap six, but maybe eight. This happens in the welcome container here, the UL. And so we have gap four, but I think gap six is needed. Yeah, I think gap six is right.

And so we have gap four, but I think gap six is needed. Yeah, I think gap six is right. And already you can see that it looks much better. All right, before we go and do all the easy cosmetic stuff, let's do something you may have heard Taylor outwell say, let's tackle the hard thing first. If I look at the product cards, there is one thing that is at least tickling my mind a little bit and it's the positioning of the add to cart button. I guess there's two way to go about it.

a little bit and it's the positioning of the add to cart button. I guess there's two way to go about it. It could be inside the image container and then translated on the y-axis by half its height. But if we do that, we need to factor in the gap or the spacing to put on top of the rest of the text. The other option is to have it below the card flush against the image and then apply

The other option is to have it below the card flush against the image and then apply a margin top negative either way, there will be some magic number or not magic, but some coordination to do between the spacing here and the position. I think I want to put it below the image and then move it up. And one of the advantages of doing it this way is I don't need to have a container with relative positioning where I put the image and then absolutely position the button in

relative positioning where I put the image and then absolutely position the button in the middle. Instead, I can just have the button here centered and then zip it up by half. Okay, so let's tackle that first. I will first add some classes to the button, BG white, and then it has a border which is border rose probably 500. It has a peel shape with rounded full, definitely need some horizontal padding, especially with

It has a peel shape with rounded full, definitely need some horizontal padding, especially with a peel shape, you want to go a bit bigger and to make it easy to center it vertically, I want to give a fixed height to this thing. So height, let's try 10 as a starting point, huh, not too bad as a one shot before we do more specific starting, let's try to position the button in the center again, tackle the hard thing first, I'll just add empty for on the product category below.

tackle the hard thing first, I'll just add empty for on the product category below. So we are a little bit more isolated on the button. And so I'm going to use flex box on the form wrapper to have the button centered horizontally. And then we're going to apply a negative margin. So the form tag here can have a class of flex and then justify center. And that should middle align the button. Yes. A quick interlude from editor assignment here.

Yes. A quick interlude from editor assignment here. What I'm about to do is actually a little complicated. There was a much easier way to do this that I've realized after recording. Now if you want to learn a cool technique about CSS variables, please watch this, but just know that in a future lesson we'll make the solution I'm about to show much easier. And now I could put the negative margin on the button. So it's paired with this, but we really want the whole form element to be moved

And now I could put the negative margin on the button. So it's paired with this, but we really want the whole form element to be moved up. So I'm going to go here negative empty five. This non collocated spacing thing is not great, but UI wise, it should work quite well. And look at it, our button is smack in the middle. Now this is pretty brittle, and so let me show you a pretty cool sort of advanced trick that you can do with CSS variables.

advanced trick that you can do with CSS variables. If you want to always make sure that it's aligned in the middle. On the form tag, I will have a style attribute. And here I will define a CSS variable dash dash button height. And let's set that to 2.5 rem, which is the equivalent of H 10. Now what I can do is use that CSS variable instead of this value here. So I can go H dash, and I can consume the CSS variable. Typically, you would go var, but tell when lets you pass directly the CSS variable name

Typically, you would go var, but tell when lets you pass directly the CSS variable name like this, and it's going to understand, oh, I thought it would understand, huh , maybe it's with parentheses instead of arbitrary value brackets. And yeah, this time it's consuming the CSS variable. And here we also are going to this time have an arbitrary value because we need to calc the button height divided by 2, but we can't have spaces here. So that's a bit of a power move here, but this is going to work great.

the button height divided by 2, but we can't have spaces here. So that's a bit of a power move here, but this is going to work great. You can see it still works. And I think that it makes this collocation a little bit more explicit where we have a variable here. So if I had 5 rem for the button height without changing anything here or there , the button is going to get bigger, but always be center aligned. So that arbitrary value with a calc using a CSS variable might be a little bit

is going to get bigger, but always be center aligned. So that arbitrary value with a calc using a CSS variable might be a little bit intimidating, but it's actually quite powerful and it makes the system a little bit more robust. All right. So let's get rid of this CD5 rem 2.5 was a bit small, so maybe 3 rem is the sweet spot. Let's look at it and look at the design. It's not too bad.

Let's look at it and look at the design. It's not too bad. Okay, so let's go and continue styling the button while we are in it. I feel like the font weight here is medium. So let's go with font medium. I think I noticed is you can see the rounding starting almost right after the T here where on the design, there is a significant bit of more button, I guess, before it starts running up.

starts running up. So I feel like I want to increase the PX on the button from 6 to 8. All right, much better. The next obvious thing that this button need is the icon here. So we could use an image tag, but really I want to use SVG's in line as much as possible because it allows you to change colors, do a lot of things with CSS and also one less network request.

one less network request. So let's open this with a text editor instead. And there we have it. So I think we can have an icons folder in our components. And here, let's call this one add to cart that blade that PHP and paste the same code here. So our button component is not only going to contain the add to cart text. So I will put this add to cart text inside a span tag.

So our button component is not only going to contain the add to cart text. So I will put this add to cart text inside a span tag. And I will reference the, I guess, this is how you go in the icons directory and then add to cart component here. And yeah, it's working. So we need to make the button a flex parent so we can have these side by side. So let's add a class on our button component flex and then gap of two, I guess, and just for good measure, let's go items center to vertically align both the icon and

and just for good measure, let's go items center to vertically align both the icon and the text. And look at this. This is not too bad at all. If I zoom out, this is what it looks like, and this is what the design looks like. All right. I've switched to the active states image that shows hover states and things of the salt.

I've switched to the active states image that shows hover states and things of the salt. So you can see here when we hover the button color changes to the red and the border changes to the same color. So in our button on hover, let's change the border color to red hover text red. And so now when we hover the button, the border and text color are changing. All right. Let's call it good enough for a button for now. So let's quickly go and style the category, the name and the price.

Let's call it good enough for a button for now. So let's quickly go and style the category, the name and the price. The category is going to be a lighter rose. The title is a little bit bigger and maybe medium font and the price is red and also bigger and medium font. All right. So the category here, let's go text rose, which one do we want? Maybe 500 is the one. Next for the H2, let's go class text LG and font medium.

Maybe 500 is the one. Next for the H2, let's go class text LG and font medium. Yeah, very nice. And for the price, like I said, we also have found medium and the text is going to be red this time. All right. This is not looking too bad and I think everything looks pretty decent. The desserts title is too small here, but otherwise it's not bad, honestly, we 're not

The desserts title is too small here, but otherwise it's not bad, honestly, we 're not going to go pixel perfect, but I think this is actually quite nice. Let me just change the dessert size. So this happens in the welcome blade at PHP. Let's try six Excel, which might be too big and surprise it is. So five Excel it is and this is looking really nice. Okay. So let's drag the side of the browser and see our stuff break, although it should kind

So let's drag the side of the browser and see our stuff break, although it should kind of work at every dimension because we've worked on that in the previous lessons . It's actually pretty good. Look at this. It's very decent at all screens resolutions. And so while I am sure that we could endlessly tweak with it and feel more, I'm going to call this good enough for now and we're going to switch to do the UI for the

going to call this good enough for now and we're going to switch to do the UI for the shopping cart. And then we're going to implement all the backend logic and have some fun with Laravel.