1
00:00:01,110 --> 00:00:04,750
‫Next in line for styling is the Cart

2
00:00:06,630 --> 00:00:08,490
‫So let's go there

3
00:00:08,490 --> 00:00:11,280
‫and let's jump right in.

4
00:00:11,280 --> 00:00:14,070
‫So let's actually start by adding now

5
00:00:14,070 --> 00:00:15,660
‫some space here.

6
00:00:15,660 --> 00:00:19,320
‫So between the beginning of the page and the content.

7
00:00:19,320 --> 00:00:21,033
‫And so let's do that right here.

8
00:00:23,321 --> 00:00:27,330
‫So some horizontal padding here

9
00:00:27,330 --> 00:00:28,470
‫of three.

10
00:00:28,470 --> 00:00:31,083
‫And also let's add some on the sides.

11
00:00:32,635 --> 00:00:34,830
‫Yeah, that looks nice.

12
00:00:34,830 --> 00:00:36,960
‫And here we don't need a lot of space

13
00:00:36,960 --> 00:00:37,800
‫at the top

14
00:00:37,800 --> 00:00:40,140
‫because I want this link here

15
00:00:40,140 --> 00:00:41,864
‫actually to be pretty close

16
00:00:41,864 --> 00:00:43,140
‫to the top.

17
00:00:43,140 --> 00:00:44,760
‫Then where we will have

18
00:00:44,760 --> 00:00:46,230
‫a bit more space

19
00:00:46,230 --> 00:00:48,994
‫is between that NDH1.

20
00:00:48,994 --> 00:00:52,650
‫So let's add then some space here.

21
00:00:52,650 --> 00:00:54,300
‫So margin to the top

22
00:00:54,300 --> 00:00:56,078
‫of seven, let's say.

23
00:00:56,078 --> 00:00:59,100
‫And then let's also increase

24
00:00:59,100 --> 00:01:01,170
‫the text here a lot.

25
00:01:01,170 --> 00:01:03,180
‫So to extra large.

26
00:01:03,180 --> 00:01:06,963
‫And let's make it semi bold.

27
00:01:08,460 --> 00:01:09,600
‫All right.

28
00:01:09,600 --> 00:01:10,440
‫Now here of course

29
00:01:10,440 --> 00:01:12,630
‫later we will then replace this

30
00:01:12,630 --> 00:01:14,040
‫with the real name.

31
00:01:14,040 --> 00:01:16,710
‫But for now, let's just leave it.

32
00:01:16,710 --> 00:01:18,764
‫And then let's actually display

33
00:01:18,764 --> 00:01:22,950
‫so kind of render this fake card

34
00:01:22,950 --> 00:01:24,750
‫also here on this page.

35
00:01:24,750 --> 00:01:27,120
‫So we already have these card

36
00:01:27,120 --> 00:01:29,326
‫item components here.

37
00:01:29,326 --> 00:01:32,010
‫Let's just include

38
00:01:32,010 --> 00:01:34,380
‫or import this module here.

39
00:01:34,380 --> 00:01:35,280
‫And so

40
00:01:35,280 --> 00:01:36,630
‫as always, we will render

41
00:01:36,630 --> 00:01:38,370
‫one of those card items

42
00:01:38,370 --> 00:01:41,133
‫for each object in that array.

43
00:01:42,060 --> 00:01:43,571
‫So let's do that right here

44
00:01:43,571 --> 00:01:46,713
‫inside an unordered list.

45
00:01:48,082 --> 00:01:51,213
‫So card.map,

46
00:01:52,270 --> 00:01:54,925
‫and the card has multiple items

47
00:01:54,925 --> 00:01:56,400
‫and for each of them

48
00:01:56,400 --> 00:02:00,540
‫we will render one card item

49
00:02:00,540 --> 00:02:01,600
‫and we will pass in

50
00:02:03,000 --> 00:02:05,850
‫the item as an item

51
00:02:05,850 --> 00:02:10,620
‫and then the key will be item.key.

52
00:02:10,620 --> 00:02:12,330
‫So pretty standard stuff.

53
00:02:12,330 --> 00:02:15,510
‫Let's just close this right here.

54
00:02:15,510 --> 00:02:17,400
‫And there we go.

55
00:02:17,400 --> 00:02:18,310
‫So here we have

56
00:02:19,564 --> 00:02:21,180
‫these cart items

57
00:02:21,180 --> 00:02:23,020
‫and let's immediately add

58
00:02:24,185 --> 00:02:25,635
‫again a divider between them.

59
00:02:27,212 --> 00:02:29,940
‫So divide-y.

60
00:02:29,940 --> 00:02:31,360
‫Let's also give it

61
00:02:32,670 --> 00:02:34,710
‫again the same color.

62
00:02:34,710 --> 00:02:36,460
‫So stone 200

63
00:02:37,410 --> 00:02:38,673
‫and nice.

64
00:02:40,050 --> 00:02:41,110
‫The only problem

65
00:02:42,578 --> 00:02:43,860
‫is that these dividers

66
00:02:43,860 --> 00:02:46,320
‫are basically only between the elements.

67
00:02:46,320 --> 00:02:47,910
‫But here we also want one

68
00:02:47,910 --> 00:02:48,900
‫at the end

69
00:02:48,900 --> 00:02:51,360
‫basically to close that list.

70
00:02:51,360 --> 00:02:53,250
‫And so let's add a border

71
00:02:53,250 --> 00:02:54,930
‫to the bottom

72
00:02:54,930 --> 00:02:56,820
‫and it will automatically use

73
00:02:56,820 --> 00:03:00,120
‫the color of this divider right here.

74
00:03:00,120 --> 00:03:02,070
‫'Cause basically what this does

75
00:03:02,070 --> 00:03:03,783
‫is to set the border color.

76
00:03:06,150 --> 00:03:06,983
‫All right?

77
00:03:06,983 --> 00:03:09,810
‫Then let's also add some spacing here to the top.

78
00:03:09,810 --> 00:03:13,023
‫So margin top, let's say three.

79
00:03:14,580 --> 00:03:15,480
‫Okay,

80
00:03:15,480 --> 00:03:17,550
‫and then let's also add

81
00:03:17,550 --> 00:03:19,113
‫some margin there.

82
00:03:21,060 --> 00:03:23,680
‫So class name margin top of

83
00:03:24,905 --> 00:03:27,510
‫six and nice.

84
00:03:27,510 --> 00:03:28,830
‫And since we are here,

85
00:03:28,830 --> 00:03:31,290
‫let's also add some margin.

86
00:03:31,290 --> 00:03:33,930
‫So some space between those buttons.

87
00:03:33,930 --> 00:03:35,730
‫And for that we can again use

88
00:03:35,730 --> 00:03:38,400
‫that trick of space.

89
00:03:38,400 --> 00:03:40,293
‫So the space helper class.

90
00:03:42,010 --> 00:03:44,463
‫So vertical space, let's say two.

91
00:03:45,660 --> 00:03:47,430
‫So that's very little,

92
00:03:47,430 --> 00:03:49,800
‫but when we will style this button

93
00:03:49,800 --> 00:03:51,603
‫we will see that this is enough.

94
00:03:52,530 --> 00:03:54,690
‫So let's leave that button for the end.

95
00:03:54,690 --> 00:03:56,190
‫And now let's style

96
00:03:56,190 --> 00:03:58,590
‫each of these card items.

97
00:03:58,590 --> 00:04:00,270
‫And let's start by adding

98
00:04:00,270 --> 00:04:01,893
‫some space between them.

99
00:04:03,270 --> 00:04:05,190
‫So by giving each of them

100
00:04:05,190 --> 00:04:07,890
‫some padding like this.

101
00:04:07,890 --> 00:04:10,604
‫So here we can have a bit more padding

102
00:04:10,604 --> 00:04:11,437
‫than in the menu

103
00:04:11,437 --> 00:04:14,643
‫because we have usually not so many items in the cart.

104
00:04:15,540 --> 00:04:16,380
‫Now later on,

105
00:04:16,380 --> 00:04:18,480
‫we will also have some buttons here

106
00:04:18,480 --> 00:04:21,600
‫for deleting the item from the cart

107
00:04:21,600 --> 00:04:23,583
‫and to change the quantity.

108
00:04:24,540 --> 00:04:25,920
‫And actually let me add

109
00:04:25,920 --> 00:04:28,410
‫one of those buttons here temporarily

110
00:04:28,410 --> 00:04:29,343
‫right now.

111
00:04:30,420 --> 00:04:32,554
‫So let's use our button

112
00:04:32,554 --> 00:04:34,020
‫with the type

113
00:04:34,020 --> 00:04:36,160
‫of small

114
00:04:37,110 --> 00:04:38,860
‫and then let's say

115
00:04:40,800 --> 00:04:41,633
‫delete.

116
00:04:42,630 --> 00:04:45,720
‫And of course these should be side by side.

117
00:04:45,720 --> 00:04:46,630
‫So as always

118
00:04:47,748 --> 00:04:49,710
‫we use our friend Flexbox

119
00:04:49,710 --> 00:04:51,910
‫then justify between

120
00:04:54,770 --> 00:04:55,840
‫and items

121
00:04:57,420 --> 00:04:59,283
‫center as well.

122
00:05:00,810 --> 00:05:02,850
‫Now let's change this one here a little bit

123
00:05:02,850 --> 00:05:04,080
‫as well.

124
00:05:04,080 --> 00:05:07,800
‫So here we want the text to be a bit smaller.

125
00:05:07,800 --> 00:05:09,300
‫So text small

126
00:05:09,300 --> 00:05:11,110
‫and let's make it in bold

127
00:05:13,470 --> 00:05:15,000
‫just like this.

128
00:05:15,000 --> 00:05:15,833
‫And now here,

129
00:05:15,833 --> 00:05:19,140
‫just some space vertically.

130
00:05:19,140 --> 00:05:22,830
‫So let's say margin bottom one

131
00:05:22,830 --> 00:05:24,480
‫to give it a bit more breathing room

132
00:05:24,480 --> 00:05:26,130
‫because of this button.

133
00:05:26,130 --> 00:05:27,960
‫And so like this,

134
00:05:27,960 --> 00:05:29,280
‫it will look great

135
00:05:29,280 --> 00:05:31,113
‫at least on smaller screens.

136
00:05:32,092 --> 00:05:34,710
‫So on something like this

137
00:05:34,710 --> 00:05:36,843
‫this is going to look really great.

138
00:05:37,920 --> 00:05:39,993
‫So keep in mind that we will also have

139
00:05:39,993 --> 00:05:43,020
‫like some buttons here to change the quantity.

140
00:05:43,020 --> 00:05:45,600
‫And so if all of this was side by side

141
00:05:45,600 --> 00:05:48,510
‫then there wouldn't really be enough space.

142
00:05:48,510 --> 00:05:50,250
‫However, at a certain point

143
00:05:50,250 --> 00:05:51,750
‫there is so much space

144
00:05:51,750 --> 00:05:53,430
‫that it actually starts looking

145
00:05:53,430 --> 00:05:54,930
‫a little bit strange.

146
00:05:54,930 --> 00:05:56,160
‫So at some point

147
00:05:56,160 --> 00:05:57,540
‫we should probably have

148
00:05:57,540 --> 00:06:00,000
‫all of this side by side here.

149
00:06:00,000 --> 00:06:03,420
‫'Cause like this, the content looks a bit lost.

150
00:06:03,420 --> 00:06:05,760
‫So let's actually start doing that here

151
00:06:05,760 --> 00:06:07,863
‫at this small view port.

152
00:06:09,000 --> 00:06:10,470
‫So, we can

153
00:06:10,470 --> 00:06:12,330
‫of course use Flexbox

154
00:06:12,330 --> 00:06:14,760
‫also at different breakpoints.

155
00:06:14,760 --> 00:06:17,580
‫So just like this.

156
00:06:17,580 --> 00:06:18,783
‫And there we go.

157
00:06:20,760 --> 00:06:21,930
‫And now we just need to do

158
00:06:21,930 --> 00:06:23,670
‫our regular things

159
00:06:23,670 --> 00:06:24,503
‫which is

160
00:06:26,460 --> 00:06:27,750
‫items center

161
00:06:27,750 --> 00:06:30,390
‫and also

162
00:06:30,390 --> 00:06:32,520
‫justify between

163
00:06:32,520 --> 00:06:35,613
‫and all of these only at a small breakpoint.

164
00:06:36,600 --> 00:06:39,720
‫Now due to the nature of Flexbox

165
00:06:39,720 --> 00:06:41,670
‫now this content here

166
00:06:41,670 --> 00:06:44,400
‫doesn't stretch over one entire line.

167
00:06:44,400 --> 00:06:46,110
‫And so therefore this justify

168
00:06:46,110 --> 00:06:49,050
‫between here no longer takes effect.

169
00:06:49,050 --> 00:06:50,370
‫But that's not a problem

170
00:06:50,370 --> 00:06:52,320
‫because here at this point

171
00:06:52,320 --> 00:06:54,990
‫we actually don't even want that behavior.

172
00:06:54,990 --> 00:06:58,230
‫So here we only want some space between them.

173
00:06:58,230 --> 00:07:00,030
‫And so here at this breakpoint

174
00:07:00,030 --> 00:07:02,430
‫let's just add a gap,

175
00:07:02,430 --> 00:07:04,203
‫for example, of six.

176
00:07:05,040 --> 00:07:06,169
‫All right.

177
00:07:06,169 --> 00:07:07,920
‫And we will then adapt this a little bit

178
00:07:07,920 --> 00:07:09,390
‫as soon as

179
00:07:09,390 --> 00:07:11,370
‫we add these other buttons here

180
00:07:11,370 --> 00:07:13,740
‫to update the quantity.

181
00:07:13,740 --> 00:07:15,030
‫Now we also don't

182
00:07:15,030 --> 00:07:16,980
‫need this margin here anymore

183
00:07:16,980 --> 00:07:18,570
‫at this point.

184
00:07:18,570 --> 00:07:20,670
‫And so we can remove that also

185
00:07:20,670 --> 00:07:22,140
‫at this breakpoint

186
00:07:22,140 --> 00:07:25,860
‫by saying margin bottom zero.

187
00:07:25,860 --> 00:07:27,180
‫And so that's basically

188
00:07:27,180 --> 00:07:29,760
‫what these zeros here are for.

189
00:07:29,760 --> 00:07:31,091
‫So sometimes we need to set

190
00:07:31,091 --> 00:07:33,750
‫or reset something to zero

191
00:07:33,750 --> 00:07:36,210
‫and that's when these classes

192
00:07:36,210 --> 00:07:38,520
‫with the zero come into place.

193
00:07:38,520 --> 00:07:40,650
‫So you saw a small change here

194
00:07:40,650 --> 00:07:44,430
‫and now everything is nicely aligned again.

195
00:07:44,430 --> 00:07:45,300
‫So with this,

196
00:07:45,300 --> 00:07:48,570
‫I think we finished this cart item for now.

197
00:07:48,570 --> 00:07:50,340
‫And so let's turn our attention

198
00:07:50,340 --> 00:07:52,980
‫to this other button here.

199
00:07:52,980 --> 00:07:54,510
‫So here we want

200
00:07:54,510 --> 00:07:56,790
‫a really de-emphasized button

201
00:07:56,790 --> 00:07:58,890
‫which might even be transparent

202
00:07:58,890 --> 00:08:01,473
‫and just with a light gray border.

203
00:08:03,780 --> 00:08:06,030
‫So basically what we're gonna do

204
00:08:06,030 --> 00:08:09,663
‫is to create yet another variation in our button.

205
00:08:13,350 --> 00:08:14,830
‫So let's make just a type

206
00:08:15,960 --> 00:08:20,613
‫of secondary and then clear cart.

207
00:08:22,648 --> 00:08:24,300
‫All right.

208
00:08:24,300 --> 00:08:26,443
‫Now, of course that type doesn't exist yet

209
00:08:26,443 --> 00:08:28,383
‫so let's create it.

210
00:08:31,331 --> 00:08:32,880
‫So right here

211
00:08:32,880 --> 00:08:34,740
‫and this button is actually gonna be

212
00:08:34,740 --> 00:08:36,540
‫really, really different.

213
00:08:36,540 --> 00:08:40,230
‫And so here I will not even update the base styles.

214
00:08:40,230 --> 00:08:41,593
‫I will just copy all of this

215
00:08:41,593 --> 00:08:42,708
‫and then change

216
00:08:42,708 --> 00:08:44,934
‫what we want to change.

217
00:08:44,934 --> 00:08:47,088
‫For example, the background

218
00:08:47,088 --> 00:08:49,173
‫should actually be transparent.

219
00:08:51,066 --> 00:08:53,460
‫So really no background.

220
00:08:53,460 --> 00:08:54,960
‫And this one is actually

221
00:08:54,960 --> 00:08:55,926
‫not even necessary

222
00:08:55,926 --> 00:09:00,480
‫because by default the button is already transparent.

223
00:09:00,480 --> 00:09:02,740
‫But we want to have some border as well

224
00:09:04,095 --> 00:09:07,149
‫with the width of two.

225
00:09:07,149 --> 00:09:08,740
‫And let's give it a color

226
00:09:09,630 --> 00:09:12,303
‫of stone 300.

227
00:09:14,250 --> 00:09:15,480
‫And if we save this

228
00:09:15,480 --> 00:09:17,197
‫then you see that actually

229
00:09:17,197 --> 00:09:19,413
‫it is already taking effect.

230
00:09:21,630 --> 00:09:23,190
‫All right.

231
00:09:23,190 --> 00:09:27,900
‫Now, let's just also copy these paddings

232
00:09:27,900 --> 00:09:29,450
‫because they should be similar.

233
00:09:30,352 --> 00:09:32,220
‫Place them right here.

234
00:09:32,220 --> 00:09:34,740
‫We just need to decrease them a little bit.

235
00:09:34,740 --> 00:09:37,200
‫So let's basically do some hack here

236
00:09:37,200 --> 00:09:39,460
‫where we just slightly decrease the padding

237
00:09:41,299 --> 00:09:42,899
‫to take into account the border.

238
00:09:43,920 --> 00:09:45,780
‫So that looks a bit more natural.

239
00:09:45,780 --> 00:09:47,553
‫And then here at the media Query,

240
00:09:49,508 --> 00:09:50,553
‫let's set it to 3.5.

241
00:09:51,870 --> 00:09:52,703
‫Then here,

242
00:09:52,703 --> 00:09:56,040
‫let's just decrease the color there.

243
00:09:56,040 --> 00:09:57,540
‫And then finally,

244
00:09:57,540 --> 00:09:59,830
‫all the other hover styles

245
00:10:01,032 --> 00:10:03,093
‫and also the focus style.

246
00:10:04,950 --> 00:10:08,013
‫So this one, we also want to be very different.

247
00:10:09,030 --> 00:10:10,890
‫So here let's have

248
00:10:10,890 --> 00:10:14,258
‫stone 800, let's say.

249
00:10:14,258 --> 00:10:16,020
‫And for the focus

250
00:10:16,020 --> 00:10:17,220
‫the same.

251
00:10:17,220 --> 00:10:19,426
‫So background stone.

252
00:10:19,426 --> 00:10:20,683
‫And actually I think

253
00:10:20,683 --> 00:10:23,163
‫800 is gonna be way too much.

254
00:10:24,447 --> 00:10:27,000
‫So that's more like black.

255
00:10:27,000 --> 00:10:28,300
‫So what we actually want

256
00:10:29,885 --> 00:10:30,723
‫is 300 here,

257
00:10:31,920 --> 00:10:33,150
‫just like this.

258
00:10:33,150 --> 00:10:34,110
‫But let's then of course

259
00:10:34,110 --> 00:10:37,713
‫make the text also a little bit darker.

260
00:10:39,330 --> 00:10:40,210
‫So hover

261
00:10:41,757 --> 00:10:43,650
‫text-stone,

262
00:10:43,650 --> 00:10:45,030
‫anterior, let's use

263
00:10:45,030 --> 00:10:46,560
‫that 800.

264
00:10:46,560 --> 00:10:47,550
‫And then finally

265
00:10:47,550 --> 00:10:49,690
‫let's change the focus ring as well

266
00:10:52,110 --> 00:10:54,123
‫to stone 200.

267
00:10:55,650 --> 00:10:56,483
‫All right,

268
00:10:58,020 --> 00:10:59,943
‫let's change the focus as well.

269
00:11:02,400 --> 00:11:04,260
‫And so what we have to do here

270
00:11:04,260 --> 00:11:06,160
‫to finish is

271
00:11:08,850 --> 00:11:11,853
‫also having this one for the focus.

272
00:11:14,310 --> 00:11:15,570
‫Place that right here

273
00:11:15,570 --> 00:11:16,740
‫because here, of course

274
00:11:16,740 --> 00:11:17,940
‫the prettier plugin

275
00:11:17,940 --> 00:11:20,370
‫is no longer sorting these classes.

276
00:11:20,370 --> 00:11:21,899
‫So that only works when

277
00:11:21,899 --> 00:11:23,641
‫we have the classes right here

278
00:11:23,641 --> 00:11:25,350
‫in the class name,

279
00:11:25,350 --> 00:11:26,193
‫but not here.

280
00:11:30,030 --> 00:11:31,410
‫Okay.

281
00:11:31,410 --> 00:11:33,003
‫So that looks great.

282
00:11:33,900 --> 00:11:35,970
‫And I believe that with this

283
00:11:35,970 --> 00:11:38,040
‫we finished yet another page.

284
00:11:38,040 --> 00:11:39,120
‫And so let's move on

285
00:11:39,120 --> 00:11:40,800
‫straight to the next one

286
00:11:40,800 --> 00:11:43,713
‫which is going to be our order form.