1 00:00:01,320 --> 00:00:04,830 ‫We're almost finishing this long section. 2 00:00:04,830 --> 00:00:09,033 ‫And so next up, let's now quickly style the order form. 3 00:00:11,820 --> 00:00:16,170 ‫And as always, let's start by getting some spacing here 4 00:00:16,170 --> 00:00:19,793 ‫around the page, basically just like this. 5 00:00:21,867 --> 00:00:24,460 ‫And then let's start styling 6 00:00:25,440 --> 00:00:28,653 ‫all these elements here one by one. 7 00:00:29,580 --> 00:00:34,260 ‫So here, let's again make the text extra large 8 00:00:34,260 --> 00:00:39,260 ‫and make it also semi-bold just like this. 9 00:00:39,600 --> 00:00:42,150 ‫And let's give it a margin to the bottom, 10 00:00:42,150 --> 00:00:44,730 ‫this time of eight. 11 00:00:44,730 --> 00:00:46,200 ‫So whatever that means. 12 00:00:46,200 --> 00:00:51,200 ‫So that's 32 pixels, so a bit more here below than on top. 13 00:00:52,290 --> 00:00:53,640 ‫Great. 14 00:00:53,640 --> 00:00:57,060 ‫So next up, let's then basically format each 15 00:00:57,060 --> 00:00:59,283 ‫of these different boxes here. 16 00:01:01,830 --> 00:01:05,820 ‫So we'll just first style this one, 17 00:01:05,820 --> 00:01:08,640 ‫and then I will just copy, paste this style here 18 00:01:08,640 --> 00:01:10,440 ‫to the other ones. 19 00:01:10,440 --> 00:01:14,520 ‫So let's add first some margin to the bottom 20 00:01:14,520 --> 00:01:17,220 ‫and then we need some spacing 21 00:01:17,220 --> 00:01:21,510 ‫between the label and the input field itself. 22 00:01:21,510 --> 00:01:24,270 ‫So basically on small screens, 23 00:01:24,270 --> 00:01:26,850 ‫we will have these two stacked 24 00:01:26,850 --> 00:01:29,910 ‫while on a bigger screen, when there is enough space, 25 00:01:29,910 --> 00:01:33,150 ‫we will want to have the input side by side 26 00:01:33,150 --> 00:01:35,610 ‫with this label here. 27 00:01:35,610 --> 00:01:39,210 ‫And so let's just use Flexbox here right away. 28 00:01:39,210 --> 00:01:42,120 ‫And then we will change the orientation according 29 00:01:42,120 --> 00:01:43,173 ‫to the breakpoint. 30 00:01:44,040 --> 00:01:47,970 ‫So let's again make these flex items 31 00:01:47,970 --> 00:01:51,360 ‫just like this and let's give them, 32 00:01:51,360 --> 00:01:56,360 ‫and let's immediately give them a gap of two like this. 33 00:01:56,610 --> 00:01:57,570 ‫And keep in mind 34 00:01:57,570 --> 00:02:02,280 ‫that we need to start by styling the mobile layout first. 35 00:02:02,280 --> 00:02:04,500 ‫So this small layout right here. 36 00:02:04,500 --> 00:02:08,400 ‫And so here what we want is for the flex items 37 00:02:08,400 --> 00:02:11,220 ‫to be arranged in a column. 38 00:02:11,220 --> 00:02:16,220 ‫So here we need flex-column to change the flex orientation 39 00:02:17,550 --> 00:02:19,650 ‫to something like this. 40 00:02:19,650 --> 00:02:23,550 ‫And then as soon as we reach the small breakpoint, 41 00:02:23,550 --> 00:02:27,720 ‫we will set it then to flex-row, 42 00:02:27,720 --> 00:02:30,030 ‫which is basically the default. 43 00:02:30,030 --> 00:02:31,920 ‫And then at that situation, 44 00:02:31,920 --> 00:02:35,370 ‫let's also then vertically center the items, 45 00:02:35,370 --> 00:02:38,793 ‫so items-center like this. 46 00:02:40,710 --> 00:02:42,320 ‫So here we are actually already 47 00:02:42,320 --> 00:02:44,343 ‫at the medium breakpoint apparently. 48 00:02:45,300 --> 00:02:46,950 ‫So let's make this a bit smaller, 49 00:02:48,150 --> 00:02:49,620 ‫so that here, by default, 50 00:02:49,620 --> 00:02:53,340 ‫we are basically always in the mobile layout. 51 00:02:53,340 --> 00:02:56,250 ‫Then as soon as we have a bit more space, 52 00:02:56,250 --> 00:02:59,400 ‫we then have them side by side. 53 00:02:59,400 --> 00:03:00,480 ‫Now, the problem here 54 00:03:00,480 --> 00:03:03,750 ‫is that this label then gets a bit compressed. 55 00:03:03,750 --> 00:03:07,413 ‫And so let's change the flex basis here. 56 00:03:09,000 --> 00:03:12,900 ‫So basically instead of using a width for flex items, 57 00:03:12,900 --> 00:03:15,330 ‫we should use the flex property. 58 00:03:15,330 --> 00:03:20,330 ‫So at this breakpoint, let's set the flex basis to 40. 59 00:03:21,270 --> 00:03:23,223 ‫So this then gives it enough space. 60 00:03:24,270 --> 00:03:26,070 ‫So yeah, as I was saying, 61 00:03:26,070 --> 00:03:30,243 ‫this sets the flex basis, in this case, then to 10 rem. 62 00:03:31,710 --> 00:03:36,183 ‫And so now it works nicely on all screens. 63 00:03:37,080 --> 00:03:41,880 ‫All right, and so let's now just go ahead and copy this. 64 00:03:41,880 --> 00:03:43,920 ‫So that's absolutely no problem. 65 00:03:43,920 --> 00:03:47,430 ‫So there is no need to always create a new component 66 00:03:47,430 --> 00:03:50,940 ‫as soon as we need to reuse some of these styles, 67 00:03:50,940 --> 00:03:53,670 ‫at least if they are on the same page. 68 00:03:53,670 --> 00:03:55,140 ‫So in my opinion, 69 00:03:55,140 --> 00:03:58,770 ‫and according to the Tailwind documentation as well, 70 00:03:58,770 --> 00:04:00,930 ‫whenever we are in this situation, 71 00:04:00,930 --> 00:04:03,960 ‫we shouldn't immediately create a new abstraction. 72 00:04:03,960 --> 00:04:07,110 ‫And instead, if we had to change something here, 73 00:04:07,110 --> 00:04:09,420 ‫we can just use our editor's tools. 74 00:04:09,420 --> 00:04:12,240 ‫So if we had to update this, we would just select all 75 00:04:12,240 --> 00:04:15,000 ‫of them and then change them all at once. 76 00:04:15,000 --> 00:04:17,193 ‫So that's really no big deal. 77 00:04:18,360 --> 00:04:22,180 ‫Let's also grab this one right here for the label 78 00:04:26,250 --> 00:04:30,270 ‫like this, and nice. 79 00:04:30,270 --> 00:04:33,033 ‫Now, the reason why these here look different, 80 00:04:34,260 --> 00:04:36,150 ‫well, not here 81 00:04:36,150 --> 00:04:38,820 ‫but here they actually do look different. 82 00:04:38,820 --> 00:04:40,170 ‫And the reason for that 83 00:04:40,170 --> 00:04:44,040 ‫is that the input field is here inside this div. 84 00:04:44,040 --> 00:04:47,070 ‫And the same down here, because here, 85 00:04:47,070 --> 00:04:51,240 ‫in some situations, we want to also display this error. 86 00:04:51,240 --> 00:04:53,940 ‫So the paragraph here with the error inside 87 00:04:53,940 --> 00:04:56,070 ‫and therefore, we have this div here 88 00:04:56,070 --> 00:04:58,350 ‫and actually, the div should be here. 89 00:04:58,350 --> 00:05:02,130 ‫So the paragraph should really be inside that div. 90 00:05:02,130 --> 00:05:04,230 ‫And so what we need to just do here 91 00:05:04,230 --> 00:05:07,590 ‫is to add the grow class. 92 00:05:07,590 --> 00:05:11,823 ‫So it will give it flex grow one and the same thing here. 93 00:05:15,870 --> 00:05:20,190 ‫Now, for some reason here, we also have some differences. 94 00:05:20,190 --> 00:05:21,570 ‫Let's make this a bit bigger 95 00:05:21,570 --> 00:05:24,480 ‫so that you can actually see something here. 96 00:05:24,480 --> 00:05:27,123 ‫And so let's inspect what is going on here. 97 00:05:28,470 --> 00:05:32,910 ‫So here we have indeed the flex basis of 40, 98 00:05:32,910 --> 00:05:37,910 ‫which gives this, as we see there, the width of 160 pixels, 99 00:05:37,920 --> 00:05:40,800 ‫which is exactly what is supposed to happen. 100 00:05:40,800 --> 00:05:42,420 ‫So that's what we see here. 101 00:05:42,420 --> 00:05:44,310 ‫However, for some reason, 102 00:05:44,310 --> 00:05:46,890 ‫here apparently that is not working. 103 00:05:46,890 --> 00:05:50,340 ‫And so let's also add the grow class here 104 00:05:50,340 --> 00:05:52,083 ‫to this other flex item. 105 00:05:53,760 --> 00:05:57,660 ‫Okay, so here in this situation, the other flex item 106 00:05:57,660 --> 00:05:58,650 ‫is this div. 107 00:05:58,650 --> 00:06:01,020 ‫So we added the className of grow there 108 00:06:01,020 --> 00:06:04,140 ‫but here the second flex item is this one. 109 00:06:04,140 --> 00:06:08,730 ‫And so besides this input class that we created ourselves, 110 00:06:08,730 --> 00:06:12,600 ‫let's try to add the grow class as well. 111 00:06:12,600 --> 00:06:15,600 ‫And well, that doesn't fix anything. 112 00:06:15,600 --> 00:06:18,930 ‫So let's maybe see what is happening here 113 00:06:18,930 --> 00:06:21,030 ‫with this input field. 114 00:06:21,030 --> 00:06:23,523 ‫So inspecting that class right there. 115 00:06:26,370 --> 00:06:28,593 ‫So let's see what we have. 116 00:06:29,550 --> 00:06:31,470 ‫Ah, immediately here I see 117 00:06:31,470 --> 00:06:34,263 ‫that the width probably shouldn't be here. 118 00:06:35,340 --> 00:06:37,923 ‫So let's see what happens if we take that off. 119 00:06:38,760 --> 00:06:41,070 ‫And now it works. 120 00:06:41,070 --> 00:06:44,760 ‫So when we are using these elements as flex items, 121 00:06:44,760 --> 00:06:47,400 ‫we should never use the width property. 122 00:06:47,400 --> 00:06:50,163 ‫And so that right there was RBAC. 123 00:06:51,210 --> 00:06:55,290 ‫So let's come to our index.css file. 124 00:06:55,290 --> 00:07:00,290 ‫And from here we need to remove this full width. 125 00:07:02,070 --> 00:07:05,940 ‫Okay, and so now we need to put it back 126 00:07:05,940 --> 00:07:07,323 ‫on these two right here. 127 00:07:08,340 --> 00:07:09,843 ‫So where is that? 128 00:07:11,040 --> 00:07:16,040 ‫So right here with full and not flex grow 129 00:07:16,770 --> 00:07:19,680 ‫because since this is inside this div, 130 00:07:19,680 --> 00:07:22,953 ‫this is now no longer a flex item. 131 00:07:27,330 --> 00:07:29,250 ‫All right, nice. 132 00:07:29,250 --> 00:07:33,270 ‫So this was probably all a little bit confusing 133 00:07:33,270 --> 00:07:37,140 ‫but it would be easier if we were just writing the markup 134 00:07:37,140 --> 00:07:40,200 ‫and the styles at the exact same time. 135 00:07:40,200 --> 00:07:42,120 ‫So here we already had the markup 136 00:07:42,120 --> 00:07:44,670 ‫and now we are adding the classes later on. 137 00:07:44,670 --> 00:07:47,250 ‫But if we were doing everything at the same time, 138 00:07:47,250 --> 00:07:49,533 ‫this would be a bit more straightforward. 139 00:07:51,000 --> 00:07:56,000 ‫But anyway, now let's talk about finally this checkbox here. 140 00:07:56,460 --> 00:07:59,910 ‫And so here we will also want to add some margin 141 00:07:59,910 --> 00:08:00,783 ‫to the bottom. 142 00:08:01,770 --> 00:08:03,630 ‫Let's say a lot of margin 143 00:08:03,630 --> 00:08:05,430 ‫to actually give it some space there 144 00:08:08,640 --> 00:08:10,137 ‫just like this. 145 00:08:10,137 --> 00:08:13,950 ‫And then let's use Flexbox to put these side by side 146 00:08:13,950 --> 00:08:15,813 ‫and add some space. 147 00:08:16,920 --> 00:08:21,783 ‫So a gap of five, and then items-center. 148 00:08:22,740 --> 00:08:25,060 ‫And to finish, let's just make this one here 149 00:08:25,920 --> 00:08:30,920 ‫a bit more prominent with font-medium, just like this. 150 00:08:34,290 --> 00:08:35,610 ‫Beautiful. 151 00:08:35,610 --> 00:08:37,350 ‫Now all we will have to do 152 00:08:37,350 --> 00:08:41,973 ‫is to style that error message that might appear down there. 153 00:08:42,810 --> 00:08:47,810 ‫So right now, nothing here is working, so no new orders 154 00:08:48,270 --> 00:08:49,413 ‫are gonna be created, 155 00:08:51,210 --> 00:08:53,550 ‫but now I'm just inputting here some fake data 156 00:08:53,550 --> 00:08:55,953 ‫so that we can see the error there. 157 00:08:57,480 --> 00:08:59,280 ‫So here is that error message. 158 00:08:59,280 --> 00:09:00,970 ‫And so let's now format this 159 00:09:03,780 --> 00:09:06,360 ‫because, of course, this doesn't look the way 160 00:09:06,360 --> 00:09:07,563 ‫that it should. 161 00:09:08,520 --> 00:09:11,373 ‫So where is that error message? 162 00:09:13,440 --> 00:09:14,273 ‫Right here. 163 00:09:16,260 --> 00:09:20,790 ‫So let's start by making the text smaller 164 00:09:20,790 --> 00:09:22,893 ‫so extra small maybe. 165 00:09:23,910 --> 00:09:26,310 ‫So that's already a huge improvement. 166 00:09:26,310 --> 00:09:28,560 ‫Let's add some margin to the top, 167 00:09:28,560 --> 00:09:31,530 ‫so margin top, let's say two. 168 00:09:31,530 --> 00:09:33,840 ‫And then let's place this here 169 00:09:33,840 --> 00:09:37,293 ‫in a nice box so that it really looks like an error. 170 00:09:38,130 --> 00:09:40,503 ‫So first, let's make the text red. 171 00:09:41,760 --> 00:09:45,210 ‫And again, it's so handy that we have all these colors here 172 00:09:45,210 --> 00:09:47,733 ‫one class away basically. 173 00:09:50,430 --> 00:09:55,347 ‫And then let's use also red, but a very faint one like this. 174 00:09:55,347 --> 00:09:58,410 ‫And then we just need to add some padding 175 00:09:58,410 --> 00:10:02,223 ‫to all sides and make it completely rounded. 176 00:10:05,010 --> 00:10:08,550 ‫So just like this, and really nice. 177 00:10:08,550 --> 00:10:11,190 ‫Now, maybe don't make it completely rounded 178 00:10:11,190 --> 00:10:13,050 ‫but just a little bit. 179 00:10:13,050 --> 00:10:17,100 ‫Maybe like this, this looks a bit more natural. 180 00:10:17,100 --> 00:10:19,410 ‫Now, we could add some trickery here 181 00:10:19,410 --> 00:10:24,410 ‫to also make this label here still in line with the text box 182 00:10:25,380 --> 00:10:27,150 ‫but let's just leave it like this. 183 00:10:27,150 --> 00:10:29,103 ‫So this is good enough, I think. 184 00:10:30,240 --> 00:10:34,590 ‫And the same thing is true also here in the mobile view. 185 00:10:34,590 --> 00:10:38,340 ‫The only thing that I think we should change and do so 186 00:10:38,340 --> 00:10:42,270 ‫for the entire application is the text size of this button. 187 00:10:42,270 --> 00:10:44,220 ‫So this is actually way too big 188 00:10:44,220 --> 00:10:46,950 ‫and I've been noticing that for some time. 189 00:10:46,950 --> 00:10:49,113 ‫But now let's fix that actually. 190 00:10:50,370 --> 00:10:55,370 ‫So here, the base style should have the text set to small 191 00:10:56,610 --> 00:11:00,453 ‫so that always looks a bit better in these buttons. 192 00:11:01,500 --> 00:11:04,803 ‫So let's place the same thing also in the secondary buttons. 193 00:11:06,030 --> 00:11:07,680 ‫And then there we go. 194 00:11:07,680 --> 00:11:10,920 ‫So this one has the small text, and then the small button 195 00:11:10,920 --> 00:11:12,753 ‫has the extra small text. 196 00:11:13,860 --> 00:11:16,590 ‫All right, and so for example, in the cart, 197 00:11:16,590 --> 00:11:19,353 ‫that then also looks a bit more natural. 198 00:11:20,760 --> 00:11:21,990 ‫All right, so with this, 199 00:11:21,990 --> 00:11:25,620 ‫we finished actually this order form. 200 00:11:25,620 --> 00:11:29,130 ‫There's just one tiny thing that I have been wanting to fix 201 00:11:29,130 --> 00:11:32,703 ‫for a long time, which is the title of the page. 202 00:11:33,720 --> 00:11:38,720 ‫So let's change that here also to Fast React Pizza Co. 203 00:11:43,350 --> 00:11:47,310 ‫And then finally, let's get rid of this favicon 204 00:11:47,310 --> 00:11:50,100 ‫and we will use an emoji instead. 205 00:11:50,100 --> 00:11:54,210 ‫So there is a very nice trick that we can use to do that. 206 00:11:54,210 --> 00:11:55,450 ‫And so let me google 207 00:11:56,340 --> 00:12:01,340 ‫and you should google as well emoji as a favicon, 208 00:12:01,620 --> 00:12:05,820 ‫which should then bring you to a CSS Tricks website. 209 00:12:05,820 --> 00:12:10,680 ‫So my internet seems to be a bit slow, but yeah, 210 00:12:10,680 --> 00:12:12,840 ‫so the one that we want is this one. 211 00:12:12,840 --> 00:12:17,370 ‫So at CSS Tricks emoji as a favicon. 212 00:12:17,370 --> 00:12:18,780 ‫And then all we have to do 213 00:12:18,780 --> 00:12:23,780 ‫is to copy this code snippet right here, and then replace 214 00:12:24,150 --> 00:12:29,150 ‫that favicon that we have right now, which is this one. 215 00:12:29,651 --> 00:12:34,651 ‫And then here we can replace that with a slice of pizza. 216 00:12:38,160 --> 00:12:40,410 ‫All right, let's wait for it. 217 00:12:40,410 --> 00:12:41,943 ‫And beautiful. 218 00:12:43,050 --> 00:12:45,630 ‫So this looks really cool, I think 219 00:12:45,630 --> 00:12:48,843 ‫and adds this nice touch to our application. 220 00:12:50,160 --> 00:12:54,360 ‫Okay, but anyway, with this, we are almost finished. 221 00:12:54,360 --> 00:12:56,370 ‫The only thing that we have left to do 222 00:12:56,370 --> 00:13:00,240 ‫is to style the OrderOverview page. 223 00:13:00,240 --> 00:13:03,183 ‫So let's open that up actually. 224 00:13:04,620 --> 00:13:07,830 ‫So let's search for this order right away 225 00:13:07,830 --> 00:13:10,470 ‫and so then I can show you what I actually mean. 226 00:13:10,470 --> 00:13:13,950 ‫So this is the page that we need to style next. 227 00:13:13,950 --> 00:13:15,570 ‫And so let's quickly move on 228 00:13:15,570 --> 00:13:18,213 ‫to the last lecture of this section.