All language subtitles for 009 Changing Widget Colors_en

In the last section, we got our race one widget to show up on the screen, but it's sandwiched directly

against the password input.

In addition, the button itself is gray, which is just a little bit boring.

So in this section, we're going to very quickly fix the color.

Well, then take the break and we'll put in a little bit of spacing between the password element and

the button itself.

The reason we're going to take a break first is that the process of adding that spacing is going to

be just a little bit involved.

And so I want to make sure that we have a lot of time to address it.

So very quickly, let's make sure that we change the color of the button to do so.

I'm going to first very quickly open up my race button class documentation.

And then on my constructor, you'll notice that it has a name, parameter of color, so we can simply

pass in a color property to this thing and it will change the color of the button.

So back at my race button element inside the submit button method, I'm going to add on a color and

I can specify one of the constant colors on the colors class so that colors dot.

And then I'll just make this thing blue like so.

If you're using this code, you can actually hover over that blue property right there and you'll get

a nice little preview of what color Çöpler looks like, which is a nice little thing.

All right, so quick test, I'll save this file, I'll do my refresh.

And our button is blue, OK, simple enough, so let's take a quick pause right here.

Again, we're going to separate this into two sections because adding in the spacing is just a little

bit complicated.

So a quick break.

Come back to the next section and add that spacing in.