All language subtitles for 3. Using TextFields - Setup

Now that we're familiar with the text field component we can go ahead and start setting up our contact

page.

We've already gone over the screenshot for how we're going to structure that in the section 7 intro

video.

So now we'll just jump over to the code editor and get started.

We'll start off by building up the contact page and getting all of the content on the screen and then

we'll go ahead and start styling it and adding functionality in the later videos.

But this one we're just going to get the page itself set up so let's go ahead and in our components

folder let's add a new file and we'll call this our contact dot J.S. and we can just go right now to

abduct J.S. and let's already just import contact from dot slash contact and then scroll down to our

dummy component.

Well let's copy the render prompt from another route and replace the component prop for contact us with

that render prop and change about to contact so we can go ahead and save that and the page will be ready

and wired up with our props once we're ready to go but now we can come to our contact dot J.S. file

and let's import react or import link from react router dong and then we'll import make styles and use

theme from a material dash UI slash core slash styles and then we'll import the grid from app material

dash UI slash core slash grid import typography

we can import the button

and then lastly we'll need to import our new text field component from app material dash UI slash core

slash text field we can then come down and export default our function of contact and then open that

up and we'll come up here to create our constant of use styles set to make styles function called with

the theme we'll turn our object and then now in our function we can create our constant classes equals

use styles.

Constant theme use theme.

And now we can return a grid container direction of row.

Remember this is going to be different than all the other pages that are a wrapping container a direction

of column.

Because this is going to have that horizontal layout inside of this container.

Direction row will have a grid item container direction of column.

We'll open that and then adjacent to that.

Let's add a grid item container and we'll open that up as well inside of this grid item container direction

of column.

This is where we'll have our form and the contact information.

So the first grid item within this container is going to wrap a typography variant of H two and this

is going to be for our title.

Contact us and then down underneath this typography component let's add a typography variant body one

and this will be for our text.

We're waiting let's go ahead and save that and I'm gonna go ahead and refresh my page my server should

be restarted and I can come over to the Contact Us page and here you see our text.

And real quick I want to change a few things because in the design file this text is actually going

to be blue.

So on the typography variant body one what's add a style of color is our theme dot palette dot common

dot blue and then you see how there's the spacing in between these two lines.

Let's go ahead and on the Contact Us typography variant H2.

Let's add a style here of line height of just one.

And so that'll reduce the line height here given by the H2 component or actually the HDL element H2.

So we can save this and that'll refresh.

And now that text is the correct color.

And those are a little bit closer together now.

Let's go ahead and we're going to set that background for the call to action here on this page.

So what's come up and underneath the text field import let's import our background from asset's background

JPEG and then let's actually come over to the landing page and here at the top in our styles where we

have the revolution background style let's go ahead and copy all of those styles and then we'll flip

over back to the contact us page.

Contact dot J.S. and inside of our styles object.

Let's open this back up and let's create the background style and we'll open that up and paste in the

styles that we had just copied but change revolution background to background and then we're going to

take off the width we won't need that and then we can set in height here of 60 m.

So that will set a responsive height on our background to make sure that is the size that we're wanting

it and to see this appear on the page now.

Let's come down to the grid item container that is empty and we'll add the class name of classes dot

background and let's save this now to see the page refresh and our background icon is on the screen.

Now the obvious problem here is that the text is sitting above the image instead of to the left of it.

They should actually be sharing this line sharing the horizontal space instead of sitting on their own

lines.

And if that sounds familiar that's because we're going to be using our familiar large props.

So on the grid item container direction column and the large prop and where we just added the classes

class name of background we'll give it a large prop as well if we save this.

We'll see the page refresh.

And now they're sharing the space equally.

So they are sitting on the same line but they're splitting it in half.

OK well we actually we don't really want it to be split in half.

If you look at the design file it's actually more of extending all the way over to here.

The image actually has a lot more space than the Contact Us form space does.

So what we can do is instead of leaving the large prop at the default or of auto so just letting it

choose automatically to share the space evenly let's go ahead and on the large prop for our grid item

container direction of column.

Let's add the number three and then we'll come down and on the large prop for our background.

Let's add the number nine this is now going to tell the background item container to take up nine columns

worth of space while the contact us section will only take up three columns of space giving this section

just a quarter of the space available and giving three quarters of the available space over to our background

instead of right now where it is essentially six and six.

It's half and half.

So if I go ahead and I increase the screen size you'll be able to see this a little bit better if I

go ahead.

You see there now perfectly split in half.

And if I go and save the file we'll see it jump.

And now our image is taking up three quarters of the space available to it leaving just the one quarter

left that we needed for our contact us section.

I'll go ahead and shrink that back down to size where I can see the editor.

And now we can go ahead and keep building out the Contact Us form section.