- Read Tutorial
- Watch Guide Video
That is something that makes them very powerful because that means you can alter the color, you can shrink or grow them however you need to, and so you can treat them just like a normal font or piece of content so that is what we are going to do in this guide is we are going to clean up our sidebar here so that we have the tile, we have the new icon, and they're styled properly.
So I think the best way of doing this is to shrink the title a little bit, we are going to get rid of the id, and then I'm going to take the trash icon, I'm going to make it white, enlarge it, and then we are going to put it here on the right-hand side.
Now you probably already know how to do this just using tools like Flexbox so I definitely recommend for you to pause the video right now and try to implement this yourself and then you can see how I do it.
So I'm going to open up Video Studio Code right here and I'm going to start reorganizing the content. So I'm going to get rid of the id here and I'm going to wrap up the name or the title and the trash icon in their own div. So I'm going to say div className and I'm just gonna call this something like text-content and then make sure to wrap both of those off with a closing div tag.
So now we have a separate div that's going to be managing all of the text-content including the title and the trash icon. Let's take this and I'm going to open up the portfolio sidebar and let's see if I included that that's not in the right spot let's take a look and the easy way anytime and this is something I do on a daily basis.
Whenever you have a className and you're not exactly sure where you put that, you can just copy one of the other parent classNames like this and then do a universal search. So you can say .portfolio-item-thumb and it will show you have this portfolio-sidebar file here and you can open up that file and this is the one we want to add this into.
So we have the portfolio-thumb-img which we don't want to work with that, but we have this .title here so what I can do is I can actually come down here and say .text-content and this going to be the new parent div and then make sure to close that off so we have the .title here and I'll save just to prettify it and I want to use Flexbox so I'm gonna say display: flex and then here I'm going to justify-content and this is going to be let's see we're gonna do space-between here and then I also want to align-items to center everything vertically.
And then we have this .title and the .title I want to keep that as $offwhite for the color, but I'm no longer gonna have it be an h1. We are going to dictate exactly what size we want it to be so I'm going to switch this up to just be a regular div and then also close off that div tag.
Now inside the .title we'll add a few more rules such as a font size so I'll say font-size 1.5em and that should give us what we're wanting there. So let's just kinda see where we're at right now with it. I'm gonna switch over to Google Chrome and you can see this is already looking a lot better.
We've removed the id, we have our title shrunk down so that it can all fit on one line, and now we have the trash icon. Now the trash icon I'd like to first have it white and also to have it larger so that it's easier to see that it actually is a trash icon and then I also want to when I hover over it I want it to turn red or some different type of color to signify that it is something that has a destructive action. And that's something pretty common in the UI/UX space.
So let's open up Visual Studio Code again and create those styles. So inside of text-content what I can do is just grab the "a" tag here and actually you know what I don't wanna just grab the "a" tag because that could override eventually we're gonna make that title clickable.
So instead let's go add a class so for the className here for the "a" tag let's say className and I am going to say delete-icon. This is gonna be more explicit and this way we are not going to override anything if we do change the title to be a link or something like that.
So I'm just going to create a class of .delete-icon and now I can say .delete-icon and the very first thing if you notice when you hover over it nothing changes so there's nothing in it that really signifies that it's a link. So I would like to make the cursor be a pointer. So the first rule is just going to be cursor: pointer just like that so now if I hit save and come back you can see that it's now something that looks like it's clickable.
It always was clickable before, but now it gives a better user experience and then I also want to change the color so the color is going to be $offwhite and then let's update the font-size so font-size is 1.5em and then let's also add a transition so that whenever a user does hover over it there is a little bit of an animation and it doesn't just slam on that red color, but it's going to fade in and out.
So I'll say 0.5 seconds ease-in-out and from there let's add a hover effect. So hover and let's change the color to $warning which is something that we added if you open up your variable file, you can see we added that very early on is that $warning style. So let's test this out and see if this is working. Okay we definitely have a better size there it's much clearer that that's a trash icon and now if I hover over it you can see that it turns red and it fades in and out.
So that's what we're looking for and let's test to make sure it works. If I click this it deleted that one and if I click this again it deleted them. If I hit refresh, they should no longer be there, so everything is working perfectly. I've also gotten rid of all of the demo data as well. So we now have a nice looking trash icon and we saw how we were able to use just standard Sass and CSS styles in order to update the look and feel of our icons and in the next guide we will add our sign out link.