‫So let's now finally style the menu page.
‫So this is the menu page and as we see
‫it loops over the menu data that it receives
‫and for each of them, one menu item component is rendered.
‫And so let's actually start
‫by styling this menu item right here.
‫The first thing that we're gonna do is to get rid
‫of these huge images.
‫So let's give them a height of 24
‫which is a lot better.
‫So that's just 96 pixels.
‫Now let's implement the layout here.
‫So basically, placing this text here on the right side
‫of the image
‫and so let's come to this LI item
‫and make this a flex container.
‫Then we need some spacing here
‫so let's give it a gap of four
‫and that's a lot better.
‫Now next, what I want to do is to create some lines
‫here between all of these items.
‫Now what we can do is to add a margin to the bottom
‫to each of these gap items, right?
‫However, there is a very handy class in Tailwind
‫which is the divide class.
‫So we can use the divide class on the parent element
‫of these list items.
‫So right here in this list itself
‫and that will then place some lines
‫between all the child elements.
‫So that's really, really useful
‫and it's a bit similar to the space class.
‫So this class that we used here in the card overview where
‫where is that?
‫Yeah, here so where we can use this space
‫in order to basically create some space
‫between the child elements.
‫And so with divide,
‫we can create a line between child elements.
‫So in order to do that,
‫we just use divide and then the direction.
‫So in this case, the Y direction.
‫And then just like a regular border,
‫we also need to specify the color.
‫So that's gonna be stone 200.
‫All right, that looks a lot nicer.
‫And since we are already here,
‫let's also add a little bit of padding
‫between the site of the page and this list.
‫So, basically some padding in the X direction like this.
‫Great! So this is already starting to look a bit more real.
‫And so here, I think we have enough styles.
‫So let's go back
‫and now also add some spacing here between these items.
‫So this time, we cannot do this
‫so we cannot do like space Y2 because then,
‫well, it keeps reloading here
‫but I think that's because it keeps reloading the menu data.
‫But anyway, the problem here is that now the line
‫is not in the middle of these two.
‫And so that's why we cannot do this
‫and instead, we have to work with padding
‫on the menu items themselves.
‫So let's add some padding here like this.
‫And then let's turn our attention here to this part
‫of the menu item.
‫So here we have this title
‫then the ingredients of the pizza and then this price.
‫So what I want to do now is to push this price
‫all the way down here.
‫And for that, we can make this a flex container
‫and you will see what I mean in a minute.
‫So making it a flex container
‫but this will only make it so that the items
‫are side by side
‫but instead, we want them to be one after another.
‫So basically, we need to change the flex direction
‫to column.
‫So changing the main access of the flex container
‫and we can do that with flex col.
‫All right and so now it looks basically
‫exactly the same way as before
‫but since these are now flex items, so this, this and this
‫what we can do is to specify the margin top of auto
‫which will then push this down all the way.
‫So margin top and then auto
‫and there we go.
‫And since we are already here,
‫let's immediately format also these paragraphs.
‫So let's just make the text small,
‫so smaller than the rest.
‫And notice how here we have two different situations.
‫We have either the price or this sold out part.
‫So sometimes some pizzas don't exist
‫and then they are marked here as sold out.
‫That's why we have this conditional rendering right here.
‫So we also need to style that one.
‫So also making it small,
‫let's also make it uppercase here.
‫In this case, uppercase.
‫Then let's increase the font weight a little bit
‫let's say to medium.
‫And finally, let's make it stand out a little bit less
‫by making it lighter.
‫So by changing the text color to 500.
‫Nice. So that's looking great.
‫But in order to really show the user very easily
‫that this pizza is sold out,
‫let's also make this image here grayed out a little bit.
‫So let's make it grayscale and reduce the opacity.
‫And so with this,
‫I can show you a few more Tailwind classes.
‫So right here in the image,
‫now we need some conditional styling basically.
‫So let's create a template literal here
‫inside this JavaScript mode.
‫And then let's say if sold out,
‫then we want to add some classes here.
‫And if not, then no new classes at all.
‫So first of all, let's reduce the opacity
‫so we can use the opacity class
‫and then some value here,
‫so between zero and 100
‫and also let's make it grayscale.
‫So that opacity worked
‫but here probably it's gray with an A and beautiful.
‫So now it's very easy to see that this pizza doesn't exist.
‫Next up, let's play a bit with the visual hierarchy
‫here of this text.
‫So to make the title stand out a bit more.
‫So let's say here we want the font to be
‫of a medium weight
‫just like this.
‫And then here, let's make it a little bit smaller.
‫So text small, let's make it italic as well.
‫And let's also make it lighter
‫just like this sold out text.
‫And also one thing that I want to do
‫is to change here the capitalization of the words
‫or actually of the text.
‫Cause notice how right now this first string here
‫is lowercase.
‫So we can easily change this with decapitalize class
‫which will basically just do text transform, capitalize.
‫Nice.
‫So actually, it's not just the first word of the string
‫but really, all of the words will simply get capitalized
‫which looks a lot nicer than before.
‫Great! So we are almost finished.
‫Let's just add now a button here to add this menu item
‫to the card.
‫So that's something really important
‫that we don't have here yet.
‫And so let's add that right here
‫in the div that we have down here.
‫So remember that we have this paragraph.
‫We have this other paragraph with ingredients
‫and then we have this div
‫which right now only contains this price or this sold out.
‫And so now in the same line here,
‫we want to have the button here at the very end.
‫So, let's just add that here.
‫And for this, we can use again our button class.
‫Now later on,
‫here we will then have to pass in some handler function
‫because we will need to add some handler function here
‫in order to actually add the menu item to the cart.
‫But let's leave that for later.
‫Now right, now here we have a couple of problems.
‫First of all, this button is really huge
‫so we should change that.
‫And we also want this to be side by side
‫with this part here.
‫And so, let's also make this one a flex container as well.
‫And then let's vertically align the items
‫so that's not align
‫but items, center and then justify between.
‫However, now here we see a problem
‫so let's try to inspect this
‫so we can get a bit more space.
‫And so notice how actually this flex container
‫ends right here.
‫So here, as soon as the content is finished,
‫then the div also finishes.
‫So this element
‫and the same thing up here in this one and in this one
‫and therefore, all these buttons here
‫are not in the same position.
‫So what we need to do is to allow these flex items
‫to grow as much as they can.
‫And for that, with regular CSS,
‫we set the flex property on a flex item to one.
‫So hopefully, again you know about all of these
‫flex box fundamentals
‫but if not, that's also not a big problem here.
‫So what I was saying is that here in this div
‫we should now do flex-grow.
‫And so what this will do is exactly what I was just saying.
‫So it is a bit different here
‫but it's essentially the same thing.
‫So it sets flex-grow to one
‫and so as I saved this, well, nothing happens.
‫And actually it's because I am here in the wrong div.
‫This is not the one that I want
‫but actually this one of course.
‫So all of this is this div right here.
‫And the property that I want is actually not even flex-grow
‫but just grow.
‫And so this one
‫is actually exactly the same thing as before.
‫So grow or flex-grow are apparently the same
‫but yeah, what matters is that it works now.
‫Now let's just see what happens when we make this
‫for example really small.
‫Yeah, it works great.
‫So it works great here in responsive design.
‫And so let's go back and now as I was saying
‫a few minutes ago
‫is that we now want to change the size of this button.
‫So what we're gonna do is to now allow this button
‫to receive a prop about its size
‫or maybe about the type of the button.
‫And then according to that type, we set a different style.
‫So here, let's already pass in the type prop.
‫Let's call this one small
‫which of course for now won't do anything.
‫But now let's go to the other places
‫where we used this button
‫and then give it the type of primary.
‫So I believe that was here in create user, right?
‫So type of primary.
‫So this here is really the primary button
‫and then in create order is the other place.
‫So again, type primary.
‫And so with this, we can now just accept that prop
‫in the button
‫and then handle the styles accordingly.
‫So type and now the technique that I'm going to use
‫is to create an object here with the styles
‫and then based on the type,
‫we will get the style from the object.
‫So let's call this styles
‫and let's start just with the base style.
‫So, let's just copy all of this for now
‫and then we will delete what we don't want
‫to be in the base style.
‫So the base style is basically what will be common
‫to all the buttons
‫and then some things we change.
‫So what we want to change is probably the text size
‫which is not even here.
‫Then also these paddings.
‫So essentially the size of the button and then that's it.
‫So the rest here can stay the same for all the buttons.
‫And so let's now create the styles for the primary
‫which will be the space here plus some new styles.
‫So actually, there's not even a point
‫of having these styles here in this object.
‫So that's actually, so I changed my mind
‫because I'm just building this as I go.
‫So let's make it an outside variable here
‫and then here, we can easily say the base styles
‫plus some other styles.
‫So the ones that we removed here from the primary
‫were these two
‫and then these two right here.
‫Okay and with this, we no longer need this.
‫And then of course here, React is going to complain.
‫And now all we do here is to use styles
‫and then get the type from the styles object.
‫So styles at type.
‫And so this type will be received dynamically.
‫So here from this prop, right?
‫So in all those places where the type is set to primary,
‫then here we will get styles primary
‫which will then receive exactly these styles right here.
‫So this makes it so that right now
‫the button is no longer working
‫and so let's also make this small style.
‫So that's again the base
‫and now all we will have to do
‫is to basically change these other styles,
‫so making everything a little bit smaller.
‫So this one, let's actually leave it the same
‫but let's just make it smaller in the Y direction.
‫So making it a bit less tall.
‫Then here in the media queries,
‫I think this button should actually only start
‫to become bigger at the medium breakpoint.
‫So let's grab this here and then let's just change this.
‫So here, let's give it five.
‫And here for the first time, we can also use 2.5
‫and beautiful.
‫So we already start to have something here
‫but it's not really perfect.
‫So actually we still need to give it here the PX class.
‫So padding X because we did of course
‫remove it completely from here
‫but we still don't have the padding on the X
‫but I guess that's because right now we don't have a space
‫between this class and this class.
‫So let's add that there
‫and there we go.
‫Nice. So here we have this a bit smaller button.
‫And actually let's make the text also small.
‫So text, actually let's make it really small,
‫so extra small like this.
‫And yeah, this looks a bit more natural.
‫But now if we go to the cart
‫where I think we also use this button,
‫then, well it should appear there.
‫But actually I think we didn't change the type in this one.
‫So let's give it a type of primary and nice.
‫So there we get actually the big button
‫and the same thing here as well.
‫So here again, the primary button here as well.
‫But then if we go to the menu, we get this small variation.
‫And so with this,
‫we made our button component here even more versatile.
‫And now just one very, very minor small correction
‫that I'm gonna make
‫is that here we have now a lot more space
‫than here in the beginning.
‫So this doesn't look really centered.
‫And so let's just add a tiny amount of padding
‫to the top here.
‫So for example, just 0.5
‫so which is like two pixels.
‫Yeah. But yeah, it's a bit better.
‫And so with this, I think we finished this menu.
‫Looks really nice and really beautiful
‫and we did design it right here in the markup.
‫We didn't have to come up with any class names.
‫We didn't have to use for example, the BEM methodology
‫and we didn't have to jump between this file
‫and/or CSS file which really are huge advantages.