1 00:00:01,110 --> 00:00:03,990 ‫In the last lecture of this section 2 00:00:03,990 --> 00:00:07,680 ‫let's now style the order overview page. 3 00:00:07,680 --> 00:00:10,740 ‫So this will require a lot of styling 4 00:00:10,740 --> 00:00:14,190 ‫so that we can practice Tailwind a lot more. 5 00:00:14,190 --> 00:00:16,983 ‫And so let's quickly get started. 6 00:00:18,660 --> 00:00:22,560 ‫So we are already here on the order overview page 7 00:00:22,560 --> 00:00:24,960 ‫and in the order component. 8 00:00:24,960 --> 00:00:27,330 ‫And so let's start as always, 9 00:00:27,330 --> 00:00:31,820 ‫by adding some padding here to the page, like this. 10 00:00:34,380 --> 00:00:39,380 ‫Which again, remember we didn't use right in the layout 11 00:00:39,930 --> 00:00:42,330 ‫because these values are a bit different 12 00:00:42,330 --> 00:00:45,630 ‫for all of the pages, especially the menu page 13 00:00:45,630 --> 00:00:48,717 ‫doesn't have this padding right here. 14 00:00:48,717 --> 00:00:51,243 ‫And so we need to set this individually. 15 00:00:52,320 --> 00:00:56,580 ‫Now here on this page, we have first this part 16 00:00:56,580 --> 00:01:00,330 ‫which contains the number of the order. 17 00:01:00,330 --> 00:01:03,690 ‫So that should be here, we will place that here in a minute. 18 00:01:03,690 --> 00:01:06,840 ‫And then it has basically the status of that order 19 00:01:06,840 --> 00:01:09,003 ‫and if it's a priority order. 20 00:01:09,930 --> 00:01:13,530 ‫So then we also have the estimated delivery time. 21 00:01:13,530 --> 00:01:17,100 ‫And then here finally we have the prices. 22 00:01:17,100 --> 00:01:20,070 ‫And later on we will also add then a list 23 00:01:20,070 --> 00:01:23,790 ‫of all the pizzas that are part of the order. 24 00:01:23,790 --> 00:01:28,320 ‫So let's add some equal spacing between all of these. 25 00:01:28,320 --> 00:01:31,080 ‫And so when we have an equal spacing, 26 00:01:31,080 --> 00:01:33,540 ‫we don't have to mess with margins, 27 00:01:33,540 --> 00:01:37,140 ‫but can instead use that space helper class. 28 00:01:37,140 --> 00:01:41,073 ‫So space vertically eight. 29 00:01:42,360 --> 00:01:43,770 ‫And there we go. 30 00:01:43,770 --> 00:01:47,580 ‫So here we already have now some breathing space. 31 00:01:47,580 --> 00:01:49,200 ‫And now what I want to do here 32 00:01:49,200 --> 00:01:53,190 ‫is to actually display the order number. 33 00:01:53,190 --> 00:01:55,290 ‫So order number. 34 00:01:55,290 --> 00:02:00,290 ‫And then here, let's add the ID and then the status. 35 00:02:00,660 --> 00:02:02,560 ‫And then let's also style this 36 00:02:05,220 --> 00:02:08,400 ‫similar to all the other page setting 37 00:02:08,400 --> 00:02:10,620 ‫that we have on other pages. 38 00:02:10,620 --> 00:02:14,130 ‫So we could again, make a component for that 39 00:02:14,130 --> 00:02:17,130 ‫but it also works just like this. 40 00:02:17,130 --> 00:02:19,530 ‫And so now here we have the same ID 41 00:02:19,530 --> 00:02:21,690 ‫that we have here in the URL. 42 00:02:21,690 --> 00:02:25,380 ‫And so now let's place this here side by side 43 00:02:25,380 --> 00:02:27,510 ‫there on the other side. 44 00:02:27,510 --> 00:02:30,633 ‫So as always, flex box for that. 45 00:02:32,310 --> 00:02:37,000 ‫Let's center the items and justify between. 46 00:02:39,720 --> 00:02:41,940 ‫So it's a bit annoying that it always 47 00:02:41,940 --> 00:02:43,983 ‫basically loads the data here again. 48 00:02:45,390 --> 00:02:47,820 ‫But yeah, we cannot really prevent that. 49 00:02:47,820 --> 00:02:49,770 ‫I just want to show you what happens 50 00:02:49,770 --> 00:02:52,080 ‫if the screen is really small. 51 00:02:52,080 --> 00:02:55,230 ‫So then we get this, which we don't really like. 52 00:02:55,230 --> 00:02:58,500 ‫And so let's use another flex box trick 53 00:02:58,500 --> 00:03:00,210 ‫that we haven't used yet, 54 00:03:00,210 --> 00:03:02,940 ‫which is to basically allow the flex items 55 00:03:02,940 --> 00:03:05,520 ‫to wrap onto a new line. 56 00:03:05,520 --> 00:03:08,700 ‫So that we do with flex wrap 57 00:03:08,700 --> 00:03:13,233 ‫which translates exactly to flex wrap, set to wrap. 58 00:03:14,130 --> 00:03:16,173 ‫And so let's wait for it. 59 00:03:17,460 --> 00:03:21,453 ‫Yeah, this looks a lot better like this. 60 00:03:22,740 --> 00:03:25,740 ‫All right, now let's style these two right here 61 00:03:25,740 --> 00:03:28,260 ‫which are inside this div. 62 00:03:28,260 --> 00:03:32,130 ‫And let's start by giving them some space between them. 63 00:03:32,130 --> 00:03:37,130 ‫So space X, two, and I guess I shouldn't save 64 00:03:38,010 --> 00:03:41,880 ‫so many times because then it also takes some time 65 00:03:41,880 --> 00:03:45,690 ‫to load that data again. 66 00:03:45,690 --> 00:03:47,850 ‫But anyway, here let's now make 67 00:03:47,850 --> 00:03:52,170 ‫like a pill shaped thing basically 68 00:03:52,170 --> 00:03:55,140 ‫which will make this here red 69 00:03:55,140 --> 00:03:58,440 ‫telling us that this is an important priority. 70 00:03:58,440 --> 00:04:03,440 ‫So background red 500, 71 00:04:03,480 --> 00:04:07,680 ‫then rounded full for that pill shape 72 00:04:07,680 --> 00:04:10,020 ‫that I was just talking about. 73 00:04:10,020 --> 00:04:12,003 ‫Then let's add some padding here. 74 00:04:15,720 --> 00:04:19,450 ‫Let's make the text really small and uppercase 75 00:04:21,000 --> 00:04:23,343 ‫and also semi bold. 76 00:04:26,400 --> 00:04:29,133 ‫Let's give it a safe here just to see what we have. 77 00:04:30,150 --> 00:04:32,370 ‫Ah, that's already looking nice. 78 00:04:32,370 --> 00:04:37,370 ‫Let's just make the text also a lot lighter. 79 00:04:37,470 --> 00:04:41,343 ‫So text red 50 instead of white. 80 00:04:42,330 --> 00:04:45,270 ‫And let's also add some tracking here again, 81 00:04:45,270 --> 00:04:46,890 ‫which is always a good idea 82 00:04:46,890 --> 00:04:50,313 ‫whenever we have some uppercase text. 83 00:04:51,930 --> 00:04:54,450 ‫All right, so that looks great. 84 00:04:54,450 --> 00:04:56,760 ‫And now let's do something very similar here 85 00:04:56,760 --> 00:04:58,890 ‫for preparing the order. 86 00:04:58,890 --> 00:05:03,693 ‫And all we will do is to change the text from red to green. 87 00:05:06,810 --> 00:05:11,810 ‫So green right here and right here as well. 88 00:05:13,050 --> 00:05:16,020 ‫And with this, I think we have finished this first part 89 00:05:16,020 --> 00:05:18,210 ‫which is looking pretty nice. 90 00:05:18,210 --> 00:05:21,570 ‫And so let's move on here to this second part. 91 00:05:21,570 --> 00:05:25,413 ‫And so here, let's do basically something very similar. 92 00:05:26,910 --> 00:05:30,603 ‫So just grab this, paste that here. 93 00:05:32,670 --> 00:05:36,030 ‫And so that's already a bit nicer. 94 00:05:36,030 --> 00:05:38,730 ‫And again, whenever there's not enough space 95 00:05:38,730 --> 00:05:43,470 ‫it'll just move to the next line basically. 96 00:05:43,470 --> 00:05:46,140 ‫Now here we should probably add some gap. 97 00:05:46,140 --> 00:05:48,150 ‫And the same thing also here. 98 00:05:48,150 --> 00:05:51,360 ‫So right before moving to the next row 99 00:05:51,360 --> 00:05:54,750 ‫we will have those elements really touching there. 100 00:05:54,750 --> 00:05:59,673 ‫So let's add that gap in both these situations. 101 00:06:00,660 --> 00:06:05,460 ‫So gap of two and here as well. 102 00:06:08,040 --> 00:06:12,090 ‫Okay, and then let's also give this here 103 00:06:12,090 --> 00:06:14,160 ‫some other background color. 104 00:06:14,160 --> 00:06:17,850 ‫So to stand out from the rest of the content a little bit. 105 00:06:17,850 --> 00:06:22,620 ‫And then we also need some padding, let's say five here. 106 00:06:22,620 --> 00:06:24,870 ‫And then horizontally, 107 00:06:24,870 --> 00:06:27,273 ‫I like to always give it a little bit more. 108 00:06:32,430 --> 00:06:35,640 ‫Okay, and so this is what it would look like 109 00:06:35,640 --> 00:06:36,873 ‫on a bigger screen. 110 00:06:38,250 --> 00:06:41,073 ‫Well, not like this, so this is the small screen again. 111 00:06:42,960 --> 00:06:44,460 ‫So this is the bigger one. 112 00:06:44,460 --> 00:06:48,213 ‫And now let's just style this text there a little bit. 113 00:06:50,670 --> 00:06:54,000 ‫So font medium for this one. 114 00:06:54,000 --> 00:06:57,060 ‫And then let's deemphasize this text 115 00:06:57,060 --> 00:07:00,240 ‫by making it smaller, so extra small. 116 00:07:00,240 --> 00:07:05,130 ‫And then text stone 500. 117 00:07:05,130 --> 00:07:07,260 ‫And by the way, if you want to learn about 118 00:07:07,260 --> 00:07:09,780 ‫all these design principles that 119 00:07:09,780 --> 00:07:12,180 ‫I am sometimes mentioning here 120 00:07:12,180 --> 00:07:15,960 ‫you can check out my HTML and CSS course. 121 00:07:15,960 --> 00:07:19,020 ‫So even if you already know HTML and CSS, 122 00:07:19,020 --> 00:07:22,080 ‫that course has a huge section on design principles 123 00:07:22,080 --> 00:07:26,340 ‫that will help you design interfaces just like these ones 124 00:07:26,340 --> 00:07:29,550 ‫because you can know all the CSS that you want 125 00:07:29,550 --> 00:07:31,620 ‫and also no Tailwind. 126 00:07:31,620 --> 00:07:33,840 ‫But without these design principles, 127 00:07:33,840 --> 00:07:37,380 ‫you will not be able to create nice looking 128 00:07:37,380 --> 00:07:39,660 ‫and well working interfaces 129 00:07:39,660 --> 00:07:41,793 ‫like the ones we are designing here. 130 00:07:43,800 --> 00:07:47,190 ‫But anyway, let's just move on here. 131 00:07:47,190 --> 00:07:52,020 ‫And here we will simply basically list these prices. 132 00:07:52,020 --> 00:07:54,870 ‫So here we won't have any flex box, 133 00:07:54,870 --> 00:07:58,860 ‫we will just add a little bit of space between them. 134 00:07:58,860 --> 00:08:02,770 ‫And also, again, give this a different background color 135 00:08:03,630 --> 00:08:08,620 ‫and the same padding as we had in the previous element. 136 00:08:10,800 --> 00:08:13,800 ‫Okay, so this looks a bit strange right now, 137 00:08:13,800 --> 00:08:17,670 ‫but that's because we will add the list of pizzas here 138 00:08:17,670 --> 00:08:20,250 ‫in the middle very soon. 139 00:08:20,250 --> 00:08:23,820 ‫So first, let's finish this part right here. 140 00:08:23,820 --> 00:08:27,330 ‫And so let's de-emphasize this first two prices here. 141 00:08:27,330 --> 00:08:31,140 ‫And then really emphasize this total price. 142 00:08:31,140 --> 00:08:34,533 ‫So the pizza price plus the priority price. 143 00:08:36,720 --> 00:08:41,133 ‫So class name, making it small, 144 00:08:42,750 --> 00:08:47,670 ‫still giving it the medium font here, medium. 145 00:08:47,670 --> 00:08:52,670 ‫And then let's also again, change the text color. 146 00:08:54,570 --> 00:08:57,333 ‫Then I will do the same thing with the other one. 147 00:08:58,560 --> 00:09:03,510 ‫So the priority price. 148 00:09:03,510 --> 00:09:04,600 ‫And then finally 149 00:09:06,720 --> 00:09:11,720 ‫let's just make this one here bold, all right? 150 00:09:12,060 --> 00:09:15,420 ‫And now finally, let's then make the list 151 00:09:15,420 --> 00:09:18,633 ‫of all the pizzas that are part of this order. 152 00:09:19,530 --> 00:09:23,280 ‫And so they are stored in this card property 153 00:09:23,280 --> 00:09:26,719 ‫of the order that we receive from the API. 154 00:09:26,719 --> 00:09:31,560 ‫'Cause remember that this here is already real data, right? 155 00:09:31,560 --> 00:09:34,500 ‫So this is already coming from the API. 156 00:09:34,500 --> 00:09:38,280 ‫And so let's no use these real pizzas 157 00:09:38,280 --> 00:09:42,510 ‫in this order and render them right here. 158 00:09:42,510 --> 00:09:45,303 ‫So right after these prices. 159 00:09:46,380 --> 00:09:48,570 ‫So let's create an unordered list. 160 00:09:48,570 --> 00:09:51,210 ‫And then as always there we map 161 00:09:51,210 --> 00:09:55,740 ‫over this list or over this array 162 00:09:55,740 --> 00:10:00,740 ‫where then each item should be rendered as one order item. 163 00:10:02,370 --> 00:10:07,200 ‫So we already have that component there actually. 164 00:10:07,200 --> 00:10:11,790 ‫So our colleague basically already built that forest 165 00:10:11,790 --> 00:10:13,530 ‫so we can now use it, 166 00:10:13,530 --> 00:10:17,523 ‫but for some reason we do have to import it manually. 167 00:10:19,260 --> 00:10:21,940 ‫So import order 168 00:10:23,670 --> 00:10:28,113 ‫item from order item. 169 00:10:29,520 --> 00:10:30,453 ‫All right. 170 00:10:31,350 --> 00:10:33,300 ‫Now here of course we get an error message 171 00:10:33,300 --> 00:10:36,333 ‫because we didn't pass in the data that we need. 172 00:10:37,170 --> 00:10:39,900 ‫So that's item, equal item. 173 00:10:39,900 --> 00:10:44,143 ‫And a key is as always, item.id. 174 00:10:46,200 --> 00:10:48,120 ‫So this should fix it. 175 00:10:48,120 --> 00:10:51,480 ‫And indeed here we get our pizzas, 176 00:10:51,480 --> 00:10:54,450 ‫but this looks pretty bad as it is 177 00:10:54,450 --> 00:10:57,573 ‫and so let's as always format this. 178 00:10:59,400 --> 00:11:03,483 ‫Starting just like in the cart with a divider here, 179 00:11:06,660 --> 00:11:11,380 ‫then using that same divider color 180 00:11:12,570 --> 00:11:14,220 ‫so nicely like this. 181 00:11:14,220 --> 00:11:18,123 ‫But now let's again add a border to the bottom. 182 00:11:19,710 --> 00:11:21,603 ‫And this time also to the top, 183 00:11:23,670 --> 00:11:25,470 ‫bottom and top. 184 00:11:25,470 --> 00:11:27,330 ‫And with this, we are ready to go 185 00:11:27,330 --> 00:11:30,360 ‫right into the order item itself 186 00:11:30,360 --> 00:11:33,393 ‫and then do some simple styling here as well. 187 00:11:35,700 --> 00:11:40,270 ‫So first of all, as always, let's add some vertical space 188 00:11:42,060 --> 00:11:43,740 ‫nicely like this. 189 00:11:43,740 --> 00:11:47,250 ‫And here our component will not 190 00:11:47,250 --> 00:11:49,020 ‫refetch the data all the time 191 00:11:49,020 --> 00:11:52,800 ‫because this here is just a presentational component 192 00:11:52,800 --> 00:11:54,960 ‫which doesn't fetch any data. 193 00:11:54,960 --> 00:11:56,070 ‫And so now here 194 00:11:56,070 --> 00:11:59,073 ‫let's just put these two things side by side. 195 00:12:04,230 --> 00:12:09,230 ‫So items center and justify between. 196 00:12:10,620 --> 00:12:12,750 ‫So pretty standard stuff, 197 00:12:12,750 --> 00:12:16,890 ‫let's just add some gap here as well and make the text small 198 00:12:16,890 --> 00:12:20,403 ‫because this information is not really that important. 199 00:12:22,950 --> 00:12:25,680 ‫Alright, and now to finish 200 00:12:25,680 --> 00:12:29,340 ‫let's just make the values here basically bold. 201 00:12:29,340 --> 00:12:31,773 ‫So here just the number. 202 00:12:32,910 --> 00:12:37,890 ‫So class name, font, bold here, 203 00:12:39,420 --> 00:12:43,110 ‫and also the price itself. 204 00:12:43,110 --> 00:12:46,770 ‫And with this, we finished the styling for now. 205 00:12:46,770 --> 00:12:49,950 ‫Later on we will add some more stuff to this page 206 00:12:49,950 --> 00:12:52,530 ‫but for now, we are good to go. 207 00:12:52,530 --> 00:12:56,313 ‫And this looks absolutely beautiful if you ask me. 208 00:12:57,690 --> 00:13:00,120 ‫Let's just make this window here again a bit bigger 209 00:13:00,120 --> 00:13:04,053 ‫so that we are not anymore in that small mobile view. 210 00:13:05,430 --> 00:13:10,430 ‫But in any case, we just finished this Tailwind section. 211 00:13:11,340 --> 00:13:14,550 ‫So I hope that you really enjoyed learning about Tailwind 212 00:13:14,550 --> 00:13:17,610 ‫and that with this, you are able to take a decision 213 00:13:17,610 --> 00:13:21,090 ‫if basically you want to keep using it in the future 214 00:13:21,090 --> 00:13:24,030 ‫or if maybe you really don't like it 215 00:13:24,030 --> 00:13:27,210 ‫which of course is also more than okay. 216 00:13:27,210 --> 00:13:30,330 ‫But in this project we will of course keep using it 217 00:13:30,330 --> 00:13:34,200 ‫as we keep adding more components to really implement 218 00:13:34,200 --> 00:13:36,720 ‫all the features that we are still missing 219 00:13:36,720 --> 00:13:38,130 ‫in the application. 220 00:13:38,130 --> 00:13:41,520 ‫So we cannot really add any pizzas to the menu yet 221 00:13:41,520 --> 00:13:43,830 ‫for example, and so all of that 222 00:13:43,830 --> 00:13:46,950 ‫is what we will start working on right away 223 00:13:46,950 --> 00:13:48,360 ‫in the next section. 224 00:13:48,360 --> 00:13:51,153 ‫And so hopefully I see you there very soon.