‫We're almost finishing this long section.
‫And so next up, let's now quickly style the order form.
‫And as always, let's start by getting some spacing here
‫around the page, basically just like this.
‫And then let's start styling
‫all these elements here one by one.
‫So here, let's again make the text extra large
‫and make it also semi-bold just like this.
‫And let's give it a margin to the bottom,
‫this time of eight.
‫So whatever that means.
‫So that's 32 pixels, so a bit more here below than on top.
‫Great.
‫So next up, let's then basically format each
‫of these different boxes here.
‫So we'll just first style this one,
‫and then I will just copy, paste this style here
‫to the other ones.
‫So let's add first some margin to the bottom
‫and then we need some spacing
‫between the label and the input field itself.
‫So basically on small screens,
‫we will have these two stacked
‫while on a bigger screen, when there is enough space,
‫we will want to have the input side by side
‫with this label here.
‫And so let's just use Flexbox here right away.
‫And then we will change the orientation according
‫to the breakpoint.
‫So let's again make these flex items
‫just like this and let's give them,
‫and let's immediately give them a gap of two like this.
‫And keep in mind
‫that we need to start by styling the mobile layout first.
‫So this small layout right here.
‫And so here what we want is for the flex items
‫to be arranged in a column.
‫So here we need flex-column to change the flex orientation
‫to something like this.
‫And then as soon as we reach the small breakpoint,
‫we will set it then to flex-row,
‫which is basically the default.
‫And then at that situation,
‫let's also then vertically center the items,
‫so items-center like this.
‫So here we are actually already
‫at the medium breakpoint apparently.
‫So let's make this a bit smaller,
‫so that here, by default,
‫we are basically always in the mobile layout.
‫Then as soon as we have a bit more space,
‫we then have them side by side.
‫Now, the problem here
‫is that this label then gets a bit compressed.
‫And so let's change the flex basis here.
‫So basically instead of using a width for flex items,
‫we should use the flex property.
‫So at this breakpoint, let's set the flex basis to 40.
‫So this then gives it enough space.
‫So yeah, as I was saying,
‫this sets the flex basis, in this case, then to 10 rem.
‫And so now it works nicely on all screens.
‫All right, and so let's now just go ahead and copy this.
‫So that's absolutely no problem.
‫So there is no need to always create a new component
‫as soon as we need to reuse some of these styles,
‫at least if they are on the same page.
‫So in my opinion,
‫and according to the Tailwind documentation as well,
‫whenever we are in this situation,
‫we shouldn't immediately create a new abstraction.
‫And instead, if we had to change something here,
‫we can just use our editor's tools.
‫So if we had to update this, we would just select all
‫of them and then change them all at once.
‫So that's really no big deal.
‫Let's also grab this one right here for the label
‫like this, and nice.
‫Now, the reason why these here look different,
‫well, not here
‫but here they actually do look different.
‫And the reason for that
‫is that the input field is here inside this div.
‫And the same down here, because here,
‫in some situations, we want to also display this error.
‫So the paragraph here with the error inside
‫and therefore, we have this div here
‫and actually, the div should be here.
‫So the paragraph should really be inside that div.
‫And so what we need to just do here
‫is to add the grow class.
‫So it will give it flex grow one and the same thing here.
‫Now, for some reason here, we also have some differences.
‫Let's make this a bit bigger
‫so that you can actually see something here.
‫And so let's inspect what is going on here.
‫So here we have indeed the flex basis of 40,
‫which gives this, as we see there, the width of 160 pixels,
‫which is exactly what is supposed to happen.
‫So that's what we see here.
‫However, for some reason,
‫here apparently that is not working.
‫And so let's also add the grow class here
‫to this other flex item.
‫Okay, so here in this situation, the other flex item
‫is this div.
‫So we added the className of grow there
‫but here the second flex item is this one.
‫And so besides this input class that we created ourselves,
‫let's try to add the grow class as well.
‫And well, that doesn't fix anything.
‫So let's maybe see what is happening here
‫with this input field.
‫So inspecting that class right there.
‫So let's see what we have.
‫Ah, immediately here I see
‫that the width probably shouldn't be here.
‫So let's see what happens if we take that off.
‫And now it works.
‫So when we are using these elements as flex items,
‫we should never use the width property.
‫And so that right there was RBAC.
‫So let's come to our index.css file.
‫And from here we need to remove this full width.
‫Okay, and so now we need to put it back
‫on these two right here.
‫So where is that?
‫So right here with full and not flex grow
‫because since this is inside this div,
‫this is now no longer a flex item.
‫All right, nice.
‫So this was probably all a little bit confusing
‫but it would be easier if we were just writing the markup
‫and the styles at the exact same time.
‫So here we already had the markup
‫and now we are adding the classes later on.
‫But if we were doing everything at the same time,
‫this would be a bit more straightforward.
‫But anyway, now let's talk about finally this checkbox here.
‫And so here we will also want to add some margin
‫to the bottom.
‫Let's say a lot of margin
‫to actually give it some space there
‫just like this.
‫And then let's use Flexbox to put these side by side
‫and add some space.
‫So a gap of five, and then items-center.
‫And to finish, let's just make this one here
‫a bit more prominent with font-medium, just like this.
‫Beautiful.
‫Now all we will have to do
‫is to style that error message that might appear down there.
‫So right now, nothing here is working, so no new orders
‫are gonna be created,
‫but now I'm just inputting here some fake data
‫so that we can see the error there.
‫So here is that error message.
‫And so let's now format this
‫because, of course, this doesn't look the way
‫that it should.
‫So where is that error message?
‫Right here.
‫So let's start by making the text smaller
‫so extra small maybe.
‫So that's already a huge improvement.
‫Let's add some margin to the top,
‫so margin top, let's say two.
‫And then let's place this here
‫in a nice box so that it really looks like an error.
‫So first, let's make the text red.
‫And again, it's so handy that we have all these colors here
‫one class away basically.
‫And then let's use also red, but a very faint one like this.
‫And then we just need to add some padding
‫to all sides and make it completely rounded.
‫So just like this, and really nice.
‫Now, maybe don't make it completely rounded
‫but just a little bit.
‫Maybe like this, this looks a bit more natural.
‫Now, we could add some trickery here
‫to also make this label here still in line with the text box
‫but let's just leave it like this.
‫So this is good enough, I think.
‫And the same thing is true also here in the mobile view.
‫The only thing that I think we should change and do so
‫for the entire application is the text size of this button.
‫So this is actually way too big
‫and I've been noticing that for some time.
‫But now let's fix that actually.
‫So here, the base style should have the text set to small
‫so that always looks a bit better in these buttons.
‫So let's place the same thing also in the secondary buttons.
‫And then there we go.
‫So this one has the small text, and then the small button
‫has the extra small text.
‫All right, and so for example, in the cart,
‫that then also looks a bit more natural.
‫All right, so with this,
‫we finished actually this order form.
‫There's just one tiny thing that I have been wanting to fix
‫for a long time, which is the title of the page.
‫So let's change that here also to Fast React Pizza Co.
‫And then finally, let's get rid of this favicon
‫and we will use an emoji instead.
‫So there is a very nice trick that we can use to do that.
‫And so let me google
‫and you should google as well emoji as a favicon,
‫which should then bring you to a CSS Tricks website.
‫So my internet seems to be a bit slow, but yeah,
‫so the one that we want is this one.
‫So at CSS Tricks emoji as a favicon.
‫And then all we have to do
‫is to copy this code snippet right here, and then replace
‫that favicon that we have right now, which is this one.
‫And then here we can replace that with a slice of pizza.
‫All right, let's wait for it.
‫And beautiful.
‫So this looks really cool, I think
‫and adds this nice touch to our application.
‫Okay, but anyway, with this, we are almost finished.
‫The only thing that we have left to do
‫is to style the OrderOverview page.
‫So let's open that up actually.
‫So let's search for this order right away
‫and so then I can show you what I actually mean.
‫So this is the page that we need to style next.
‫And so let's quickly move on
‫to the last lecture of this section.