1 00:00:00,850 --> 00:00:07,170 In the last section we had a discussion on flex box in particular the two properties justified content 2 00:00:07,200 --> 00:00:08,850 and the line items. 3 00:00:08,850 --> 00:00:14,700 These two properties can be applied to container styling and all because any elements within the container 4 00:00:15,030 --> 00:00:16,940 to be positioned in a certain fashion. 5 00:00:17,160 --> 00:00:18,870 So again we're going to be. 6 00:00:19,200 --> 00:00:24,780 We're going to be applying the justify content and the on line items properties to the view tag that's 7 00:00:24,780 --> 00:00:29,010 going to cause our text tagged to move around on the screen. 8 00:00:29,010 --> 00:00:35,460 So let's fix up our view style here we're going to add on a couple of more properties first because 9 00:00:35,460 --> 00:00:38,280 we want to center the text tag on the screen. 10 00:00:38,430 --> 00:00:47,310 We only use justified content of center to move it halfway down the view tag and then align items center 11 00:00:47,400 --> 00:00:50,300 to move it halfway across the tag. 12 00:00:50,700 --> 00:01:00,030 I'm also going to apply a set height of 60 and a padding top to it at the same time. 13 00:01:00,320 --> 00:01:03,010 I made sure I got all my commas in there as well. 14 00:01:03,540 --> 00:01:06,020 So height behaves just as you would expect. 15 00:01:06,030 --> 00:01:11,730 We can pass it a pixel value and we will get 60 pixels on the screen and padding top behaves just the 16 00:01:11,730 --> 00:01:15,250 same way as it does on. 17 00:01:15,540 --> 00:01:19,150 Excuse me CSSA as well a lot of padding to the top of the element. 18 00:01:19,320 --> 00:01:20,870 So I'm going to save this. 19 00:01:21,540 --> 00:01:24,290 And let's check out how the header looks now. 20 00:01:24,360 --> 00:01:24,910 All right. 21 00:01:25,050 --> 00:01:27,040 Definitely big improvement. 22 00:01:27,040 --> 00:01:29,000 It's not inside the network tag anymore. 23 00:01:29,010 --> 00:01:34,960 We've got it nicely centered beneath the networking bar so it doesn't look half bad. 24 00:01:34,980 --> 00:01:39,150 Now the next thing I want to do with this header component is make sure we kind of get a bottom border 25 00:01:39,150 --> 00:01:40,270 here as well. 26 00:01:40,290 --> 00:01:45,420 Again the video doesn't quite convey it I'm sure but there's come to settle off white or kind of gray 27 00:01:45,420 --> 00:01:51,540 looking color to the header and by adding on a bottom border of sorts it kind of just add to distinguish 28 00:01:51,540 --> 00:01:55,390 between the header and any other content that we have on the screen. 29 00:01:56,370 --> 00:02:02,820 So let's walk through adding on a couple of more properties to this view style tag rather than giving 30 00:02:02,820 --> 00:02:07,770 just a solid border color like you know just a border or a straight line. 31 00:02:07,770 --> 00:02:09,690 We'll use a shadow property. 32 00:02:09,690 --> 00:02:14,190 So a shadow property is going to make it appear that there's kind of shadowing at the bottom of the 33 00:02:14,190 --> 00:02:17,110 header to add on a shadow. 34 00:02:17,250 --> 00:02:19,400 We use a couple of different properties. 35 00:02:19,410 --> 00:02:22,200 First we'll specify a shadow color. 36 00:02:22,350 --> 00:02:25,200 This will say hey I want there to be a shadow on this element. 37 00:02:25,200 --> 00:02:30,000 Please use this color and I will say just use black. 38 00:02:30,000 --> 00:02:35,640 Next we'll define a shadow offset or shadow offset is what actually tells the element. 39 00:02:35,650 --> 00:02:41,110 Hey here is exactly the dimensions of the shadow or how tall or how wide it should be. 40 00:02:41,520 --> 00:02:43,310 We want a width of zero. 41 00:02:43,350 --> 00:02:46,420 So there will be no shadowing on the left or the right hand side. 42 00:02:46,830 --> 00:02:48,630 But there will be a height to it. 43 00:02:48,630 --> 00:02:51,840 So you know vertical of two pixels. 44 00:02:51,930 --> 00:02:59,460 And finally we'll give it a shadow shadow opacity of 0.2 shadow pass you right here is kind of the darkness 45 00:02:59,460 --> 00:03:01,950 of the shadow or how heavy it is. 46 00:03:01,950 --> 00:03:04,040 So let's now check this out inside of the browser. 47 00:03:04,110 --> 00:03:05,510 Excuse me simulator. 48 00:03:05,760 --> 00:03:07,870 And now OK this is looking pretty good. 49 00:03:07,890 --> 00:03:10,150 We've got a nice shadow on here as well. 50 00:03:10,650 --> 00:03:12,960 You can play around these properties a whole bunch. 51 00:03:12,960 --> 00:03:15,960 So maybe I'll give it like you know a height of 20. 52 00:03:15,960 --> 00:03:19,180 Now it really extends up and down that's definitely way too much. 53 00:03:19,410 --> 00:03:21,100 So I go back to two. 54 00:03:21,750 --> 00:03:26,070 I can also play around with the opacity as well so I can go all the way up to say like you know point 55 00:03:26,070 --> 00:03:26,740 nine. 56 00:03:26,940 --> 00:03:29,300 It's a number that ranges between 1 and 0. 57 00:03:29,310 --> 00:03:32,050 So at 9 it starts to get really dark. 58 00:03:32,370 --> 00:03:37,740 You could go all the way down to like say point 5 that starts to look pretty reasonable as well but 59 00:03:37,800 --> 00:03:41,640 I'm going to run with just the default of 0.2 if you want to use something darker. 60 00:03:41,640 --> 00:03:42,510 You certainly can. 61 00:03:42,510 --> 00:03:44,900 It's totally up to you. 62 00:03:44,940 --> 00:03:48,570 Now there's two final properties I want to play I'm place on this view style. 63 00:03:48,570 --> 00:03:51,960 They're not super relevant right now but they will be relevant later on. 64 00:03:51,960 --> 00:03:56,160 And certainly we will come back to the component and discuss why replacing them here. 65 00:03:56,250 --> 00:04:00,380 But we're just going to kind of do it right now and just kind of accept it and then talk about why they're 66 00:04:00,390 --> 00:04:01,420 here later on. 67 00:04:01,590 --> 00:04:09,880 So I'm also going to add on the property elevation of two and a position of relative again. 68 00:04:10,040 --> 00:04:14,220 We're going to come back and discuss these properties we'll deal with it later on. 69 00:04:14,220 --> 00:04:16,740 All right let's give one last look at our component here. 70 00:04:16,770 --> 00:04:18,180 It's looking pretty darn good. 71 00:04:18,180 --> 00:04:20,650 This is a great start for application. 72 00:04:20,670 --> 00:04:23,690 Let's continue with the rest of our app and the next section.