[00:00:00] Hi. Welcome back to the reactor building in this set of guides or this guy in the next few guides we are going to be implementing the styles you see here on the screen. So to get started this is our application now. So basically we're style store form here. And there's a few things I want to change with our form to make it Simon basically. So the first thing we have to do is remove the bootstrap style. We actually have an art form. So let's head over to our sign in form here and let's get rid of or let's fix this so we have a label here and what we are feeling but the way I want to style this we're going to have to put in some serious pretty given right here. And let's just throw each one of these in I. So. And then we did and then we'll leave the button and it's own because it's it's all right now. Next thing I want to do is add some CSI style so we can actually styling. So we're going to be looking out for here. Then we have this we have labels. And then within this field it actually just this image. OK. So we have a former death label on implants so we can just Nestle's in a similar manner and see ISIS. So let's head over to our seats us here and let's create a new file. Let's call it let's actually create a directory and here was the oldest you files. Now moving around later. [00:01:32][92.2]
[00:01:33] So it's called a sign in SPSS and immediately lets go import this so we don't forget and waste time trying to figure out why it's not working. So I mean I see it's US import dot slash sign and let's get to our assignment and style our form now. So it's a form and then ever her. And then within our days we have our labels and then we have. We also have within our device inputs. So now this should be pretty simple. Let's start styling the labels and the inputs we can get those nice. First thing we want to do is get them on their own mind. So what we can do is go over to the design and I will start kind of copying styles over it and explaining them. So I'm not just copying. So you can understand why I'm doing things a certain way. And if you're saying how will set it all up nicely unwind. We're going to be using flex blocks. So she wanted to point that out. So for this first thing the e-mail password is going to be pretty simple styles just our form or standard font family which we already know is going to be inherited from the body. We have our color our font size font weight when you can it copying them or remove the ones we know. I going to piece on a label get rid of e-mail get rid of that then I'm going to tap this over. So all that's different now are just these styles right here. All right. So first thing I want to do is get rid of the height and weight because we know we don't want those. [00:02:58][85.2]
[00:02:59] We want the color to be not color. We don't need to park heavily and we don't really need the white Height's aren't really going to change much but we'll leave it in there. So let's save it. Let's head back out and see what we have. And you'll see that we have these nice styles in here. Now it looks like this might be a little bit bolder. So look over here and I'm going to inspect all password and I'm going to change the font way over here that bowl and see if the changes might not in my. Yeah I did. I'm going to come in bowl. It's going to change. Yeah I'm going to change your back to 500 and we'll see if it changes back. It's really subtle what it does. I think it does. You can barely see a change. Yes. So we're going to do is going to come out here and change 500 to fold them for some reason it's not picking it up. I think it may have to do with our imports here with our idea of how we're importing this. I think you can import specific weight from Google but we'll just say all because that's that's nice. Set for us all right now for our import. Let's go ahead and get to stylizing for this. I'm going to cook on input. Copy. Now with we do all this because we need it to be 500 pixels. We want the hype to be 40 but yes so we'll just copy this and put it in to our employer here. [00:04:24][84.4]
[00:04:24] Won't get rid racking up copy and this now I'm going to calling this out. And just so you can copy them down just at its height weight border and border it look at those and I'm going to save it and nothing's going to change if we count it out obviously but remove the bootstrap styles we already have here. So what I'm going to do is actually get rid of this classic Mermin puts Colborne control and then I'm also going to get rid of it. I call them Button button primary Arbeit. Now I'm going to head back to the shop and look at it. Looks like the bottom going to look really bad. It's all looking about now for the day for the e-mail patent password Implats here. Let's just talk let's just Uncomment this code in our seinen and it should give us the effect we want and the way I just see you know the way I can like talking over like this is just like selecting it all hitting and if I wanted to go backwards I have to see this shift tab shift tab no pull backwards. OK so I'm going to go in and it looks pretty nice. The styles are looking good. First thing I want to change for the next thing I keep saying first for the next thing I want to change is the distance between us. We don't want this all the way everybody you know. And this is my password. They're not mine. We'll fix that. And it's really easy. We have to do is give the titles here a default. [00:05:41][76.8]
[00:05:42] So what I'm going to do is going to design and it looks like this password is about 81 pixels wide and it's about 48 pixels away from the from the employee. So all we have to do is say 81 plus 48. So 81 plus 48 is 129 and it's going to be the same e-mails can be 45 plus that you remained here which is 84 plus 45 which is 129. So let's make that 129 pixel on the label for the. And just to be consistent. I'll put it up the top. So 129 that we go we just turned you know we're back to our top and perfect. That's looking really nice. Next thing on the news center this in the middle of something that inspected it hit this little button right here where my analysis will run cursory as you can select an element and Calver over it and see what it is so. First thing you'll see is that the device is actually the width of the screen and we don't want that. And a pretty easy fix. We can apply to the form because the form is also laowai. So all we have to do is say OK how big do we want this. And we obviously just want it the width of the password box and the password just the width of these titles in the form. So if you remember this is 129 pixels and then each of these is like 500 pixels. Yeah 500 is all we have to do on the form say with 500 plus 129. So six twenty nine pixels. Super simple. Now the width will be fixed. You see that. Awesome. [00:07:14][91.7]
[00:07:15] Now you'll see on the right we a small margin so we can easily get rid of that. Yeah we have all this margin here. Oh that's me. I know you can do this. It's really awesome. If you click on computed when you're in the elements and hover over like the padding border or marginal tell you specifically for that element what it is that's really awesome. So for margin we want to get rid of that and we can easily do that by just setting it on up. So we say we say on the form margin 0 auto should centroid save that. Wait for it to reload and bam centered. Great. And you'll see our margin computed styles here. We have four or five on each side so that can be automatic for when we resize and everything. You see how it's changing to 300 213. That's really really neat. That's awesome. Ok so now what we have to do is space these super simple stuff. So you'll see on the designs is about 77 pixels. So I'm going to do that so we cannot be quick on these styles. Is it good you are saying yes. Give these each costing each one of these devices for the e-mail I'm going to my e-mail for the password ones. I'm going to put Crosslands Eagle Pass. OK. Now just so I don't busy here explain what I just did. So for the e-mail label and field did you see here. I just gave them that they have a new e-mail and enter the password password. Now let's look at space. We need to open an e-mail. [00:08:57][102.0]
[00:08:57] We need 77 pixels something to sign in order. Yes sign in and I'm just going to say OK this is all that is let's just select our password password below that are actually our DOT e-mail only faster than our since we're going to use it in like two seconds anyway and 77 pixels so let's just say margin time 77 pixels. Super simple let's go to our app and see what looks like we view that and it didn't work. Let's find out why. Let's go to our sign in. We are e-mail overclass name and it's still not working. Margine top free e-mail. For some reason it says unknown it's because I read because I had it wrong. I said margins is the margin and that should work. Okay great. Now for the password we need about 40 pixels and for the log in between the password we need 87 pixels so we can easily use reference logging missing to find and then just saying Margene Top 7 pixels 87 because your so pretty simple stuff what we have to do now is either good or app and check it out. And that's looking nice now the stylizing for the signing but no quick. So you can copy the style here and I'll get rid of actual keep all that we want the wit and hype to be pretty similar to that we on the border areas between the background to be read so copy that or you want to copy it from the notes below or just typed in as I put it here on the screen so I'm going to put it in here. [00:10:52][114.9]
[00:10:53] Well actually put it in but I'm not busy I'm going to get rid of rectangle 3 and TAB backwards using shift tab. So we have a height of 40 pixels of width of 216 and the border radius of 20 pixels and that a color of red 0 0 0 0 0. Check it out and again it's up for we don't have the text. So let's click on this and we have all these properties copied over and then we'll remove the stuff that we don't need. So we it in the same thing since it's the same moment on two separate elements of the logging and this closing for the logging. Now you change the high to you can get the high because that can modify the whole thing. We can get real with cars on modified old thing. We want the color to be that way. We already have the fine inheritance not near the farm. Now let's change 500 bolts and we know that doesn't work or possibly isn't working it's so subtle I don't know. But yeah go back and check it out. No it's really nice. Now all we had to do now is get it in the center of the screen. So press submit. Let's apply some flex box here and apply it to the whole entire form. Actually let's just say oh I really thought we were these flex marks but we haven't. I think we can still say we could probably just say margin 0 1 0 0 0 by maybe. Let's check that out. All right. That clearly didn't work. Let's get rid of that and let's just say on the entire let's just say display like say justified content Saenger. [00:12:42][109.3]
[00:12:43] Let's see all our eggs oh yeah. Let's change the. We have to change the direction you're calling. OK. See if not that's cool. Now let's change a line items we called a line. Let's go reference the flux box guide that I got. So this one. Can we get looks like Caesar's tricks. Yeah I believe it's just for content. I thought it was just that content should be Saenger should work but that's actually different because we have a console thinking of something else which means a so my word. That's just get all the items. So that worked. Now this looks like it's over a bit too far. These tech spots but I think it's supposed to be going. Maybe not. Yes. We want to pull these back the width of the past route and the basically the look of this which is 129. So let's go to our app and then on the entire day of let's just say transform translate x minus 129 pixels that should be good. Let's check our out here and it that too far we want to divide that by 2. Now that I think about it because we don't want to pull back. That will be an even let's 79 to sixty four point five. Let's pull back sixty four point five and see how that looks. It looks perfectly centered to me. Now this guy is going know pretty long but we've got to have our form completed here so we can finally ended. [00:14:40][117.4]
[00:14:41] But let's just see what happens when we try to sign in and say I'm in an admin password you love a certain air and I'll explain to you the next guy why this is happening and has something to do with our higher work components or high over components and better border and title pretty simple things so so that the next can be pretty short so you can look for a short guy. But let's commit our code and then get into that. I think it's not as good as good coming from the say style log in freestyle sign in catching the next guy. We will fix that error with our redux Kinect and our actions. [00:14:41][0.0]
[874.0]