All right.
And up next, let's set up CSS for two components, the job info, as well as the job.
So for starters, let's navigate to assets.
We're looking for rappers.
And for starters, let's go with job info.
Want to remove all of this logic, we're going to go with display flex.
So essentially there are going to be two elements the icon and the text.
And I want to align them pretty much in one line.
And then I also want to make sure that they're both.
In the center vertically, and therefore I'm going to go with the line items and then center.
Then after that, we want to go with a job icon.
So remember, it's one of the classes we have in here.
Let's go with font size.
Let's set it equal to one Rems.
Then also let's add some margin to the right that also is going to be equal to one Rems.
Then we want to go with display flex because we want to place the icon exactly in the center.
So align items and let's set it equal to center.
And then when it comes to icon, it's actually returned as SVG, and therefore we want to target that
then color and then let's go with the CSS variable.
So hyphen hyphen text.
Secondary and then hyphen color.
And also we want to style that jawbone.
So let me move out of the class and then in here, let's go with another one, the job text.
We'll start with text Transform.
We'll set it equal to capitalize.
And then also let's add the letter spacing, which is going to be equal to our CSS variables.
Letter spacing, var hyphen hyphen letter.
Spacing.
That should do it for job info.
So now let's take a look where we have the job.
JS And this one of course is going to have more code since we have more elements there.
And the main setup pretty much is a bit more complex.
So again, let's just remove everything and let's start from the scratch.
So we want to start with the background and this is where we're going to use the.
Background.
Secondary color.
So background here and then var hyphen hyphen background secondary and color.
Then we want to go with some border radius.
Border radius and we'll set it equal to our CSS variable.
So var.
Border radius.
Then let's go with display grid.
Just please keep in mind that of course, we're talking about the entire job component over here.
So there's going to be more logic coming up.
For now, we just want to go with display grid and we're going to go with rows.
So we'll have two rows.
We'll have one for the header and then the rest of the content.
Therefore we're going to go with grid template rows.
Let's start with one fraction.
So the header is going to be spanning pretty much as much as possible and then the content is going
to be auto.
And then we also want to go with Box Shadow and we'll set it equal to hyphen, hyphen, shadow and then
two.
So that should do it for main component.
Now let's go with header.
Let's add some padding here.
One REM is going to be top bottom and then 1.5 left and right.
Then we want to add some border bottom and we'll set it equal to one pixel solid and var and then hyphen
hyphen, gray and 100.
Then let's go with display grid.
So same deal.
We'll set our header as grid and then grid.
Template columns and we're going to go with auto and then one fraction.
So essentially that first letter is going to be with auto and then the company in position is going
to take up the entire space.
And I want to make sure that they are aligned in the center vertically and therefore, we're going to
go with align items and set it equal to center.
Now let's style that main icon.
So that first letter.
And for that we're going to go with width.
Let's set it equal to 60 pixels.
We also want to set up some kind of height, also 60 pixels.
Then we're going to go with display grid place items in the center.
So place items on, let's set it equal to center.
Then let's add the background.
And this is going to be the case where.
We're going to go with Var and then primary 500.
That's going to be the color.
And then let's also add the border radius.
So border.
Radius and let's go with var hyphen.
Hyphen.
Border radius.
Then we want to go with the font size and we're going to set it equal to 1.5 rems.
Then font weight is going to be equal to 700.
And then we have text transform.
And you know what?
Let me scroll down just so you can see better.
So text transform and let's set it equal to uppercase.
After that, we have color.
And in this case, I'm going to go with white.
And then lastly, we want to go with margin, right?
And we'll set that one equal to two Rems.
Then let's target the heading five.
And in order to do that, we're going to go with info class.
And then inside of the info class we have heading five.
So let's target that.
Remember, we can nest and we're just going to go with margin bottom and then 0.5 Rems.
And also we have there a paragraph.
Correct.
So we're going to go with paragraph margin in this case is going to be equal to zero.
Then text transform.
We'll set it equal to capitalize.
And then let's go with color, which will set as text, secondary color and letter spacing.
So let's go here with letter.
Spacing and that one will be equal to our CSS variable.
And then also let's go with color.
And in this case, it's going to be var hyphen, hyphen, text, secondary and color.
Let's save that.
And once we're done styling the header, let's take a look.
So this is what we should see.
That's the first letter.
And then we have company as well as the position.
So now let's start working on the content.
So for starters, let's target the class.
We're going to go again with display grid.
Then margin top is going to be equal to one Rems, then margin bottom.
Will be 1.5.
So let's change it here.
Then we want to go with grid template columns.
And pretty much by default, it's going to be one column layout.
But once we get to 576, it's going to be a two column layout.
So for starters, let's go here with grid template.
And columns and let's set it equal to one fraction, then row.
Gap will be equal to 1.5 times.
And then let's align everything in the center.
So align items and center.
Like I said, once we get to 576, we'll change it around.
So let's go here with media and notice how I can nicely nest.
And let's just go with min width.
Men I've been with and let's set it equal to 576 pixels.
And then as far as the logic.
We're just going to copy this.
So grid template columns and we'll set it as two columns and then we have the status one.
So essentially, remember when we set up here this job one, I said that this will be the main class
which pretty much gets added to all of them.
And then this one will be dynamic.
If it's pending, then we use one background and color.
If it's something else, then of course there's going to be a different value.
Hopefully that is clear.
So now let's go to a job one.
The class is status.
So dot status and we're looking for border radius and we want to set it equal to CSS variable.
So for that we're going to go with var hyphen hyphen border radius.
Then we want to go with text transform.
And we want to set it equal to capitalize.
After that, let's go with letter spacing.
And we're going to go with Var and then letter spacing.
So that's our CSS variable.
Then text align, let's set it equal to center over here and then let's set up some kind of width height.
And also since we have the value inside of our div and I want to place it in the center, we'll need
to set it up as display grid.
So first let's go with width under pixels.
That height is going to be equal to 30 pixels.
Then we're going to go with display and grid, and then let's set up align items and we're going to
go with center here.
Then actions.
Remember, that's our footer.
So actions class.
And as far as the styles we're going to go with margin top equals to one Rems then display will set
it equal to flex and align.
All items equal to center.
Okay, good.
And at the very end, let's style, edit and delete button.
So edit hyphen btn comma and then delete button.
Delete hyphen.
BTN.
And in here, let's go with some kind of height.
We're going to set it as 30 pixels.
Then font size will be equal to pum pum pum pum.
0.85 rems.
Then display we'll set it equal to flex again and then align items again.
We're going to go with center.
So align items and then center.
And then at the very, very end, I want to set up some kind of margin on the edit.
So let me target the button and let me go with margin.
Right.
And we're going to set it as 0.5 Rems.
And with this in place, we should be done with the job component.
But I can see that there's a bug.
So let me navigate back to my CSS and I think it's over here where we have the content.
So this is not a content class.
This is actually content center by bad.
And then when it comes to the actual content, we just want to add the padding over here.
So this one will be equal to one REM top bottom and then left and right.
1.5.
Yep.
Now it looks way better and now we can move on to the next step.