Building a Modal Wrapper

[00:00:00]
>> To create our modal, let me just get rid of these so we can focus. Inside of components, let's add a modal, new file, Modal.js. Before we actually build it, let's just add another index file so we can simply just import from components. So export * from /Buttons, and we're gonna export everything as well from Modals, okay?

[00:00:28]
So in our Figma file, we had an illustration. So what you can do is go and export that illustration as an SVG. Or if you already have the SVG saved from your export from Undraw, you can just use that. If you wanna export it, let me go back here, you can go to modals and you can say, where are you?

[00:00:51]
Under the design tab, there is an export option down at the bottom. So you can do export sign up, export it as an SVG. Okay. Inside of source, let's just create an assets folder that's gonna hold all of our illustrations, our icons, etc. I'm gonna create an illustrations folder, And then I'm gonna go and actually drag this SVG in there.

[00:01:26]
I'm just gonna rename it to get rid of that 1 at the end, so it says sign-up, okay? Inside of the assets, let's just create one more file, index.js, so we can export everything. So export * from, Illustrations is gonna be a little bit different. So we're gonna have to actually use our SVG as a source attribute, we're not gonna inline it.

[00:01:58]
So the way I'm gonna do that, Is I'm gonna create a little object here, export const, I'm gonna call it Illustrations. I'm gonna call it SignUp, so import SignUp from /Illustrations/sign-up.svg. So what this will do is, it'll export all of our illustrations in this object. Again, totally, you can do it other ways, this is the way we're gonna do it right now.

[00:02:33]
Also, in our theme, I'm gonna go back and I'm going to add a new color variable, I'm gonna call this formElementBackground. This is gonna be neutral, so our modal had that neutral 100 that it was using. But on our dark theme, we don't want it to be white, we want it to be something else.

[00:02:50]
So on our default theme, it's gonna be neutral 100. And then we want textOnFormElementBackground, I'm gonna set this to neutral 600, so it's gonna be a dark gray. This is all in the notes, if you need to go grab those values. I'm gonna also add this to the dark theme, but on here, I'm gonna change this to blue 100.

[00:03:12]
So we can definitely tell the difference. Again, this is not gonna look very good, it's gonna look horrible, actually. And I wouldn't use this in production, it's just kinda to see the difference here. So let's build a modal. I'm gonna close all of these files, close all to the right.

[00:03:28]
Let's import React. We're gonna need React, and we're gonna need styled components here, we're gonna do a little combination, okay? Import React from react, and we're gonna import styled from styled. Let's create a modal wrapper. This is gonna contain all of the styling for our actual modal. So const ModalWrapper, it's gonna be a div.

[00:03:56]
I'm gonna give it, and this again is gonna look just like your Figma creation. So whatever yours looks like, feel free to go add that in here. Mine was 800 pixels wide, and it was a height of 500. I also added a box shadow, which is gonna be 0 5px, 16px.

[00:04:14]
And this is where that rgba value comes in. So I want it to be black, but at 0.2% alpha, so it's gonna be pretty transparent. For a background color, we just defined those two themes, so we´re gonna take props again. We wanna grab that formElementBackground. It´s gonna be the same for color, I´m just gonna copy it to save a little bit of time.

[00:04:41]
It´s gonna be textOnFormElementBackground, textOnFormElementBackground. We're gonna use flex box, so let's display flex. This will align our items very nicely. We're gonna give it a flex-direction of column. We want this all to be aligned in the center, so justify-content center. I also want this to be both vertically and horizontally centered, so align-items center.

[00:05:07]
I am also gonna give this a position of relative, we'll see why in just a little bit. A little bit of a border-radius, and that's it. Okay, so we've got our wrapper. Now let's actually create the content that goes inside. So I'm gonna put this under here, we need our typeScale, so import typeScale from /utils.

[00:05:41]
I wanna create the header, SignUpHeader, it's gonna be an h3. So we want our h3 to have the font size of an h3, so let's do that. So font-size is typeScale.h3, header3. And back on my modal, you can see, so this is our header three. This is our text content, so let's create that as well.

[00:06:11]
SignUpText is gonna be styled.p, it's gonna be a paragraph tag. Again, let's set our font size, typeScale.paragraph. I'm gonna give this text a max-width of 70%. You can see otherwise, it would span the whole container. We don't really want that, so max-width of 70%. And I just want the text to be aligned to center.

[00:06:36]
So we'll do text-align of center, Center.