‫In the last lecture of this section
‫let's now style the order overview page.
‫So this will require a lot of styling
‫so that we can practice Tailwind a lot more.
‫And so let's quickly get started.
‫So we are already here on the order overview page
‫and in the order component.
‫And so let's start as always,
‫by adding some padding here to the page, like this.
‫Which again, remember we didn't use right in the layout
‫because these values are a bit different
‫for all of the pages, especially the menu page
‫doesn't have this padding right here.
‫And so we need to set this individually.
‫Now here on this page, we have first this part
‫which contains the number of the order.
‫So that should be here, we will place that here in a minute.
‫And then it has basically the status of that order
‫and if it's a priority order.
‫So then we also have the estimated delivery time.
‫And then here finally we have the prices.
‫And later on we will also add then a list
‫of all the pizzas that are part of the order.
‫So let's add some equal spacing between all of these.
‫And so when we have an equal spacing,
‫we don't have to mess with margins,
‫but can instead use that space helper class.
‫So space vertically eight.
‫And there we go.
‫So here we already have now some breathing space.
‫And now what I want to do here
‫is to actually display the order number.
‫So order number.
‫And then here, let's add the ID and then the status.
‫And then let's also style this
‫similar to all the other page setting
‫that we have on other pages.
‫So we could again, make a component for that
‫but it also works just like this.
‫And so now here we have the same ID
‫that we have here in the URL.
‫And so now let's place this here side by side
‫there on the other side.
‫So as always, flex box for that.
‫Let's center the items and justify between.
‫So it's a bit annoying that it always
‫basically loads the data here again.
‫But yeah, we cannot really prevent that.
‫I just want to show you what happens
‫if the screen is really small.
‫So then we get this, which we don't really like.
‫And so let's use another flex box trick
‫that we haven't used yet,
‫which is to basically allow the flex items
‫to wrap onto a new line.
‫So that we do with flex wrap
‫which translates exactly to flex wrap, set to wrap.
‫And so let's wait for it.
‫Yeah, this looks a lot better like this.
‫All right, now let's style these two right here
‫which are inside this div.
‫And let's start by giving them some space between them.
‫So space X, two, and I guess I shouldn't save
‫so many times because then it also takes some time
‫to load that data again.
‫But anyway, here let's now make
‫like a pill shaped thing basically
‫which will make this here red
‫telling us that this is an important priority.
‫So background red 500,
‫then rounded full for that pill shape
‫that I was just talking about.
‫Then let's add some padding here.
‫Let's make the text really small and uppercase
‫and also semi bold.
‫Let's give it a safe here just to see what we have.
‫Ah, that's already looking nice.
‫Let's just make the text also a lot lighter.
‫So text red 50 instead of white.
‫And let's also add some tracking here again,
‫which is always a good idea
‫whenever we have some uppercase text.
‫All right, so that looks great.
‫And now let's do something very similar here
‫for preparing the order.
‫And all we will do is to change the text from red to green.
‫So green right here and right here as well.
‫And with this, I think we have finished this first part
‫which is looking pretty nice.
‫And so let's move on here to this second part.
‫And so here, let's do basically something very similar.
‫So just grab this, paste that here.
‫And so that's already a bit nicer.
‫And again, whenever there's not enough space
‫it'll just move to the next line basically.
‫Now here we should probably add some gap.
‫And the same thing also here.
‫So right before moving to the next row
‫we will have those elements really touching there.
‫So let's add that gap in both these situations.
‫So gap of two and here as well.
‫Okay, and then let's also give this here
‫some other background color.
‫So to stand out from the rest of the content a little bit.
‫And then we also need some padding, let's say five here.
‫And then horizontally,
‫I like to always give it a little bit more.
‫Okay, and so this is what it would look like
‫on a bigger screen.
‫Well, not like this, so this is the small screen again.
‫So this is the bigger one.
‫And now let's just style this text there a little bit.
‫So font medium for this one.
‫And then let's deemphasize this text
‫by making it smaller, so extra small.
‫And then text stone 500.
‫And by the way, if you want to learn about
‫all these design principles that
‫I am sometimes mentioning here
‫you can check out my HTML and CSS course.
‫So even if you already know HTML and CSS,
‫that course has a huge section on design principles
‫that will help you design interfaces just like these ones
‫because you can know all the CSS that you want
‫and also no Tailwind.
‫But without these design principles,
‫you will not be able to create nice looking
‫and well working interfaces
‫like the ones we are designing here.
‫But anyway, let's just move on here.
‫And here we will simply basically list these prices.
‫So here we won't have any flex box,
‫we will just add a little bit of space between them.
‫And also, again, give this a different background color
‫and the same padding as we had in the previous element.
‫Okay, so this looks a bit strange right now,
‫but that's because we will add the list of pizzas here
‫in the middle very soon.
‫So first, let's finish this part right here.
‫And so let's de-emphasize this first two prices here.
‫And then really emphasize this total price.
‫So the pizza price plus the priority price.
‫So class name, making it small,
‫still giving it the medium font here, medium.
‫And then let's also again, change the text color.
‫Then I will do the same thing with the other one.
‫So the priority price.
‫And then finally
‫let's just make this one here bold, all right?
‫And now finally, let's then make the list
‫of all the pizzas that are part of this order.
‫And so they are stored in this card property
‫of the order that we receive from the API.
‫'Cause remember that this here is already real data, right?
‫So this is already coming from the API.
‫And so let's no use these real pizzas
‫in this order and render them right here.
‫So right after these prices.
‫So let's create an unordered list.
‫And then as always there we map
‫over this list or over this array
‫where then each item should be rendered as one order item.
‫So we already have that component there actually.
‫So our colleague basically already built that forest
‫so we can now use it,
‫but for some reason we do have to import it manually.
‫So import order
‫item from order item.
‫All right.
‫Now here of course we get an error message
‫because we didn't pass in the data that we need.
‫So that's item, equal item.
‫And a key is as always, item.id.
‫So this should fix it.
‫And indeed here we get our pizzas,
‫but this looks pretty bad as it is
‫and so let's as always format this.
‫Starting just like in the cart with a divider here,
‫then using that same divider color
‫so nicely like this.
‫But now let's again add a border to the bottom.
‫And this time also to the top,
‫bottom and top.
‫And with this, we are ready to go
‫right into the order item itself
‫and then do some simple styling here as well.
‫So first of all, as always, let's add some vertical space
‫nicely like this.
‫And here our component will not
‫refetch the data all the time
‫because this here is just a presentational component
‫which doesn't fetch any data.
‫And so now here
‫let's just put these two things side by side.
‫So items center and justify between.
‫So pretty standard stuff,
‫let's just add some gap here as well and make the text small
‫because this information is not really that important.
‫Alright, and now to finish
‫let's just make the values here basically bold.
‫So here just the number.
‫So class name, font, bold here,
‫and also the price itself.
‫And with this, we finished the styling for now.
‫Later on we will add some more stuff to this page
‫but for now, we are good to go.
‫And this looks absolutely beautiful if you ask me.
‫Let's just make this window here again a bit bigger
‫so that we are not anymore in that small mobile view.
‫But in any case, we just finished this Tailwind section.
‫So I hope that you really enjoyed learning about Tailwind
‫and that with this, you are able to take a decision
‫if basically you want to keep using it in the future
‫or if maybe you really don't like it
‫which of course is also more than okay.
‫But in this project we will of course keep using it
‫as we keep adding more components to really implement
‫all the features that we are still missing
‫in the application.
‫So we cannot really add any pizzas to the menu yet
‫for example, and so all of that
‫is what we will start working on right away
‫in the next section.
‫And so hopefully I see you there very soon.