The styles are basically the same as our newsletters. So we're just going to use the styles from our newsletter box. Now, the thing is it contains a lot of different logic. You'll see that in the design. It basically does a lot of different things.

So we're not going to use the exact same component, so what we're going to do is just make a whole new component because it really doesn't make sense to use the same component because they do a lot of different things. Now what does make sense is to use the same exact styles so when we come back after building the app we might refactor it to be one component.

So let's go ahead and let's go to our newsletter box and we're going to do just copy the entire component, and create a new component in requests and I'm going to call it requestsBox.js. Let's paste in the component and change the names to requestsBox and clear out the date data.

requestsBox.js

import React, { Component } from 'react';

class RequestsBox extends Component {
    render() {
        const { count, title } = this.props;
        return (
            <div className='requests-box'>
                <div className='requests-box__count'>{count}</div>
                <div className='requests-box__title'>{title}</div>
                <div className='requests-box__point'></div>
            </div>
        )
    }
}

export default RequestsBox;

Cool. Now let's throw three of them into our boxes and then we'll pass in a count and title for each and then we'll bring the styles over because we changed classNames. So open up requestsBoxes.js and let's add in our new box component.

requestsBoxes.js

import React, { Component } from 'react';

import RequestsBox from './requestsBox';

class RequestsBoxes extends Component {
    render() {
        return (
            <div className='requests-boxes'>
                <RequestsBox title={'pending'} count={2}/>
                in-progress
                complete
            </div>
        )
    }
}

export default RequestsBoxes;

Let's look at the browser and check this out.

You'll see it doesn't look like much. So this is a problem because we don't have any of the styles. So let's get rid of that background color in requests-boxes.scss and then let's add the styles that we have on our newsletter-box.scss into the boxes that belong in the new boxes. Let's make a new file called requests-box.scss.

requests-box.scss

.requests-box {
    grid-row: box-s/box-e;
    grid-column: box-s/box-e;
    align-content: center;

    height: 16rem;
    width: 16rem;
    border: .15rem solid $color-red-BA;
    border-radius: .5rem;

    color: $color-red-BA;

    display: grid;
    justify-items: center;
    grid-template-rows: [s] 8.1rem [m] 2.3rem [e];
    grid-template-columns: [s] 1fr [e];

    &__count {
        align-self: end;
        font-size: 7rem;
        line-height: 8.1rem;
        margin-bottom: 1rem;

        grid-row: s/m;
        grid-column: s/e;
    }

    &__title {
        align-self: start;
        font-size: 2rem;
        line-height: 2.3rem;

        grid-row: m/e;
        grid-column: s/e;
    }

    &__point {
        height: 4rem;
        width: 4rem;
        background-color: white;
        grid-row: s/e;
        grid-column: s/e;

        justify-self: end;
        align-self: center;

        transform: translateX(52%) rotate(45deg);

        border: .15rem solid $color-red-BA;
        border-bottom: none;
        border-left: none;
    }
}

So a lot of these styles we're not going to need but we'll come filter them out after we get this imported and see that it's working. Let's add this to main.scss.

Let's see what it looks like.

Cool, it's looking good. Now let's just go ahead and throw in the rest of our boxes and then clean up the styles a bit for that component and then we'll move on.

requestsBoxes.js

import React, { Component } from 'react';

import RequestsBox from './requestsBox';

class RequestsBoxes extends Component {
    render() {
        return (
            <div className='requests-boxes'>
                <RequestsBox title={'pending'} count={9}/>
                <RequestsBox title={'in-progress'} count={3}/>
                <RequestsBox title={'completed'} count={5}/>
            </div>
        )
    }
}

export default RequestsBoxes;

So let's go to requests-boxes.scss see what we don't want. Well, we only need to remove two things, the row and the column placement, because we alread have this nested inside of a component that places it on the grid.

I thought there would be more but most of the styles are the same. So we could even start putting mixins together because if all of these styles are the same, why write them twice? Why not just include it in a mixin. We'll get to that later on, if we even do, but just know that it's a good a good practice in SCSS to make mixins because we now have a bunch of styles written twice right.

We have requests box and newsletter box and they contain almost the same exact styles and we've done that in quite a few places. Now, it's probably not going to change much of the performance because it's going to write the code twice anyway when we compile it, but it will clean up your files and make things more readable and more condensed overall.

But that's all personal preference right now, we are not going to focus on that. Let's focus on react. So we have that in there now. Our boxes should be set up well. Let's quickly go set up a grid gap in our requests-boxes.scss so that our boxes are spaced apart.

requests-boxes.scss

.requests-boxes {
    // background-color: cornflowerblue;
    grid-column: boxes-s/boxes-e;
    grid-row: boxes-s/boxes-e;

    display: grid;
    grid-row-gap: 1.55rem;

}

Now this gets our boxes in but not functional. And you'll see that in our design it wants one to be red and the rest to be different.

So what we need to do is think about how we can get different data in here and how we can structure the model for each one of these items, and then we get we need to think about how we can have one of these be active. Let's commit our code and then get this functional on the next video.

git status
git add .
git commit -m "built requests box component and built a grid for requestsboxes"

Resources

Code at this stage