Alright go ahead and head over to scheduleCourse.scss. Let's start adding in some styles:

scheduleCourse.scss

.schedule-course {
    height: 55px;
    width: 280px;
    background: white;
    box-shadow: 0 2px 14px 0 rgba(0,0,0,0.2);
}

So we had problems with labels in the past with margins and bottoms, now just to avoid this and not really have to hunt down any bugs and worry about it, and since using divs is basically exactly the same as labels. Let's go and get rid of this label in scheduleCourse.js and let's just call it a div.

Now let's get out of that file, and check on our app. We just need to style some of the text in there and then add in some empty slots and fix the action. So we got the background and box-shadow pretty good so let's go back to our code and add:

scheduleCourse.scss

.schedule-course {
    height: 55px;
    width: 280px;
    background: white;
    box-shadow: 0 2px 14px 0 rgba(0,0,0,0.2);

    color: $color-subtle-black;
    font-family: $font-lato;
    font-size: 16px;
    text-align: center;
}

Now it's not centered the way we want it. It is centered on the row access but not the column axis, so let's go ahead and use something like grid to schedule it. So in scheduleCourse.js we have an action and let's set this up on a grid so that it looks like our design.

We already know that this is 32 pixels by 32 pixels, so what we can do is set a row and then 32 pixels and then just extend our label across the entire thing have and then have this one at the end. So super simple. So let's go into scheduleCourse.scss and say:

scheduleCourse.scss

.schedule-course {
    height: 55px;
    width: 280px;
    background: white;
    box-shadow: 0 2px 14px 0 rgba(0,0,0,0.2);

    color: $color-subtle-black;
    font-family: $font-lato;
    font-size: 16px;
    text-align: center;

    display: grid;
    grid-template-columns: [title-s] 1fr 32px [title-e];

    &__title {
        grid-column: title-s/title-e;
    }
}

Then we need to go into scheduleCourse.js and change schedule-course__label to schedule-course__title.

Now you will see that it is p erfectly centered and has its own grid. It almost looks like it isn't centered, but if you look at the left of the label you will see that there is a lot of space, and that on the right there isn't, but when factor this in: it is perfectly centered. Now what we need to do is place the button here. So let's make some changes:

scheduleCourse.scss

.schedule-course {
    height: 55px;
    width: 280px;
    background: white;
    box-shadow: 0 2px 14px 0 rgba(0,0,0,0.2);

    color: $color-subtle-black;
    font-family: $font-lato;
    font-size: 16px;
    text-align: center;

    display: grid;
    grid-template-columns: [title-s] 1fr [action-s] 32px [action-e space-s] 12px [space-e title-e];
    grid-template-rows: 1fr;

    justify-items: center;
    align-items: center;

    &__title {
        grid-column: title-s/title-e;
        grid-row: 1/2;
    }

    &__action {
        grid-column: action-s/action-e;
        grid-row: 1/2;
    }
}

Now if you want to go the extra mile and naming it space-s and space-e. Obviously, we are not going to be using these, but it might be helpful for other Developers if they pull down your work from github to see this in the scheduleCourse.SCSS to show there is space. Do anything that you can to reduce comments.

I also want to move all of my styles down here. So I can see my grid up top and my styles down below. It's really good to make your code clean.

scheduleCourse.scss

.schedule-course {
    display: grid;
    grid-template-columns: [title-s] 1fr [action-s] 32px [action-e space-s] 12px [space-e title-e];
    grid-template-rows: 1fr;

    justify-items: center;
    align-items: center;

    &__title {
        grid-column: title-s/title-e;
        grid-row: 1/2;
    }

    &__action {
        grid-column: action-s/action-e;
        grid-row: 1/2;
    }
}

.schedule-course {
        height: 55px;
    width: 280px;
    background: white;
    box-shadow: 0 2px 14px 0 rgba(0,0,0,0.2);

    color: $color-subtle-black;
    font-family: $font-lato;
    font-size: 16px;
    text-align: center;

}

Now this looks good, but we don't want a plus sign right here.

So what we can do is easily change this. So let's go in to our scheduleCourse.js and command + click into action, which will take us to action.js. You will see that we have this action as a default className, so what we can do is tell it by default with will have action-remove. So let's remove this comment as well and provide action-remove by default to this className. So then go into scheduleCourse.js, and update our action to:

scheduleCourse.js

this.props.toggleEnrolled(this.props.id)} className="schedule-course__action action-remove"/>

That should change it. It is now action-remove. This looks close to our design. There's only a couple things remaining here, and all we have to do is add in the empty items, center this properly, and get the progress tracker in.

So let's center this quickly before we end this video. Let's inspect our grid one more time and select the schedule. So let's go into schedule.scss, and make some changes to our repeats, and align our content:

Everything is looking pretty good, but we need to do some work on our logic to fix our progress tracker. So let's go commit our code. So git status, git add ., git commit -m "styled schedule course component and refactored schedule grid template rows", and git push origin master. I'm also going to push to my Heroku so let's say git push heroku master. I'll see you in the next video where we'll get on to the next problem.

Resources

• Source Code