In this section we're going to make sure that our icons show up larger than they currently are.
We're also going to add in a little bit of success to make sure this page looks way better than it currently
does.
So to get started I'm going to first go back to the semantic UI documentation on icons.
Very quickly we're going to go to the very top of the page and once here I'll go over to the definitions
section again that tells us how to make use of these icons.
Well then scroll down a little bit and down here you can see that we can alternate or vary the size
of these icons to do so.
All we have to do is add on another class name.
So I think we probably want a really big icon Silesian icon or a class name of massive.
So that means back over here on our two italics.
I'll put on Massif lowercase Massif and massive like so now I can save this flip back over again.
And that's much better.
OK.
So that's pretty much it for some of the class names that are going to put in here all the styling that
we're going to do from now on is going to be some CSSA that you and I put together ourselves.
So we're going to first create a CSSA file and it will write in some styling to that thing.
That's going to customize these icons.
Maybe you will customize the background and some other elements on this page as well.
Let's get to it.
All right.
So I'm going to find my SIRC directory and inside of here I'm going to create a new CSSA file.
I'm going to give it a name of seasoned display CSX that's going to indicate to anyone else looking
at my project that these CSSA or the styling inside this file is meant to only modify the component
season display.
Then inside if I can write all the different CSSA that I want.
Let's first add a couple of more class names to our stuff.
Over here some of the different elements over here so we can select the appropriate elements and styled
them appropriately.
So first I'm going to find my icon right here.
I'm going to put on an additional class name to it of icon left.
We're going to use that class name right there to select this particular icon and make sure that it
gets positioned up here at the top left hand of the page and we'll add a class name to the other icon
and make sure that it gets positioned at the bottom right.
So on the other icon I'll put on a class name of icon.
Right.
Like so right now I'm going to save this file.
I'll go over to it seasoned display at CSX and inside of here I'll put it on some styling for I can
dash left and some styling for Icon dash right.
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
and a left of 10 pixels.
That essentially means that it's going to just position itself to the top left hand side of the screen.
And then for I can write also do a position of absolute's and a bottom.
This time of 10 picks and a right of 10 picks.
So that means I want the right hand icon to place itself 10 pixels away from the bottom edge of the
browser and 10 pixels away from the right hand edge of the browser.
Now I'm going to save this.
And the last thing we do is make sure that this CSSA file gets linked up to our project by default.
A create react project is not going to automatically scan over all the CSSA files in your project and
somehow automatically include them for you.
That's not how it works.
You and I have to instead manually make sure that we somehow link up this very specific CSSA file to
somewhere inside of our project so to do so I'll go back over to my seasoned displayed on his file and
at the very top for the input Riak statement I'm going to add an input or something import season display
success like so.
So we are now going to import a CSSA file into our project.
Now when we import CSSA file into a javascript file that doesn't mean that we're going to literally
take all this CSSA right here and like pasted in like so.
That's not what actually happens.
What's really going on behind the scenes is web pack which is a open source dependency inside of our
project right now that essentially takes all these different files and joins them together is going
to see that we are importing a CSSA file.
It's going to take the contents out of there and then stick it into the index.
Each email file over here OK let's now save this then we should see our updated CSSA inside the browser.
Perfect.
So now we've got our icon up you on the top left and the other icon over here on the bottom right now
is still a little bit more styling to do.
Let's stay with it.
No need to take a break now.
All right.
Back inside my season display.
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
display as the class name.
And I also want to mark the season that it is either summer or winter.
We can then use that class to decide whether we want to style everything on this page to be like a blue
to indicate summer or it give me a blue to indicate winter.
We're kind of like him or orange or red to indicate summer.
So I'm going to put a class name in here as well.
I want to kind of craft or put the expression in here to indicate my class so I can use a similar approach
that I did down here.
I'm going to say curly braces and then I'll use a yes 2015 template string.
I'll give it a class name of season display and then I'll put in my actual season.
Now you'll notice here that I put a class name on the root div of this component.
That kind of matches the component name.
This is actually a pattern that I do in just about every professional project I work on.
I always make sure that the root element inside the component has a class name equal to the kind of
CSSA version of the class name version of the component name that just makes it a lot easier for me
to apply.
Yes in the future because I know that my seasoned display component is always going to have a class
name of seasoned display.
Boy I'm sure I'm saying that word quite a bit right now.
OK.
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
more styling.
The first thing I want to do for styling is somehow get that text to appear on the very center of the
screen to do so.
I'm going to add a rule inside if you're of season or a selector of season display I'm going to give
it a display of flex a justify Dasch content of center and line items of center and a height of 100
VH like so those rules right there are going to make sure that the text is going to appear on the very
center of the screen.
Let's save this and we can do a quick check.
Yep looks like it's showing up correctly.
Let's do a little bit more here.
I think the next thing that would be kind of nice if we is if we had a good background on the page to
indicate whether it was winter or summer.
Remember that on this div right here that is now spanning the entire height of the page we put in the
class name of season and season is always going to be either the string summer or winter.
So back over inside the CSSA file I could add a selector of winter and say background Dasch color of
Alice blue and a summer of background color orange like so.
OK.
So let's now try this out.
I flip back over.
Yeah.
Now we've got that nice background kind of feels.
I don't know what kind of cold.
Somewhat wintery.
So this is looking good.
Just a little bit more almost done here.
So I think the next thing that would be nice is if we change the color of those icons depending upon
whether or not it was summer or winter.
Remember I think in the original mock up we showed those icicles as blue and the Suns as orange.
So let's do the same thing here as well.
Right underneath the two icon rules that I already have.
I'll do a season display and then I'll select the eye and side there and then we also.
One thing I forgot on here we need to make sure that we select either winter or summer.
It's all do winter like so.
So we're going to find an element that has the class name season display and winter and they'll find
some child element of it that is an icon.
And once we find that icon then set a color of blue and also take care of the summer case as well.
I do a season dasht display summer icon.
I'll do an icon or see a color of red.
All right I know we're going through the CSSA kind of quickly here but remember the entire goal of this
course is really react in Javascript.
And I'm kind of assuming that you understand some of the basics of CSSA.
So I hope I'm not going too crazy quickly or anything like that.
All right let's now save this file.
And if I go back over a icicles are icons are now a nice blue.
Now I'm going to really quickly whip out to a southern hemisphere and then I'll refresh the page.
And now I see the appropriate orange background red icon and it says let's hit the beach.
Awesome.
So I think that this is working out pretty darn well.
Now we can probably change some more styling inside of your maybe make the better in the middle a little
bit larger.
But I think you'll agree with me that we basically met the goal of the original application.
So this is looking pretty good.
But there's still one or two little things I want to fix up inside the set.
So let's take a quick pause.
When we come back the next section we're going to make one or two last little changes.