- Read Tutorial
- Watch Guide Video
Let's get the styles and for that button. Open up newsletter-latest.scss.
newsletter-latest.scss
&__button {
grid-row: s/m;
grid-column: s/e;
justify-self: end;
align-self: end;
border-radius: 1.6rem;
border: 1px solid $color-gray-4D;
width: 7.4rem;
height: 2.4rem;
}
That looks a lot better.
Now what we need to do is give it a couple more styles, specifically for the text. So let's just throw that in now.
newsletter-latest.scss
&__button {
grid-row: s/m;
grid-column: s/e;
justify-self: end;
align-self: end;
border-radius: 1.6rem;
border: 1px solid $color-gray-4D;
width: 7.4rem;
height: 2.4rem;
font-size: 1.4rem;
line-height: 1.7rem;
text-align: center;
}
So what that's going to do is it will allow us to have text in there too. Like it's going to be styled already, so we don't have to worry about that once we get into the text and not just the icons. Now what we want to do is center this icon right in the middle. Right now it aligned with text-align but it's not really in the middle. That's because we have an 'i' tag with the div.
So what we need to do is give it a margin top or something like that. We could also give it a flex or a grid container. So let's try that on the button.
newsletter-latest.scss
&__button {
grid-row: s/m;
grid-column: s/e;
justify-self: end;
align-self: end;
border-radius: 1.6rem;
border: 1px solid $color-gray-4D;
width: 7.4rem;
height: 2.4rem;
font-size: 1.4rem;
line-height: 1.7rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center
}
Let's go ahead and look at that one more time.
Looks pretty good. Let's give it some space here. Looking at the design, we can see that it is about 10 pixels and 12 pixels. Let's add those in but let's not do it on the global Button styles because we don't want all of our buttons to do that. We're actually going to have to move our button styles.
Now here's what I'm trying to say. if we were to create a new button, it wouldn't be able to access the styles we've already made because we've declared it right within our newsletter-latest. We don't want to apply most of these styles here. We want to take these all out, this is purely going to be where we position it on our on the grid.
Now let's go back to our newsletterLatest.js and you'll see that the button we're calling in the scss is specifically this instance. Now where we want to apply the styles is the this button function itself
We want our newsletter-latest.scss button to only have this in it.
newsletter-latest.scss
&__button {
grid-row: s/m;
grid-column: s/e;
justify-self: end;
align-self: end;
margin-right: 1rem;
margin-bottom: 1.2rem;
}
Next create a new file and let's call it button.scss and let's just copy and paste our styles in there.
button.scss
.button {
border-radius: 1.6rem;
border: 1px solid $color-gray-4D;
width: 7.4rem;
height: 2.4rem;
font-size: 1.4rem;
line-height: 1.7rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center
}
OK sweet. So let's make sure we import it into main.scss. Excellent.
You'll see that we still have our button style here and now it's got the margin that we need, and we can still use this across our application without having that margin on every single button. Plus, when we click on our button, It's saying trying to handle edit, so we know that it's still working. Let's go ahead and place the new newsletter button on our newsletter grid.
Now can we can do it really quickly so we're going to do it in this video, and we have all the styles, so we just need a place in the right place. What I want to do is first take this button function and put it in its own file so we can import it into different files. So here's what we've got to do. We need to import it in here so let's say import Button from '../button'; And then let's go make this file called button.js in our component's file and add in our function.
button.js
import React from 'react'; export default function Button({className, callback, text, icon}) { if(icon) { return ( <a onClick={callback} className={`${className} button`}> <i className={icon}></i> </a> ) } }
Cool. Now we'll handle the text case when we get around to it. But for now let's just do this cat. Let's go into our newsletterGrid.js and let's put a button in. Let's make sure that we import it up at the top with import Button from '../button'; like we did in our other file. Then we add in our button down below.
newsletterGrid.js
return ( <div className='newsletter-grid'> <Button className='newsletter-grid__button' icon='fas fa-plus'/> <NewsletterBox date={new Date()}/> <NewsletterArchive/> <NewsletterLatest {...latest}/> </div> )
Let's look at the parameters one more time, so obviously we need a callback so we can do something with this button. Let's write a function out here in a newsletter grid.
newsletterGrid.js
handleAddNewsletter = () => {
this.props.history.push('/newsletter/new');
}
That should work. Instead of just using a console log, we just went ahead and setup the normal functionality that we need. We might not have access to history but if we don't we'll either import it or pass it down as a prop in the future. So anyway let's add the callback to our button.
newsletterGrid.js
return ( <div className='newsletter-grid'> <Button className='newsletter-grid__button' icon='fas fa-plus' callback={() => this.handleAddNewsletter()}/> <NewsletterBox date={new Date()}/> <NewsletterArchive/> <NewsletterLatest {...latest}/> </div> )
So that should be great. But now we need to place it. Let's go see if it's rendering and if it has the right icon first. You'll see we have our button except for our boxe is all the way down below.
And it doesn't look good. It should still be a super simple fix, because all we need to do is basically add in another row or move the button out of our grid a little bit since we have everything else we have is perfect except for this button right now.
And we already have a margin so we don't really want to remove that. We don't want to add another row. But it would be just as good and easy to basically just place it over by our other button and pull it up a bit. So let's try that.
Let's open up newsletter-grid.scss and what we want to do is manually tell it where we want it to go, or else it's going to push everything else around.
newsletter-grid.scss
&__button {
grid-row: add-s/add-e;
grid-column: latest-s/latest-e;
justify-self: end;
align-self: center;
margin-right: 1rem;
}
And up above that we need to add in a new row, and let's also take out our row gap.
newsletter-grid.scss
.newsletter-grid {
justify-content: center;
grid-row: content-s/content-e;
display: grid;
grid-template-rows: [add-s] 4.7rem [add-e s box-s] 16rem [box-e archive-s] 1fr [archive-e e];
grid-template-columns: [box-s archive-s] 16rem [box-e archive-e latest-s] 960px [latest-e];
grid-column-gap: 6.1rem;
If we check, that still isn't working, and it's because we never really positioned our box component in our grid correctly. So let's open up newsletter-box.scss and let's fix that.
newsletter-box.scss
.newsletter-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];
Now we just need to add a margin top to our archive component since we took out the row gap.
newsletter-archive.scss
.newsletter-archive {
margin-top: 3.85rem;
grid-row: archive-s/archive-e;
grid-column: archive-s/archive-e;
display: grid;
grid-template-rows: [title-s] 2.7rem [title-e items-s] 1fr [items-e];
We can also take out the empty &__items selectors that are in here as well. Let's look at our app.
That looks good. Let's go ahead and make sure that the button works. Ok so when we click on it, it's not working which means we probably have an error. We can quickly fix that but I'll show you how to do that in the next video because this one is getting really long.
Let's commit our code.
git status git add . git commit -m "created and placed add newsletter button on newsletter grid"