I'm going to go inspect this and just see what we need. So it's very similar to what we already have in our application for our other inputs, but I'm going to copy this right here.

And let's see if there is the search there, I'll come back and copy that too. So what we need to do is we need to go to our shopSearchBar.js and we need to create a new file called shop searchbar.js or just shop.scss right. So let's go into shop let's call it shop-search-bar.scss and in here we're going to say .shop-searc-bar and basically we're just going to say input and we're going to paste this in.

So you're not going to be to paste this in, maybe you will, maybe it will be in the guide notes, I don't know. Go ahead and see it says height 40 pixels width 940 pixels, let's get rid of the width and let's say border 1 pixel solid E6E6E6 border radius 20 pixels and we'll say width is 100%.

shop-search-bar.scss

.shop-search-bar {
    input {
        height: 40px;
        width: 100%;
        border: 1px solid #E6E6E6;
        border-radius: 20px;
    }
}

And then let's go ahead and import this and then see what's happening. Okay so let's go to main.scss, and let's say import and search bar.

main.scss

//SHOP
@import 'shop/shop';
@import 'shop/shop-search-bar';

Let's go back into our application and see what's going on.

Okay. You'll see we have it. Let's go ahead and now let's enter in the styles for the search and then we'll put in the magnifiying glass icon. So I'm going to go to our design and snatch the code for the .search, I'm going to go into shop-search-bar.scss and I'm just going to say on the input, I'll put it in the same place except for get rid of the height and search and the line height as well, and were left with the font family, we don't need that.

So all we put in here was font size and the color so font size 18 pixels in color.

shop-search-bar.scss

.shop-search-bar {
    input {
        color: #CCCCCC;
        font-size: 18px;

        height: 40px;
        width: 100%;
        border: 1px solid #E6E6E6;
        border-radius: 20px;
    }
}

So get this in your shop-search-bar.scss file and import it into your main.scss file and we should have the styles okay, a least a good portion of them. You'll see now that we have that, so all we need to do now is put the icon in and put it to the right bit. Okay, so what I'm going to do is I'm going to go into the code and I'm going to go back to where we have this in shopSearchBar.js. So we have fas fa-search.

What I'm going to do is I'm going to take this out of the comment and I'm pretty sure you can't put it in here like this so I'm not even going to try it. But what I want to do is wrap this all with a div and print them all. Okay, so let's print this or not print, return, let's return this. All right, now we're going to do is we're going to give this div a class name of search-bar-grid.

shopSearchBar.js

function FormSearchBar(props) {
    return (
        <div className='search-bar-grid'>
            <i class="fas fa-search"></i>

Now let's just leave that there and see what it looks like. Okay, we have our icon and we have search. Now it looks like we're getting an error.

Did you mean className and that's true, so in our form shopSearchBar.js we need to rename this class to className on the icon.

shopSearchBar.js

function FormSearchBar(props) {
    return (
        <div className='search-bar-grid'>
            <i className="fas fa-search"></i>

Now that we have that grid and we have those two things in there we just need to kind of align them. We want to make one big grid right, and then we want to put this and this starting in the same place. Okay, let's try that out, now let's go into vs code and let's get search-bar-grid and let's go into shop-search-bar.scss and let's say .search-bar-grid and let's say display is grid, grid template rows is 1fr start to end and grid template columns is start to end and we're going to have just one big column. Now what we're going to do is we are going to say &icon and will say &input.

shop-search-bar.scss

.search-bar-grid {
    display: grid;
    grid-template-rows: [s] 1fr [e];
    grid-template-columns: [s] 1fr [e];
     &__icon {

     }
     &__input {

     }
}

Okay now we have to go back and check our css, so search bar grid, let's go back to our css shopSearchBar.js and what I want to do is I want to take this search bar grid class and put it in both of these and say __icon and __input.

<i className="fas fa-search search-bar-grid__icon"></i>
<input className={`${props.className} form-search-bar search-bar-grid__input`} {...props.input} type='text' placeholder={`${props.placeholder}`} />

Okay, now we have access to both of those, so search-bar-grid_icon and search-bar-grid_input. Now we can manipulate those in our shop-search-bar.scss, so what I'm gonna say is grade row is s/e on both of these and as a matter of fact I'm going to do that on column as well.

shop-search-bar.scss

.search-bar-grid {
    display: grid;
    grid-template-rows: [s] 1fr [e];
    grid-template-columns: [s] 1fr [e];
     &__icon {
         grid-row: s/e;
         grid-column: s/e;
     }
     &__input {
         grid-row: s/e;
         grid-column: s/e;
     }
}

Okay, let's go ahead and do that for now and see what happens then we'll modify it a bit if we need to. Okay, let's go ahead and try this out, okay you'll see they exist in the same place now except it's a little weird, so no big deal.

What we want to do is let's add a little bit of space at the beginning so we can launch them over a bit, and then what we'll do is we will modify it a little bit more. So we need to say columns we want like 20 pixels right here, now let's try this out.

shop-search-bar.scss

.search-bar-grid {
    display: grid;
    grid-template-rows: [s] 1fr [e];
    grid-template-columns: 20px [s] 1fr [e];

You'll see it bumps it over except for it bumps over this search as well. We want to only bump over the icon and the text. Let me show you how we can do that, first things first let's get the input and start it at 1/e, so it's going to start before this 20 pixels.

shop-search-bar.scss

&__input {
    grid-row: s/e;
    grid-column: 1/e;
}

And now the icon is gone, okay no big deal. All we have to do is pull the icon above it by putting the input z index to -1 okay, you'll see the icons there now.

shop-search-bar.scss

&__input {
    grid-row: s/e;
    grid-column: 1/e;
    z-index: -1;
}

Now what we need to do is center the icon and make it bigger. So let's say that the icon has a font size of I don't know 18 pixels and align self is center, there we go.

shop-search-bar.scss

&__icon {
    grid-row: s/e;
    grid-column: s/e;
    font-size: 18px;
    align-self: center;
}

Now let's try it, okay that's where it needs to be, but now the search itself, one we can't use it and two it's a little small or it's in the way the text part, so we need to move the text over.

Let's go into shop-search-bar.scss and on the input here that has a padding left of 24 pixels. Okay let's try this out, and you'll see this moves it over a good amount. Let's move it over more by saying padding 50 pixels.

Okay, that looks really good. The font size is, I guess it's not bigger but I want to make it bigger in our application. And I want to say that, let's see so font size let's make it 20. And then let's move this padding left, well we'll leave it here because it's part of the positioning, whereas this upper input is just for pure looks.

shop-search-bar.scss

.shop-search-bar {
    input {
        color: #CCCCCC;
        font-size: 20px;

        height: 40px;
        width: 100px;
        border: 1px solid #E6E6E6;
        border-radius: 20px;
    }
}

And what I want to do is go into shopSearchBar.js and I want to say on placeholder that the s is capitalized on search. Okay, now what we do is make it so that this icon is not enabled right, like we can click through it because it's over it so we're clicking on the icon and extends all the way over here. So we can do that, or we can just make it a little less wide right. We can just make it like 20 pixels wide or however high that is.

So let's go into vs code and what I want to do is instead of saying just end right there what I'm going to do is I'm going to say icon end okay. Then I'm going to put like 20 pixels and I'm going to go to great column on the icon and say icon end. Okay, and that should do it.

shop-search-bar.scss

.search-bar-grid {
    display: grid;
    grid-template-rows: [s] 1fr [e];
    grid-template-columns: 20px [s] 20px [icon-e] 1fr [e];

It might look a little weird, I have to tweak it, but it's going to do it for the most part. Okay, so it looks like it's still a little bit weird, I'm going to inspect the element and see what's going on here. Okay, so I thought that would work because you can see it's no longer over it right.

You'll see that it's no longer over it at all, but if we put this back to e it's going to cover it. That's what I thought, see how it covers it, I thought that's why that was happening. But it looks like even if we're not covering it like that, make it only 20 pixels wide. Looks like it's still not allowing us to type in there.

Okay, so let's test this out and see if that's even the problem because maybe it's not the problem. Let's get rid of the z index -1 on input, and go to chrome and try this out see how it works. Now I think that's because it's probably putting something else above that. So what we need to do is we need to do is not change the z index of the input, but change the z index of the icon or both of them and put this to something like 100 right. So it's got to be above everything, see now it works.

Let's change the focus now, let's go into shop-search-bar.scss and let's say on the input on a search bar let's say and focus is out line of none.

shop-search-bar.scss

.shop-search-bar {
    input {
        color: #CCCCCC;
        font-size: 20px;

        height: 40px;
        width: 100%;
        border: 1px solid #E6E6E6;
        border-radius: 20px;

        &:focus {
            outline: none;
        }
    }
}

Let's go back to Chrome and you'll see it doesn't do that anymore, it doesn't have that nasty outline.

All right, so one thing I want to do is it looks like the text is backwards or something you know what I mean, this seems like this asdfasdf should be placeholder text whereas that search seems like it shouldn't be, like the text color seems backwards to me. So what we need to do is we need to take this color #CCCCCC and we need to say in here at the bottom we need to say &::placeholder colors #CCCCCC and then yeah, so let's try this out.

shop-search-bar.scss

.shop-search-bar {
    input {
        color: #CCCCCC;
        font-size: 20px;

        height: 40px;
        width: 100%;
        border: 1px solid #E6E6E6;
        border-radius: 20px;

        &::placeholder {
            color: #CCCCCC;
        }

        &:focus {
            outline: none;
        }
    }  
}

See how now it's the placeholder color and then we type that color.

So that's what we want. We also want to change the color to match the icon. So it should be by default, let's see what color the icon is, I guess its probably the default so the color #808080 because it doesn't automattically do that. Okay, that looks better see how it's slightly darker?

Okay that looks good to me. We just need to actually give it some margin and basically what I mean is we need to give it a grid for the products and this, we need to give it a grid to sit on. So we'll do that after we get the product styles in, just because we have already done the search bar so we might as well do the products and then do the grid overall.

But yeah it looks like that search bar styles are looking pretty nice. So let's go ahead and commit our code and then hop into the product.

Terminal

git status
git add .
git commit -m "search bar styles"

I'll see in the next video.

Resources
Source code