1
00:00:00,480 --> 00:00:08,190
Now we will give some functionality to our board, the idea that this the will give the.

2
00:00:10,350 --> 00:00:17,700
Dark mode feature, and we'll also style on board by giving them by giving it some serious glass.

3
00:00:18,360 --> 00:00:25,850
So let us, first of all, create a button which will be responsible for the dark mode.

4
00:00:26,080 --> 00:00:29,880
So let us, first of all, import button from material way.

5
00:00:30,300 --> 00:00:36,090
Or you have to import it if you want to use the material Ableton the Newton portrait to import.

6
00:00:37,450 --> 00:00:38,800
But from.

7
00:00:40,450 --> 00:00:44,470
And out of this, we'll vote at you.

8
00:00:44,680 --> 00:00:50,240
It's less material, less modern for better.

9
00:00:50,920 --> 00:00:59,290
This is a go to import department and after each one we'll have the bottom, so that will be a bottom.

10
00:01:02,820 --> 00:01:09,840
Yeah, the set of this needs a closing tag, basically inside the button will be giving an icon which

11
00:01:11,000 --> 00:01:17,080
to their dark mode icon, so let us skip that first, so I need to search that icon on the alleyway.

12
00:01:17,930 --> 00:01:22,620
When I come here, I go to the icons and I search for.

13
00:01:24,030 --> 00:01:24,800
Sergeant Ward.

14
00:01:27,440 --> 00:01:35,980
We can use any one of them, like in all three I can is only one of them, so I think I showed you this

15
00:01:35,980 --> 00:01:36,280
one.

16
00:01:37,400 --> 00:01:38,030
Oh, this one.

17
00:01:38,300 --> 00:01:40,030
Oh, good, this one's better.

18
00:01:40,580 --> 00:01:46,610
I copy that and then I go to my escort and now I will paste to here.

19
00:01:47,690 --> 00:01:51,720
So once I stood now, I can easily use it for.

20
00:01:51,830 --> 00:01:54,080
I'll use that inside this buttons or.

21
00:01:57,680 --> 00:02:00,080
And here I will import that.

22
00:02:00,670 --> 00:02:04,540
Like, right, Nas.

23
00:02:06,000 --> 00:02:08,030
It should give me an option to auto import.

24
00:02:09,080 --> 00:02:11,030
On giving me let me close this.

25
00:02:13,630 --> 00:02:18,250
I can just copy it because I don't like typing same things again and again.

26
00:02:19,830 --> 00:02:22,740
And then I can give a self-closing take, and then I see it.

27
00:02:24,120 --> 00:02:31,530
If I see brothers running ads running in all our territories, we need to go to the browser and see

28
00:02:32,040 --> 00:02:34,500
if the changes are being reflected.

29
00:02:36,060 --> 00:02:42,000
Oh, yeah, we can see a button which is responsible for the mode.

30
00:02:42,570 --> 00:02:47,670
Now we need to make the setup, the things in order and we need to style are harder.

31
00:02:48,900 --> 00:02:54,600
So let's go ahead and do that for the very first thing which you really need is we need to give some

32
00:02:54,780 --> 00:03:01,720
glasses, so we'll give a glass to this device was lost before.

33
00:03:02,430 --> 00:03:04,070
So that will be the.

34
00:03:06,270 --> 00:03:08,130
Name of.

35
00:03:09,480 --> 00:03:17,730
And that last name of Heather, so after that, I don't think any class name is there, so the only

36
00:03:17,740 --> 00:03:21,120
class name we should look giving is to the bottom part.

37
00:03:23,190 --> 00:03:24,150
OK, we can give.

38
00:03:28,610 --> 00:03:32,230
Last name as safe because this would be saving the.

39
00:03:33,880 --> 00:03:34,510
Dartmouth.

40
00:03:35,740 --> 00:03:42,230
OK, when I see it now, we want to give styling to this glasses inside the CSIS.

41
00:03:43,000 --> 00:03:44,740
So this is harder and does this.

42
00:03:45,030 --> 00:03:49,210
So let us go to the next door, see us, which is completely empty right now.

43
00:03:49,870 --> 00:03:56,140
So first of all, I need to grab some global CSIS, which is common for like the entire application

44
00:03:56,590 --> 00:04:02,110
and that I will be copying from the project, which I've visited before.

45
00:04:02,500 --> 00:04:04,720
So that is nothing to stop.

46
00:04:05,230 --> 00:04:10,030
Well, let's see like different colors and different family, and also that this is what we want to

47
00:04:10,030 --> 00:04:10,250
do.

48
00:04:10,270 --> 00:04:12,190
So let me just copy and paste it here.

49
00:04:12,490 --> 00:04:14,110
But this is not a multi multi-year like this.

50
00:04:14,650 --> 00:04:16,450
It is given to you by the React.

51
00:04:16,460 --> 00:04:22,810
Also, like in the beginning, the matter is that I just cleared the index cases and the system also

52
00:04:22,810 --> 00:04:23,260
deleted.

53
00:04:23,800 --> 00:04:24,910
That's why I need to do it again.

54
00:04:25,180 --> 00:04:26,110
OK, no worries.

55
00:04:26,380 --> 00:04:29,890
So now we'll create the header in the style, the header component.

56
00:04:29,890 --> 00:04:33,730
So we'll start with the header and inside the header will giving.

57
00:04:33,730 --> 00:04:39,700
The very first thing is the display flags, so we'll be displaying we'll be making use of the Flexbox

58
00:04:40,570 --> 00:04:47,410
display flags and I want this and I want the items to be aligned in the center.

59
00:04:47,710 --> 00:04:49,870
So line items.

60
00:04:51,880 --> 00:04:53,580
To these, OK?

61
00:04:54,100 --> 00:04:57,670
And let me save and see how that looks.

62
00:05:00,850 --> 00:05:07,030
OK, that looks pretty good, but that is also change because we have given that the global success

63
00:05:07,600 --> 00:05:09,490
OK, things are now in one line.

64
00:05:09,760 --> 00:05:11,890
But I want a little bit of space in between.

65
00:05:11,890 --> 00:05:16,480
I wanted to I can to go here, not right next to the one.

66
00:05:17,200 --> 00:05:27,040
So for that, I will provide us property just to fire contained contained space between.

67
00:05:28,360 --> 00:05:34,150
So what it will do is it will look like provide some spaces between the elements inside this particular

68
00:05:34,570 --> 00:05:34,990
device.

69
00:05:35,260 --> 00:05:38,020
So we'll save it and now if I go.

70
00:05:39,420 --> 00:05:45,690
And Jack, you can see that the space, obviously that and the like went to the terminals.

71
00:05:46,080 --> 00:05:47,430
But that's OK.

72
00:05:48,160 --> 00:05:55,850
OK, so now we can move further and stay to after they had done is done and all we want to like style

73
00:05:55,860 --> 00:05:56,550
for document.

74
00:05:56,980 --> 00:06:01,560
Now what dark mode will do, basically, is that it will change the background color to black.

75
00:06:02,010 --> 00:06:05,830
There is nothing more and it will change the header to white.

76
00:06:06,290 --> 00:06:08,190
So that is what of.

77
00:06:10,110 --> 00:06:10,640
Lord.

78
00:06:12,350 --> 00:06:12,770
Is.

79
00:06:14,990 --> 00:06:16,070
Background color to.

80
00:06:17,790 --> 00:06:18,300
Black.

81
00:06:19,110 --> 00:06:23,580
As simple as that, on after that will create the.

82
00:06:25,160 --> 00:06:25,550
At the.

83
00:06:28,520 --> 00:06:29,220
There are.

84
00:06:31,040 --> 00:06:36,530
More to one and that will be followed.

85
00:06:37,650 --> 00:06:45,080
Why not wait, right, let me save it, and this was the only thing now we need to provide some JavaScript

86
00:06:45,080 --> 00:06:51,530
so that we toggle among that ultra toggle among that so that we will do now.

87
00:06:52,280 --> 00:06:59,720
So the very first thing is we will pass out prop inside this as an object inside this function.

88
00:06:59,720 --> 00:07:02,390
So that will be under toggle dark mode.

89
00:07:02,390 --> 00:07:03,900
So that will be handled.

90
00:07:06,430 --> 00:07:07,170
Oh, go.

91
00:07:08,770 --> 00:07:10,000
I took more.

92
00:07:11,610 --> 00:07:12,020
Simple.

93
00:07:12,720 --> 00:07:16,980
And inside of this, we'll provide an on click function.

94
00:07:19,190 --> 00:07:20,000
So on Glick.

95
00:07:21,770 --> 00:07:26,300
And beside this, there will be a vital function.

96
00:07:28,560 --> 00:07:35,490
So basically, you don't even need this calibrated inside, but I'm just going to make things a little

97
00:07:35,490 --> 00:07:36,180
bit more clear.

98
00:07:36,690 --> 00:07:44,280
So dark mode and inside of this we'll like provide a function that will be.

99
00:07:46,310 --> 00:07:47,120
Previous.

100
00:07:49,940 --> 00:07:57,980
Mould will be an argument, and it will just reverse it like whatever was the well, you know, it is

101
00:07:57,980 --> 00:08:02,990
just reversing that value, for example, it was like.

102
00:08:04,940 --> 00:08:09,200
It most certainly changed Iraq, and if it started, it will change like as simple as that, this exclamation

103
00:08:09,200 --> 00:08:16,610
is the negation saying this is the negations and like whatever the value, it will just make, you get

104
00:08:16,610 --> 00:08:17,780
that from that venue.

105
00:08:18,530 --> 00:08:22,340
So I think that certainly let me just to say, wait and see.

106
00:08:24,890 --> 00:08:25,670
That works.

107
00:08:26,970 --> 00:08:27,750
I come here to.

108
00:08:31,870 --> 00:08:34,420
Now, right now, we don't see any changes, basically.

109
00:08:35,680 --> 00:08:36,460
Why's that?

110
00:08:36,760 --> 00:08:38,430
And of a lot more is not a function.

111
00:08:38,440 --> 00:08:38,770
We.

112
00:08:40,510 --> 00:08:41,680
Great, great, great, great.

113
00:08:44,000 --> 00:08:46,370
Bill told our model why it's not the phone.

114
00:08:48,680 --> 00:08:49,850
I have created a homes.

115
00:08:54,710 --> 00:09:03,200
Basically, this will be rendered inside the app, like we'll be waiting like we are passing it as appropriate,

116
00:09:03,200 --> 00:09:07,010
not, but we'll be making use inside the abductees.

117
00:09:07,370 --> 00:09:10,490
That is why it's not working as expected.

118
00:09:11,090 --> 00:09:12,830
Otherwise, everything else is perfected.

119
00:09:12,830 --> 00:09:16,610
The way looks good and the functionality is also like, complete.

120
00:09:18,400 --> 00:09:20,930
So for the head, we are done for DNA.

121
00:09:21,620 --> 00:09:23,680
And next will be building.

122
00:09:25,030 --> 00:09:27,730
I don't know what maybe the search component, what comes after that?

123
00:09:27,760 --> 00:09:28,270
Let me see.

124
00:09:31,260 --> 00:09:32,160
We're done for this.

125
00:09:32,610 --> 00:09:40,320
Now we'll be providing some he had other things, but nobody thinks will be better as we process right

126
00:09:40,320 --> 00:09:40,740
now.

127
00:09:41,220 --> 00:09:45,960
I mean, look, not look exactly the same, but we will make the things that look eventually.

128
00:09:46,500 --> 00:09:47,460
OK, so.

129
00:09:48,670 --> 00:09:53,380
Right now, we're reading the search component, so.

130
00:09:54,290 --> 00:09:55,460
That's it for this video.

131
00:09:56,180 --> 00:09:57,590
This was the Henry review.

132
00:09:57,830 --> 00:10:03,180
And next will be creating the third component of this food search eating.