1
00:00:01,200 --> 00:00:05,310
I would like to start thinking about adding in some styling to our project, so to get started on the

2
00:00:05,310 --> 00:00:08,830
styling front, I want to move this format button just a little bit.

3
00:00:09,180 --> 00:00:14,030
I want to take that button and I want to put it at the very top right hand corner of the code editor.

4
00:00:14,070 --> 00:00:16,610
So essentially just kind of float it right there, so to speak.

5
00:00:17,100 --> 00:00:20,880
In addition, I don't really want to display that format button at all times.

6
00:00:21,240 --> 00:00:22,740
I want to hide the format button.

7
00:00:22,890 --> 00:00:29,040
If the user's cursor is not inside of the editor of the user's cursor is outside the editor, hide the

8
00:00:29,040 --> 00:00:29,640
format button.

9
00:00:29,820 --> 00:00:34,950
If it's inside the editor, show it so we can do this by adding in just a little bit of access.

10
00:00:35,190 --> 00:00:40,130
But as we go through this process, I want to also start thinking about adding in some general access

11
00:00:40,170 --> 00:00:44,550
library to our project as well, just so we can get a little bit more styling for free without having

12
00:00:44,550 --> 00:00:46,950
to write out a ton of CSFs inside discourse.

13
00:00:47,730 --> 00:00:52,860
So to get us started, I'm going to go back over to my terminal and install a little access library.

14
00:00:53,170 --> 00:00:56,940
I'm going to do an install Almaz Watch.

15
00:00:58,410 --> 00:01:03,200
Thunder boomers watch or bull must watch, I think it is Swatch, but whichever you want to call it,

16
00:01:03,650 --> 00:01:07,970
this is the Balma Library, which is a very popular CSFs library.

17
00:01:08,570 --> 00:01:12,470
But Bullmoose Swatch has a couple of different themes inside of it as well.

18
00:01:12,650 --> 00:01:17,270
So it's all the CSFs, all the different class names, all the different rules of Buruma itself with

19
00:01:17,270 --> 00:01:19,100
just some different coloring applied to it.

20
00:01:19,250 --> 00:01:20,000
That's pretty much it.

21
00:01:20,820 --> 00:01:21,800
I'm going to install that.

22
00:01:23,360 --> 00:01:30,230
I'll then go back over to my index file inside my editor at the very top, I'm going to import one of

23
00:01:30,230 --> 00:01:33,070
the themes that is included inside of that library.

24
00:01:33,560 --> 00:01:34,610
So I'm going to import.

25
00:01:35,630 --> 00:01:42,350
OLMA Swatch or Almaz, watch whatever you want to call it, the theme name that we are going to use

26
00:01:42,350 --> 00:01:43,970
is Super Hero.

27
00:01:44,420 --> 00:01:46,250
So there are several different themes inside of here.

28
00:01:46,250 --> 00:01:53,590
We are using one called Super Hero, and then inside there we're going to get Balma Swatch Min CSFs.

29
00:01:55,280 --> 00:01:56,210
I'll then save this.

30
00:01:57,470 --> 00:02:02,780
Go back over to my browser, refresh, and then right away we can see a very different experience.

31
00:02:03,330 --> 00:02:09,680
So we now have this nice and a darker background that much more matches the theme of our ED.

32
00:02:11,170 --> 00:02:15,700
Now we can use some of the CSFs, all the different class names, some stuff like that that is included

33
00:02:15,700 --> 00:02:20,420
in this library to apply some better styling to our button and then eventually write some custom CSFs

34
00:02:20,440 --> 00:02:23,860
on our own to place it up here at the top right hand side of the ED.

35
00:02:24,470 --> 00:02:28,420
So to get started back inside of our ED component.

36
00:02:30,350 --> 00:02:33,470
I'm going to go down to our render or our return statement.

37
00:02:35,220 --> 00:02:39,540
I'm going to find that button that we had just added a moment to go, and we're going to add in just

38
00:02:39,540 --> 00:02:40,770
a couple of class names to it.

39
00:02:42,080 --> 00:02:42,950
So class name.

40
00:02:45,440 --> 00:02:51,260
Button dash formats is primary and is dash small.

41
00:02:53,590 --> 00:02:58,300
Let's save that, as usual, back over and yeah, that looks pretty reasonable.

42
00:02:59,320 --> 00:03:03,910
Now remember, I always run very far, zoomed in, so you probably see something closer to that that

43
00:03:03,910 --> 00:03:04,760
definitely looks reasonable.

44
00:03:05,020 --> 00:03:09,890
Now, last thing I want to do is take that button and place it at the top right hand corner of the editor.

45
00:03:09,910 --> 00:03:13,810
And like I said, if the user ever mouse is out, I want to just hide the button entirely.

46
00:03:14,260 --> 00:03:17,440
So let's write a little bit of custom counts for that in the next video.