1 00:00:00,050 --> 00:00:00,400 All right. 2 00:00:00,410 --> 00:00:06,250 And before we set up theme toggle container, let's also take care of the styles. 3 00:00:06,260 --> 00:00:09,230 So we're going to navigate to wrappers again. 4 00:00:09,230 --> 00:00:12,440 And we're looking for the logout container. 5 00:00:12,890 --> 00:00:17,180 Essentially, we want to remove all of these styles first. 6 00:00:17,540 --> 00:00:23,930 This is going to be the look and we'll start by setting up the entire component. 7 00:00:24,790 --> 00:00:25,950 As position relative. 8 00:00:25,960 --> 00:00:26,530 Why? 9 00:00:26,740 --> 00:00:30,340 Well, because this logout button is going to be position absolute. 10 00:00:30,340 --> 00:00:37,630 And again, we want to use our parent to control it and therefore, we'll set it up here as position 11 00:00:37,630 --> 00:00:38,380 relative. 12 00:00:38,500 --> 00:00:41,140 Then let's start with that logout button. 13 00:00:41,920 --> 00:00:49,900 Log out hyphen BTN so we get some global styles for the button and now we are working with the actual 14 00:00:49,900 --> 00:00:50,570 button. 15 00:00:50,590 --> 00:00:53,800 First we'll go with Display Flex because I have three things over there. 16 00:00:53,800 --> 00:00:59,530 I have two icons as well as the text and I want to make sure that all of them are in the center. 17 00:00:59,530 --> 00:01:02,140 So we'll go with align Item Center. 18 00:01:02,140 --> 00:01:06,280 Now also we're going to go with justify content and same deal. 19 00:01:06,280 --> 00:01:10,180 We'll set it equal to center, then we'll add some gap. 20 00:01:10,510 --> 00:01:14,620 We're going to go with zero and then 0.5 REM. 21 00:01:14,620 --> 00:01:20,500 So pretty much this is going to be the gap in between the columns. 22 00:01:20,500 --> 00:01:22,480 So we don't have any rows. 23 00:01:22,480 --> 00:01:25,150 So this is going to be equal to zero. 24 00:01:25,420 --> 00:01:28,540 And this pretty much concludes the actual logout button. 25 00:01:28,540 --> 00:01:30,790 Then we're going to go with IMG. 26 00:01:30,820 --> 00:01:32,650 Now we don't have that image. 27 00:01:32,650 --> 00:01:35,530 So this is something that's coming up a little bit later. 28 00:01:35,530 --> 00:01:40,930 For now, we're just going to go with width, 25 pixels, then height. 29 00:01:41,970 --> 00:01:45,150 25 pixels and also the border radius. 30 00:01:45,180 --> 00:01:50,850 Again, this is something we're not going to see right now since we don't have any users. 31 00:01:50,850 --> 00:01:57,330 But eventually this is going to be the style for the small image we're going to display right next to 32 00:01:57,330 --> 00:01:57,960 the name. 33 00:01:57,960 --> 00:02:02,670 And then let's work on that dropdown effectively where we have the logout button. 34 00:02:02,670 --> 00:02:03,810 So dropdown. 35 00:02:04,450 --> 00:02:05,290 That's the class. 36 00:02:05,290 --> 00:02:09,220 And like I kept saying, position is going to be absolute. 37 00:02:10,340 --> 00:02:11,330 Let's save that. 38 00:02:11,330 --> 00:02:15,950 And then we want to go with top 45 pixels. 39 00:02:15,950 --> 00:02:22,370 So this is going to be 45 pixels from the top left will be zero. 40 00:02:22,430 --> 00:02:26,210 And then we want to go with width 100%. 41 00:02:26,240 --> 00:02:28,880 Then let's add some box shadow. 42 00:02:29,620 --> 00:02:33,850 This will be equal to Var and then second shadow. 43 00:02:36,340 --> 00:02:43,630 And after that we want to set up a text align and we'll set it equal to center. 44 00:02:44,140 --> 00:02:44,890 Then. 45 00:02:45,690 --> 00:02:47,430 We want to hide it by default. 46 00:02:49,210 --> 00:02:52,900 And therefore we'll set it equal to visibility. 47 00:02:54,870 --> 00:02:55,410 Eden. 48 00:02:55,800 --> 00:02:59,460 And then let's also add the border radius and the background. 49 00:02:59,490 --> 00:03:03,840 So border radius is going to be equal to the CSS variable. 50 00:03:03,870 --> 00:03:06,720 Var border radius. 51 00:03:09,010 --> 00:03:11,200 And also we want to set up the background. 52 00:03:11,200 --> 00:03:13,540 So background is going to be equal to. 53 00:03:14,430 --> 00:03:19,200 Var hyphen hyphen, primary and 500. 54 00:03:19,230 --> 00:03:21,240 Let's save this again. 55 00:03:21,240 --> 00:03:24,360 It's hidden by default since we have visibility hidden. 56 00:03:24,390 --> 00:03:28,110 Now we just need to add the class of show dropdown. 57 00:03:28,140 --> 00:03:29,790 Show dropdown. 58 00:03:29,790 --> 00:03:31,980 And this will be equal to visibility. 59 00:03:32,010 --> 00:03:33,330 Visible again. 60 00:03:33,330 --> 00:03:34,620 Let's go back over here. 61 00:03:35,390 --> 00:03:39,770 Let's set it up as visible and check it out the moment we click. 62 00:03:39,800 --> 00:03:42,800 Now we can actually see our logout button. 63 00:03:42,800 --> 00:03:45,980 And now we just want to target the dropdown button. 64 00:03:46,560 --> 00:03:50,830 So basically button inside of that div and style it as well. 65 00:03:50,850 --> 00:03:59,940 So let's target the class first dropdown and hyphen BTN and here we want to go with border radius and 66 00:03:59,940 --> 00:04:08,340 we'll set it equal to var and hyphen hyphen border radius and also we'll go with padding and we'll set 67 00:04:08,340 --> 00:04:10,620 it to 0.5. 68 00:04:11,470 --> 00:04:12,370 Rims. 69 00:04:13,390 --> 00:04:14,320 Okay, Awesome. 70 00:04:14,320 --> 00:04:15,160 And you know what? 71 00:04:15,160 --> 00:04:18,970 Let me go back to Logout Container and let's set it equal to true. 72 00:04:18,970 --> 00:04:22,089 So that way we can clearly see everything what we have. 73 00:04:22,089 --> 00:04:28,150 And then right after the padding, let's go with background, transparent and border color transparent. 74 00:04:28,150 --> 00:04:31,780 So background equals to transparent. 75 00:04:32,080 --> 00:04:35,290 Same deal is going to be for the border color. 76 00:04:35,590 --> 00:04:42,040 So let's remove border color and then color will be white. 77 00:04:42,940 --> 00:04:44,440 So let's set up over here. 78 00:04:44,440 --> 00:04:45,160 Color. 79 00:04:45,370 --> 00:04:48,250 Var hyphen hyphen white. 80 00:04:48,550 --> 00:04:52,300 Then we want to go with letter spacing and text transform. 81 00:04:52,300 --> 00:04:53,260 So letter. 82 00:04:54,850 --> 00:04:56,170 Spacing. 83 00:04:56,900 --> 00:05:00,050 And we'll set it equal to our CSS variable. 84 00:05:00,050 --> 00:05:01,460 So letter spacing. 85 00:05:04,440 --> 00:05:06,420 And then we have text transform. 86 00:05:07,940 --> 00:05:10,550 I'll set that one equal to capitalize. 87 00:05:10,580 --> 00:05:13,610 And after that, we want to go cursor. 88 00:05:14,990 --> 00:05:15,800 Pointer. 89 00:05:15,980 --> 00:05:18,890 So when we're hovering, notice we'll get the cursor. 90 00:05:18,890 --> 00:05:22,610 But I want that dropdown BTN to be spanning. 91 00:05:23,390 --> 00:05:29,270 Pretty much all the cross this div because at the moment notice only if I hover over the button, I 92 00:05:29,270 --> 00:05:36,200 get that cursor pointer and in order to change that we want to go here with 1%. 93 00:05:36,200 --> 00:05:39,110 And then also we want to go with height. 94 00:05:39,990 --> 00:05:43,980 And we'll set it equal to 100% and now everything is going to work. 95 00:05:43,980 --> 00:05:49,590 So notice the moment I hover over the main div, I'll right away get the styles. 96 00:05:49,590 --> 00:05:54,120 So this is going to conclude the styles for the logout container.