All language subtitles for 13. AppBar Logo

We've done a great job so far at understanding how to use the material UI theming and styling systems

to start setting up the basic structure of our application.

So now let's go in and actually start adding some of our custom content and functionality so here just

to give you guys a reminder.

This is the header from the high fidelity design file in the project 1 files and this is just a reminder

so that you can keep in mind what we're going to actually be building starting with the logo here on

the left so in this video we're going to put in that company logo and take a look at some of the gotchas

that start coming up when we try to do that.

Let's head on over to the code editor and we'll get started.

So I have my project directory open here in my code editor but I'm gonna go ahead and start up the development

server with an NPM start which will then kick open a tab in the browser and once that loads up you can

see we're back with our basic header.

We've already got the correct coloring for it.

But now let's actually start going in and making it actually look like that header from the design.

You can go ahead and put away your command line or terminal and you can see that I've arranged my screen

so that I can have the code editor and the browser window open at the same time so that we can start

seeing the changes in our project as we make them so the first thing that we want to do is go ahead

and actually get rid of this typography component.

The place holder for the title that we had and then we can also come up and remove the import statement

for the typography component as well.

Put these back together and then underneath those import statements and I like to separate my imports

for the material UI components vs. my own created components.

But this is just personal preference and we're going to go ahead and then import our logo from dot dot

slash dot dot signage so up to directories into our assets directory and then the logo dot veggie all

of the icons and pictures that we're going to be using in this first project are in that assets folder

from the Project 1 files that we downloaded and so we're always going to be importing our images from

that location.

Now we can go down and where are place holder text was we can go ahead and put in an image tag with

a source of the logo that we had just imported we can go ahead and make this these self closing tag

and you can see I've got a notification here.

The image elements must have an old prop so we want to go ahead and add an old.

And we'll just do company logo.

And that just says whenever the image doesn't load or say on screen reader devices for people with visual

impairments it will read that text where the picture would be.

So you always want to make sure to provide the all tags in your images to help improve your accessibility

for all users.

All right.

So we'll see how far that gets us and go ahead and save.

And then you'll see the browser window refresh.

And there you can see our beautiful logo has appeared.

Now it's already looking like a more professional real application but you'll notice of course a few

things right off the bat first and most obviously is that we do have this little gap here on the left

side of our logo that we'll have to fix and I'll show you why that is happening.

And then you'll also notice that our little hello is now covered up again so to take a look at why we

have this little gap right here.

Let's go over and inspect our elements.

And if you come over to the body and then open up our div and then here is our header right here.

So we'll open that.

And then you can see this is the div actually containing our toolbar.

And if we go ahead and click on that we can now see that the toolbar actually has a padding of twenty

four pixels on both the left and the right sides.

You can see that here in the box and then it highlights up in the corners you can see on the header

in the left and right corners the slightly green boxes and that is the padding that's coming from the

toolbar that padding is what is pushing our logo in and off the edge.

And so obviously to get the look that we are going for we want to go ahead and remove this padding now

instead of actually trying to provide a style to the image or to the toolbar that either removes the

padding or moves the image one way or another to cover up the gap material UI actually provides a really

easy way for us to do this though if we just come over to our toolbar component here in the code editor

and we add the prop disable gutters and we could add an equals and then our brackets and true but if

you actually leave off the true that is what it will just default to.

So we can go ahead and just leave it as disabled gutters and go ahead and hit save and you can see voilà

Our logo is now perfectly flush all over to the left side and to the bottom of the app bar now and there's

still a couple things to clean up.

And the first is that this logo is actually a little bit smaller than I would like.

I wanted to be a little bit bigger so it catches the attention of the users a little bit more.

And so to do that we're gonna go ahead and set a height on our image we'll do that by adding a class

name to our image of classes dot logo and then we'll come up to our styles object and add the logo style

here.

Like I said I just want to set a height on our image and we're going to set that with a responsive unit

and we're going to do a 7 am.

So let's go ahead and save that and see how that works.

And now you can see that is much bigger nicer more full kind of more attention grabbing on the screen

and that is really the size and look I think I was going for.

Now that looks really good but we still have the one problem where our hello is now still covered up.

If you think back to how we solved that problem and how we used the theme dot Maxine's dot toolbar it

applied a minimum height to the toolbar which pushed our content out from underneath it however we've

now changed the height of our toolbar with the addition of the logo but that extra minimum height margin

is set on this div right here is still the same height as the previous default toolbar and so that's

why it's not pushing the content out far enough to cover the new height.

So what we need to do then is to go in and add a little bit of extra height to that margin and get the

content to pop back out again.

So to add that a little bit of extra high let's go up to our toolbar margin class and we'll just add

a little extra margin bottom of three M to offset the extra height that we added with the responsive

units on the logo.

If we go ahead and save that we can go see in the browser that that then pushes our hello out from underneath

the header.

With that in place it looks like we have properly put our logo in the header and made sure that the

content is still going to be displayed in the right place underneath.

And now we can start moving on to setting up the rest of the header before we do that though.

I did want to mention that if you're seeing this error here in the console that is totally OK and we're

actually going to take care of that real quick in the next video.