When we click it and the background stays in this guide we're going to clean up our overall styles a little bit and make this run all the way down and add in some styles for the schedule employment.

So the first thing we want to do is let's grab this in our main.scss the schedule styles let's cut that and remove it to right below library since we'll be dealing with these, we'll clean these up a little later on where they're located in our app. Now I'm going to hit command + v to close this tree on the left-hand side of our text editor, just know that we are in main.scss. Okay, so the first thing I want to do is looking at this app we can tell that this is a little bit further over. And I want to kind of match this my schedule and make this a little bit wider. So let's make our width for our library a little bit less, let's do 62 percent and let's make the schedule width about 38 percent and save that and notice it pulls over a little bit and that's nice. Now let's make these extend down to the bottom. So for library put height of 100 view height and the same for schedule.

.library {
    flex-grow: 2;
    width: 62%;
    padding: 6rem;
    z-index: 1;
    height: 100vh;
}

.schedule {
    flex-grow: 1;
    width: 38%;
    height: 100vh;
    background: linear-gradient(118.95deg, #6F48CE 0%, #32CBE8 100%);
}

All right so the next thing we want to do is on our schedule let's align the text so text align center, let's give it a little padding so we can push it in a little bit so we can do that by saying padding 12 rem 6rem okay that should be good.

.schedule {
    flex-grow: 1;
    width: 38%;
    height: 100vh;
    background: linear-gradient(118.95deg, #6F48CE 0%, #32CBE8 100%);
    text-align: center;
    padding: 12rem 6rem;
}

All right now let's schedule the header to look a little nicer. We want to give it the border that we're seeing here. So let's start off by saying border none and then border left 1 pixel solid white and then let's make the text white. Okay, now let's decrease the size of it. So let's go with a font size of 20 pixels. That's looking a lot closer to that. Let's get the right font in there, by typing font family alegreya serif and let's give it a line high of 27 pixels. That pulled it down a little bit.

.schedule_header {
    border: none;
    border-left: 1px solid white;
    color: white;
    font-size: 20px;
    font-family: 'Alegreya', serif;
    line-height: 27px;
}

Okay so let's go ahead and add a few more styles. Let's see what this looks like when we expand it out a bit. Okay, let's add in some styles to make this look a little nicer on the slots. So in our schedule.scss let's add some of these. So first thing we want to do is push it away from the title here so lets say .schedule_slots margin top 65 pixels all right and that pushes it down about 65 pixels if you go into our schedule.js you can see that we put this class name in called schedule slots and that's what we're referring to right here so it's pushing down all the slots, the whole container for the slots about 65 pixels.

.schedule_slots {
    margin-top: 65px;
}

All right, let's see. While we're at it let's copy our slot styles and put it into our schedule.scss I think that should be it for the copying and pasting over into here. Let's go ahead and separate these a little bit now, so let's refer to slot. If you go into our schedule.js let's find that so we have our slot right here. Now let's just give it a margin of about 20 pixels to separate that, so margin 20 pixels and then auto.

.slot {
    margin: 20px auto;
}

Okay, sweet that separates it pretty nicely. And it looks like it's a little shorter than we needed to be so let's give it a good height. 55 pixels believe it should be. Yeah it's looking good. Now let's give it a width of 280 pixels to shorten it up a bit. OK. Now let's give it a box shadow, box shadow 0 2px 14px o and rgba(0, 0, 0, 0.2) that should be good. And you'll see that the really subtle shadow that's going to be applied to this as well.

.slot {
    margin: 20px auto;
    height: 55px;
    width: 280px;
    box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
}

So let's fix up these styles on the titles here and we have a course added. So we can do that by referring to our .slot_course here. Let's go ahead and let's see what should we do to make that smaller, let's go to our schedule.js so we have our slot here. Then we have our slot_title here. We could just directly refer to it so you understand how this works in slot itself. We can type out div and that will basically select this div you're seeing here slot_title.

Or we can put these styles in the .slot_title right up at the top, so let's go ahead and in here let's just put a font family of lato and a font size of 16 pixels. Actually while we're at it let's just get rid of the styles for .slot_title up here. Let's keep that padding so copy that delete it put the padding in here.

div {
    font-family: Lato;
    font-size: 16px;
    padding: 4px;
}

That should give us the same effect. Okay, so that's looking really nice. Let's look at our completed app and see what we have. We have the hover animation. In the next guide, let's take care of that hover animation and adding the rest of our courses from the trello board here.

So let's commit our code and then we'll get around to that. So git status, git add ., git commit -m "added styles to our components", git pus origin master. Okay, I will see you in the next guide.