We are going to make it so this lines up the way it should. And we're also going to make it so that when we have a course open it will maintain the styles that we have when we hover. So to get started let's go ahead and get into our code real quick. And you also notice that they are automatically open when we go in

even though we clearly have our variable set to false.

And the reason this is happening is because we put in a string rather than an actual boolean. You might not have done that. But if you have just delete that and make sure it says false without the ticks here.

So let's go ahead and save that, then let's go to the browser and you'll notice that they are automatically closed.

Ok so the next thing we want to do is add in the style that keeps the cart there when we have it open. The way we can do that is by first checking the tags we have here and we have a course_description, we have of course, that's what we'll be using and then we have course selected and course_title-container. OK so let's go ahead and we have to add that in here with string interpellation. So like we've been doing, back ticks inside of brackets and we want to keep the original tag so course and then we want to add some tags based on whether or not the course is open.

So we want to put in course_selected and if it's closed we don't want to add anything else let's just put null or you can just put apostrophes like this.

className={'course ${course.open ? 'course_selected' : ''} '}

OK so now let's go add these into our scss here. So in courseLibrary.scss let's add in .course_title-container and then add in course selected and then course.

.course_title-container {

}

.course_selected {

}

.course {

}

OK, so let's go back here and this is where course_title-container is. So the reason we're using that is because we want it to take up about 80 percent of this so we can lineup else where so they can line up over here.

So in our code let's write width let's say 85 percent and then display well let's check what this looks like first. So we have width 85 percent that pushes it over and that works and all but we need to add some flex styling so display flex justify content. Let's do a left and align items center.

.course_title-container {
    width: 85%;
    display: flex;
    justify-content: left;
    align-items: center;
}

Okay, so the next thing we want to do is make the style remain when we have it open, like I said we were going to do first. So when it's selected we want a background color of white and then we want the box shadow. I'm just searching box shadow I'm using command f to find box shadow, let's add in this box shadow when we have it selected and that should be good.

.course_selected {
    background-color: white;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.21);
}

Now you'll notice that it's working when we hover and open it, it stays. When we just hover it goes away. Now let's go ahead and make sure it's animating back and transitioning back you'll notice when we have hover over it has a transition but when we leave it automatically goes away. We also want to give this a default height of about 60 pixels just in case so they are the minimum height is 60 pixels, if for any reason it could go lower.

So let's say on course min-height is 60 pixels, then let's give it the transition of all .4s ease.

.course {
    min-height: 60px;
    transition: all .4s ease;
}

Let's go back in and you'll notice it moved a bit and that's because of our min height, let's remove that and it goes back up. So that's just to ensure that they are always going to be at least 60 pixels. Okay so we have that in and that's working, these are lining up nicely. So thats it for this guide.

In the next guide we are going to add some styles to the main containers so this goes all the way down and then we will get back into our schedule component and style this a little bit so it looks nicer. If you want to just go ahead and compare this to this app and you'll notice we're kind of getting closer. We've got the majority of the functionality down there's a little bit we have to do over on the side but we will get to that after we style this component a little bit better.

All right let's commit our code. I'm just going to say added hover styles then I'm going to git push origin master. Okay, I will see you in the next guide.