Original subtitles

OK, so in order to style this, we're going to take this section by section first.

First, we're going to style the input and then we'll sell the button and then the full component just

so it ends up looking like our final sign.

So what we have to do is we actually have to make a new form input component and it's going to perform

the exact same way as a regular input, but with our own styling on it, including managing the label

and that little micro interaction when you click on it.

How do we do this?

Well, let's first make a new component called.

Form input.

And we're going to make our formal input component, such as sex and a form input styles, thoughts,

sex, as usual.

And inside of our form input, it will be a.

Functional component.

Because we don't want any state on this component.

What it will take is it will take a handle change, prop a label and then the rest of the props.

We're going to restructure because we're going to spread that into the input.

Now, the reason why we need this handle change is because we want to bubble up.

Any any change that the emperor has, but we're going to wrap our whole component in a group because

we want the label and the input to be together.

So this is going to be called a group.

And then there will always exist an input.

And the input will have the class name of form input on change will then bind our handle change.

So right now this looks exactly like how we had it earlier inside of our Sinon component.

We're still just finding whatever handle change.

Gets passed in onto the change and then we're going to spread the other props here so all these other

props will end up being.

All of the props that we've passed in here, including name type value required, those are all going

to get passed into our form input component as the other props.

Now, why do we need this label prop?

Well, what this label prop, we are actually going to selectively render a label because we don't know

if we actually need it or not.

If a user passes in a label, right, or sorry, if a developer, if we want to pass in a label property,

then we'll generate one.

If we don't, then there's no need for it.

So we are going to create a label component.

Otherwise, we are going to render nothing and null is a great way for nothing to appear.

So here what we're going to render is.

Our label.

With a class name of.

This value, so what we're going to do is we are going to selectively render.

A string interpolated value.

Where we take prop stock value the length.

So if our value is in.

Then we are going to apply this class of shrink.

Otherwise.

It will be an empty string.

And we will always have form, input, label.

Sorry, other props, so this label will always have the class name, form, input label, but we will

also add this shrink property whenever the user has typed anything in.

Now, this is mainly for certain browsers that will auto complete when you get to that portion of the

actual sign in page, I'm going to show you what I mean.

But we're also going to render the label text.

Now, as usual, I've provided the styling for us.

And I'm just going to quickly take a look at what is here.

So what we're saying is that this is a SACE variable, wherever we call sub color is going to substitute

in that gray, wherever we call main color, it's going to substitute in black.

And then this mix in shrink label is an easy way for us to include this whole block of success where

everywhere we say at include and then that shrink label, that mixin so mix ins are kind of like reuseable

pieces of success that we can put inside of our source code.

And this way, we don't have to repeat the same thing, and if we want to change anything, we could

just modify it here and wherever it's being referenced it update.

Now, the main thing to focus on that we've changed is that we want to focus.

Whenever a user focuses, which is whenever they select or whenever the browser is focused on that input,

then we want to target the form input label and we want to include shrink label.

Right.

So we want to move it up, change the font size and change the color, because right now our label actually

sits inside of our.

Component, as you'll see here.

It just sits right above the actual.

Input itself, so by doing this, we are adding a transition.

Right here of 300 milliseconds, so that the moment these properties get updated, there's a transition

of the range of milliseconds to that change.

And now if we save and we export our form and put.

If we add it into our sign and component, we will see our new component in our code.

For input from.

Form input from Apple Computer.

Now, let's just replace this with this like so.

And now, instead of an on change, we are going to add in our handle change.

Because that's the name that we decided to call our property, and now if we look at our code base,

we'll see that this is our new component.

We also need to now add in our label, so here I'm going to say email and then for this label, I'm

also going to say password.

We said again.

Let's not update that password, we see our functionality.

Awesome, so let's get rid of this label and this label.

And now our form input looks how it should.

So why is the with full and it's because it always just expands the full width of our component, so

for our Sinon component, we can actually also add.

Some styling here.

So that the width is always 30 view with so it's always 30 percent of the total view with and now we

have.

A better looking component that looks way more similar to our final.

OK.

Now, let's start on the button.