1
00:00:00,050 --> 00:00:00,380
All right.

2
00:00:00,380 --> 00:00:06,470
And now let's set up the optional CSS for dashboard form page.

3
00:00:06,650 --> 00:00:11,120
Again, this is a wrapper which we're going to use in multiple pages.

4
00:00:11,120 --> 00:00:13,290
So let's navigate to wrappers.

5
00:00:13,310 --> 00:00:16,460
We're looking for dashboard form page.

6
00:00:16,490 --> 00:00:22,460
It is a section and we just want to remove everything that we have over here.

7
00:00:22,490 --> 00:00:23,930
Let's save it.

8
00:00:24,320 --> 00:00:26,270
And for some reason, I also.

9
00:00:27,070 --> 00:00:29,140
Stop over here on the template string.

10
00:00:30,280 --> 00:00:35,010
And if everything is correct, we should be able to set up everything from scratch.

11
00:00:35,020 --> 00:00:37,300
So let's go here with border radius.

12
00:00:39,180 --> 00:00:43,020
What's that one to a variable.

13
00:00:43,020 --> 00:00:46,440
And yes, it's going to be the case where I'm not going to.

14
00:00:47,230 --> 00:00:53,140
Switch the screens since that probably is going to get annoying pretty fast.

15
00:00:53,140 --> 00:00:56,170
So effectively this is a border radius all around.

16
00:00:56,200 --> 00:00:59,050
Then we want to make sure that the width is 100%.

17
00:00:59,050 --> 00:01:01,300
So we're taking up the entire space.

18
00:01:01,450 --> 00:01:06,640
Also, we want to go with some background here and this is where I'm going to use that secondary color

19
00:01:06,640 --> 00:01:07,330
so far.

20
00:01:07,330 --> 00:01:10,210
And then hyphen hyphen, background.

21
00:01:11,450 --> 00:01:13,940
Then hyphen secondary.

22
00:01:15,110 --> 00:01:16,250
And color.

23
00:01:17,150 --> 00:01:22,970
After that, we want to go with some padding all around and we're going to start with three.

24
00:01:23,370 --> 00:01:27,110
So that's the top one then to our right.

25
00:01:27,110 --> 00:01:30,770
And also we want to go with four rims in the bottom.

26
00:01:31,130 --> 00:01:33,560
Then let's set up the form title.

27
00:01:34,810 --> 00:01:35,530
For this one.

28
00:01:35,530 --> 00:01:40,040
We're going to just go with margin bottom and set it equal to two Rems.

29
00:01:41,030 --> 00:01:43,580
After that, let's go with the actual form.

30
00:01:45,490 --> 00:01:46,240
For the form.

31
00:01:46,240 --> 00:01:47,680
We just want to remove the margin.

32
00:01:47,680 --> 00:01:48,850
It's going to be zero.

33
00:01:48,880 --> 00:01:51,280
Then we also want to go with border radius.

34
00:01:51,980 --> 00:01:53,960
And this one will set it equal to zero.

35
00:01:53,960 --> 00:02:00,200
So since we have already a border radius on a section, we'll just remove it on the actual form.

36
00:02:00,200 --> 00:02:04,160
Then box shadow is going to be equal to none.

37
00:02:05,000 --> 00:02:07,880
Batting is going to be set to zero as well.

38
00:02:07,880 --> 00:02:13,070
And then max width and width will set it equal to 100%.

39
00:02:13,700 --> 00:02:18,470
So max width as well as the width is going to be equal to 100%.

40
00:02:18,530 --> 00:02:23,100
Then let's go with margin row or I'm sorry, form row.

41
00:02:23,120 --> 00:02:30,950
So form row class, remember, that's pretty much our main div in a form component and we want to go

42
00:02:30,950 --> 00:02:34,850
with margin bottom and we'll set it equal to zero.

43
00:02:34,880 --> 00:02:39,400
Then as far as the form center, we'll set it as display grid.

44
00:02:39,410 --> 00:02:40,610
So form center.

45
00:02:41,700 --> 00:02:44,400
And then we want to go display grid.

46
00:02:45,280 --> 00:02:49,060
And let's go with the row gap and let's set it equal to one.

47
00:02:49,720 --> 00:02:57,490
So I removed this margin and then I control the distance by setting form center as display grid.

48
00:02:57,520 --> 00:02:59,140
Then we have form button.

49
00:02:59,140 --> 00:03:02,140
Basically, that's going to be our submit button.

50
00:03:02,500 --> 00:03:08,950
And in here we want to go with Align Self and let's set it equal to an end.

51
00:03:09,340 --> 00:03:18,130
Then margin top is going to be equal to one Rems and then I'll set it equal to display grid and I'll

52
00:03:18,130 --> 00:03:20,050
place the items in the center.

53
00:03:20,050 --> 00:03:21,460
So display grid.

54
00:03:21,460 --> 00:03:24,190
So that's for the actual button.

55
00:03:24,340 --> 00:03:26,770
And then we'll go with place items.

56
00:03:27,460 --> 00:03:29,400
And let's set it equal to center.

57
00:03:29,410 --> 00:03:33,910
And then we just want to set up a few media queries.

58
00:03:34,210 --> 00:03:41,320
Once we get to 992, I'll have two column layout and I'll align everything in the center and also set

59
00:03:41,320 --> 00:03:42,990
up some column gap.

60
00:03:43,000 --> 00:03:48,510
And then once we get to 1120, then we're going to have a three column layout.

61
00:03:48,520 --> 00:03:58,870
Remember, when it comes to styled components, we're going to go with media, then Min with 992 pixels

62
00:03:58,870 --> 00:03:59,650
over here.

63
00:03:59,740 --> 00:04:04,570
And then as far as the logic, we want to target the form center.

64
00:04:05,450 --> 00:04:09,440
Grid template and we're looking for columns.

65
00:04:09,440 --> 00:04:10,850
One fraction, one fraction.

66
00:04:10,850 --> 00:04:15,140
So two column layout starting with 992.

67
00:04:15,300 --> 00:04:16,910
Align items.

68
00:04:17,980 --> 00:04:20,529
We're going to go with center.

69
00:04:20,829 --> 00:04:25,570
And then lastly, we want to also add some gap for the columns.

70
00:04:25,570 --> 00:04:28,750
So we're going to go with column gap one fraction.

71
00:04:28,900 --> 00:04:35,950
And then let's quickly just copy and paste instead of 992 1120.

72
00:04:36,610 --> 00:04:37,900
Form center.

73
00:04:38,260 --> 00:04:42,700
And the only thing we want to change over here is the grid template columns, and we'll set it equal

74
00:04:42,700 --> 00:04:44,770
to one fraction.

75
00:04:44,920 --> 00:04:45,580
That's it.

76
00:04:45,610 --> 00:04:48,820
Now, don't be surprised if you get logged out.

77
00:04:49,530 --> 00:04:51,030
This is something that I noticed.

78
00:04:51,030 --> 00:04:57,960
So when you start working on a CSS, for some reason it throws some errors and as a result you get logged

79
00:04:57,960 --> 00:04:58,200
out.

80
00:04:58,200 --> 00:05:00,990
So if we navigate back, everything is correct.

81
00:05:01,170 --> 00:05:05,220
We'll just have to log back into the application.

82
00:05:05,220 --> 00:05:13,680
Now I am noticing one thing where essentially I don't have any gaps between the columns and of course

83
00:05:13,800 --> 00:05:15,630
it's not one fraction over here.

84
00:05:15,630 --> 00:05:18,150
My bad, it should be one Rems.

85
00:05:18,720 --> 00:05:19,470
My bad.

86
00:05:19,680 --> 00:05:20,400
Let me save it.

87
00:05:20,400 --> 00:05:22,110
And this is what I was talking about.

88
00:05:22,140 --> 00:05:24,030
For some weird reason.

89
00:05:24,030 --> 00:05:27,270
It doesn't happen when you work on the front end functionality.

90
00:05:27,270 --> 00:05:33,330
It only happens when you're setting up the CSS in the styled component.

91
00:05:34,290 --> 00:05:38,910
Beat just keeps throwing these errors and as a result, we get locked out.

92
00:05:38,910 --> 00:05:41,760
So that's something that you need to keep in mind.

93
00:05:41,790 --> 00:05:45,830
Again, if we go back over here and log in, everything is correct.

94
00:05:45,840 --> 00:05:50,640
And with this in place now, we can start working on the all jobs functionality.