We can do this pretty easily by going into our search bar component and actually applying a different set of styles to the search bar depending on a property it has. Open up searchBar.js and change the form.

Whatever value we pass in for page is going to apply here. Now, let's open our results.js and we'll specify a page for our search bar.

results.js

<SearchBar page="results" onSubmit={(query) => this.handleSearchBarSubmit(query)}/>

Let's go to home.js pass in the same this, just with a different page name.

home.js

<SearchBar page="home" onSubmit={(query) => this.handleSearchBarSubmit(query)}/>

As you can imagine, this is going to spit out two different classNames depending on which page you are on. Let's head into our searchBar.scss and add in these styles. We'll start with our results, since we have more to do there.

searchBar.scss

.search-bar__home {

}

.search-bar__results {
    input {
        font-size: 22px;
        height: 36px;
    }
}

This isn't going to work, because our some of our original input styles are overriding our newer ones, lets remove them and put them just in our .search-bar__home styles.

searchBar.scss

.search-bar__home {
    input {
        height: 118px;
        font-size: 40px;
    }
}

.search-bar__results {
    input {
        font-size: 22px;
        height: 36px;
    }
}

Let's look at that.

That's great, it looks fantastic. Now, the next thing is we don't want in the middle. We want it near the top and we can easily do this by adding in a grid and adding styles on our selectors. At the very top, in the .search-bar add in a display: grid. Next, let's work on our selectors.

searchBar.scss

.search-bar__home {
    align-content: center;
    justify-items: center;

    input {
        height: 118px;
        font-size: 40px;
    }
}

.search-bar__results {
    align-content: start;
    justify-items: center;

    input {
        font-size: 22px;
        height: 36px;
    }
}

That should be good.

Yeah. I want to leave this the way it is because it looks fine. What we need to do now is just get in the styles for the results posts, and then the styles for whatever it is the post component.

Let's commit our code.

git status
git add .
git commit -m "styled results component searchbar"

In the next guide, we're going to be adding in the styles for our results, and we might have to modify a few things because our design looks too fundamental, to be honest.

So far everything's working very nicely. We just need to finish up really quick, and we'll be done in a few guides, then we'll push up to Heroku.

I'll see you in the next guide.

Resources

Code at this stage