1 00:00:00,900 --> 00:00:03,090 -: I think that the last big thing that we have to do 2 00:00:03,090 --> 00:00:06,060 is make sure that our header has a little bit better styling 3 00:00:06,060 --> 00:00:07,440 than it does right now. 4 00:00:07,440 --> 00:00:08,610 So in this section, we're gonna add 5 00:00:08,610 --> 00:00:11,340 in just a tiny bit of CSS. 6 00:00:11,340 --> 00:00:14,580 To get started, I'll flip back over to my header component. 7 00:00:14,580 --> 00:00:17,460 There's many different ways of hooking up CSS inside 8 00:00:17,460 --> 00:00:20,280 of a Create React app application, but we'll take care 9 00:00:20,280 --> 00:00:22,830 of a little bit more conventional style where 10 00:00:22,830 --> 00:00:25,230 we will create a separate CSS file tied 11 00:00:25,230 --> 00:00:27,090 to this component and then place all 12 00:00:27,090 --> 00:00:29,583 of our CSS relevant to this component in there. 13 00:00:30,450 --> 00:00:32,520 To get started, in my components directory, 14 00:00:32,520 --> 00:00:37,383 I'm gonna make a new file called HeaderStyle.css. 15 00:00:38,640 --> 00:00:40,620 We're going to eventually write all of our styling 16 00:00:40,620 --> 00:00:43,560 for just that component into this file. 17 00:00:43,560 --> 00:00:47,190 But first, we'll hook it up to the header.js file. 18 00:00:47,190 --> 00:00:50,070 At the top, I can connect that CSS file 19 00:00:50,070 --> 00:00:52,890 to this component by importing it. 20 00:00:52,890 --> 00:00:54,930 When we import a CSS file, we're not 21 00:00:54,930 --> 00:00:57,570 pulling in any variables or anything like that. 22 00:00:57,570 --> 00:01:01,830 So we write out just import and then the path to the file. 23 00:01:01,830 --> 00:01:04,443 So HeaderStyle.css. 24 00:01:07,320 --> 00:01:09,480 Okay, so that's gonna hook up the CSS file 25 00:01:09,480 --> 00:01:11,880 to our header component in order to make sure 26 00:01:11,880 --> 00:01:13,920 that the CSS we put inside there 27 00:01:13,920 --> 00:01:15,780 only affects this component, 28 00:01:15,780 --> 00:01:18,150 I'm gonna go down to my render method. 29 00:01:18,150 --> 00:01:20,100 And on this route div right here, 30 00:01:20,100 --> 00:01:23,313 I'll add a class name of header like so. 31 00:01:24,180 --> 00:01:25,890 So that's gonna allow me to do just a little bit 32 00:01:25,890 --> 00:01:28,110 of CSS scoping and make sure 33 00:01:28,110 --> 00:01:30,330 that the rules that we add will only affect 34 00:01:30,330 --> 00:01:31,893 the markup inside of here. 35 00:01:33,540 --> 00:01:36,420 Then inside of my HeaderStyle.css file, 36 00:01:36,420 --> 00:01:39,330 I'll first target that header div, 37 00:01:39,330 --> 00:01:42,123 or the div with the class name of header, 38 00:01:43,110 --> 00:01:46,410 and I'll give it a rule of display: flex. 39 00:01:46,410 --> 00:01:49,530 That's just gonna make sure that the link right here 40 00:01:49,530 --> 00:01:52,430 and the link right underneath it show up on the same line. 41 00:01:54,360 --> 00:01:57,390 And then after that, I'll do header, 42 00:01:57,390 --> 00:01:59,970 I'll find all the anchor tags inside there, 43 00:01:59,970 --> 00:02:03,030 and I'm gonna give them some consistent margin. 44 00:02:03,030 --> 00:02:05,130 So I'll say 0px and, or excuse me, 45 00:02:05,130 --> 00:02:07,293 just 0 by itself, 10px. 46 00:02:08,400 --> 00:02:10,440 So this means that for every anchor tag 47 00:02:10,440 --> 00:02:13,440 we'll have zero pixels of space above and below, 48 00:02:13,440 --> 00:02:15,603 but 10 pixels to the left and the right. 49 00:02:17,160 --> 00:02:19,050 If I now save this file, 50 00:02:19,050 --> 00:02:21,240 we should see everything kind of flip 51 00:02:21,240 --> 00:02:24,453 to the same line and kind of space out; very good. 52 00:02:25,620 --> 00:02:28,380 Now if you want to, we could kind of make the stuff 53 00:02:28,380 --> 00:02:30,420 over here on the right hand side, move over 54 00:02:30,420 --> 00:02:33,600 to the far right hand by finding the header 55 00:02:33,600 --> 00:02:38,600 and doing something like justify-content: space-between. 56 00:02:39,000 --> 00:02:42,180 So that's going to attempt to maximize the space 57 00:02:42,180 --> 00:02:45,150 between this link right here and the div 58 00:02:45,150 --> 00:02:47,403 that comes back from the renderLinks call. 59 00:02:48,780 --> 00:02:52,740 So if we save this, we should see everything kind 60 00:02:52,740 --> 00:02:54,870 of flip over to the right hand side. 61 00:02:54,870 --> 00:02:56,610 Ah, there we go. 62 00:02:56,610 --> 00:02:57,780 Okay, I think that's it. 63 00:02:57,780 --> 00:02:59,280 I think that's enough styling. 64 00:02:59,280 --> 00:03:01,650 Again, the point of this application was really not styling, 65 00:03:01,650 --> 00:03:04,950 it was really just focusing on authentication. 66 00:03:04,950 --> 00:03:06,450 So let's pause right here, we're gonna come back 67 00:03:06,450 --> 00:03:08,600 to the next section and do a quick wrap up.