Okay, let's do a little bit of styling because we haven't done a styling in a while and this is not
really looking very good.
Well, so in this video what we'll do is we'll try to improve a little bit of our application.
So the first thing first we have that white background.
It doesn't really match whatever we have in the second screen.
So let's try to combine them together.
And of course you could have a like a main level if you go here into inside index.js, what we could
have is we can have a different wrapper for, for this with, with a heading inside and what you render,
you will render inside this.
So you have like a top styling on this level.
And that will apply for any pages.
But our application is so small we could actually duplicate it and have it some styling in our JS.
So what I will do is I will open app.js here.
And what we've done is we have that header here.
We had that app class name.
So we could actually reuse that.
So I will copy that and I will go to out at the moment.
I will close all of the rest of the things.
So it will be easier to use here.
And we have that out.
So we have that class.
So if I will replace it with the similar style as we had it there.
So we will have app class name for the main element here.
And then what we have is we have that heading one.
So instead of my heading as I have it here, I can get put that inside header.
So it will be nice and big on on the top.
And then we also need to do all the rest of the things will fit.
So basically we'll apply the same style here and the same header as we had it there.
So if I will go back here, you see this is much more styled in a similar way as we had before it.
This is way too large.
So what we could do is we could say.
That this grid here we can say is.
Wait.
And I can say one half.
So basically that will tell me this is half width of the page.
So if I will refresh it.
Now you see this is half of the page.
I don't like the how the button is styled here.
So we have a few options.
How we could style it.
We can style every button separately.
We could style a new element and reuse that element in different places.
Or we can target that with CSS.
What we could do is we could target different elements in our application with one style.
So you could create your own element as well.
So let's say you want to use a text info here or a text input.
And then you could create that element and reuse it with react as a normal component.
Or you could create a style.
I will show you how to create a style.
So I will go here and I will go to app.
Up, see it up CS and we can create a style for input.
So I will do input and I can also do for text area.
So basically that will be two elements that I will have it and I can do for example padding.
And I can put 0.8 REM like that.
So I can also do a default margin, maybe margin of let's say three pixels.
And I would say so you can have it that nice and big if you like it.
I think it's looking a little bit too much here.
So maybe 0.5 or 4 REM.
I don't want to have them that big, but they are my my much bigger as well.
So I could do the same with the buttons.
For example, I have that button here so I can go here.
I can say I want to style a button in my application, and all buttons will have a background color
of.
Let's say I would like to have this color, for example, and it's colored as any other good.
So if I will go here and basically that's the color of my background.
So that's why it was kind of for me.
But I want to have maybe uh, I can say maybe gray.
So it will be gray color and it's not looking great, but I can do also a border radius of let's say
three pixels.
So it will have a rounded corners here and I will save it.
And I have a little bit of rounded corners.
Also I can have maybe a text of something almost black.
So maybe 2222.
And it's supposed to be color.
Sorry.
And we have a button like this.
So also we could move it like if we have like a two layer grid, and we want to move it to the right
hand side.
What we can do is we can go to out here and we have that button, but it's on the left hand side because
it is all will be left, right, left, right.
And then we don't have a left element so we can actually add it.
So if I will add an empty element like a paragraph here, I can do non-breaking space paragraph like
this.
And it will actually put something empty here.
And that will be pushed to the right hand side.
This is not maybe looking great, but it will do the job here.
So I'm not going to spend too much about styling.
But what I want you to do is I will.
I want to show you different ways how we can do that.
We can do that with tailwind as we run it here.
We can do that with our styles that will target the general kind of HTML elements like this and this.
And you can have your own styling here.
So we can mix and match whatever you think it will be better for you.
So we have that style.
So if I will go back here and if I will log in now and click register.
Sorry, I need to log in here if I will click login.
You see this button also has been styled as well because I target every single button and every single
input here in the same way.
So I have that.
What I could also do is I can do a similar thing as I have done it before in here, and I see I don't
have much space here.
This, this will take the full width of this because that's inside the grid.
But this is not inside the grid.
So I need to maybe move it a little bit from the edges so I could do it here in the button I can do
a padding.
So padding will be top top and bottom.
Maybe I can do uh two pixels and left and right.
I can maybe have five pixels.
So that will make the button a little bit bigger.
And I can actually make it a little bit more from the left and right, maybe ten.
So if I will do like this, it will look like this.
So there will be a little bit of space around this.
What I could do is I can disable the button if I don't have anything here, and I will show you how
to do that in a second.
So first thing first I will go to our movie form.
This is where we have that button.
And what I can do is I can do the same trick as I've done it before.
So I will do Non-breaking space paragraph and that button will be moved here.
And then if we don't want to allow send anything to our database, what we can do is we can disable
this button so it won't be a clickable.
What we can do is we can create in this movie form.
Here I will create constant is disabled is disabled.
That will be my new variable and that will be based on title and description.
So I will say if title and Description.
Oh, this.
Description.
Then it will be false.
So it's not going to be disable, otherwise it will be true.
So basically I don't have to have a ternary.
I can also have is if, if title and description then.
And I can negate it.
Or I can leave it like this.
It doesn't matter.
So I will have that variable here.
And what I can do is on my button I can say if that button is disabled, I said if disable is equal
to and I will do it in the curly braces is disabled.
So I will copy that and I will put it on an another one as well.
And here so basically I disabled that button.
If my A those are empty.
So if I will go here and go to network and if I will start.
So let's clear it.
If I will start here clicking they are still kind of not disabled.
So if I will go here and I check and if I have a title.
Well basically the title and description is there.
They're empty.
So so so what I can say is.
Equal to empty and this one equal to empty.
And I can do or actually to check it.
So if title is equal to empty string or description is empty to screen then I will be.
Oh sorry I need to have that true.
So basically I can leave it like this.
So it will be maybe maybe easier.
So I will have is disabled.
If title is empty string or description is empty string then it will be disabled.
So if I will save it now I can go here and if I will.
Oh, at the moment this is not empty.
So if I will do create a movie like this and if I will try to click it, nothing actually happens.
So basically it's not going to allow me to do anything here.
I need to put something here just to make it enabled.
So if I will go here, what I could do is I can go to app CSS.
And you see I have the background color and color for this one.
But I can also have another style button that will be disabled and like that with a colon.
And then I can style, I will take those two and I will revert the color.
So I will take 2 to 2 as a background color, and I will take the gray as a color.
So basically I need to put that here.
So basically I revert the colors when it's disabled.
So if I go here I see this is disabled and it's not really readable at this point.
But if I will put something here and here you see this is enable.
So if I will go here and I don't have anything there then it's disabled.
But this is really hard to see here.
But we could work on the styles here.
That is actually this is shouldn't be gray.
It should be like that.
So my bad.
And here and if I will go here you see it is a little bit better.
So if I will have something here and both fields then I can toggle disable or enable.
And I can actually do the same here.
And he here.
And we have in movie form something like this.
So we can copy that.
And I can go to out and then do exactly the same as we have it here.
So I will have is disabled.
But in this case we want to check user name and password.
So if I don't have if one of those is empty then it will be disabled.
And then we can also apply the same thing as we've done it here.
So disabled will mark it as disabled.
But we have a style so we don't have to repeat the styles.
This will be automatically applied for all buttons we have in our application.
So I'll put it like this.
And I think I.
Like this.
And then if I go here and let's say we want to we need to go to our application.
We'll work in a logout button soon and I'll clean it and refresh it.
You see I have that as well.
So if I put in password I can start login.
Otherwise it will be disabled like that.
Okay, so I am not going to spend too much time now to style this application.
You should have a clear kind of idea how you can use the different styles and how you can do it, and
obviously you will style your own application in your own way.
But this is how we can control different styling across different across the entire application.