Let's go ahead and start with the title. Let's go into our code and since we have all of our grid here, what we want to do is, just to keep things clear for you, let's copy everything here and I'm just going to paste a down here at the bottom.

We're just going to get rid of everything in these selectors and we'll write the styles separate from the grid-styles. Just to keep things extremely clear or as clear as possible. Once you mix in a bunch of styles with the grid it can get a bit confusing.

We are leaving the grid. I'm going to get rid of the background-color, this cornflowerblue on the icon. We are leaving the entire grid. I'm just using another set of selectors here so we can be more clear.

requests-item.scss

.requests-item {
    &__icon {

    }
    &__title {

    }
    &__tenant-unit {

    }
    &__arrow {

    }
    &__date {

    }
    &__move {

    }
    &__description {

    }
    &__description-img {

    }
    &__description-text {

    }
}

I'm also going to get rid of description-img and description-text since we won't be using those on our grid up at the top. In here let's start with the icon. Let's just say font-size is like 2rem, and see how that does.

Let's go into Chrome, and see how big it is. So maybe a little bit bigger so like 3rem or like 30px. That should be good. Yeah, that's good for now. Let's look at the design. It looks about the same size.

Now let's go onto the title. What we want to say color is 40. The thing is we probably already have color on it because of our global styles. So let's just say font-size is 1.8rem, font-weight: 500, and line-height is like 2.3rem. Let's check it out. It should be better.

That's looking good. It looks like our design. Now let's get in this red style here. Obviously, the color is going to be:

requests-item.scss

.requests-item {
    &__icon {
        font-size: 3rem;
    }
    &__title {
        font-size: 1.8rem;
        font-weight: 500;
        line-height: 2.3rem;
    }
    &__tenant-unit {
        color: $color-red-BA;
        font-family: $font-encode-cond;
        font-size: 1.3rem;
        line-height: 1.6rem;
    }

Let's try that out. Just those four lines, and that let's see requests. That's looking pretty good.

I already know that we're going out some spacing problems, but we'll fix that when we get to it. Let's just get in the rest of these styles here. So the next thing we want to do is the arrow. Let's see what that looks like when we put some styles in.

We might have to make an icon manually instead of using Font Awesome. This should be fine. We could even just rotate it, and it could be really nice. It doesn't matter, but we might want to take another approach just to see how we can write an arrow from scratch.

We've done it before. We did it in the the last application we built for the drop down menu or the drop down on the items. We built one with borders, but we're using Font Awesome for it now. So let's make this color: $color-gray-4D. Now let's say:

requests-item.scss

    &__tenant-unit {
        color: $color-red-BA;
        font-family: $font-encode-cond;
        font-size: 1.3rem;
        line-height: 1.6rem;
    }
    &__arrow {
        color: $color-gray-4D;
        font-size: 2rem;
        line-height: 1.6rem;
    }

I just added those two styles. Let's check it out on the browser. Let's make it a tiny bit bigger let's say 2.4rem or 24px. It's still tiny but small. We'll just make it 3rem. So 3rem on the arrow That's it. Yeah, that's perfect.

It might even need to be bigger, but I think that looks good. Let's go ahead and apply some styles to the date now. It should be pretty easy, it's just we might need to override the color because it looks a little lighter in this design. I don't think it is. I think it's just the font weight. So let's say:

requests-item.scss

    &__date {
        font-size: 1.4rem;
        line-height: 1.7rem;
    }

Now, let's go to the move and do that. Well, we don't need to do that now because we're not even doing it, and it doesn't even need styles because we've already set up the icon buttons correctly. It's not even showing.

Now let's throw in the description styles. We could apply this directly to the text, so let's do that. We could apply it to straight to the description and it would inherit it, but it doesn't really matter. Let's just do it in the text to be more precise. Let's just say:

requests-item.scss

    &__description-img {

    }
    &__description-text {
        font-size: 1.4rem;
        line-height: 1.7rem;
    }
}

That looks better. Now that really did a lot. Let's go ahead and fine-tune our grid now. You'll see that things aren't spaced very well still, and our design looks a bit different

We'll do that in the next video. Let's go ahead and commit our code, and then fix it up in the next guide and then move on to the functionality. Let's go to our code here. Let's say git status, git add ., and let's say git commit -m "styled request items jsx".

Resources

• Source Code