1
00:00:00,080 --> 00:00:00,440
All right.

2
00:00:00,440 --> 00:00:02,300
And now let's work on the CSS.

3
00:00:02,300 --> 00:00:07,930
And if you notice, the wrapper is actually coming from stats container.

4
00:00:07,939 --> 00:00:14,510
So like I said, we'll use the same logic in the stats page and basically in the admin page we're just

5
00:00:14,510 --> 00:00:16,070
borrowing this wrapper.

6
00:00:16,070 --> 00:00:19,610
So first let's set up the wrapper for stats container.

7
00:00:19,610 --> 00:00:26,030
Again, something we'll use a little bit later in the stats page and then we'll work on the stat item

8
00:00:26,030 --> 00:00:29,720
and then I'll show you how we can access the props in a styled component.

9
00:00:29,900 --> 00:00:32,240
So first of all, let's navigate to assets.

10
00:00:33,050 --> 00:00:39,230
We're looking for rappers and more specifically, we're looking for stats Container.

11
00:00:39,440 --> 00:00:40,910
Let's remove everything.

12
00:00:40,910 --> 00:00:45,050
And basically I just want to set up a grid layout.

13
00:00:45,050 --> 00:00:48,260
So we're going to go here with display grid.

14
00:00:48,290 --> 00:00:54,950
We're going to set up row gap equals to two rems because on a small screen, of course, we're going

15
00:00:54,950 --> 00:00:56,990
to have only one column layout.

16
00:00:56,990 --> 00:01:02,240
And then let's right away set up a media query and we're going to go with min width.

17
00:01:02,830 --> 00:01:07,500
Let's set it equal to 768 pixels.

18
00:01:07,510 --> 00:01:10,690
And in here, let's go with grid template.

19
00:01:11,420 --> 00:01:15,720
Columns and let's set it equal to one fraction and one fraction.

20
00:01:15,740 --> 00:01:23,300
Now, as far as the column gap, we're going to go here with one REM and then let's copy and paste.

21
00:01:24,200 --> 00:01:27,290
And effectively we want to change this to 1120.

22
00:01:28,300 --> 00:01:30,580
And as far as the values.

23
00:01:31,520 --> 00:01:35,630
Let's set it equal to one fraction, one fraction and one fraction.

24
00:01:35,630 --> 00:01:36,740
So three column layout.

25
00:01:36,740 --> 00:01:43,370
And since the value for the column gap is going to be exactly the same, I can just remove this line

26
00:01:43,400 --> 00:01:44,090
of code.

27
00:01:44,180 --> 00:01:50,180
Then let's navigate to a start item and in here we'll have more values.

28
00:01:50,180 --> 00:01:57,200
And I can tell you right away that if we want to access the props that we're passing in the styled component,

29
00:01:57,230 --> 00:02:02,120
notice this stat item returns a wrapper, which is a styled component.

30
00:02:02,120 --> 00:02:06,230
And in here we provide those props if we want to access them.

31
00:02:06,980 --> 00:02:09,229
When we're writing the code.

32
00:02:09,470 --> 00:02:13,070
Essentially we need to look for a function.

33
00:02:13,070 --> 00:02:19,880
So we go here with interpolation functionality where we set up the dollar sign and then the curly braces.

34
00:02:19,880 --> 00:02:27,020
Again, this is typical for template strings in JavaScript, so this is technically nothing unique,

35
00:02:27,020 --> 00:02:29,540
but styled components are just using it.

36
00:02:29,870 --> 00:02:36,290
And essentially in here we'll have a function and we'll be able to access the props.

37
00:02:36,290 --> 00:02:37,490
So all of the props.

38
00:02:37,490 --> 00:02:40,640
Now in our case, we're looking for color and background.

39
00:02:40,640 --> 00:02:41,270
Why?

40
00:02:41,570 --> 00:02:45,950
Because that's what we're passing here in the start item.

41
00:02:46,220 --> 00:02:51,920
Remember, these are the props we're setting up and of course we can access it when we're setting up

42
00:02:51,920 --> 00:02:52,820
the CSS.

43
00:02:52,820 --> 00:02:53,660
So same deal.

44
00:02:53,660 --> 00:02:55,190
Let me just remove everything.

45
00:02:56,000 --> 00:02:58,370
And one by one, let's set it up.

46
00:02:58,400 --> 00:03:02,150
For starters, we're going to go here with padding all around.

47
00:03:02,180 --> 00:03:05,510
Let's set it equal to two rems.

48
00:03:05,540 --> 00:03:08,180
Then we want to go with the background color.

49
00:03:09,110 --> 00:03:10,790
So background is equal to.

50
00:03:10,790 --> 00:03:13,580
And in this case, we're going to go with CSS variable.

51
00:03:15,110 --> 00:03:17,750
The value will be background hyphen.

52
00:03:18,430 --> 00:03:21,880
Secondary hyphen and then color.

53
00:03:21,910 --> 00:03:24,040
That's the value that I picked over here.

54
00:03:24,040 --> 00:03:29,890
And then basically I want to set up the color as the border color.

55
00:03:30,340 --> 00:03:32,830
More specifically the border bottom.

56
00:03:32,980 --> 00:03:36,610
For that, we're going to go here with five pixels solid.

57
00:03:36,610 --> 00:03:41,290
And again, instead of hard coding, I'm going to go with interpolation.

58
00:03:41,410 --> 00:03:43,960
Then I'll provide here a function.

59
00:03:44,080 --> 00:03:50,230
In there I can access the props and I'll just return props dot and then the color, because again,

60
00:03:50,230 --> 00:03:51,310
that's my prop name.

61
00:03:51,670 --> 00:03:57,280
And as a result, whatever color we pass in is going to be set up as the border bottom.

62
00:03:57,490 --> 00:03:59,380
Then we want to go with the header.

63
00:03:59,920 --> 00:04:02,890
We'll just go with display flex.

64
00:04:03,950 --> 00:04:06,020
Line items in the center.

65
00:04:06,940 --> 00:04:10,690
So let's set it equal to center, then justify content.

66
00:04:10,840 --> 00:04:15,280
It's going to be equal to space between and then let's start working on those classes.

67
00:04:15,280 --> 00:04:16,630
Remember, we have three of them.

68
00:04:16,630 --> 00:04:20,350
We have count title as well as the icon.

69
00:04:21,089 --> 00:04:22,890
So let's start here with count.

70
00:04:23,010 --> 00:04:25,410
We want to go with display block.

71
00:04:26,280 --> 00:04:29,250
After that we want to go with font weight.

72
00:04:30,070 --> 00:04:33,040
And let's set it equal to 700.

73
00:04:34,060 --> 00:04:39,550
When we want to increase the font size and I'm going to set it equal to 50 pixels.

74
00:04:39,550 --> 00:04:44,860
And then when it comes to color, well, again, we'll have to do these acrobatics.

75
00:04:44,860 --> 00:04:47,920
And therefore, in order to speed this up, I'm just going to copy and paste.

76
00:04:47,920 --> 00:04:49,870
So I'll set it equal to color.

77
00:04:49,870 --> 00:04:56,800
And again, I'm accessing the color prop, then line height will increase and we're going to go here

78
00:04:56,800 --> 00:04:59,980
with line height equals to two.

79
00:05:00,130 --> 00:05:02,440
Then let's work on that title.

80
00:05:03,360 --> 00:05:06,690
Let's start here with the margin and let's set it equal to zero.

81
00:05:06,720 --> 00:05:08,700
Then text transform.

82
00:05:09,770 --> 00:05:11,990
We're going to set it equal to capitalize.

83
00:05:13,520 --> 00:05:18,320
After that, let's go with letter spacing and let's set it equal to our CSS variable.

84
00:05:18,500 --> 00:05:19,970
So letter.

85
00:05:21,450 --> 00:05:26,780
Spacing and then we want to go with text align and let's set it equal to left.

86
00:05:27,800 --> 00:05:32,240
After that, we want to go with margin top 0.5 RPMs.

87
00:05:32,540 --> 00:05:35,390
So let's create a little bit of margin on the top.

88
00:05:36,750 --> 00:05:38,850
And then let's go with font size.

89
00:05:39,780 --> 00:05:43,700
And let's set it equal to 1.25 Rems.

90
00:05:43,950 --> 00:05:46,470
And then lastly, let's style that icon.

91
00:05:47,270 --> 00:05:52,590
So essentially, this is going to be the span where the icon is going to be located.

92
00:05:52,610 --> 00:05:53,900
We're going to go with the width.

93
00:05:54,080 --> 00:05:56,390
We'll set it equal to 70 pixels.

94
00:05:56,420 --> 00:06:02,930
Then height is also going to be equal to some kind of pixel value in my case, 60.

95
00:06:02,930 --> 00:06:06,140
And then we want to do the same logic over here.

96
00:06:06,140 --> 00:06:08,680
We just want to access the background color.

97
00:06:08,690 --> 00:06:11,660
So we'll go here with background.

98
00:06:12,330 --> 00:06:13,590
That's the property.

99
00:06:13,620 --> 00:06:14,580
Copy and paste.

100
00:06:14,580 --> 00:06:15,810
But instead of.

101
00:06:16,330 --> 00:06:16,930
Color.

102
00:06:16,960 --> 00:06:18,960
We're going to go with Bxg.

103
00:06:19,570 --> 00:06:22,240
Then let's set up the semicolon.

104
00:06:22,780 --> 00:06:25,120
After that, we want to go with border radius.

105
00:06:26,330 --> 00:06:28,490
So let's go with border radius.

106
00:06:29,330 --> 00:06:32,590
That one will be equal to our variable in this case.

107
00:06:34,380 --> 00:06:35,490
Radius.

108
00:06:35,520 --> 00:06:36,500
Okay, good.

109
00:06:36,510 --> 00:06:42,930
And then we have display flex since we want to place everything in the center again, since we have

110
00:06:42,930 --> 00:06:44,280
the span with the icon.

111
00:06:44,280 --> 00:06:51,210
So align items is also going to be equal to center and justify content is going to be equal to center.

112
00:06:51,210 --> 00:06:52,710
So justify.

113
00:06:54,080 --> 00:06:56,390
Content equals to center.

114
00:06:56,750 --> 00:07:00,950
And then lastly, let's style the actual icon in order to access it.

115
00:07:00,980 --> 00:07:02,330
We're going to go with SVG.

116
00:07:02,810 --> 00:07:09,440
We want to increase the font size and we'll set it equal to two Rems and then color.

117
00:07:10,040 --> 00:07:10,910
Same deal.

118
00:07:11,360 --> 00:07:12,980
We'll use this logic over here.

119
00:07:13,950 --> 00:07:14,890
Let me save it.

120
00:07:14,910 --> 00:07:17,640
Let me navigate back to my browser.

121
00:07:17,880 --> 00:07:19,320
Let's submit.

122
00:07:19,440 --> 00:07:23,490
And if everything is correct, we should see the same result.

123
00:07:23,610 --> 00:07:27,090
And with this in place, we can start working on the next step.