[00:00:00] Hi and welcome back to the reactor building in the sky. We are going to get her out of the Edit not news or styles here. So let's start off by importing this Faasen we need here. It's a wild ride that will allow us to have these icons here. And these are actually different icons but I was never provided these icons. I don't think we should make them. I think what we should do is use the awesome awesome and Pam package just so I can show you that because in the future you're going to want to go to your own house. And I mean there are plenty of icons on the internet but Falastin is a great source to use because it's quick and easy. So resist pencil. All I come here for the pencil obviously in the design for it and we're going to use just plus plus plus one. So let's go ahead and start off by styling these. I'm getting a copy here to get this code and then I'll explain it. So it's going to hurt. It's good news content and let's give one of these. Let's get both of them Klaas's but let's actually change them to diffs because the display is going to be different hispan. So let's go to our newsletter content and we need to get rid of the spam reference because we're actually not going to use it anymore. I've decided. [00:01:23][83.1]
[00:01:24] So let's go ahead and with two dogs and say well one would say action outside of here because with these devs we want to give them costumes and action and we might use them elsewhere in the application. So just give these vulcanize scenes of action and then secondary class names of avenues letter. And on this one letter. OK. So all I did was say action and action in our newsletter. And then I changed to Dave's super simple now and use our content. I just sat down action. That's all we've done so far. Now let's let's go ahead and style. So I copied the code from that design the generated code and it is super simple it's just a higher of 24 pixels and with 74 pixels and abord one pixel and saw forty four E40. Now let's throw this 40 into its own variable. I'm going to hop remained as it says and I'm going to say the color red misic color gray 1 and just get a 40 40 40. Now Walter might as well just throw this at the very top. These colors and give this color here this red color. Here a value of color red. Just because I saw their change. So now in the main yes that's all we did was this color. Throw them over the top and then give this live color red. So that's nice. Now all we have to do is go into let's get rid of the assets from the pier. We don't mean that anymore now and our users are content with that interaction styles or newsletter content has value of actions. Let's check it out in the browser and see what we got. Looks like we have the styles. Looks like it's got that nasty blue on there still. [00:03:20][115.8]
[00:03:21] Let's go out and get rid of that pretty easy. Let's first check in here when you add this color of color gray wine and that should get rid of the nasty blue water. Yeah that's good. Now this bottom line here is work. Why. The reason I haven't changed is because it would be invisible because his background is white so green in my ear or the item. I don't want to be. Now what I want to do is get rid of these and these long taxand had any icons. So let's go here let's go to the browser and looking for fossils for Awesomes Shahriari closet. This is just a library for the other end of castles like 3 and castle or something they put it together and basically where you can install it is by entering this impeachment soul. So just click on that and copy it and it throws in the term PMI for awesome and let's actually cancel it. And let's say I'm PM I he dashed cash saved just so we sent it to our dependencies for some slash reactive font awesome and that way other people who work on this in the future may be able to just install the dependencies we have and use it. So for example we didn't use dash dash if it would only say that to our project. Now we have this get other another dads working on it and in pull it down. [00:04:54][93.1]
[00:04:55] They're obviously not never our new models because we've not included those in repository that are getting or their type in npm install it is installed and that it's not going to see four horsemen there which means their app is going to run which means they're going to get an error wherever they import it. So now that we have imported it we actually need to adding the javascript. They didn't mention in here but I just tested it out and we actually need to use that. So I've got that link copied but I'm going to try and find it. I think I did it a while ago when I was going to a different app. I forgot what it were I got the link. I'm going to see fivesome dot com and see if I can find someone to go to icons or how to use maybe it's probably and get started. Yeah I'm a C guy started pulling in half the script in your Kalsu and not scene each of you whose going to get a humbling crazier of the Tabarre see they haven't an their CNN oh wow the SPG. Yes. That could be. Anyway not without getting us off topic. OK it looks like the script here so far are some free CD. Forget managing files and start using icons. This is pretty quick use for awesome CD and to deliver a cash version of. As with all of its features enabled your project now I'm pretty dang sure we can just use this without installing the library we just install it wouldn't make sense but they can act like you can but that's a small HDMI. So like if weird it uses we want to put it in an index. Let's go to the next issue and if we were to just throw it in here we could probably just like throw these in here as well. [00:07:37][162.6]
[00:07:39] So I just got this link up here and then I copy pasted in index Ishimaru project. Now if we copy these in these tags and here I'm Neal Conan and Robert Wong and we are seeing cases break anything. Now if I throw these in here they'll probably show up yes the top left. They show up now we can't use team only shame on our energies sex. If you try it you can see. So just between links methodologies and here when you get rid of this guy thinks it's going to break things and obviously class isn't going to work. Now let's put a class name and if this works I'm going to be extremely surprised actually in my work because it on innovation lol. Yeah so it works. I didn't know that. So we don't even need it to import fine for awesome but we try and decide whether we should or not. Let's just use it for now it's use for awesome so I'm going to say import the same import import find awesome icons from the fork. Awesome news. Yeah for awesome flashy acts are awesome at Fort Awesomes Lushniak. Awesome. Now without these these icons here are so scared of that it was thrown into the minds and you know it's just a fine awesome icon. Analysts say icon is equal to let's say it was a pencil pencil. Allt. And then for this one down here we're going to just you plus someone you revive and are given a couple of lines and I'm going to say. Plus K that's pretty neat. [00:09:35][116.4]
[00:09:36] Let's save it let's go back to where I can see Shawn with it says No such file or directory. Property Management node log modules and the reason that's happening is because we didn't install the second one react from react font. Awesome. Or maybe we only install that one. Let me see. Yes. We didn't solve this top when I had my dash save for awesome fun awesome so I can install as well. Maybe we don't need you research or I don't think that's the case. Let's just paste this in and install it. But I mean this might use react financing mazes so let's go ahead and do that. It's connect her out and see what we've got here. Capers is still failing maybe we need to cause her server and we look at this. No such file or directory. I think it's because we need to be starter servers so lets go here and Lynds turn it off he's in command or control see the type and then start again and see if it works. If it doesn't work it still will just use the javascript the way you're going with it. How that works. Pretty neat. Now with Senator Sentry's icons and give them a different color because we don't want them to be blue so let's just say our action and our news content I see is us. Let's just say text the line is center and our color is going to be color gray 1. So that should prep us pretty well for our icons here. Now let's send the guy in here and then the next guy we will place these where we need to place them. [00:11:23][107.5]
[00:11:24] I just wanted to really show Faasen the ways you can use it and we learned another way we can use it just directly including it which is really neat. So if you want to do it that way. Feel free to do it that way but I'm going to use the NPM package keys on it. It's just kind of cool to show you new packages that you can use now. We also snagging great colors and we got into the tags so in the next guide we will position them. So let's go to our terminology Kimmerer code red quick when it's status good bad and good coming and I'm just going to say it for us and styled actions for news content. Okay I'll catch the next guy will finish styling the buttons and then we'll move on to the next thing. [00:11:24][0.0]
[678.4]