I'm going to go to my newsletter-latest.scss. It should be in there. We have a lot of files at this point. Basically, it's the border: 1px solid $color-gray-E6. We'll copy that, and let's close out of newsletter-latest.scss, and head over to requests.js in our requests folder.

We're going to apply it to the requests tags. Let's say .requests and search. Use command + shift + f to get up there or click on the search icon. What I'm going to do is go into request.scss, and I'm going to apply this.

requests.scss

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

    border: 1px solid $color-gray-E6;
    border-radius: .5rem;

That should be good. You'll see that we have our border now. Now that we're displaying that border, let's see what we have to do. We have our border. This is all moving.

Let's go ahead and change the icons based on the status. Let's look at our design. You'll also see that this is taller in our desig than it is in our application. This is only filling up with content. I kind of like that to be honest. You can change that if you want. It should be pretty easy.

All you have to do is change the height of request to something like 100%. That might fix it. No, that didn't fix it. Anyway, I don't want to worry about that. That's not too big of a deal. You can figure that out if you want. Honestly, I think it's better like this anyway, so feel free to mess around with that if you want.

What we want to do is change these icons. Let's go into the design. What it wants is this kind of bench icon, which is going to be a wrench. We made it a wrench.

Now, you can't really get to the complete, which means there's no complete ones. Looks like it's a check. You want it to be a check.

Let's go into requestsItem, and we'll switch it based on the status of the item. What we'll do is we'll take the icon, and we'll make it a string, so we'll say:

requestsItem

<div className='requests-item__date'>
    { parsedDate.getMonth() + 1 }
    /
    { parsedDate.getDate() }
    /
    { parsedDate.getFullYear() - 2000 } 
</div>
<Button className='requests-item__move' icon={iconString} callback={() => this.handleStatus()}/>
<div className='requests-item__description'>

Then we come up here and say:

requestsItem

render() {
    const { title, body, date, imageUrl } = this.props;
    const parsedDate = new Date(date);

    var iconString = 'fas fa-wrench';

Now, if the status is different, so let's make sure we're getting status from props.

requestsItem

render() {
    const { title, body, date, imageUrl, status } = this.props;
    const parsedDate = new Date(date);

    var iconString = 'fas fa-wrench';

Then we want the complete one. For the complete one, I'm going to have to reference FontAwesome.com because I don't know what that icon could be. I think I think it's check square. Yeah. fa-check-square. So let's go in here, and let's say:

requestsItem

var iconString = 'fas fa-wrench';

if(status == 'in-progress') {
   iconString = 'fas fa-check-square'
} else if(status == 'complete') {
   iconString = 'fas fa-exclamation-triangle'
}

Now, let's just rename this to something more relevant. We don't want iconString, so let's say moveButtonIcon. Then I just replaced them all.

requestsItem

var moveButtonIcon = 'fas fa-wrench';

if(status == 'in-progress') {
    moveButtonIcon = 'fas fa-check-square'
} else if(status == 'complete') {
    moveButtonIcon = 'fas fa-exclamation-triangle'
}

Let's go to our application. Let's go log in, go to requests, or at the wrench. Let's move it to in-progress. You'll see now that it's the check so that we can move it to complete.

Here, it's got the exclamation triangle so that we can move it to pending again. If we wanted to. That works.

Now, let's just get the right icons in for the main icon right here. Let's go in here. Basically, we can put it in the same place, so let's take fa-exclamation-triangle out and we'll say:

requestsItem

return (
    <div id='requests-item' className='requests-item'>
        <Icon className='requests-item__icon' icon={mainIcon}/>
        <div className='requests-item__title'>

Then we'll say:

requestsItem

var moveButtonIcon = 'fas fa-wrench';
var mainIcon = 'fas fa-exclamation-triangle'
if(status == 'in-progress') {
    moveButtonIcon = 'fas fa-check-square'
    mainIcon = 'fas fa-wrench'
} else if(status == 'complete') {
    moveButtonIcon = 'fas fa-exclamation-triangle'
    mainIcon = 'fas fa-check-square'
}

That should all be good. Let's go check it out. It's a lot of strings. Let's log in, go to requests, and you'll see it's the triangle with the wrench.

Then in here, it's the wrench with the check.

Then in here, it's the check mark with the exclamation triangle.

That's really nice and complete. What we need to do now is implement this hover animation in here. When we go into the design, you'll see that when you hover over it, it displays the type. It displays this icon on here. It will display the wrench on this one, and it will display the check on this one.

Let's go implement that right now. Let's see. This is in the requests-box.scss. Let's commit our code, and then get into that in the next video. It's going to take a little bit. We are going to have to write some JSX and align it on the grid and all that. So let's say:

Terminal

git status
git add .
git commit -m "added cases for icons for each request type in the requests.js component"

Well, the requestItems.js, but it's the same thing.

Resources

• Source Code
• Font Awesome