I would like to start thinking about adding in some styling to our project, so to get started on the
styling front, I want to move this format button just a little bit.
I want to take that button and I want to put it at the very top right hand corner of the code editor.
So essentially just kind of float it right there, so to speak.
In addition, I don't really want to display that format button at all times.
I want to hide the format button.
If the user's cursor is not inside of the editor of the user's cursor is outside the editor, hide the
format button.
If it's inside the editor, show it so we can do this by adding in just a little bit of access.
But as we go through this process, I want to also start thinking about adding in some general access
library to our project as well, just so we can get a little bit more styling for free without having
to write out a ton of CSFs inside discourse.
So to get us started, I'm going to go back over to my terminal and install a little access library.
I'm going to do an install Almaz Watch.
Thunder boomers watch or bull must watch, I think it is Swatch, but whichever you want to call it,
this is the Balma Library, which is a very popular CSFs library.
But Bullmoose Swatch has a couple of different themes inside of it as well.
So it's all the CSFs, all the different class names, all the different rules of Buruma itself with
just some different coloring applied to it.
That's pretty much it.
I'm going to install that.
I'll then go back over to my index file inside my editor at the very top, I'm going to import one of
the themes that is included inside of that library.
So I'm going to import.
OLMA Swatch or Almaz, watch whatever you want to call it, the theme name that we are going to use
is Super Hero.
So there are several different themes inside of here.
We are using one called Super Hero, and then inside there we're going to get Balma Swatch Min CSFs.
I'll then save this.
Go back over to my browser, refresh, and then right away we can see a very different experience.
So we now have this nice and a darker background that much more matches the theme of our ED.
Now we can use some of the CSFs, all the different class names, some stuff like that that is included
in this library to apply some better styling to our button and then eventually write some custom CSFs
on our own to place it up here at the top right hand side of the ED.
So to get started back inside of our ED component.
I'm going to go down to our render or our return statement.
I'm going to find that button that we had just added a moment to go, and we're going to add in just
a couple of class names to it.
So class name.
Button dash formats is primary and is dash small.
Let's save that, as usual, back over and yeah, that looks pretty reasonable.
Now remember, I always run very far, zoomed in, so you probably see something closer to that that
definitely looks reasonable.
Now, last thing I want to do is take that button and place it at the top right hand corner of the editor.
And like I said, if the user ever mouse is out, I want to just hide the button entirely.
So let's write a little bit of custom counts for that in the next video.