All right, little bit more styling to do, the next thing we're going to work on is making sure that
these buttons are displayed in the middle of the screen.
And I also want to make sure we've got a little bit of spacing between them as well.
To account for that.
I'm going to go back over to our component and I'm going to wrap both of our buttons right here with
another div.
And I'll give that div.
A class name.
Of ad buttons.
I'm going to save that, we'll go back over to our Sears's file.
I'll do another selecter for ad sell.
I'm going to find ad buttons inside their.
We're then going to add on a display of Fleck's a justify.
Content of center.
And we'll leave it like that for right now.
So this is what's going to get these buttons to appear in the very center of the screen.
Now we go back over.
Yep, definitely displayed in the middle now we'll just add on one more rule to make sure there's a
bunch of spacing between these two buttons, make sure that they're not directly touching.
So I'm going to also take a look at ad sell.
Ad buttons button the find button elements inside their.
And I will add in a margin of zero, 20 pixels, so this will give us zero margin on top and on bottom
of the button itself and then 20 pixels on the left and right hand sides.
So we save that.
Yeah, now we've got a little bit of spacing in there, if you think that there should be more spacing.
Hey, no problem.
You can just dial up this 20 pixels, maybe go up to 40.
And that just means you're going to get all the more spacing inserted in.
You can adjust that as much as you wish.
OK, so definitely looks good from a positioning standpoint.
One thing I don't really like too much is the fact that these dividers are going all the way off to
the very edges of the screen.
We will eventually add in some gutters on the left and right hand sides.
But even then, I feel like it'd be a little bit better if they didn't run the entire full with the
screen.
So let's just shorten those things up a little bit while making sure that the overall divider is still
positioned in the very center to do so.
I'm going to find our width right here and I'm going to adjust the width down to 90 percent.
I'll then add in a right of five percent and a left of five percent.
So let's save that.
And now we get that nice spacing on either side.
However, looking at that, it looks like maybe that's just a little bit too much spacing.
I know I'm nit picking here now.
I'm just going to reduce this a little bit.
We'll go to two point five percent.
Let's try this.
Yeah, that's a little bit better.
OK, so it looks pretty good now, the last thing I think we need to really take care of is styling
buttons themselves.
So I want to have some nice little plus icons on them.
I want them to kind of match the styling of our action buttons as well, or at least something similar
to it.
So for this, we're going to go back over to the components, we're going to find our two buttons and
we're going to add in a couple of different class names, give them a structure very similar to the
structure we had inside of our action bars.
So we're going to put a span inside there.
But in an element, a lot of different stuff going to first begin on the buttons themselves.
I'll add on a class name of button is rounded is primary and is small.
Then inside the button itself, I'm going to add in a span.
Right before the word code, this is a separate span.
I'll give it a class name of Ikon is small.
And inside of the icon Aladdin, an eye with a class name of fase Fay plus.
And then close at.
Finally, I'm going to wrap the word code inside of a span as well.
I'm going to say this really quick.
Look back over.
Yeah, now that's the styling we are looking for.
I think that looks pretty reasonable.
Let's repeat that same thing on our tax button as well.
So a bunch of Taiping here or alternatively a bunch of copy paste, let's just do a copy paste.
We're going to take the button class name from up top, paste it down to the second button.
I'm going to take this entire icon span right here, albeit above the word text.
I'll change the Iconoclast name from Phay Plus or excuse me, in this case, one of the icons to be
identical.
So still a fabulous.
So I think the last thing we have to do is wrap that text with a span.
And that should be at.
OK, let's go back over.
Yeah, that definitely looks pretty good, nice and consistent.
All right, well, I'm pretty happy with this, but the last thing on to point out is that these buttons
are just really large and really intrusive.
We only really need to show these dividers when every user starts to mouse over the area between two
cells.
So I think once again, we should apply a very similar opacity kind of trick to what we did on our action
buttons.
I want to fade out the center divide, maybe even fade out all the way.
So go to zero percent opacity until a user mouse is over it.
So that'll just increase the amount of or D clutter the screen is what I guess I mean to say don't want
to always show a ton of content on here.
Let's go back over, I'm going to go and find our guests file once again.
On the ad sell right here, I'm going to put in an opacity.
Zero.
So I'm going to not I'm not going to show anything about ad sell at all until a user mouse is over it.
I'll put an ad sell, hover and then adjust its opacity to 1.0.
Also, make sure that I transition the capacity to get that nice going to feed in effect, so again,
that transition opacity over zero point three seconds.
All right, let's flip back over so now we don't see any of that real big noise that all that clutter
until we start to mouseover and then it nicely fades in and we're told, oh, yeah, if you want to
add in some additional content, no problem.
We can either code or plus text.
Well, outside of some spacing issues, namely the fact that these things are being just kind of on
top of the code, Ed, I would say overall this looks pretty good.
But there is one very small corner case that I want you to be aware of, something that would be really
confusing to a user.
Let's say that a user for some reason decides to delete all of the different cells.
Inside their notebook, they then are left with this if they wanted to.
Now add in a cell, they would have to go up here mouseover and kind of say, oh, hey, look, this
thing appears whenever I mouseover up here.
Well, of course, that's super hidden away.
And if a user ever gets to this point, they'd be looking at this page saying what is going on with
this application?
So I think beyond a little bit of spacing that we should probably add in between some cells, we should
probably make sure that if we don't have any cells at all, we don't apply any opacity or apply opacity
of zero to the ADL component.
Instead, if we have zero cells, we should make sure that this thing is nice and bright and visible
no matter where the user's cursor is.
So let's take care of that little tweak in just a moment.