In this video, we're going to be building out this gradient that you see here in the design. So let's go ahead by going to our app and closing the terminal, and creating a new file under the components directory. I'm going to call it gradient.js.

All we need to do in here is say:

import React, { Component } from 'react';

class Gradient extends Component {
    render() {
        return (
            <div className="gradient"></div>
        )
    }
}

export default Gradient;

Let's use this somewhere and then apply some styles. Let's go to schedule.js, and throw gradient in next to our title. I used the auto-import feature. Just go ahead and import gradient.

Now let's apply the styles by going to main.scss. Hit return a couple times and enter in .gradient, the position is absolute, height is 100%, width is 100%, and then we need to apply a linear gradient to our background. So let's go ahead and create a couple of variables here: $color-purple: #6F48CE and $color-light-blue: #32CBE8;, and then let's apply our linear-gradient(120deg, $color-purple 0%, $color-light-blue 100%); the last thing we want to do is change the z-index to -10.

Then we are going to move these colors in a separate file. Let's call it variables.scss. Let's paste those colors in. Then import it into the top of main.scss.

Nice. It looks like its working although this is above it. So we need to do a couple things. So go into .schedule in main.scss and say that position is relative and also give it height: 100% and width: 100%. That should be good for now.

Let's move onto the next video where we will start developing these title styles. So let's commit our code. So git status, git add, and git commit -m "built gradient component". Alright, See you in the next video.

Resources

Source Code