- Read Tutorial
- Watch Guide Video
Let's go ahead and hop into that. The first thing I want to do is try and apply some styles to the logo, even though this might just make it so we have to write more code. So I'm going to say:
main.scss
.logo-main {
display: grid;
justify-content: center;
align-items: center;
}
This is just going to apply it to our image. So nothing moves, but if I remove justify-items: center on the home I bet it will be. Yes, so now it's styled, and nothing else is. If I get rid of this it will put it back over here.
That's what we could do that. That's another way of approaching it, but I think I want to go with justify-items: center here on the .home because that's less code. So I'm just going to get rid of logo-main and leave it like that.
Let's hop into the styles for the search bar. We need to look at our tags and see what we have in our searchBar.js, so let's head over there. I'm going to close home. Right now, we have our search-bar, our query, but that's not a className. So basically, we just have to search-bar and that's about it for the search bar.
Let's head over to our SCSS here, and create a new file called searchBar.scss. Now let's import this into our main, just at the bottom here. So let's say:
main.scss
@import './searchBar';
Now we have that set up, let's save our main.scss so that import works. Now, in searchBar.scss, let's just type out our tag. The reason we only need one is because of SCSS. We can make this super simple by just doing this. What we need to do is style our input. Let's go into our deal here and we'll say:
searchBar.scss
.search-bar {
input {
padding-left: 35px;
}
}
You'll see that it now pushes it over a little bit. That way we can put that search icon in there tha you see in the design and in my completed app. Okay. That's what that's for.
Now let's add in a color. Pretty obvious stuff. Let's make it a variable. I'm going to go into main.scss and say:
main.scss
$color-gray-one: #666666;
Now let's go to searchBar.scss and add the color and a box-shadow. Let's say:
searchBar.scss
.search-bar {
input {
padding-left: 35px;
color: $color-gray-one;
box-shadow: 2px 3px 28px 1px rgba(0,0,0,0.1);
}
}
It's basically going to be black with an alpha of 0.1, which will give us a really subtle shade. Now we're going to have to change up a little bit on the input to make this box-shadow look differently. Let's do that now. Let's say:
searchBar.scss
.search-bar {
input {
padding-left: 35px;
color: $color-gray-one;
box-shadow: 2px 3px 28px 1px rgba(0,0,0,0.1);
border: 0px solid transparent;
}
}
That looks a lot nicer. It literally looks like a small version of this. We have that shade in there. Do you see that very subtle shade?
Let's give it a border-radius of 5px to curve the border. You can see that it's very subtely down like that. It will be less obvious, the cut-off or the border, when it's bigger because it will only be 5px.
Now we need to make it bigger. Let's make it bigger by giving it a font-size. I'm trying to think of how we should do this. Let's just say:
searchBar.scss
.search-bar {
input {
padding-left: 35px;
color: $color-gray-one;
box-shadow: 2px 3px 28px 1px rgba(0,0,0,0.1);
border: 0px solid transparent;
border-radius: 5px;
height: 118px;
font-size: 40px;
}
}
That should increase the size. That looks great. Let's see what we need to do now. It looks like it's a little too small.
What else we need to do on the search bar? We need to add in the placeholders so it doesn't just say Search Daily Smarty. Well, we have a placeholder, but we need to make it look like a placeholder, not like there's actually text in there. So what we can do in our searchBar.scss is say:
searchBar.scss
.search-bar {
input {
padding-left: 35px;
color: $color-gray-one;
box-shadow: 2px 3px 28px 1px rgba(0,0,0,0.1);
border: 0px solid transparent;
border-radius: 5px;
height: 118px;
font-size: 40px;
&::placeholder {
color: #B3B3B3;
}
}
}
Save that, and that makes the color look exactly like what we have here. Now, let's see what we need to do. Now let's make the focus on the outline go away. We don't want that. We want it to look something like this. We just want the box-shadow to increase. So let's say:
searchBar.scss
.search-bar {
input {
padding-left: 35px;
color: $color-gray-one;
box-shadow: 2px 3px 28px 1px rgba(0, 0, 0, 0.1);
border: 0px solid transparent;
border-radius: 5px;
height: 118px;
font-size: 40px;
&::placeholder {
color: #B3B3B3;
}
&:focus {
outline: none;
box-shadow: 2px 3px 20px 1px rgba(0, 0, 0, 0.3);
}
}
}
This is going to be a little more black. Click on it, and you'll notice that's in there nicely now. Now we could add a nice transition by saying:
searchBar.scss
.search-bar {
input {
padding-left: 35px;
color: $color-gray-one;
box-shadow: 2px 3px 28px 1px rgba(0, 0, 0, 0.1);
border: 0px solid transparent;
border-radius: 5px;
height: 118px;
font-size: 40px;
transition: all .2s ease;
&::placeholder {
color: #B3B3B3;
}
&:focus {
outline: none;
box-shadow: 2px 3px 20px 1px rgba(0, 0, 0, 0.3);
}
}
}
Let's see if that works. That looks beautiful. Let's put in the transition. It looks good.
What we want to do is again put the p-tag back in, and go to searchBar.js and add the p-tag that says Press return to search. So let's say:
searchBar.js
return ( <form className="search-bar" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> <Field name="query" component={this.renderInput}/> <p>Press return to search</p> </form> )
That should add that in right here somewhere. Ok, it's right there.
Now let's apply some styles to make this look a little better. What we'll have to do to get this to the right is actually put another div in here, and apply some styles. So what I'm going to do is I'm going to cut this, and put a div here. I'm going to give this a className of search-bar__wrapper.
searchBar.js
return ( <form className="search-bar" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> <div className="search-bar__wrapper"> <Field name="query" component={this.renderInput}/> <p>Press return to search</p> </div> </form> )
Then we can head to our searchBar.scss here, and at the top here I can say:
searchBar.scss
.search-bar {
.search-bar__wrapper {
}
input {
padding-left: 35px;
color: $color-gray-one;
box-shadow: 2px 3px 28px 1px rgba(0, 0, 0, 0.1);
border: 0px solid transparent;
border-radius: 5px;
height: 118px;
font-size: 40px;
transition: all .2s ease;
&::placeholder {
color: #B3B3B3;
}
&:focus {
outline: none;
box-shadow: 2px 3px 20px 1px rgba(0, 0, 0, 0.3);
}
}
p {
}
}
Make sure you get that in. Make sure it looks like what you are seeing on my screen. Then what I want to do is actually put all of these in here, the input and the paragraph. We don't have to, but it is within here so we might as well keep the hierarchy pretty nice.
searchBar.scss
.search-bar {
.search-bar__wrapper {
input {
padding-left: 35px;
color: $color-gray-one;
box-shadow: 2px 3px 28px 1px rgba(0, 0, 0, 0.1);
border: 0px solid transparent;
border-radius: 5px;
height: 118px;
font-size: 40px;
transition: all .2s ease;
&::placeholder {
color: #B3B3B3;
}
&:focus {
outline: none;
box-shadow: 2px 3px 20px 1px rgba(0, 0, 0, 0.3);
}
}
p {
}
}
}
What we want to apply to this search-bar__wrapper before the input is some grid styling. We want to get the effect where the press return to search is on the right, and we had a little bit of space in between those two. So let's say:
searchBar.scss
.search-bar {
.search-bar__wrapper {
display: grid;
grid-row-gap: 23px;
width: 100%;
input {
padding-left: 35px;
color: $color-gray-one;
box-shadow: 2px 3px 28px 1px rgba(0, 0, 0, 0.1);
border: 0px solid transparent;
border-radius: 5px;
That will push it down a little bit. Now, we need to get that p-tag over a bit. So what we can do is give it a text-align of right.
searchBar.scss
p {
text-align: right;
}
}
}
That works. Now what we need to do is get a font-size: 14px and a different color. Let's give the color: #B3B3B3. You'll notice that we already used this color. So what we can do is cut this out of the placeholder here and we can just call it $color-gray-two and then do the same here. Just get it out.
searchBar.scss
&::placeholder {
color: $color-gray-two;
}
&:focus {
outline: none;
box-shadow: 2px 3px 20px 1px rgba(0, 0, 0, 0.3);
}
}
p {
text-align: right;
font-size: 14px;
color: $color-gray-two;
}
}
}
Then head over to our main.scss and put it in as a variable. So $color-gray-two: #B3B3B3;. Make sure there's a hash tag from that hash. Let's go to our searchBar.scss, and we should be chillin. That returns looking really really clean and I think that's all for this guide.
All we need to do now is add in the Font Awesome styles. We'll get to that once we style the entire application. So what we'll do in the next guide is we will hop into the recentPosts styling.
Let's commit our code, so git status, git add ., and let's say git commit -m "styled the searchbar component". Let's also look at when we hit return, let's say results. You'll see that it's styled in here too, but it's a bit different.
Basically, when we get to the styles of the results page we will find out how we can modify it in our component. For now, just know that we have some cool styles in here and that's a big part of components. Let's hop into the recentPosts styles. We committed our code, we're good to go. See you then.