1
00:00:00,524 --> 00:00:04,028
‫So let's now include a few, or actually,

2
00:00:04,028 --> 00:00:08,164
‫a lot of global styles into our application,

3
00:00:08,164 --> 00:00:11,583
‫using the styled-components way.

4
00:00:12,874 --> 00:00:15,262
‫So here, in our styles folder,

5
00:00:15,262 --> 00:00:19,362
‫we already have our index.css.

6
00:00:19,362 --> 00:00:23,428
‫However, we are not going to directly use this CSS file.

7
00:00:23,428 --> 00:00:26,498
‫But instead, when we use styled-components,

8
00:00:26,498 --> 00:00:30,681
‫we basically create a brand new styled-component,

9
00:00:30,681 --> 00:00:35,609
‫which will then become our global styled-component.

10
00:00:35,609 --> 00:00:37,623
‫So let's just do that.

11
00:00:38,457 --> 00:00:43,457
‫And let's call it GlobalStyles.js.

12
00:00:43,502 --> 00:00:48,333
‫And then here, we use the createGlobalStyle function.

13
00:00:50,497 --> 00:00:52,729
‫So instead of using the styled-function,

14
00:00:52,729 --> 00:00:54,698
‫like we did in our last lecture,

15
00:00:54,698 --> 00:00:57,475
‫we now use this createGlobalStyle.

16
00:00:57,475 --> 00:00:59,549
‫And then, just like before,

17
00:00:59,549 --> 00:01:03,454
‫we basically call this function using this template literal.

18
00:01:03,454 --> 00:01:07,626
‫And then we can take all of our styles here,

19
00:01:07,626 --> 00:01:09,979
‫and paste them in there.

20
00:01:09,979 --> 00:01:12,425
‫So let's just grab all of the CSS here,

21
00:01:12,425 --> 00:01:15,093
‫which I want to be global.

22
00:01:16,008 --> 00:01:21,008
‫So copy all that. And paste that right in here.

23
00:01:23,408 --> 00:01:24,449
‫All right.

24
00:01:24,449 --> 00:01:29,449
‫And then let's also save this here as GlobalStyles

25
00:01:34,623 --> 00:01:39,623
‫Like this. And then in the end, let's export default that.

26
00:01:44,990 --> 00:01:48,201
‫All right. And so, now let's just quickly walk through

27
00:01:48,201 --> 00:01:50,943
‫what we actually have here.

28
00:01:50,943 --> 00:01:55,943
‫So here, we have a lot of CSS variables defined in the root.

29
00:01:56,131 --> 00:01:58,616
‫So we have all these colors here,

30
00:01:58,616 --> 00:02:03,200
‫which are actually inspired by Tailwind.

31
00:02:03,200 --> 00:02:05,686
‫So, basically, the designer on our team

32
00:02:05,686 --> 00:02:09,306
‫already created all of these design tokens.

33
00:02:09,306 --> 00:02:11,165
‫So we have all our colors.

34
00:02:11,165 --> 00:02:13,292
‫So for the brand, we have,

35
00:02:13,292 --> 00:02:16,129
‫like, this indigo, like this blue color.

36
00:02:16,129 --> 00:02:18,465
‫And we have these grays.

37
00:02:18,465 --> 00:02:21,455
‫We have some other colors that we might need

38
00:02:21,455 --> 00:02:24,189
‫for different pieces of the UI.

39
00:02:24,189 --> 00:02:27,455
‫Then we have a couple of shadows already.

40
00:02:27,455 --> 00:02:29,982
‫We have some border radius.

41
00:02:29,982 --> 00:02:34,078
‫And then here's some stuff later for dark mode.

42
00:02:34,078 --> 00:02:39,078
‫And then, here we have just our typical CSS reset.

43
00:02:39,246 --> 00:02:42,277
‫So all of this here is pretty normal.

44
00:02:42,277 --> 00:02:47,277
‫And yeah. So let's now include this in our application.

45
00:02:49,332 --> 00:02:51,464
‫So we created these global styles,

46
00:02:51,464 --> 00:02:54,607
‫but now, in order to actually apply them,

47
00:02:54,607 --> 00:02:58,437
‫let's come back to our app component here,

48
00:02:58,437 --> 00:03:00,731
‫and then include them right here.

49
00:03:00,731 --> 00:03:03,106
‫And the way that this works is

50
00:03:03,106 --> 00:03:05,191
‫that the GlobalStyles component

51
00:03:05,191 --> 00:03:07,689
‫that we just exported needs to be added

52
00:03:07,689 --> 00:03:09,774
‫to the component tree,

53
00:03:09,774 --> 00:03:12,431
‫but it cannot accept any children.

54
00:03:12,431 --> 00:03:14,964
‫So, basically, we want this to be

55
00:03:14,964 --> 00:03:19,110
‫a sibling of this styled app.

56
00:03:19,110 --> 00:03:22,943
‫So, basically, like this.

57
00:03:22,943 --> 00:03:27,943
‫And so then, here we need to return this fragment.

58
00:03:31,429 --> 00:03:36,314
‫And immediately, you see that it took effect.

59
00:03:36,314 --> 00:03:39,536
‫So now all the margins and paddings are gone.

60
00:03:39,536 --> 00:03:42,476
‫And we also have this sans serif font.

61
00:03:42,476 --> 00:03:47,124
‫And so, all of that is coming here, from the GlobalStyles.

62
00:03:47,124 --> 00:03:49,975
‫So again, this one, this component,

63
00:03:49,975 --> 00:03:51,710
‫doesn't accept any children.

64
00:03:51,710 --> 00:03:53,990
‫So it's a self-closing component,

65
00:03:53,990 --> 00:03:56,220
‫and it needs to be, then, a sibling

66
00:03:56,220 --> 00:03:59,043
‫of all the other components.

67
00:04:00,179 --> 00:04:03,472
‫Now, back here in this index.css,

68
00:04:03,472 --> 00:04:05,440
‫we actually have some codes

69
00:04:05,440 --> 00:04:08,458
‫that we should include in our HTML.

70
00:04:08,458 --> 00:04:11,139
‫So all of this here is for adding

71
00:04:11,139 --> 00:04:14,632
‫two different fonts to our webpage.

72
00:04:14,632 --> 00:04:17,732
‫So to our HTML document.

73
00:04:17,732 --> 00:04:19,390
‫So let's grab that.

74
00:04:19,390 --> 00:04:23,373
‫And then here, inside index.html,

75
00:04:24,240 --> 00:04:26,673
‫let's place that here.

76
00:04:27,574 --> 00:04:29,716
‫And so then, you saw that, also,

77
00:04:29,716 --> 00:04:31,651
‫right away, the font changed

78
00:04:31,651 --> 00:04:35,102
‫to this Poppins font right here.

79
00:04:35,102 --> 00:04:37,706
‫And since we are here, let's also, right away,

80
00:04:37,706 --> 00:04:42,706
‫change this to The Wild Oasis.

81
00:04:44,922 --> 00:04:46,994
‫Now, okay. And then with this,

82
00:04:46,994 --> 00:04:50,217
‫we actually no longer need this file.

83
00:04:50,217 --> 00:04:53,234
‫So you can go ahead and delete it if you want.

84
00:04:53,234 --> 00:04:56,981
‫Or, of course, you can also just keep it.

85
00:04:56,981 --> 00:04:59,917
‫Now, next up, I want to turn our attention

86
00:04:59,917 --> 00:05:03,963
‫to all of these CSS variables that we have right here.

87
00:05:03,963 --> 00:05:07,265
‫So basically, the idea of these is to have

88
00:05:07,265 --> 00:05:10,950
‫all the different design tokens in one central place,

89
00:05:10,950 --> 00:05:13,214
‫so that we can then use them in all,

90
00:05:13,214 --> 00:05:17,230
‫or different, styled-components that we're gonna build.

91
00:05:17,230 --> 00:05:20,405
‫So let's quickly demonstrate that.

92
00:05:20,405 --> 00:05:23,278
‫For example, here in our Button.

93
00:05:23,278 --> 00:05:28,278
‫So let's change all of these design tokens, basically,

94
00:05:28,282 --> 00:05:31,994
‫to their actual CSS variables.

95
00:05:31,994 --> 00:05:34,090
‫So here, for example, let's say we wanted

96
00:05:34,090 --> 00:05:39,090
‫to use the color-brand-500.

97
00:05:41,428 --> 00:05:42,990
‫And so, then we would get

98
00:05:42,990 --> 00:05:46,243
‫that color right from our GlobalStyles,

99
00:05:46,243 --> 00:05:51,243
‫which, of course, that includes exactly that CSS variable.

100
00:05:53,087 --> 00:05:54,919
‫And let's keep going.

101
00:05:54,919 --> 00:05:58,739
‫And actually, let's make it a bit darker.

102
00:05:58,739 --> 00:06:01,413
‫And the same thing here for the color.

103
00:06:04,182 --> 00:06:07,988
‫So color-brand-50.

104
00:06:07,988 --> 00:06:09,918
‫And there are also some other things

105
00:06:09,918 --> 00:06:14,839
‫that we can use our CSS variables now for.

106
00:06:14,839 --> 00:06:19,839
‫So border-radius small, for example.

107
00:06:21,814 --> 00:06:26,814
‫And then here, we have a small bug. And beautiful.

108
00:06:27,458 --> 00:06:31,263
‫Let's also add a box-shadow, maybe.

109
00:06:32,433 --> 00:06:35,975
‫And so again, all of these is what we call design tokens.

110
00:06:35,975 --> 00:06:37,844
‫So they might change, for example,

111
00:06:37,844 --> 00:06:40,941
‫when we change to a dark mode.

112
00:06:40,941 --> 00:06:45,751
‫So then it's really nice to have all these CSS variables.

113
00:06:45,751 --> 00:06:50,190
‫So let's use shadow small here.

114
00:06:50,190 --> 00:06:52,518
‫And so, even though it's not really visible right away,

115
00:06:52,518 --> 00:06:55,581
‫it will be when this background is gone.

116
00:06:55,581 --> 00:06:59,041
‫Now, instead of using all of these CSS variables

117
00:06:59,041 --> 00:07:00,870
‫that we have right here,

118
00:07:00,870 --> 00:07:04,463
‫the styled-components library actually also gives us

119
00:07:04,463 --> 00:07:07,983
‫its own way of providing variables like these

120
00:07:07,983 --> 00:07:10,454
‫to our entire application,

121
00:07:10,454 --> 00:07:14,465
‫by using a mechanism that it calls themes.

122
00:07:14,465 --> 00:07:17,695
‫So basically, with styled-components, themes,

123
00:07:17,695 --> 00:07:21,087
‫we can also inject design tokens like these

124
00:07:21,087 --> 00:07:23,623
‫into our application.

125
00:07:23,623 --> 00:07:26,249
‫However, this mechanism was designed

126
00:07:26,249 --> 00:07:29,434
‫before CSS variables were really popular,

127
00:07:29,434 --> 00:07:33,116
‫and really usable, in modern CSS.

128
00:07:33,116 --> 00:07:35,723
‫And so I think that it's actually a lot better

129
00:07:35,723 --> 00:07:38,194
‫to just stick to native CSS,

130
00:07:38,194 --> 00:07:42,001
‫instead of relying to this JavaScript way,

131
00:07:42,001 --> 00:07:44,658
‫which the themes are off injecting

132
00:07:44,658 --> 00:07:47,638
‫these variables into our code.

133
00:07:47,638 --> 00:07:50,801
‫But of course, if you want to learn more about themes,

134
00:07:50,801 --> 00:07:52,981
‫you can as always go to

135
00:07:52,981 --> 00:07:57,981
‫the styled-component documentation.

136
00:07:58,183 --> 00:07:59,785
‫So right here, you have all

137
00:07:59,785 --> 00:08:02,204
‫you need to know about this library.

138
00:08:02,204 --> 00:08:06,036
‫And here, you can look up everything about themes.

139
00:08:06,036 --> 00:08:08,939
‫So that's not in the basics, apparently,

140
00:08:08,939 --> 00:08:11,038
‫but it's right here.

141
00:08:11,038 --> 00:08:14,460
‫So basically, you will have to create a theme provider,

142
00:08:14,460 --> 00:08:15,967
‫as it says here.

143
00:08:15,967 --> 00:08:18,983
‫And so, then you provide that entire theme

144
00:08:18,983 --> 00:08:20,657
‫to the application.

145
00:08:20,657 --> 00:08:23,627
‫And then, inside of each styled-components,

146
00:08:23,627 --> 00:08:27,083
‫you can get access to these values, like this.

147
00:08:27,083 --> 00:08:28,490
‫So at props.theme.

148
00:08:28,490 --> 00:08:33,031
‫And then whatever name you gave it inside the theme.

149
00:08:33,031 --> 00:08:36,315
‫So I think this is definitely a lot more work

150
00:08:36,315 --> 00:08:38,922
‫than just using CSS variables.

151
00:08:38,922 --> 00:08:41,125
‫Which, again, are now basically

152
00:08:41,125 --> 00:08:45,555
‫the modern way of doing the same thing.

153
00:08:45,555 --> 00:08:50,487
‫All right. But anyway, let's now finish,

154
00:08:50,487 --> 00:08:52,730
‫also this input component.

155
00:08:52,730 --> 00:08:55,348
‫So replacing this here, basically with

156
00:08:55,348 --> 00:09:00,348
‫our CSS variable of color-grey-300.

157
00:09:02,029 --> 00:09:06,211
‫And let's also give us, or give it,

158
00:09:06,211 --> 00:09:11,211
‫a background color of color-grey-0,

159
00:09:13,436 --> 00:09:17,071
‫which is basically just white.

160
00:09:17,071 --> 00:09:19,743
‫And then here, also, we have this border radius.

161
00:09:19,743 --> 00:09:24,743
‫Which, again, is like a design token that we can use.

162
00:09:26,536 --> 00:09:31,413
‫So border-radius, and then small.

163
00:09:31,413 --> 00:09:34,413
‫I think it's what it is called.

164
00:09:35,904 --> 00:09:40,904
‫So yeah. We have small, medium, large, and even tiny.

165
00:09:41,046 --> 00:09:45,843
‫And let's grab this box-shadow as well.

166
00:09:47,493 --> 00:09:52,216
‫And now let's get rid of this margin right here,

167
00:09:52,216 --> 00:09:55,172
‫because we now want to actually export

168
00:09:55,172 --> 00:09:58,501
‫these components into their own files.

169
00:09:58,501 --> 00:10:00,600
‫So we really want to reuse

170
00:10:00,600 --> 00:10:03,424
‫these components that we just wrote here

171
00:10:03,424 --> 00:10:05,460
‫throughout the entire application.

172
00:10:05,460 --> 00:10:06,708
‫And so then, of course,

173
00:10:06,708 --> 00:10:09,517
‫they should not be right here in this file,

174
00:10:09,517 --> 00:10:14,169
‫but probably here in this ui folder.

175
00:10:14,169 --> 00:10:17,827
‫So, or actually, let's do it in another way.

176
00:10:17,827 --> 00:10:20,090
‫We can select all this code,

177
00:10:20,090 --> 00:10:23,185
‫and then right click and Refactor.

178
00:10:23,185 --> 00:10:26,201
‫And then we can just select Move to a new file.

179
00:10:26,201 --> 00:10:28,574
‫And then it disappeared.

180
00:10:28,574 --> 00:10:31,953
‫Well, where is it actually?

181
00:10:34,637 --> 00:10:39,215
‫Okay. So it just created this file up here.

182
00:10:39,215 --> 00:10:42,225
‫So let's place that into our ui folder.

183
00:10:42,225 --> 00:10:46,717
‫But here, we already do have this Button.jsx.

184
00:10:46,717 --> 00:10:49,335
‫And so this is because, later on,

185
00:10:49,335 --> 00:10:53,016
‫we will use all of this code right here.

186
00:10:53,016 --> 00:10:55,955
‫So what we're gonna do now is to

187
00:10:55,955 --> 00:10:59,952
‫just grab this button right here.

188
00:10:59,952 --> 00:11:02,073
‫Or actually, just this.

189
00:11:02,073 --> 00:11:05,361
‫Copy it. Paste it here.

190
00:11:05,361 --> 00:11:09,045
‫And let's actually export default this.

191
00:11:09,045 --> 00:11:13,787
‫export default Button.

192
00:11:16,000 --> 00:11:17,612
‫And we will then come back later

193
00:11:17,612 --> 00:11:20,403
‫to what all of this here is.

194
00:11:21,996 --> 00:11:23,665
‫So let's close that.

195
00:11:23,665 --> 00:11:26,433
‫And then this file, we actually don't need.

196
00:11:28,280 --> 00:11:30,891
‫Let's delete that.

197
00:11:30,891 --> 00:11:32,218
‫And so now, of course,

198
00:11:32,218 --> 00:11:34,507
‫here we don't have that button anymore.

199
00:11:34,507 --> 00:11:36,006
‫And that's just because here,

200
00:11:36,006 --> 00:11:39,677
‫it is now actually a default export.

201
00:11:39,677 --> 00:11:44,677
‫And actually, it is inside the ui folder now.

202
00:11:45,632 --> 00:11:49,461
‫All right. So apparently, it's easier to just grab it,

203
00:11:49,461 --> 00:11:53,005
‫and create the files manually.

204
00:11:53,005 --> 00:11:57,517
‫So let's do Input.jsx.

205
00:11:59,703 --> 00:12:01,263
‫Paste that here.

206
00:12:03,920 --> 00:12:06,705
‫export default Input.

207
00:12:06,705 --> 00:12:09,136
‫And then we also need to import

208
00:12:09,136 --> 00:12:12,715
‫this styled-function right here.

209
00:12:12,715 --> 00:12:16,653
‫And then, also import the input here.

210
00:12:17,511 --> 00:12:20,193
‫So let's do it manually.

211
00:12:24,235 --> 00:12:26,473
‫And there we go.

212
00:12:26,473 --> 00:12:29,348
‫Now this H1, we don't need it anywhere else.

213
00:12:29,348 --> 00:12:31,701
‫And the same for this one.

214
00:12:31,701 --> 00:12:34,698
‫So this one really belongs to this app component.

215
00:12:34,698 --> 00:12:37,487
‫And so let's just leave it right here.

216
00:12:37,487 --> 00:12:40,431
‫Even though some developers also like to export

217
00:12:40,431 --> 00:12:43,241
‫the styles associated to any component

218
00:12:43,241 --> 00:12:45,626
‫to its own file as well.

219
00:12:45,626 --> 00:12:48,986
‫But I very much prefer to leave the code

220
00:12:48,986 --> 00:12:52,143
‫as co-located as possible.

221
00:12:53,331 --> 00:12:56,604
‫All right, let's close this one here, actually.

222
00:12:56,604 --> 00:12:58,950
‫And now there's just one final small thing

223
00:12:58,950 --> 00:13:00,214
‫that I want to do,

224
00:13:00,214 --> 00:13:04,415
‫which is the hover state of this button.

225
00:13:04,415 --> 00:13:07,459
‫So that's something that we haven't talked about yet.

226
00:13:07,459 --> 00:13:09,981
‫And so let's go back to our Button,

227
00:13:09,981 --> 00:13:12,452
‫and implement that hover state.

228
00:13:12,452 --> 00:13:15,458
‫And the way we can do that is very easily,

229
00:13:15,458 --> 00:13:20,206
‫and actually very similar to SCSS, or to Sass.

230
00:13:20,206 --> 00:13:22,662
‫So we can just do this, which will

231
00:13:22,662 --> 00:13:25,498
‫basically select the Button element itself.

232
00:13:25,498 --> 00:13:28,435
‫And then on there, we can, as usually,

233
00:13:28,435 --> 00:13:30,934
‫use the hover pseudo-class.

234
00:13:30,934 --> 00:13:33,410
‫So then we can say background color

235
00:13:33,410 --> 00:13:38,410
‫should then become a darker variation of this.

236
00:13:40,719 --> 00:13:43,952
‫Like 700. And so, let's see.

237
00:13:43,952 --> 00:13:46,904
‫And indeed, that is working.

238
00:13:46,904 --> 00:13:50,210
‫And we even get the transition here for free,

239
00:13:50,210 --> 00:13:55,210
‫because that is already right here.

240
00:13:55,594 --> 00:13:59,268
‫So all the elements have this transition property,

241
00:13:59,268 --> 00:14:02,811
‫which replaced here because of dark mode.

242
00:14:02,811 --> 00:14:04,738
‫But it's also useful, because then

243
00:14:04,738 --> 00:14:09,729
‫we don't have to place it manually in all the components.

244
00:14:09,729 --> 00:14:11,236
‫So this one, again here,

245
00:14:11,236 --> 00:14:15,469
‫basically simply selects the currently selected element.

246
00:14:15,469 --> 00:14:18,247
‫So right here, that is this button.

247
00:14:18,247 --> 00:14:22,229
‫And so then here, this is the same thing as writing,

248
00:14:22,229 --> 00:14:24,381
‫like, button, and then hover.

249
00:14:24,381 --> 00:14:27,440
‫But instead, it is for this exact element.

250
00:14:27,440 --> 00:14:30,564
‫And we will use this here a lot more times

251
00:14:30,564 --> 00:14:33,273
‫throughout the following sections.