1
00:00:01,100 --> 00:00:03,290
Let's work on some styling around our action bar.

2
00:00:03,770 --> 00:00:07,430
The first thing I want to point out is that we really want to show some icons inside of each of these

3
00:00:07,430 --> 00:00:12,590
buttons so nicely styled up arrow down arrow and an X to show some icons.

4
00:00:12,590 --> 00:00:15,740
We're going to use the very popular font, awesome library.

5
00:00:16,129 --> 00:00:18,270
We're going to install this library using NPM.

6
00:00:18,290 --> 00:00:20,390
So let's go take a look at the documentation first.

7
00:00:20,390 --> 00:00:26,570
Really quickly, back inside my browser, as usual, we'll go over to NPM Dotcom and then we're going

8
00:00:26,570 --> 00:00:30,040
to search for that and make sure you don't make a typo here.

9
00:00:30,050 --> 00:00:30,890
So watch what I typed.

10
00:00:30,900 --> 00:00:35,270
We're going to put in not font awesome, but thought awesome.

11
00:00:35,270 --> 00:00:38,420
Yes, efo r t port awesome.

12
00:00:39,530 --> 00:00:46,820
Flash font, awesome, dash free, the first ones bought second one is funned, make sure you get the

13
00:00:46,820 --> 00:00:47,360
same thing.

14
00:00:48,690 --> 00:00:50,200
So here's the first match right here.

15
00:00:51,470 --> 00:00:54,890
And this is pretty much it, this is what we're going to install when you install this, you're going

16
00:00:54,890 --> 00:00:57,830
to get a couple of different CSFs or SVG files.

17
00:00:57,990 --> 00:01:02,030
Essentially, you're going get all the different font, awesome files installed into your project.

18
00:01:02,420 --> 00:01:07,430
Once we get all this installed, we can then take a look at all the included files and understand what

19
00:01:07,430 --> 00:01:11,930
we really want inside there, or in other words, what font file we really want to add into our project.

20
00:01:12,900 --> 00:01:14,070
I'm going to go on over to my terminal.

21
00:01:16,670 --> 00:01:28,430
I'll do an NPM install at Port Awesome slash font, awesome dash free to once again for our EFO n tea.

22
00:01:29,530 --> 00:01:34,540
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

23
00:01:34,540 --> 00:01:37,900
in this case, I do want to know when the installation is complete.

24
00:01:38,230 --> 00:01:40,360
I'm going to sit around here for just a moment.

25
00:01:40,720 --> 00:01:41,270
There we go.

26
00:01:41,290 --> 00:01:41,870
All done.

27
00:01:42,640 --> 00:01:44,040
I'm going to go back over to my editor.

28
00:01:44,710 --> 00:01:47,830
I'm going to very quickly reload my editor to do so.

29
00:01:47,830 --> 00:01:53,410
You can hit command shift B or control ship if you're on windows and then search for reload window.

30
00:01:53,760 --> 00:01:58,660
The only reason I'm doing this is that sometimes your code editor or voice code doesn't really detect

31
00:01:58,660 --> 00:02:02,730
changes that are made to the node modules directory by reloading my editor.

32
00:02:02,950 --> 00:02:08,259
Now, the node modules directory should be up to date, so I'm going to update the open node modules.

33
00:02:08,650 --> 00:02:10,810
I'm going to find awesome inside there.

34
00:02:11,750 --> 00:02:20,410
And then going to go to an awesome desperate to find success, and then inside there is all men access,

35
00:02:20,810 --> 00:02:25,610
that is the file that you and I want to import into our project that includes all different possible

36
00:02:25,610 --> 00:02:28,550
icons we could ever possibly want to use ever.

37
00:02:29,730 --> 00:02:37,320
So to import that, I'm going to go back to the index file inside of my SIRC directory.

38
00:02:38,280 --> 00:02:46,080
And right after our theme import up here, I'm going to add in another import for at Port Awesome font,

39
00:02:46,230 --> 00:02:50,460
awesome free success all in.

40
00:02:51,640 --> 00:02:52,460
Access.

41
00:02:54,550 --> 00:02:55,390
And that should be it.

42
00:02:58,150 --> 00:03:03,010
OK, so now I'm going to close that, we're going to go back over to our action bar component and as

43
00:03:03,010 --> 00:03:06,880
I mentioned, we're going to try to show some icons inside of these different buttons.

44
00:03:08,250 --> 00:03:13,830
So for the very first button right here for up, I'm going to expand that button element, I'm going

45
00:03:13,830 --> 00:03:18,210
to add in a span with a class name of Eikon.

46
00:03:21,060 --> 00:03:23,310
I'll then add in an element.

47
00:03:25,330 --> 00:03:32,950
With a class name of Faez and I have to look at the name of this icon that we're using here really quickly,

48
00:03:33,430 --> 00:03:37,000
because I absolutely, positively just don't remember it off the top of my head.

49
00:03:37,390 --> 00:03:41,980
If you go to the font, awesome documentation, they will list out a ton of different possible icon

50
00:03:41,980 --> 00:03:42,820
names you can use.

51
00:03:43,120 --> 00:03:46,120
So it's really just an issue of in finding the appropriate name.

52
00:03:46,570 --> 00:03:49,960
OK, so in this case, you want fase than F.A.A. arrow up.

53
00:03:51,200 --> 00:03:55,730
Well, then close off that iconic element and then finally on the button itself, we're also going to

54
00:03:55,730 --> 00:03:57,770
add on one or two little class names.

55
00:03:58,640 --> 00:04:01,640
We're going to add on the button element.

56
00:04:03,240 --> 00:04:04,290
A class name.

57
00:04:07,690 --> 00:04:12,460
A button is primary and is small.

58
00:04:14,200 --> 00:04:15,250
All right, so let's say this.

59
00:04:16,750 --> 00:04:18,220
Let's go back over to our browser.

60
00:04:18,589 --> 00:04:20,800
A quick refresh and see how we're doing.

61
00:04:21,810 --> 00:04:26,880
Hey, all right, well, that definitely looks a lot closer to what we saw back in our original demo

62
00:04:26,880 --> 00:04:28,830
of this application at the very start of the course.

63
00:04:29,460 --> 00:04:33,990
If I go back to 100 percent zoom, I would say that that button is appropriately sized.

64
00:04:34,500 --> 00:04:35,430
So that looks pretty good.

65
00:04:35,430 --> 00:04:38,850
And we could pretty much use this as a template for our other two buttons as well.

66
00:04:39,510 --> 00:04:42,510
So let's just repeat this entire process for those other two buttons.

67
00:04:43,670 --> 00:04:48,650
OK, so going to have to do a little bit of copy pasting here, I'm going to find that span.

68
00:04:49,010 --> 00:04:50,120
I'm going to copy the span.

69
00:04:51,500 --> 00:04:55,910
I'm going to delete down inside the next button and paste that entire spanton in.

70
00:04:57,540 --> 00:04:58,600
I'll then fine delete.

71
00:04:58,620 --> 00:05:02,430
I'm going to remove the delete text and also paste in spane.

72
00:05:03,950 --> 00:05:09,320
Well, then go through and update some of these different iconoclast names that we do not want to show

73
00:05:09,320 --> 00:05:16,280
the very plain up arrow, of course, and those other two instead, we're going to display a arrow down.

74
00:05:17,320 --> 00:05:21,520
And then down here, this is going to be a dash times.

75
00:05:24,490 --> 00:05:29,260
I'm also going to grab the class name that we applied to the button element, I'm going to copy that

76
00:05:30,100 --> 00:05:34,330
and apply it to the second button and the third button.

77
00:05:38,620 --> 00:05:42,370
Save that flip back over, hey, all right, that's looking pretty good.

78
00:05:44,580 --> 00:05:48,420
One thing I want to point out here really quickly is that we now have a couple of button elements inside

79
00:05:48,420 --> 00:05:51,840
of here with a pretty good amount of class name and configuration on them.

80
00:05:52,320 --> 00:05:57,150
If you want to, you could absolutely extract these button things into a reasonable component.

81
00:05:57,610 --> 00:06:00,930
Maybe this would be some kind of action button reusable component.

82
00:06:00,930 --> 00:06:01,970
That might be what you call it.

83
00:06:02,430 --> 00:06:07,650
Maybe you would call or have it received two props, maybe one prop would be what to do whenever a user

84
00:06:07,650 --> 00:06:10,670
clicks on a button and a second, probably what icon to show.

85
00:06:10,680 --> 00:06:12,900
So it could be pretty much just that word right there.

86
00:06:12,900 --> 00:06:14,430
And apply that to the element.

87
00:06:14,880 --> 00:06:18,510
If you want to do that, refactor and create a separate action button component.

88
00:06:18,750 --> 00:06:20,160
I completely leave it up to you.

89
00:06:20,590 --> 00:06:25,370
I think ideally we would do that here because these three buttons are absolutely identical in nature.

90
00:06:25,380 --> 00:06:28,650
And so this is really a good candidate for doing a refactor into a separate component.

91
00:06:28,950 --> 00:06:31,910
But it's just a very small side task that I'm going to leave up to you.

92
00:06:31,920 --> 00:06:32,580
Totally optional.

93
00:06:33,780 --> 00:06:38,040
All right, well, overall, I would say that our action bars are looking pretty good, but I do want

94
00:06:38,040 --> 00:06:40,040
to add in just one last piece of styling.

95
00:06:40,530 --> 00:06:45,360
Remember, ideally, these things are going to show up on the top right hand side right above all of

96
00:06:45,360 --> 00:06:46,340
our different cells.

97
00:06:46,770 --> 00:06:51,270
In addition, if we have a code cell, I really want to show kind of a dark R behind it.

98
00:06:51,660 --> 00:06:54,420
But if we have a text cell, I don't want to show any bar.

99
00:06:54,420 --> 00:06:57,090
I just want to kind of load it up there at the top right hand corner.

100
00:06:57,610 --> 00:06:59,830
So we still have to do a little bit of custom CSS.

101
00:07:00,000 --> 00:07:01,490
Let's take care of that in just a moment.