All right.
And now let's set up the optional CSS for dashboard form page.
Again, this is a wrapper which we're going to use in multiple pages.
So let's navigate to wrappers.
We're looking for dashboard form page.
It is a section and we just want to remove everything that we have over here.
Let's save it.
And for some reason, I also.
Stop over here on the template string.
And if everything is correct, we should be able to set up everything from scratch.
So let's go here with border radius.
What's that one to a variable.
And yes, it's going to be the case where I'm not going to.
Switch the screens since that probably is going to get annoying pretty fast.
So effectively this is a border radius all around.
Then we want to make sure that the width is 100%.
So we're taking up the entire space.
Also, we want to go with some background here and this is where I'm going to use that secondary color
so far.
And then hyphen hyphen, background.
Then hyphen secondary.
And color.
After that, we want to go with some padding all around and we're going to start with three.
So that's the top one then to our right.
And also we want to go with four rims in the bottom.
Then let's set up the form title.
For this one.
We're going to just go with margin bottom and set it equal to two Rems.
After that, let's go with the actual form.
For the form.
We just want to remove the margin.
It's going to be zero.
Then we also want to go with border radius.
And this one will set it equal to zero.
So since we have already a border radius on a section, we'll just remove it on the actual form.
Then box shadow is going to be equal to none.
Batting is going to be set to zero as well.
And then max width and width will set it equal to 100%.
So max width as well as the width is going to be equal to 100%.
Then let's go with margin row or I'm sorry, form row.
So form row class, remember, that's pretty much our main div in a form component and we want to go
with margin bottom and we'll set it equal to zero.
Then as far as the form center, we'll set it as display grid.
So form center.
And then we want to go display grid.
And let's go with the row gap and let's set it equal to one.
So I removed this margin and then I control the distance by setting form center as display grid.
Then we have form button.
Basically, that's going to be our submit button.
And in here we want to go with Align Self and let's set it equal to an end.
Then margin top is going to be equal to one Rems and then I'll set it equal to display grid and I'll
place the items in the center.
So display grid.
So that's for the actual button.
And then we'll go with place items.
And let's set it equal to center.
And then we just want to set up a few media queries.
Once we get to 992, I'll have two column layout and I'll align everything in the center and also set
up some column gap.
And then once we get to 1120, then we're going to have a three column layout.
Remember, when it comes to styled components, we're going to go with media, then Min with 992 pixels
over here.
And then as far as the logic, we want to target the form center.
Grid template and we're looking for columns.
One fraction, one fraction.
So two column layout starting with 992.
Align items.
We're going to go with center.
And then lastly, we want to also add some gap for the columns.
So we're going to go with column gap one fraction.
And then let's quickly just copy and paste instead of 992 1120.
Form center.
And the only thing we want to change over here is the grid template columns, and we'll set it equal
to one fraction.
That's it.
Now, don't be surprised if you get logged out.
This is something that I noticed.
So when you start working on a CSS, for some reason it throws some errors and as a result you get logged
out.
So if we navigate back, everything is correct.
We'll just have to log back into the application.
Now I am noticing one thing where essentially I don't have any gaps between the columns and of course
it's not one fraction over here.
My bad, it should be one Rems.
My bad.
Let me save it.
And this is what I was talking about.
For some weird reason.
It doesn't happen when you work on the front end functionality.
It only happens when you're setting up the CSS in the styled component.
Beat just keeps throwing these errors and as a result, we get locked out.
So that's something that you need to keep in mind.
Again, if we go back over here and log in, everything is correct.
And with this in place now, we can start working on the all jobs functionality.