We're also going to throw in the icons for when you hover. We're just going to complete all of the styles, and then in the next video, we'll make it completely functional and display the correct requests when we click on them.

All right. So let's do that now. Let's go into requests-box.scss and write these at the bottom of the file, since they'll overwrite some of the other styles.

requests-box.scss

.requests-box-active {

}

.requests-box-inactive {

}

Let's add in the styles.

requests-box.scss

.requests-box-active {
    background-color: $color-red-BA;
    border-color: $color-red-BA;

    .requests-box {
        &__title,
        &__count {
            color: white;
        }
        &__point {
            background-color: $color-red-BA;
            border-color: $color-red-BA;
        }
    }
}

.requests-box-inactive {

    .requests-box {
        &__title,
        &__count {
            color: white;
        }
        &__point {

        }
    }
}

Let's go ahead and apply this to our boxes just to see what it looks like.

requestBoxes.js

import React, { Component } from 'react';

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

export default RequestsBox;

This should apply to all of them.

Now it looks like our design. Now obviously the point is still too big, but we're going to change it later on when we fix things up. Tiny tiny bugs. OK. So that's good. Now what we want to do is implement the styles for the inactive boxes.

So let's go into the requests-box.scss and we want the border of color to be whatever it is in the design.

requests-box.scss

.requests-box-inactive {
    border-color: $color-gray-E6;

    .requests-box {
        &__title,
        &__count {
            color: $color-gray-4D;
        }
        &__point {
            display: none;
        }
    }
}

So let's see what it looks like with the inactive and then we will see what it looks like with with one active and one inactive. Open up requestsBox.js and let's look at the inactive first.

requestBoxes.js

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

That looks like our design for the most part. Yeah, I'm liking it, so what we want to do is instead of displaying them side by side, let's just provide the functionality because we know they're both working, and then we will see that.

So we need a way to determine if one of these is selected. So the way I want to do that is through react redux. We want to make it so whenever you click on a requests box, it will dispatch an action creator with a parameter which is going to be the title of the box that we introduce.

Or we can say "hey let's set all of them to default, except for the one selected. Let's set it to active." So that's going to be a little bit of a sprint. We'll just have to throw that in and it will be a lot of coding but not too much logic. It's pretty understandable. Maybe not for a lot of you but you'll come to see it as easy once we implement it.

So what we want to do is implement some callbacks into these and I want to do that right in requestsBox.js. We want to make this have a function.

requestBoxes.js

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

Let's try it out now and look at the console.

So what we'll do is end the video here and then the next video we'll get it completely functional.

Let's commit our code.

git status
git add .
git commit -m "added active and inactive style states for requestsbox component"
git push origin master

If you ever want to change a commit message you can type git commit --ammend, which will let you change the message. To finish you hit escape, then type :wq and hit enter to save that. I just thought that you should know that.

I'll see in the next video.

Resources

Code at this stage