So what we want to do is get them in the top right here.

That should be really easy, all we need to do is we need to go into our code, close the terminal, and we need to go to our signin.scss and then go to the bottom here and say &__quick-links or whatever we called it, maybe we called it details then you just say grid row is 1/-1 and grid column is 1/-1. Now what we'll do is we'll say justify-self is end and align-self is start I believe, let's try this out.

signin.scss

&__details {
    grid-row: 1/-1;
    grid-column: 1/-1;
    justify-self: end;
    align-self: start;
}

So these four lines I must have named it something else. Okay, it is details, interesting. All right then, no chill involved. Let's see details, maybe it's because we didn't define a grid or a column axis. Let's do this, let's try taking this grid-column: 1/-1 and what I want to do is say, in signin form, let's just say & > * and let's apply it to every one of them.

signin.scss

.sign-in-form {
    & > * {
        grid-column: 1/-1;
    }
}

Now what we need to do is go to form here and just say grid-columns is 1fr.

signin.scss

&__form {
    display: grid;
    grid-template-rows: [email-s] 64px [email-e password-s] 64px [password-e] minmax(20px, 289px) [line-s] 2px [line-e login-s] 38px [login-e];
    grid-columns: 1fr;
}

Let's see what happens when we do this, huh well okay. Oh, I know why it's not working. Okay, I'm going to comment out grid columns and I'm going to comment out what we just did here with the & > *, and let's go into our details component, and we need to put the class into our className here. So let's pass in classNames as a prop and let's replace these with backticks and let's put braces around it and then with the dollar sign and some more braces will say className and then a space right here.

details.js

import React, { Component } from 'react';

class Details extends Component {
    render() {
        const { className, title, links } = this.props;
        return (
            <div className={`${className} details`}>
                <div className='details__title'>{title}</div>
                <div className='details__links'>
                    {
                        links.map(link => {
                            return <a key={link._id} onClick={link.onClick} className='details__link'>{link.title}</a>
                        })
                    }
                </div>
            </div>
        )
    }
}

export default Details;

Okay, so I just passed the className prop into our details which we weren't doing before. You'll see now it's where it belongs,

although the styles aren't really good. So let's go ahead and fix those, if you hover over this, you'll see that it looks pretty nice.

Okay, so let's go into our code and let's go into our style folder and let's create a new file that's called details.scss, let's import it into main.scss

main.scss

@import 'layout';
@import 'headernavbar';
@import 'auth/signin';
@import 'auth/signup';

@import 'page-title';
@import 'form-fields';
@import 'details';

And let's go back to details.scss and let's say .details and then in here we'll say display is grid,

details.scss

.details {
    display: grid;
}

and then let's go back to our application and you'll see it's a grid but it's doing exactly what it should be doing, it's saying hey let's take the title and the links and put them in a grid. Although the links have the links in there as well we need to make the links have a grid too. So let's go into our code and say &__links and also say display is grid okay.

details.scss

.details {
    display: grid;

    &__links {
        display: grid; 
    }
}

And that looks good now.

Lets go get in some of the gaps and then the more specifics. So let's go into our design here and check those gaps, it looks like these are all about 10 pixels and then this is 13 pixels. We'll deal with that in a second, so let's say grid row gap on the links is ten pixels. And then let's say that on the details the grid row gap is 13 pixels.

**details.scss

.details {
    display: grid;
    grid-row-gap: 13px;

    &__links {
        display: grid; 
        grid-row-gap: 10px;
    }
}

And then we're going to need to apply a patting bottom on the quick links title of 7 pixels, and then we need to apply this border. Okay so let's say padding-bottom is, what was it again? 7 pixels and then it had a border-bottom of 1 pixel solid CCC, that's good.

details.scss

.details {
    display: grid;
    grid-row-gap: 13px;
    padding-bottom: 7px;
    border-bottom: 1px solid #ccc;

    &__links {
        display: grid; 
        grid-row-gap: 10px;
    }
}

Now what I want to do is, let's check it out first, it looks kind of good but a little messed up.

And that's because we applied the border bottom to the entire details not a title. So what we need to do is take these two attributes and we need to say &__title and put those in here.

details.scss

.details {
    display: grid;
    grid-row-gap: 13px;

    &__title {
        padding-bottom: 7px;
        border-bottom: 1px solid #ccc;
    }

    &__links {
        display: grid; 
        grid-row-gap: 10px;
    }
}

Now you'll see it looks better.

Okay so that's most of them, we still need to get more specifics in there. Let's see, we want to take, yeah this is what I want. I was thinking I was applying these directly in signin.scss in the details here but I'm not, so that's good.

We want to apply it in here so it's like this on everywhere else we use this component. Okay, so what we need to do is we need to apply the specific styles to the title and these items here. So for this Quicklinks one we've got about, we know the color is going to be #808080 by default same with the font family because we put it in the body tag.

So all you really need is a font weight and a font size, okay so font weight is 600, font size 14 pixels. So let's go to title and say font size 14 pixels, font weight is 600. And then let's go to our links now and get those styles. Okay, font size 14 pixels, that looks like it's about it. Okay, so let's go to links, and let's just say font size 14 pixels. And then we're going to need and underline on each of those so let's just say in links & > * we'll select all the children and we'll say that, I guess it probably already has those because they're a tags so let's go check it out.

details.scss

.details {
    display: grid;
    grid-row-gap: 13px;

    &__title {
        padding-bottom: 7px;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
        font-weight: 600;
    }

    &__links {
        font-size: 14px;
        display: grid; 
        grid-row-gap: 10px;
    }
}

I guess it doesn't on the a tags now. Okay, so we need to apply those borders down there okay. So we need a say & > * and we'll say text-decoration-line: underline;. Let's try that, and yeah that looks good.

You'll even notice it's so accurate, look at the G here in forgot password and how it goes over the line and it basically omits the line there. You'll see in the design it does the same exact thing, or almost the same thing, very similar.

Okay so what we need to do is we need to, I swear the color is off a bit but I guess it's not you see it has #808080, you'll notice when you remove those makes it look bad. Dang just these two attributes change it so much.

So let's go ahead and let's look at our design. Okay so this is the problem, you see this line down by hte login button, it's stopping here now. We need to specify that it goes across the entire grid. So let's go ahead and let's make it extend all the way to the end there by going into our signin.scss and saying that the line extends on the grid column Axis 1/-1 and we want it to go from start to finish.

signin.scss

.sign-in-form {

    &__line {
        grid-row: line-s/line-e;
        grid-column: 1/-1;
        border-top: 1px solid #ccc;
    }

}

Okay, now the reason that's not working is because we don't really have a grid column. So let's go up here to form and uncomment grid-template-columns 1fr and then we'll try that. Okay, it looks like it's still not working, let's see we've got the button, we've got the line, got that form..... Interesting, that should work. Okay, let's apply them all to the grid column 1/-1,

& > * {
    grid-column: 1/-1;
}

and that works.

So it might have been that we needed to apply it to the button, but it doesn't matter, we'll do that. Okay, so grid column on all of those items 1/-1. Okay, so that's it for this video, that kind of finishes off the design and all the front end styles of this page. Now when we make it mobile responsive we'll fix that. For the most part though it's looking pretty nice.

Now it's really easy to make it mobile responsive all you have to do is media query and then just change where this exists on the grid. Just a new set of template rows, like literally if you just change that make it go right there on mobile it will look really good.

So we'll do that in a separate set of videos. But let's build out the application first. So that looks really really good, all these are lining up really nice on our grid. Let's go ahead and commit our code and then let's hop into the next video where we will build out the sign up page.

It's going to be a lot quicker since we now have all of these components built and styled, so all we'll really have to do is place them on the grid after we do the JSX. So let's commit our code.

Terminal

git status
git add .
git commit -m "styled details quick links component"

See you in the next video

Resources

Source code