We've got our form on the screen.
It definitely appears to be behaving correctly.
But you know the styling definitely feels very off right now like the form goes all the way to the borders
of the page which is awfully ugly.
And then our submit button is just like a plain button.
So in this section we're going to take a little bit of a pause from all the javascript the stuff that
we've been working on and think a little bit about some of the styling in here.
And the first thing that will take care of is making sure that our content doesn't sit flush against
the edge of the browser to handle that.
We're going to make a kind of obtuse little change when I say obtuse because this is kind of a hidden
one inside of our app component.
So after us inside the components directory we are showing a div right now inside of our browser router
on that div..
I'm going to add a class name of container.
Now the container class name is a special class name used by materialized CSSA which is a CSSA library
that we're using the container Kure does a couple of different things.
But one of the most particular ones is that it adds a bunch of margin or of padding along the left and
right hand sides of the page.
So by just adding on this class name of container right here it will ensure that our form doesn't automatically
stretch to fill out the full width of the window.
So let's say this and see how we're doing.
So our app loads back up and when it does.
OK so we've got some nice space in here it looks way more reasonable than it did before.
Next I'd kind of like to take a little bit of a stab at this button down here the submit button.
So if you remember back to the mockup that we've been looking at we had said that there should really
be two buttons down the bottom once that say cancel to go away from the form creation right here and
then the other one should say submit or continue.
Something like that to go on to our former view page.
So I think that we can probably handle both those at least the styling of each of them right now.
Maybe we'll put in the implementations cancel button and I will worry about the summit button in just
a minute.
So back inside of my survey form component I'm going to find my render function.
Here it is right here.
I'm going to find the button that I currently have placed with the text of submit and we're going to
add a couple of different class names on this thing to make it look just a little bit nicer.
First off I don't want this button to actually submit the form anymore.
So rather than attempting to have it submit the form.
All right Susan you know it.
I take that back this way my sake.
Let's leave Tiflis summit on here right now.
We'll come back to that in just a little bit.
What I meant to say we'll just forget that.
What I meant to say was we went out on a class name with a couple of different class names to kind of
make this thing little bit nicer.
So we're going to say teal between flat right and white text like so.
So these will make the button appear teal style it as a flat button.
It'll pull the button to the right side of the screen and then cause the text inside of the button tag
to appear white.
Now the other thing I would like to do is maybe add on just a little icon immediately after the text
just kind of give our users the idea of what this thing does.
So we're going to do an icon mirror how we do those.
We place an eye tag with the class name of material icons and then we're also going to add on a class
name of right to get the button or the icon to appear on the right hand side.
We close off the tag and then we have to add a word in here to specify the type of icon we want to use.
And for us I think done now.
Yeah we're seeing that when the user clicks this button there's still going to go to the review screen.
So Don isn't super accurate but you know what it's going to work out for us.
You'll see what the icon actually looks like.
So going back to the browser.
OK.
So that looks pretty good.
Much more reasonable.
Now the text of Samit still has a little bit misleading.
A user is still going to be able to review this thing before it gets sent out.
So rather than submit let's put the text of next in there just to make sure that's clear.
Hey there's one more step that you have to go through before you attempt to actually submit this thing
so full makeover.
That's looking pretty good.
Now the next thing I'd like to take care of is the button that a user can click to cancel out of this
entire survey creation flow.
So it kind of cancel button to go back to probably the dashboard.
So we'll see if the user clicks this one right here.
We want to send the user back to the dashboard.
OK so here's the button we just added.
Remember that to show or see me to navigate a user around our application.
In this case presumably back to the dashboard component that is bringing in the use of re-act router
in our application and to navigate a user around inside of our application.
We use the link tag that is provided by re-act router Don.
So at the very top of the file we will import the link tag from re-act router.
Dom and then back down inside the render function right above the existing button will add the link
tag with the text of cancell will make sure that whenever the user clicks it we navigate them back to
the slash surveys route in our application which is really our dashboard.
And then we're going to give this thing a class name just to silent a little bit.
So it's going to be read between flat and again white text like so.
OK.
So let's see how we're doing now.
There's the refresh.
All right we've got the cancel button and we click it.
We go back to our dashboard.
And of course we can always go back to the form.
It is looking pretty good again.
You'll notice that little icon I have flying around right there.
Can't say enough.
It is the password manager I use so it's a custom chrome add on that I have.
You probably do not have this like on here.
And if you don't that's totally fine.
All right so Ford is looking pretty good.
Were able to take all this text click the next button and somehow read it or at least say yeah we are
successfully recording this stuff but we still have a little bit of work to do here.
For example remember that recipient list right here is supposed to be a list of e-mails that a user
should enter that will use to send off to you know all these different users right.
So presumably this needs to be like a well formatted list of e-mails because if a user just starts going
like blah blah blah blah dot com and then like a space and then the next one.
Well that might not work out for us like maybe we want to really make sure that the user formats the
e-mails that they put in here in a very special fashion.
In addition we probably want to make sure that the user enters in a subject line and email body and
a survey title.
So I think that we still need to add in maybe type of validation step in here to kind of validate the
inputs that the user has added before allowing them to go to the next review screen.
So take a quick break and when we come back we're going to start talking about how we handle validation
with redux forum.
So Kazia in just a second.