WEBVTT 00:01.130 --> 00:06.800 Okay, let's do a little bit of styling because we haven't done a styling in a while and this is not 00:06.800 --> 00:08.210 really looking very good. 00:08.240 --> 00:14.060 Well, so in this video what we'll do is we'll try to improve a little bit of our application. 00:14.060 --> 00:17.360 So the first thing first we have that white background. 00:17.360 --> 00:20.090 It doesn't really match whatever we have in the second screen. 00:20.090 --> 00:22.820 So let's try to combine them together. 00:22.820 --> 00:31.070 And of course you could have a like a main level if you go here into inside index.js, what we could 00:31.070 --> 00:38.120 have is we can have a different wrapper for, for this with, with a heading inside and what you render, 00:38.150 --> 00:39.920 you will render inside this. 00:39.920 --> 00:42.590 So you have like a top styling on this level. 00:42.590 --> 00:44.930 And that will apply for any pages. 00:44.930 --> 00:50.840 But our application is so small we could actually duplicate it and have it some styling in our JS. 00:50.840 --> 00:54.320 So what I will do is I will open app.js here. 00:54.500 --> 00:57.920 And what we've done is we have that header here. 00:57.920 --> 00:59.480 We had that app class name. 00:59.480 --> 01:01.640 So we could actually reuse that. 01:01.640 --> 01:04.930 So I will copy that and I will go to out at the moment. 01:04.930 --> 01:07.450 I will close all of the rest of the things. 01:07.450 --> 01:10.300 So it will be easier to use here. 01:10.300 --> 01:11.500 And we have that out. 01:11.500 --> 01:13.840 So we have that class. 01:13.840 --> 01:17.860 So if I will replace it with the similar style as we had it there. 01:17.860 --> 01:22.300 So we will have app class name for the main element here. 01:22.300 --> 01:25.810 And then what we have is we have that heading one. 01:25.840 --> 01:31.990 So instead of my heading as I have it here, I can get put that inside header. 01:31.990 --> 01:34.450 So it will be nice and big on on the top. 01:34.450 --> 01:39.070 And then we also need to do all the rest of the things will fit. 01:39.070 --> 01:44.080 So basically we'll apply the same style here and the same header as we had it there. 01:44.080 --> 01:50.800 So if I will go back here, you see this is much more styled in a similar way as we had before it. 01:50.800 --> 01:52.930 This is way too large. 01:52.930 --> 01:55.870 So what we could do is we could say. 01:59.800 --> 02:03.450 That this grid here we can say is. 02:05.730 --> 02:06.450 Wait. 02:06.450 --> 02:09.570 And I can say one half. 02:09.570 --> 02:13.110 So basically that will tell me this is half width of the page. 02:13.110 --> 02:15.150 So if I will refresh it. 02:15.150 --> 02:18.270 Now you see this is half of the page. 02:18.270 --> 02:21.270 I don't like the how the button is styled here. 02:21.270 --> 02:23.310 So we have a few options. 02:23.310 --> 02:24.240 How we could style it. 02:24.270 --> 02:26.610 We can style every button separately. 02:27.180 --> 02:32.280 We could style a new element and reuse that element in different places. 02:32.280 --> 02:34.560 Or we can target that with CSS. 02:34.590 --> 02:40.950 What we could do is we could target different elements in our application with one style. 02:40.950 --> 02:45.120 So you could create your own element as well. 02:45.120 --> 02:50.400 So let's say you want to use a text info here or a text input. 02:50.700 --> 02:55.710 And then you could create that element and reuse it with react as a normal component. 02:55.710 --> 02:57.300 Or you could create a style. 02:57.330 --> 02:59.100 I will show you how to create a style. 02:59.100 --> 03:03.120 So I will go here and I will go to app. 03:03.120 --> 03:07.610 Up, see it up CS and we can create a style for input. 03:07.610 --> 03:12.800 So I will do input and I can also do for text area. 03:12.800 --> 03:17.960 So basically that will be two elements that I will have it and I can do for example padding. 03:17.990 --> 03:21.410 And I can put 0.8 REM like that. 03:21.410 --> 03:28.610 So I can also do a default margin, maybe margin of let's say three pixels. 03:29.240 --> 03:34.190 And I would say so you can have it that nice and big if you like it. 03:34.190 --> 03:36.980 I think it's looking a little bit too much here. 03:36.980 --> 03:41.510 So maybe 0.5 or 4 REM. 03:41.510 --> 03:46.790 I don't want to have them that big, but they are my my much bigger as well. 03:46.790 --> 03:49.040 So I could do the same with the buttons. 03:49.040 --> 03:52.310 For example, I have that button here so I can go here. 03:52.310 --> 04:00.320 I can say I want to style a button in my application, and all buttons will have a background color 04:00.320 --> 04:01.100 of. 04:01.100 --> 04:07.750 Let's say I would like to have this color, for example, and it's colored as any other good. 04:07.750 --> 04:12.640 So if I will go here and basically that's the color of my background. 04:12.640 --> 04:14.920 So that's why it was kind of for me. 04:14.920 --> 04:19.750 But I want to have maybe uh, I can say maybe gray. 04:20.740 --> 04:31.360 So it will be gray color and it's not looking great, but I can do also a border radius of let's say 04:31.360 --> 04:32.530 three pixels. 04:32.530 --> 04:37.180 So it will have a rounded corners here and I will save it. 04:37.660 --> 04:39.760 And I have a little bit of rounded corners. 04:39.760 --> 04:47.200 Also I can have maybe a text of something almost black. 04:47.200 --> 04:48.640 So maybe 2222. 04:53.140 --> 04:56.860 And it's supposed to be color. 04:56.890 --> 04:57.640 Sorry. 04:59.170 --> 05:01.450 And we have a button like this. 05:01.450 --> 05:07.560 So also we could move it like if we have like a two layer grid, and we want to move it to the right 05:07.560 --> 05:08.040 hand side. 05:08.040 --> 05:14.820 What we can do is we can go to out here and we have that button, but it's on the left hand side because 05:14.820 --> 05:18.030 it is all will be left, right, left, right. 05:18.030 --> 05:20.760 And then we don't have a left element so we can actually add it. 05:20.760 --> 05:27.150 So if I will add an empty element like a paragraph here, I can do non-breaking space paragraph like 05:27.150 --> 05:27.720 this. 05:27.720 --> 05:31.350 And it will actually put something empty here. 05:31.350 --> 05:33.870 And that will be pushed to the right hand side. 05:33.870 --> 05:38.070 This is not maybe looking great, but it will do the job here. 05:38.070 --> 05:41.160 So I'm not going to spend too much about styling. 05:41.160 --> 05:43.410 But what I want you to do is I will. 05:43.440 --> 05:46.140 I want to show you different ways how we can do that. 05:46.140 --> 05:50.070 We can do that with tailwind as we run it here. 05:50.070 --> 05:56.670 We can do that with our styles that will target the general kind of HTML elements like this and this. 05:56.670 --> 05:58.620 And you can have your own styling here. 05:58.620 --> 06:02.280 So we can mix and match whatever you think it will be better for you. 06:02.280 --> 06:04.290 So we have that style. 06:04.290 --> 06:10.970 So if I will go back here and if I will log in now and click register. 06:11.720 --> 06:14.720 Sorry, I need to log in here if I will click login. 06:14.960 --> 06:21.980 You see this button also has been styled as well because I target every single button and every single 06:21.980 --> 06:24.020 input here in the same way. 06:24.020 --> 06:25.310 So I have that. 06:25.310 --> 06:31.250 What I could also do is I can do a similar thing as I have done it before in here, and I see I don't 06:31.250 --> 06:32.420 have much space here. 06:32.420 --> 06:36.590 This, this will take the full width of this because that's inside the grid. 06:36.590 --> 06:37.880 But this is not inside the grid. 06:37.880 --> 06:45.860 So I need to maybe move it a little bit from the edges so I could do it here in the button I can do 06:45.860 --> 06:46.790 a padding. 06:47.270 --> 06:51.380 So padding will be top top and bottom. 06:51.380 --> 06:55.580 Maybe I can do uh two pixels and left and right. 06:55.580 --> 06:58.520 I can maybe have five pixels. 06:58.520 --> 07:01.550 So that will make the button a little bit bigger. 07:01.550 --> 07:07.120 And I can actually make it a little bit more from the left and right, maybe ten. 07:07.150 --> 07:10.600 So if I will do like this, it will look like this. 07:10.600 --> 07:12.850 So there will be a little bit of space around this. 07:12.880 --> 07:18.010 What I could do is I can disable the button if I don't have anything here, and I will show you how 07:18.010 --> 07:19.180 to do that in a second. 07:19.210 --> 07:24.310 So first thing first I will go to our movie form. 07:25.780 --> 07:27.340 This is where we have that button. 07:27.340 --> 07:31.450 And what I can do is I can do the same trick as I've done it before. 07:31.510 --> 07:37.330 So I will do Non-breaking space paragraph and that button will be moved here. 07:37.330 --> 07:43.960 And then if we don't want to allow send anything to our database, what we can do is we can disable 07:43.960 --> 07:46.570 this button so it won't be a clickable. 07:46.600 --> 07:51.610 What we can do is we can create in this movie form. 07:51.610 --> 07:58.780 Here I will create constant is disabled is disabled. 07:58.780 --> 08:02.920 That will be my new variable and that will be based on title and description. 08:02.920 --> 08:08.550 So I will say if title and Description. 08:08.730 --> 08:09.990 Oh, this. 08:12.180 --> 08:13.200 Description. 08:13.560 --> 08:17.310 Then it will be false. 08:17.580 --> 08:20.970 So it's not going to be disable, otherwise it will be true. 08:21.420 --> 08:23.700 So basically I don't have to have a ternary. 08:23.700 --> 08:29.040 I can also have is if, if title and description then. 08:29.070 --> 08:30.330 And I can negate it. 08:30.330 --> 08:31.500 Or I can leave it like this. 08:31.530 --> 08:32.400 It doesn't matter. 08:32.400 --> 08:34.620 So I will have that variable here. 08:34.620 --> 08:41.430 And what I can do is on my button I can say if that button is disabled, I said if disable is equal 08:41.430 --> 08:45.030 to and I will do it in the curly braces is disabled. 08:45.060 --> 08:48.990 So I will copy that and I will put it on an another one as well. 08:49.590 --> 08:52.800 And here so basically I disabled that button. 08:52.800 --> 08:55.830 If my A those are empty. 08:55.860 --> 09:00.660 So if I will go here and go to network and if I will start. 09:00.810 --> 09:02.130 So let's clear it. 09:02.130 --> 09:08.780 If I will start here clicking they are still kind of not disabled. 09:08.780 --> 09:12.290 So if I will go here and I check and if I have a title. 09:12.320 --> 09:14.960 Well basically the title and description is there. 09:14.960 --> 09:15.860 They're empty. 09:15.890 --> 09:18.320 So so so what I can say is. 09:20.720 --> 09:27.680 Equal to empty and this one equal to empty. 09:28.370 --> 09:30.860 And I can do or actually to check it. 09:30.860 --> 09:38.240 So if title is equal to empty string or description is empty to screen then I will be. 09:38.270 --> 09:40.580 Oh sorry I need to have that true. 09:42.230 --> 09:43.850 So basically I can leave it like this. 09:43.850 --> 09:45.620 So it will be maybe maybe easier. 09:45.620 --> 09:47.690 So I will have is disabled. 09:47.690 --> 09:53.030 If title is empty string or description is empty string then it will be disabled. 09:53.060 --> 09:57.590 So if I will save it now I can go here and if I will. 09:57.620 --> 09:59.510 Oh, at the moment this is not empty. 09:59.510 --> 10:05.450 So if I will do create a movie like this and if I will try to click it, nothing actually happens. 10:05.450 --> 10:09.550 So basically it's not going to allow me to do anything here. 10:09.910 --> 10:12.880 I need to put something here just to make it enabled. 10:13.060 --> 10:18.190 So if I will go here, what I could do is I can go to app CSS. 10:18.700 --> 10:22.060 And you see I have the background color and color for this one. 10:22.060 --> 10:31.570 But I can also have another style button that will be disabled and like that with a colon. 10:32.320 --> 10:39.760 And then I can style, I will take those two and I will revert the color. 10:39.760 --> 10:47.080 So I will take 2 to 2 as a background color, and I will take the gray as a color. 10:47.080 --> 10:51.250 So basically I need to put that here. 10:51.250 --> 10:54.550 So basically I revert the colors when it's disabled. 10:54.580 --> 11:00.670 So if I go here I see this is disabled and it's not really readable at this point. 11:00.670 --> 11:04.630 But if I will put something here and here you see this is enable. 11:04.630 --> 11:09.940 So if I will go here and I don't have anything there then it's disabled. 11:09.940 --> 11:12.480 But this is really hard to see here. 11:12.480 --> 11:14.730 But we could work on the styles here. 11:14.730 --> 11:17.880 That is actually this is shouldn't be gray. 11:17.880 --> 11:19.440 It should be like that. 11:19.440 --> 11:20.610 So my bad. 11:20.610 --> 11:25.020 And here and if I will go here you see it is a little bit better. 11:25.020 --> 11:33.000 So if I will have something here and both fields then I can toggle disable or enable. 11:33.030 --> 11:35.160 And I can actually do the same here. 11:35.190 --> 11:36.780 And he here. 11:36.780 --> 11:40.140 And we have in movie form something like this. 11:40.290 --> 11:41.310 So we can copy that. 11:41.310 --> 11:45.780 And I can go to out and then do exactly the same as we have it here. 11:45.780 --> 11:47.700 So I will have is disabled. 11:47.700 --> 11:53.130 But in this case we want to check user name and password. 11:53.880 --> 11:59.190 So if I don't have if one of those is empty then it will be disabled. 11:59.190 --> 12:03.390 And then we can also apply the same thing as we've done it here. 12:03.390 --> 12:06.840 So disabled will mark it as disabled. 12:06.840 --> 12:10.020 But we have a style so we don't have to repeat the styles. 12:10.020 --> 12:14.240 This will be automatically applied for all buttons we have in our application. 12:14.660 --> 12:16.550 So I'll put it like this. 12:17.660 --> 12:19.670 And I think I. 12:25.400 --> 12:26.090 Like this. 12:26.090 --> 12:33.440 And then if I go here and let's say we want to we need to go to our application. 12:33.440 --> 12:38.690 We'll work in a logout button soon and I'll clean it and refresh it. 12:38.690 --> 12:40.370 You see I have that as well. 12:40.370 --> 12:45.380 So if I put in password I can start login. 12:45.380 --> 12:48.800 Otherwise it will be disabled like that. 12:48.830 --> 12:55.040 Okay, so I am not going to spend too much time now to style this application. 12:55.040 --> 13:01.430 You should have a clear kind of idea how you can use the different styles and how you can do it, and 13:01.460 --> 13:05.390 obviously you will style your own application in your own way. 13:05.390 --> 13:11.150 But this is how we can control different styling across different across the entire application.