1 00:00:01,230 --> 00:00:05,043 ‫So let's now finally style the menu page. 2 00:00:06,510 --> 00:00:10,260 ‫So this is the menu page and as we see 3 00:00:10,260 --> 00:00:13,920 ‫it loops over the menu data that it receives 4 00:00:13,920 --> 00:00:18,330 ‫and for each of them, one menu item component is rendered. 5 00:00:18,330 --> 00:00:20,010 ‫And so let's actually start 6 00:00:20,010 --> 00:00:23,670 ‫by styling this menu item right here. 7 00:00:23,670 --> 00:00:26,610 ‫The first thing that we're gonna do is to get rid 8 00:00:26,610 --> 00:00:28,683 ‫of these huge images. 9 00:00:29,730 --> 00:00:33,210 ‫So let's give them a height of 24 10 00:00:33,210 --> 00:00:35,340 ‫which is a lot better. 11 00:00:35,340 --> 00:00:37,743 ‫So that's just 96 pixels. 12 00:00:38,580 --> 00:00:41,550 ‫Now let's implement the layout here. 13 00:00:41,550 --> 00:00:45,630 ‫So basically, placing this text here on the right side 14 00:00:45,630 --> 00:00:46,890 ‫of the image 15 00:00:46,890 --> 00:00:49,860 ‫and so let's come to this LI item 16 00:00:49,860 --> 00:00:52,473 ‫and make this a flex container. 17 00:00:53,790 --> 00:00:55,420 ‫Then we need some spacing here 18 00:00:56,730 --> 00:01:00,630 ‫so let's give it a gap of four 19 00:01:00,630 --> 00:01:02,610 ‫and that's a lot better. 20 00:01:02,610 --> 00:01:06,510 ‫Now next, what I want to do is to create some lines 21 00:01:06,510 --> 00:01:09,270 ‫here between all of these items. 22 00:01:09,270 --> 00:01:13,170 ‫Now what we can do is to add a margin to the bottom 23 00:01:13,170 --> 00:01:16,410 ‫to each of these gap items, right? 24 00:01:16,410 --> 00:01:19,980 ‫However, there is a very handy class in Tailwind 25 00:01:19,980 --> 00:01:22,620 ‫which is the divide class. 26 00:01:22,620 --> 00:01:26,220 ‫So we can use the divide class on the parent element 27 00:01:26,220 --> 00:01:28,680 ‫of these list items. 28 00:01:28,680 --> 00:01:31,470 ‫So right here in this list itself 29 00:01:31,470 --> 00:01:33,840 ‫and that will then place some lines 30 00:01:33,840 --> 00:01:36,093 ‫between all the child elements. 31 00:01:37,320 --> 00:01:39,480 ‫So that's really, really useful 32 00:01:39,480 --> 00:01:43,710 ‫and it's a bit similar to the space class. 33 00:01:43,710 --> 00:01:48,010 ‫So this class that we used here in the card overview where 34 00:01:48,900 --> 00:01:50,310 ‫where is that? 35 00:01:50,310 --> 00:01:53,160 ‫Yeah, here so where we can use this space 36 00:01:53,160 --> 00:01:55,830 ‫in order to basically create some space 37 00:01:55,830 --> 00:01:57,930 ‫between the child elements. 38 00:01:57,930 --> 00:01:59,040 ‫And so with divide, 39 00:01:59,040 --> 00:02:02,550 ‫we can create a line between child elements. 40 00:02:02,550 --> 00:02:04,173 ‫So in order to do that, 41 00:02:05,010 --> 00:02:08,340 ‫we just use divide and then the direction. 42 00:02:08,340 --> 00:02:10,710 ‫So in this case, the Y direction. 43 00:02:10,710 --> 00:02:13,200 ‫And then just like a regular border, 44 00:02:13,200 --> 00:02:16,380 ‫we also need to specify the color. 45 00:02:16,380 --> 00:02:19,413 ‫So that's gonna be stone 200. 46 00:02:22,170 --> 00:02:25,110 ‫All right, that looks a lot nicer. 47 00:02:25,110 --> 00:02:26,910 ‫And since we are already here, 48 00:02:26,910 --> 00:02:29,310 ‫let's also add a little bit of padding 49 00:02:29,310 --> 00:02:33,780 ‫between the site of the page and this list. 50 00:02:33,780 --> 00:02:38,780 ‫So, basically some padding in the X direction like this. 51 00:02:41,190 --> 00:02:45,963 ‫Great! So this is already starting to look a bit more real. 52 00:02:46,860 --> 00:02:49,830 ‫And so here, I think we have enough styles. 53 00:02:49,830 --> 00:02:51,150 ‫So let's go back 54 00:02:51,150 --> 00:02:54,690 ‫and now also add some spacing here between these items. 55 00:02:54,690 --> 00:02:57,570 ‫So this time, we cannot do this 56 00:02:57,570 --> 00:03:02,570 ‫so we cannot do like space Y2 because then, 57 00:03:03,720 --> 00:03:05,920 ‫well, it keeps reloading here 58 00:03:07,020 --> 00:03:10,650 ‫but I think that's because it keeps reloading the menu data. 59 00:03:10,650 --> 00:03:13,860 ‫But anyway, the problem here is that now the line 60 00:03:13,860 --> 00:03:16,560 ‫is not in the middle of these two. 61 00:03:16,560 --> 00:03:18,810 ‫And so that's why we cannot do this 62 00:03:18,810 --> 00:03:21,570 ‫and instead, we have to work with padding 63 00:03:21,570 --> 00:03:23,793 ‫on the menu items themselves. 64 00:03:25,290 --> 00:03:27,990 ‫So let's add some padding here like this. 65 00:03:27,990 --> 00:03:31,380 ‫And then let's turn our attention here to this part 66 00:03:31,380 --> 00:03:33,420 ‫of the menu item. 67 00:03:33,420 --> 00:03:35,820 ‫So here we have this title 68 00:03:35,820 --> 00:03:40,230 ‫then the ingredients of the pizza and then this price. 69 00:03:40,230 --> 00:03:43,290 ‫So what I want to do now is to push this price 70 00:03:43,290 --> 00:03:44,580 ‫all the way down here. 71 00:03:44,580 --> 00:03:48,040 ‫And for that, we can make this a flex container 72 00:03:48,990 --> 00:03:51,663 ‫and you will see what I mean in a minute. 73 00:03:54,480 --> 00:03:56,730 ‫So making it a flex container 74 00:03:56,730 --> 00:03:59,640 ‫but this will only make it so that the items 75 00:03:59,640 --> 00:04:01,020 ‫are side by side 76 00:04:01,020 --> 00:04:04,230 ‫but instead, we want them to be one after another. 77 00:04:04,230 --> 00:04:07,320 ‫So basically, we need to change the flex direction 78 00:04:07,320 --> 00:04:08,910 ‫to column. 79 00:04:08,910 --> 00:04:12,240 ‫So changing the main access of the flex container 80 00:04:12,240 --> 00:04:15,543 ‫and we can do that with flex col. 81 00:04:16,860 --> 00:04:19,410 ‫All right and so now it looks basically 82 00:04:19,410 --> 00:04:22,050 ‫exactly the same way as before 83 00:04:22,050 --> 00:04:26,610 ‫but since these are now flex items, so this, this and this 84 00:04:26,610 --> 00:04:31,200 ‫what we can do is to specify the margin top of auto 85 00:04:31,200 --> 00:04:34,440 ‫which will then push this down all the way. 86 00:04:34,440 --> 00:04:37,800 ‫So margin top and then auto 87 00:04:37,800 --> 00:04:39,390 ‫and there we go. 88 00:04:39,390 --> 00:04:41,310 ‫And since we are already here, 89 00:04:41,310 --> 00:04:44,973 ‫let's immediately format also these paragraphs. 90 00:04:47,130 --> 00:04:49,503 ‫So let's just make the text small, 91 00:04:51,300 --> 00:04:53,400 ‫so smaller than the rest. 92 00:04:53,400 --> 00:04:56,310 ‫And notice how here we have two different situations. 93 00:04:56,310 --> 00:05:00,120 ‫We have either the price or this sold out part. 94 00:05:00,120 --> 00:05:03,060 ‫So sometimes some pizzas don't exist 95 00:05:03,060 --> 00:05:06,030 ‫and then they are marked here as sold out. 96 00:05:06,030 --> 00:05:09,153 ‫That's why we have this conditional rendering right here. 97 00:05:10,440 --> 00:05:13,290 ‫So we also need to style that one. 98 00:05:13,290 --> 00:05:15,450 ‫So also making it small, 99 00:05:15,450 --> 00:05:18,150 ‫let's also make it uppercase here. 100 00:05:18,150 --> 00:05:21,300 ‫In this case, uppercase. 101 00:05:21,300 --> 00:05:24,330 ‫Then let's increase the font weight a little bit 102 00:05:24,330 --> 00:05:26,460 ‫let's say to medium. 103 00:05:26,460 --> 00:05:29,760 ‫And finally, let's make it stand out a little bit less 104 00:05:29,760 --> 00:05:32,400 ‫by making it lighter. 105 00:05:32,400 --> 00:05:35,373 ‫So by changing the text color to 500. 106 00:05:36,570 --> 00:05:38,820 ‫Nice. So that's looking great. 107 00:05:38,820 --> 00:05:41,940 ‫But in order to really show the user very easily 108 00:05:41,940 --> 00:05:43,750 ‫that this pizza is sold out, 109 00:05:43,750 --> 00:05:48,330 ‫let's also make this image here grayed out a little bit. 110 00:05:48,330 --> 00:05:52,680 ‫So let's make it grayscale and reduce the opacity. 111 00:05:52,680 --> 00:05:53,513 ‫And so with this, 112 00:05:53,513 --> 00:05:56,283 ‫I can show you a few more Tailwind classes. 113 00:05:57,540 --> 00:05:59,790 ‫So right here in the image, 114 00:05:59,790 --> 00:06:02,823 ‫now we need some conditional styling basically. 115 00:06:04,200 --> 00:06:06,990 ‫So let's create a template literal here 116 00:06:06,990 --> 00:06:09,060 ‫inside this JavaScript mode. 117 00:06:09,060 --> 00:06:13,833 ‫And then let's say if sold out, 118 00:06:14,910 --> 00:06:17,520 ‫then we want to add some classes here. 119 00:06:17,520 --> 00:06:21,210 ‫And if not, then no new classes at all. 120 00:06:21,210 --> 00:06:24,270 ‫So first of all, let's reduce the opacity 121 00:06:24,270 --> 00:06:27,150 ‫so we can use the opacity class 122 00:06:27,150 --> 00:06:29,670 ‫and then some value here, 123 00:06:29,670 --> 00:06:32,130 ‫so between zero and 100 124 00:06:32,130 --> 00:06:35,043 ‫and also let's make it grayscale. 125 00:06:39,030 --> 00:06:40,890 ‫So that opacity worked 126 00:06:40,890 --> 00:06:45,890 ‫but here probably it's gray with an A and beautiful. 127 00:06:46,650 --> 00:06:51,650 ‫So now it's very easy to see that this pizza doesn't exist. 128 00:06:51,720 --> 00:06:54,780 ‫Next up, let's play a bit with the visual hierarchy 129 00:06:54,780 --> 00:06:57,330 ‫here of this text. 130 00:06:57,330 --> 00:07:00,423 ‫So to make the title stand out a bit more. 131 00:07:01,470 --> 00:07:05,100 ‫So let's say here we want the font to be 132 00:07:05,100 --> 00:07:07,210 ‫of a medium weight 133 00:07:10,110 --> 00:07:11,460 ‫just like this. 134 00:07:11,460 --> 00:07:15,333 ‫And then here, let's make it a little bit smaller. 135 00:07:16,770 --> 00:07:21,770 ‫So text small, let's make it italic as well. 136 00:07:24,660 --> 00:07:26,880 ‫And let's also make it lighter 137 00:07:26,880 --> 00:07:30,600 ‫just like this sold out text. 138 00:07:30,600 --> 00:07:32,760 ‫And also one thing that I want to do 139 00:07:32,760 --> 00:07:36,810 ‫is to change here the capitalization of the words 140 00:07:36,810 --> 00:07:38,640 ‫or actually of the text. 141 00:07:38,640 --> 00:07:41,550 ‫Cause notice how right now this first string here 142 00:07:41,550 --> 00:07:42,990 ‫is lowercase. 143 00:07:42,990 --> 00:07:47,400 ‫So we can easily change this with decapitalize class 144 00:07:47,400 --> 00:07:51,273 ‫which will basically just do text transform, capitalize. 145 00:07:53,730 --> 00:07:54,750 ‫Nice. 146 00:07:54,750 --> 00:07:57,960 ‫So actually, it's not just the first word of the string 147 00:07:57,960 --> 00:08:02,100 ‫but really, all of the words will simply get capitalized 148 00:08:02,100 --> 00:08:04,533 ‫which looks a lot nicer than before. 149 00:08:05,520 --> 00:08:08,040 ‫Great! So we are almost finished. 150 00:08:08,040 --> 00:08:12,810 ‫Let's just add now a button here to add this menu item 151 00:08:12,810 --> 00:08:14,400 ‫to the card. 152 00:08:14,400 --> 00:08:16,050 ‫So that's something really important 153 00:08:16,050 --> 00:08:17,700 ‫that we don't have here yet. 154 00:08:17,700 --> 00:08:21,120 ‫And so let's add that right here 155 00:08:21,120 --> 00:08:23,790 ‫in the div that we have down here. 156 00:08:23,790 --> 00:08:26,880 ‫So remember that we have this paragraph. 157 00:08:26,880 --> 00:08:29,610 ‫We have this other paragraph with ingredients 158 00:08:29,610 --> 00:08:31,140 ‫and then we have this div 159 00:08:31,140 --> 00:08:35,970 ‫which right now only contains this price or this sold out. 160 00:08:35,970 --> 00:08:38,100 ‫And so now in the same line here, 161 00:08:38,100 --> 00:08:41,313 ‫we want to have the button here at the very end. 162 00:08:42,330 --> 00:08:44,460 ‫So, let's just add that here. 163 00:08:44,460 --> 00:08:49,460 ‫And for this, we can use again our button class. 164 00:08:49,560 --> 00:08:50,460 ‫Now later on, 165 00:08:50,460 --> 00:08:54,180 ‫here we will then have to pass in some handler function 166 00:08:54,180 --> 00:08:57,330 ‫because we will need to add some handler function here 167 00:08:57,330 --> 00:09:00,450 ‫in order to actually add the menu item to the cart. 168 00:09:00,450 --> 00:09:03,933 ‫But let's leave that for later. 169 00:09:05,130 --> 00:09:09,300 ‫Now right, now here we have a couple of problems. 170 00:09:09,300 --> 00:09:12,360 ‫First of all, this button is really huge 171 00:09:12,360 --> 00:09:14,310 ‫so we should change that. 172 00:09:14,310 --> 00:09:17,370 ‫And we also want this to be side by side 173 00:09:17,370 --> 00:09:19,110 ‫with this part here. 174 00:09:19,110 --> 00:09:23,760 ‫And so, let's also make this one a flex container as well. 175 00:09:23,760 --> 00:09:26,310 ‫And then let's vertically align the items 176 00:09:26,310 --> 00:09:27,900 ‫so that's not align 177 00:09:27,900 --> 00:09:32,900 ‫but items, center and then justify between. 178 00:09:34,740 --> 00:09:37,690 ‫However, now here we see a problem 179 00:09:38,580 --> 00:09:40,720 ‫so let's try to inspect this 180 00:09:43,200 --> 00:09:45,093 ‫so we can get a bit more space. 181 00:09:46,230 --> 00:09:49,230 ‫And so notice how actually this flex container 182 00:09:49,230 --> 00:09:51,180 ‫ends right here. 183 00:09:51,180 --> 00:09:54,300 ‫So here, as soon as the content is finished, 184 00:09:54,300 --> 00:09:56,700 ‫then the div also finishes. 185 00:09:56,700 --> 00:09:58,650 ‫So this element 186 00:09:58,650 --> 00:10:03,650 ‫and the same thing up here in this one and in this one 187 00:10:04,830 --> 00:10:07,200 ‫and therefore, all these buttons here 188 00:10:07,200 --> 00:10:09,420 ‫are not in the same position. 189 00:10:09,420 --> 00:10:12,570 ‫So what we need to do is to allow these flex items 190 00:10:12,570 --> 00:10:14,940 ‫to grow as much as they can. 191 00:10:14,940 --> 00:10:17,070 ‫And for that, with regular CSS, 192 00:10:17,070 --> 00:10:21,243 ‫we set the flex property on a flex item to one. 193 00:10:22,620 --> 00:10:25,710 ‫So hopefully, again you know about all of these 194 00:10:25,710 --> 00:10:27,780 ‫flex box fundamentals 195 00:10:27,780 --> 00:10:31,263 ‫but if not, that's also not a big problem here. 196 00:10:32,190 --> 00:10:35,340 ‫So what I was saying is that here in this div 197 00:10:35,340 --> 00:10:40,140 ‫we should now do flex-grow. 198 00:10:40,140 --> 00:10:44,100 ‫And so what this will do is exactly what I was just saying. 199 00:10:44,100 --> 00:10:45,990 ‫So it is a bit different here 200 00:10:45,990 --> 00:10:47,730 ‫but it's essentially the same thing. 201 00:10:47,730 --> 00:10:50,220 ‫So it sets flex-grow to one 202 00:10:50,220 --> 00:10:53,850 ‫and so as I saved this, well, nothing happens. 203 00:10:53,850 --> 00:10:58,230 ‫And actually it's because I am here in the wrong div. 204 00:10:58,230 --> 00:11:00,150 ‫This is not the one that I want 205 00:11:00,150 --> 00:11:01,800 ‫but actually this one of course. 206 00:11:01,800 --> 00:11:05,520 ‫So all of this is this div right here. 207 00:11:05,520 --> 00:11:09,360 ‫And the property that I want is actually not even flex-grow 208 00:11:09,360 --> 00:11:11,130 ‫but just grow. 209 00:11:11,130 --> 00:11:12,090 ‫And so this one 210 00:11:12,090 --> 00:11:15,360 ‫is actually exactly the same thing as before. 211 00:11:15,360 --> 00:11:19,350 ‫So grow or flex-grow are apparently the same 212 00:11:19,350 --> 00:11:23,520 ‫but yeah, what matters is that it works now. 213 00:11:23,520 --> 00:11:25,890 ‫Now let's just see what happens when we make this 214 00:11:25,890 --> 00:11:27,573 ‫for example really small. 215 00:11:30,420 --> 00:11:31,953 ‫Yeah, it works great. 216 00:11:34,260 --> 00:11:37,950 ‫So it works great here in responsive design. 217 00:11:37,950 --> 00:11:42,130 ‫And so let's go back and now as I was saying 218 00:11:43,061 --> 00:11:43,950 ‫a few minutes ago 219 00:11:43,950 --> 00:11:47,640 ‫is that we now want to change the size of this button. 220 00:11:47,640 --> 00:11:50,850 ‫So what we're gonna do is to now allow this button 221 00:11:50,850 --> 00:11:54,030 ‫to receive a prop about its size 222 00:11:54,030 --> 00:11:56,850 ‫or maybe about the type of the button. 223 00:11:56,850 --> 00:12:00,543 ‫And then according to that type, we set a different style. 224 00:12:01,470 --> 00:12:06,470 ‫So here, let's already pass in the type prop. 225 00:12:06,930 --> 00:12:09,330 ‫Let's call this one small 226 00:12:09,330 --> 00:12:12,360 ‫which of course for now won't do anything. 227 00:12:12,360 --> 00:12:14,400 ‫But now let's go to the other places 228 00:12:14,400 --> 00:12:16,230 ‫where we used this button 229 00:12:16,230 --> 00:12:18,603 ‫and then give it the type of primary. 230 00:12:19,740 --> 00:12:24,740 ‫So I believe that was here in create user, right? 231 00:12:26,910 --> 00:12:30,300 ‫So type of primary. 232 00:12:30,300 --> 00:12:32,590 ‫So this here is really the primary button 233 00:12:34,275 --> 00:12:38,580 ‫and then in create order is the other place. 234 00:12:38,580 --> 00:12:42,510 ‫So again, type primary. 235 00:12:42,510 --> 00:12:46,410 ‫And so with this, we can now just accept that prop 236 00:12:46,410 --> 00:12:47,670 ‫in the button 237 00:12:47,670 --> 00:12:49,923 ‫and then handle the styles accordingly. 238 00:12:52,290 --> 00:12:56,940 ‫So type and now the technique that I'm going to use 239 00:12:56,940 --> 00:12:59,700 ‫is to create an object here with the styles 240 00:12:59,700 --> 00:13:01,560 ‫and then based on the type, 241 00:13:01,560 --> 00:13:04,023 ‫we will get the style from the object. 242 00:13:05,010 --> 00:13:06,880 ‫So let's call this styles 243 00:13:09,600 --> 00:13:12,153 ‫and let's start just with the base style. 244 00:13:13,020 --> 00:13:16,260 ‫So, let's just copy all of this for now 245 00:13:16,260 --> 00:13:18,750 ‫and then we will delete what we don't want 246 00:13:18,750 --> 00:13:20,340 ‫to be in the base style. 247 00:13:20,340 --> 00:13:23,490 ‫So the base style is basically what will be common 248 00:13:23,490 --> 00:13:24,840 ‫to all the buttons 249 00:13:24,840 --> 00:13:27,750 ‫and then some things we change. 250 00:13:27,750 --> 00:13:32,620 ‫So what we want to change is probably the text size 251 00:13:33,870 --> 00:13:35,880 ‫which is not even here. 252 00:13:35,880 --> 00:13:38,640 ‫Then also these paddings. 253 00:13:38,640 --> 00:13:43,640 ‫So essentially the size of the button and then that's it. 254 00:13:44,190 --> 00:13:48,780 ‫So the rest here can stay the same for all the buttons. 255 00:13:48,780 --> 00:13:52,710 ‫And so let's now create the styles for the primary 256 00:13:52,710 --> 00:13:57,710 ‫which will be the space here plus some new styles. 257 00:13:57,720 --> 00:14:00,450 ‫So actually, there's not even a point 258 00:14:00,450 --> 00:14:03,930 ‫of having these styles here in this object. 259 00:14:03,930 --> 00:14:07,500 ‫So that's actually, so I changed my mind 260 00:14:07,500 --> 00:14:10,500 ‫because I'm just building this as I go. 261 00:14:10,500 --> 00:14:14,170 ‫So let's make it an outside variable here 262 00:14:15,690 --> 00:14:19,140 ‫and then here, we can easily say the base styles 263 00:14:19,140 --> 00:14:21,540 ‫plus some other styles. 264 00:14:21,540 --> 00:14:24,960 ‫So the ones that we removed here from the primary 265 00:14:24,960 --> 00:14:26,620 ‫were these two 266 00:14:28,590 --> 00:14:33,513 ‫and then these two right here. 267 00:14:35,100 --> 00:14:38,643 ‫Okay and with this, we no longer need this. 268 00:14:39,690 --> 00:14:43,560 ‫And then of course here, React is going to complain. 269 00:14:43,560 --> 00:14:48,540 ‫And now all we do here is to use styles 270 00:14:48,540 --> 00:14:53,313 ‫and then get the type from the styles object. 271 00:14:55,350 --> 00:14:58,170 ‫So styles at type. 272 00:14:58,170 --> 00:15:01,410 ‫And so this type will be received dynamically. 273 00:15:01,410 --> 00:15:04,470 ‫So here from this prop, right? 274 00:15:04,470 --> 00:15:08,340 ‫So in all those places where the type is set to primary, 275 00:15:08,340 --> 00:15:10,830 ‫then here we will get styles primary 276 00:15:10,830 --> 00:15:14,643 ‫which will then receive exactly these styles right here. 277 00:15:15,630 --> 00:15:17,490 ‫So this makes it so that right now 278 00:15:17,490 --> 00:15:19,320 ‫the button is no longer working 279 00:15:19,320 --> 00:15:23,850 ‫and so let's also make this small style. 280 00:15:23,850 --> 00:15:25,800 ‫So that's again the base 281 00:15:25,800 --> 00:15:27,900 ‫and now all we will have to do 282 00:15:27,900 --> 00:15:31,170 ‫is to basically change these other styles, 283 00:15:31,170 --> 00:15:33,930 ‫so making everything a little bit smaller. 284 00:15:33,930 --> 00:15:36,900 ‫So this one, let's actually leave it the same 285 00:15:36,900 --> 00:15:39,810 ‫but let's just make it smaller in the Y direction. 286 00:15:39,810 --> 00:15:42,780 ‫So making it a bit less tall. 287 00:15:42,780 --> 00:15:44,970 ‫Then here in the media queries, 288 00:15:44,970 --> 00:15:47,370 ‫I think this button should actually only start 289 00:15:47,370 --> 00:15:51,183 ‫to become bigger at the medium breakpoint. 290 00:15:52,020 --> 00:15:56,730 ‫So let's grab this here and then let's just change this. 291 00:15:56,730 --> 00:15:58,260 ‫So here, let's give it five. 292 00:15:58,260 --> 00:16:03,060 ‫And here for the first time, we can also use 2.5 293 00:16:03,060 --> 00:16:05,070 ‫and beautiful. 294 00:16:05,070 --> 00:16:08,280 ‫So we already start to have something here 295 00:16:08,280 --> 00:16:10,680 ‫but it's not really perfect. 296 00:16:10,680 --> 00:16:15,123 ‫So actually we still need to give it here the PX class. 297 00:16:16,440 --> 00:16:18,900 ‫So padding X because we did of course 298 00:16:18,900 --> 00:16:21,270 ‫remove it completely from here 299 00:16:21,270 --> 00:16:24,220 ‫but we still don't have the padding on the X 300 00:16:25,470 --> 00:16:28,560 ‫but I guess that's because right now we don't have a space 301 00:16:28,560 --> 00:16:31,770 ‫between this class and this class. 302 00:16:31,770 --> 00:16:33,720 ‫So let's add that there 303 00:16:33,720 --> 00:16:34,833 ‫and there we go. 304 00:16:35,970 --> 00:16:39,630 ‫Nice. So here we have this a bit smaller button. 305 00:16:39,630 --> 00:16:42,813 ‫And actually let's make the text also small. 306 00:16:45,900 --> 00:16:49,140 ‫So text, actually let's make it really small, 307 00:16:49,140 --> 00:16:51,930 ‫so extra small like this. 308 00:16:51,930 --> 00:16:54,630 ‫And yeah, this looks a bit more natural. 309 00:16:54,630 --> 00:16:57,040 ‫But now if we go to the cart 310 00:16:58,200 --> 00:17:00,810 ‫where I think we also use this button, 311 00:17:00,810 --> 00:17:04,200 ‫then, well it should appear there. 312 00:17:04,200 --> 00:17:07,233 ‫But actually I think we didn't change the type in this one. 313 00:17:08,910 --> 00:17:13,773 ‫So let's give it a type of primary and nice. 314 00:17:15,480 --> 00:17:18,120 ‫So there we get actually the big button 315 00:17:18,120 --> 00:17:20,580 ‫and the same thing here as well. 316 00:17:20,580 --> 00:17:24,990 ‫So here again, the primary button here as well. 317 00:17:24,990 --> 00:17:29,190 ‫But then if we go to the menu, we get this small variation. 318 00:17:29,190 --> 00:17:30,330 ‫And so with this, 319 00:17:30,330 --> 00:17:34,770 ‫we made our button component here even more versatile. 320 00:17:34,770 --> 00:17:38,730 ‫And now just one very, very minor small correction 321 00:17:38,730 --> 00:17:39,840 ‫that I'm gonna make 322 00:17:39,840 --> 00:17:43,260 ‫is that here we have now a lot more space 323 00:17:43,260 --> 00:17:44,760 ‫than here in the beginning. 324 00:17:44,760 --> 00:17:47,040 ‫So this doesn't look really centered. 325 00:17:47,040 --> 00:17:50,220 ‫And so let's just add a tiny amount of padding 326 00:17:50,220 --> 00:17:51,480 ‫to the top here. 327 00:17:51,480 --> 00:17:54,340 ‫So for example, just 0.5 328 00:17:55,560 --> 00:17:57,810 ‫so which is like two pixels. 329 00:17:57,810 --> 00:18:00,810 ‫Yeah. But yeah, it's a bit better. 330 00:18:00,810 --> 00:18:04,350 ‫And so with this, I think we finished this menu. 331 00:18:04,350 --> 00:18:06,990 ‫Looks really nice and really beautiful 332 00:18:06,990 --> 00:18:10,890 ‫and we did design it right here in the markup. 333 00:18:10,890 --> 00:18:13,590 ‫We didn't have to come up with any class names. 334 00:18:13,590 --> 00:18:17,310 ‫We didn't have to use for example, the BEM methodology 335 00:18:17,310 --> 00:18:20,610 ‫and we didn't have to jump between this file 336 00:18:20,610 --> 00:18:24,783 ‫and/or CSS file which really are huge advantages.