1 00:00:01,000 --> 00:00:05,020 In this section we're going to make sure that our icons show up larger than they currently are. 2 00:00:05,040 --> 00:00:09,470 We're also going to add in a little bit of success to make sure this page looks way better than it currently 3 00:00:09,470 --> 00:00:10,290 does. 4 00:00:10,610 --> 00:00:14,770 So to get started I'm going to first go back to the semantic UI documentation on icons. 5 00:00:14,780 --> 00:00:22,070 Very quickly we're going to go to the very top of the page and once here I'll go over to the definitions 6 00:00:22,070 --> 00:00:25,240 section again that tells us how to make use of these icons. 7 00:00:26,560 --> 00:00:31,010 Well then scroll down a little bit and down here you can see that we can alternate or vary the size 8 00:00:31,040 --> 00:00:32,960 of these icons to do so. 9 00:00:32,960 --> 00:00:35,650 All we have to do is add on another class name. 10 00:00:35,750 --> 00:00:41,380 So I think we probably want a really big icon Silesian icon or a class name of massive. 11 00:00:41,780 --> 00:00:45,320 So that means back over here on our two italics. 12 00:00:45,380 --> 00:00:55,850 I'll put on Massif lowercase Massif and massive like so now I can save this flip back over again. 13 00:00:56,330 --> 00:00:57,700 And that's much better. 14 00:00:57,920 --> 00:00:58,360 OK. 15 00:00:58,520 --> 00:01:02,330 So that's pretty much it for some of the class names that are going to put in here all the styling that 16 00:01:02,330 --> 00:01:06,950 we're going to do from now on is going to be some CSSA that you and I put together ourselves. 17 00:01:06,950 --> 00:01:12,230 So we're going to first create a CSSA file and it will write in some styling to that thing. 18 00:01:12,260 --> 00:01:13,990 That's going to customize these icons. 19 00:01:14,120 --> 00:01:18,090 Maybe you will customize the background and some other elements on this page as well. 20 00:01:18,290 --> 00:01:20,780 Let's get to it. 21 00:01:20,790 --> 00:01:21,150 All right. 22 00:01:21,150 --> 00:01:27,200 So I'm going to find my SIRC directory and inside of here I'm going to create a new CSSA file. 23 00:01:27,420 --> 00:01:33,600 I'm going to give it a name of seasoned display CSX that's going to indicate to anyone else looking 24 00:01:33,600 --> 00:01:39,810 at my project that these CSSA or the styling inside this file is meant to only modify the component 25 00:01:39,870 --> 00:01:41,050 season display. 26 00:01:41,780 --> 00:01:44,820 Then inside if I can write all the different CSSA that I want. 27 00:01:45,100 --> 00:01:48,010 Let's first add a couple of more class names to our stuff. 28 00:01:48,040 --> 00:01:52,650 Over here some of the different elements over here so we can select the appropriate elements and styled 29 00:01:52,650 --> 00:01:54,400 them appropriately. 30 00:01:54,480 --> 00:01:56,950 So first I'm going to find my icon right here. 31 00:01:57,180 --> 00:02:01,830 I'm going to put on an additional class name to it of icon left. 32 00:02:01,890 --> 00:02:06,630 We're going to use that class name right there to select this particular icon and make sure that it 33 00:02:06,630 --> 00:02:12,820 gets positioned up here at the top left hand of the page and we'll add a class name to the other icon 34 00:02:12,880 --> 00:02:15,300 and make sure that it gets positioned at the bottom right. 35 00:02:17,150 --> 00:02:20,200 So on the other icon I'll put on a class name of icon. 36 00:02:20,240 --> 00:02:20,790 Right. 37 00:02:20,840 --> 00:02:25,030 Like so right now I'm going to save this file. 38 00:02:25,280 --> 00:02:33,090 I'll go over to it seasoned display at CSX and inside of here I'll put it on some styling for I can 39 00:02:33,100 --> 00:02:37,140 dash left and some styling for Icon dash right. 40 00:02:39,250 --> 00:02:46,230 Now for the left one I'm going to give it a position of absolute and I'll give it a top of 10 pixels 41 00:02:46,750 --> 00:02:48,960 and a left of 10 pixels. 42 00:02:49,060 --> 00:02:54,060 That essentially means that it's going to just position itself to the top left hand side of the screen. 43 00:02:55,040 --> 00:02:59,910 And then for I can write also do a position of absolute's and a bottom. 44 00:02:59,910 --> 00:03:03,840 This time of 10 picks and a right of 10 picks. 45 00:03:03,840 --> 00:03:09,450 So that means I want the right hand icon to place itself 10 pixels away from the bottom edge of the 46 00:03:09,450 --> 00:03:15,080 browser and 10 pixels away from the right hand edge of the browser. 47 00:03:15,080 --> 00:03:16,190 Now I'm going to save this. 48 00:03:16,250 --> 00:03:21,800 And the last thing we do is make sure that this CSSA file gets linked up to our project by default. 49 00:03:21,830 --> 00:03:27,530 A create react project is not going to automatically scan over all the CSSA files in your project and 50 00:03:27,530 --> 00:03:29,500 somehow automatically include them for you. 51 00:03:29,510 --> 00:03:30,970 That's not how it works. 52 00:03:31,120 --> 00:03:36,980 You and I have to instead manually make sure that we somehow link up this very specific CSSA file to 53 00:03:36,980 --> 00:03:43,510 somewhere inside of our project so to do so I'll go back over to my seasoned displayed on his file and 54 00:03:43,510 --> 00:03:51,310 at the very top for the input Riak statement I'm going to add an input or something import season display 55 00:03:52,070 --> 00:03:54,360 success like so. 56 00:03:54,400 --> 00:03:57,970 So we are now going to import a CSSA file into our project. 57 00:03:57,970 --> 00:04:02,980 Now when we import CSSA file into a javascript file that doesn't mean that we're going to literally 58 00:04:02,980 --> 00:04:07,060 take all this CSSA right here and like pasted in like so. 59 00:04:07,060 --> 00:04:08,790 That's not what actually happens. 60 00:04:08,860 --> 00:04:13,540 What's really going on behind the scenes is web pack which is a open source dependency inside of our 61 00:04:13,540 --> 00:04:17,800 project right now that essentially takes all these different files and joins them together is going 62 00:04:17,800 --> 00:04:20,710 to see that we are importing a CSSA file. 63 00:04:20,830 --> 00:04:24,970 It's going to take the contents out of there and then stick it into the index. 64 00:04:25,000 --> 00:04:32,380 Each email file over here OK let's now save this then we should see our updated CSSA inside the browser. 65 00:04:32,790 --> 00:04:33,510 Perfect. 66 00:04:33,520 --> 00:04:39,870 So now we've got our icon up you on the top left and the other icon over here on the bottom right now 67 00:04:39,870 --> 00:04:41,590 is still a little bit more styling to do. 68 00:04:41,660 --> 00:04:42,840 Let's stay with it. 69 00:04:42,890 --> 00:04:44,360 No need to take a break now. 70 00:04:45,970 --> 00:04:46,210 All right. 71 00:04:46,210 --> 00:04:48,030 Back inside my season display. 72 00:04:48,130 --> 00:04:56,030 I'm going to find my div right here and I'm going to add on a class name that's going to contain season 73 00:04:56,090 --> 00:04:57,590 display as the class name. 74 00:04:57,620 --> 00:05:01,780 And I also want to mark the season that it is either summer or winter. 75 00:05:01,940 --> 00:05:07,130 We can then use that class to decide whether we want to style everything on this page to be like a blue 76 00:05:07,130 --> 00:05:10,140 to indicate summer or it give me a blue to indicate winter. 77 00:05:10,220 --> 00:05:13,520 We're kind of like him or orange or red to indicate summer. 78 00:05:14,010 --> 00:05:15,940 So I'm going to put a class name in here as well. 79 00:05:16,010 --> 00:05:21,710 I want to kind of craft or put the expression in here to indicate my class so I can use a similar approach 80 00:05:21,710 --> 00:05:23,580 that I did down here. 81 00:05:23,750 --> 00:05:28,890 I'm going to say curly braces and then I'll use a yes 2015 template string. 82 00:05:29,090 --> 00:05:36,130 I'll give it a class name of season display and then I'll put in my actual season. 83 00:05:36,180 --> 00:05:40,830 Now you'll notice here that I put a class name on the root div of this component. 84 00:05:40,830 --> 00:05:43,260 That kind of matches the component name. 85 00:05:43,290 --> 00:05:48,040 This is actually a pattern that I do in just about every professional project I work on. 86 00:05:48,150 --> 00:05:55,050 I always make sure that the root element inside the component has a class name equal to the kind of 87 00:05:55,290 --> 00:06:00,060 CSSA version of the class name version of the component name that just makes it a lot easier for me 88 00:06:00,060 --> 00:06:00,640 to apply. 89 00:06:00,690 --> 00:06:05,100 Yes in the future because I know that my seasoned display component is always going to have a class 90 00:06:05,100 --> 00:06:07,000 name of seasoned display. 91 00:06:07,160 --> 00:06:09,990 Boy I'm sure I'm saying that word quite a bit right now. 92 00:06:10,360 --> 00:06:10,610 OK. 93 00:06:10,620 --> 00:06:15,340 So I'm going to save this and we'll go back over to RCA says file and we're going to add a little bit 94 00:06:15,340 --> 00:06:16,150 more styling. 95 00:06:17,270 --> 00:06:21,480 The first thing I want to do for styling is somehow get that text to appear on the very center of the 96 00:06:21,480 --> 00:06:23,280 screen to do so. 97 00:06:23,310 --> 00:06:30,170 I'm going to add a rule inside if you're of season or a selector of season display I'm going to give 98 00:06:30,170 --> 00:06:39,410 it a display of flex a justify Dasch content of center and line items of center and a height of 100 99 00:06:39,470 --> 00:06:45,260 VH like so those rules right there are going to make sure that the text is going to appear on the very 100 00:06:45,320 --> 00:06:46,920 center of the screen. 101 00:06:47,630 --> 00:06:49,520 Let's save this and we can do a quick check. 102 00:06:49,600 --> 00:06:51,860 Yep looks like it's showing up correctly. 103 00:06:51,890 --> 00:06:53,480 Let's do a little bit more here. 104 00:06:53,480 --> 00:06:58,010 I think the next thing that would be kind of nice if we is if we had a good background on the page to 105 00:06:58,010 --> 00:07:00,660 indicate whether it was winter or summer. 106 00:07:00,740 --> 00:07:05,660 Remember that on this div right here that is now spanning the entire height of the page we put in the 107 00:07:05,660 --> 00:07:11,240 class name of season and season is always going to be either the string summer or winter. 108 00:07:11,330 --> 00:07:19,130 So back over inside the CSSA file I could add a selector of winter and say background Dasch color of 109 00:07:19,190 --> 00:07:29,090 Alice blue and a summer of background color orange like so. 110 00:07:29,440 --> 00:07:29,670 OK. 111 00:07:29,680 --> 00:07:31,260 So let's now try this out. 112 00:07:31,300 --> 00:07:32,210 I flip back over. 113 00:07:32,230 --> 00:07:32,500 Yeah. 114 00:07:32,510 --> 00:07:34,930 Now we've got that nice background kind of feels. 115 00:07:34,960 --> 00:07:36,040 I don't know what kind of cold. 116 00:07:36,070 --> 00:07:37,260 Somewhat wintery. 117 00:07:37,630 --> 00:07:38,590 So this is looking good. 118 00:07:38,590 --> 00:07:40,900 Just a little bit more almost done here. 119 00:07:41,790 --> 00:07:46,080 So I think the next thing that would be nice is if we change the color of those icons depending upon 120 00:07:46,080 --> 00:07:48,080 whether or not it was summer or winter. 121 00:07:48,190 --> 00:07:52,970 Remember I think in the original mock up we showed those icicles as blue and the Suns as orange. 122 00:07:53,010 --> 00:07:54,620 So let's do the same thing here as well. 123 00:07:55,840 --> 00:07:58,640 Right underneath the two icon rules that I already have. 124 00:07:58,660 --> 00:08:04,890 I'll do a season display and then I'll select the eye and side there and then we also. 125 00:08:04,900 --> 00:08:08,660 One thing I forgot on here we need to make sure that we select either winter or summer. 126 00:08:08,780 --> 00:08:10,950 It's all do winter like so. 127 00:08:11,050 --> 00:08:16,210 So we're going to find an element that has the class name season display and winter and they'll find 128 00:08:16,210 --> 00:08:19,040 some child element of it that is an icon. 129 00:08:19,150 --> 00:08:26,100 And once we find that icon then set a color of blue and also take care of the summer case as well. 130 00:08:26,120 --> 00:08:30,240 I do a season dasht display summer icon. 131 00:08:30,380 --> 00:08:33,850 I'll do an icon or see a color of red. 132 00:08:33,870 --> 00:08:37,980 All right I know we're going through the CSSA kind of quickly here but remember the entire goal of this 133 00:08:37,980 --> 00:08:40,020 course is really react in Javascript. 134 00:08:40,020 --> 00:08:43,310 And I'm kind of assuming that you understand some of the basics of CSSA. 135 00:08:43,350 --> 00:08:46,610 So I hope I'm not going too crazy quickly or anything like that. 136 00:08:47,400 --> 00:08:49,790 All right let's now save this file. 137 00:08:49,960 --> 00:08:54,660 And if I go back over a icicles are icons are now a nice blue. 138 00:08:54,890 --> 00:09:01,100 Now I'm going to really quickly whip out to a southern hemisphere and then I'll refresh the page. 139 00:09:01,610 --> 00:09:06,320 And now I see the appropriate orange background red icon and it says let's hit the beach. 140 00:09:06,320 --> 00:09:07,320 Awesome. 141 00:09:07,340 --> 00:09:10,340 So I think that this is working out pretty darn well. 142 00:09:10,340 --> 00:09:14,600 Now we can probably change some more styling inside of your maybe make the better in the middle a little 143 00:09:14,600 --> 00:09:15,270 bit larger. 144 00:09:15,320 --> 00:09:20,240 But I think you'll agree with me that we basically met the goal of the original application. 145 00:09:20,240 --> 00:09:21,450 So this is looking pretty good. 146 00:09:21,500 --> 00:09:25,430 But there's still one or two little things I want to fix up inside the set. 147 00:09:25,610 --> 00:09:26,810 So let's take a quick pause. 148 00:09:26,870 --> 00:09:31,100 When we come back the next section we're going to make one or two last little changes.