Let's work on some styling around our action bar.
The first thing I want to point out is that we really want to show some icons inside of each of these
buttons so nicely styled up arrow down arrow and an X to show some icons.
We're going to use the very popular font, awesome library.
We're going to install this library using NPM.
So let's go take a look at the documentation first.
Really quickly, back inside my browser, as usual, we'll go over to NPM Dotcom and then we're going
to search for that and make sure you don't make a typo here.
So watch what I typed.
We're going to put in not font awesome, but thought awesome.
Yes, efo r t port awesome.
Flash font, awesome, dash free, the first ones bought second one is funned, make sure you get the
same thing.
So here's the first match right here.
And this is pretty much it, this is what we're going to install when you install this, you're going
to get a couple of different CSFs or SVG files.
Essentially, you're going get all the different font, awesome files installed into your project.
Once we get all this installed, we can then take a look at all the included files and understand what
we really want inside there, or in other words, what font file we really want to add into our project.
I'm going to go on over to my terminal.
I'll do an NPM install at Port Awesome slash font, awesome dash free to once again for our EFO n tea.
I'm going to run that it'll take just a moment or two to install, so I'm going to let it do its thing
in this case, I do want to know when the installation is complete.
I'm going to sit around here for just a moment.
There we go.
All done.
I'm going to go back over to my editor.
I'm going to very quickly reload my editor to do so.
You can hit command shift B or control ship if you're on windows and then search for reload window.
The only reason I'm doing this is that sometimes your code editor or voice code doesn't really detect
changes that are made to the node modules directory by reloading my editor.
Now, the node modules directory should be up to date, so I'm going to update the open node modules.
I'm going to find awesome inside there.
And then going to go to an awesome desperate to find success, and then inside there is all men access,
that is the file that you and I want to import into our project that includes all different possible
icons we could ever possibly want to use ever.
So to import that, I'm going to go back to the index file inside of my SIRC directory.
And right after our theme import up here, I'm going to add in another import for at Port Awesome font,
awesome free success all in.
Access.
And that should be it.
OK, so now I'm going to close that, we're going to go back over to our action bar component and as
I mentioned, we're going to try to show some icons inside of these different buttons.
So for the very first button right here for up, I'm going to expand that button element, I'm going
to add in a span with a class name of Eikon.
I'll then add in an element.
With a class name of Faez and I have to look at the name of this icon that we're using here really quickly,
because I absolutely, positively just don't remember it off the top of my head.
If you go to the font, awesome documentation, they will list out a ton of different possible icon
names you can use.
So it's really just an issue of in finding the appropriate name.
OK, so in this case, you want fase than F.A.A. arrow up.
Well, then close off that iconic element and then finally on the button itself, we're also going to
add on one or two little class names.
We're going to add on the button element.
A class name.
A button is primary and is small.
All right, so let's say this.
Let's go back over to our browser.
A quick refresh and see how we're doing.
Hey, all right, well, that definitely looks a lot closer to what we saw back in our original demo
of this application at the very start of the course.
If I go back to 100 percent zoom, I would say that that button is appropriately sized.
So that looks pretty good.
And we could pretty much use this as a template for our other two buttons as well.
So let's just repeat this entire process for those other two buttons.
OK, so going to have to do a little bit of copy pasting here, I'm going to find that span.
I'm going to copy the span.
I'm going to delete down inside the next button and paste that entire spanton in.
I'll then fine delete.
I'm going to remove the delete text and also paste in spane.
Well, then go through and update some of these different iconoclast names that we do not want to show
the very plain up arrow, of course, and those other two instead, we're going to display a arrow down.
And then down here, this is going to be a dash times.
I'm also going to grab the class name that we applied to the button element, I'm going to copy that
and apply it to the second button and the third button.
Save that flip back over, hey, all right, that's looking pretty good.
One thing I want to point out here really quickly is that we now have a couple of button elements inside
of here with a pretty good amount of class name and configuration on them.
If you want to, you could absolutely extract these button things into a reasonable component.
Maybe this would be some kind of action button reusable component.
That might be what you call it.
Maybe you would call or have it received two props, maybe one prop would be what to do whenever a user
clicks on a button and a second, probably what icon to show.
So it could be pretty much just that word right there.
And apply that to the element.
If you want to do that, refactor and create a separate action button component.
I completely leave it up to you.
I think ideally we would do that here because these three buttons are absolutely identical in nature.
And so this is really a good candidate for doing a refactor into a separate component.
But it's just a very small side task that I'm going to leave up to you.
Totally optional.
All right, well, overall, I would say that our action bars are looking pretty good, but I do want
to add in just one last piece of styling.
Remember, ideally, these things are going to show up on the top right hand side right above all of
our different cells.
In addition, if we have a code cell, I really want to show kind of a dark R behind it.
But if we have a text cell, I don't want to show any bar.
I just want to kind of load it up there at the top right hand corner.
So we still have to do a little bit of custom CSS.
Let's take care of that in just a moment.