1
00:00:01,200 --> 00:00:02,550
We've got our form on the screen.

2
00:00:02,600 --> 00:00:04,860
It definitely appears to be behaving correctly.

3
00:00:05,010 --> 00:00:10,920
But you know the styling definitely feels very off right now like the form goes all the way to the borders

4
00:00:10,920 --> 00:00:12,900
of the page which is awfully ugly.

5
00:00:12,900 --> 00:00:15,720
And then our submit button is just like a plain button.

6
00:00:15,720 --> 00:00:19,470
So in this section we're going to take a little bit of a pause from all the javascript the stuff that

7
00:00:19,470 --> 00:00:23,890
we've been working on and think a little bit about some of the styling in here.

8
00:00:24,000 --> 00:00:28,200
And the first thing that will take care of is making sure that our content doesn't sit flush against

9
00:00:28,200 --> 00:00:30,780
the edge of the browser to handle that.

10
00:00:30,810 --> 00:00:36,660
We're going to make a kind of obtuse little change when I say obtuse because this is kind of a hidden

11
00:00:36,660 --> 00:00:39,330
one inside of our app component.

12
00:00:39,330 --> 00:00:46,410
So after us inside the components directory we are showing a div right now inside of our browser router

13
00:00:47,100 --> 00:00:47,690
on that div..

14
00:00:47,700 --> 00:00:51,310
I'm going to add a class name of container.

15
00:00:51,510 --> 00:00:57,600
Now the container class name is a special class name used by materialized CSSA which is a CSSA library

16
00:00:57,600 --> 00:01:01,120
that we're using the container Kure does a couple of different things.

17
00:01:01,230 --> 00:01:07,560
But one of the most particular ones is that it adds a bunch of margin or of padding along the left and

18
00:01:07,560 --> 00:01:09,210
right hand sides of the page.

19
00:01:09,210 --> 00:01:15,450
So by just adding on this class name of container right here it will ensure that our form doesn't automatically

20
00:01:15,450 --> 00:01:18,050
stretch to fill out the full width of the window.

21
00:01:18,570 --> 00:01:21,900
So let's say this and see how we're doing.

22
00:01:22,220 --> 00:01:25,050
So our app loads back up and when it does.

23
00:01:25,080 --> 00:01:30,000
OK so we've got some nice space in here it looks way more reasonable than it did before.

24
00:01:30,000 --> 00:01:35,300
Next I'd kind of like to take a little bit of a stab at this button down here the submit button.

25
00:01:35,340 --> 00:01:39,480
So if you remember back to the mockup that we've been looking at we had said that there should really

26
00:01:39,480 --> 00:01:45,480
be two buttons down the bottom once that say cancel to go away from the form creation right here and

27
00:01:45,480 --> 00:01:48,170
then the other one should say submit or continue.

28
00:01:48,170 --> 00:01:52,500
Something like that to go on to our former view page.

29
00:01:52,500 --> 00:01:57,290
So I think that we can probably handle both those at least the styling of each of them right now.

30
00:01:57,360 --> 00:02:01,320
Maybe we'll put in the implementations cancel button and I will worry about the summit button in just

31
00:02:01,320 --> 00:02:03,170
a minute.

32
00:02:03,570 --> 00:02:11,700
So back inside of my survey form component I'm going to find my render function.

33
00:02:11,730 --> 00:02:14,530
Here it is right here.

34
00:02:14,640 --> 00:02:19,530
I'm going to find the button that I currently have placed with the text of submit and we're going to

35
00:02:19,530 --> 00:02:24,900
add a couple of different class names on this thing to make it look just a little bit nicer.

36
00:02:24,900 --> 00:02:28,150
First off I don't want this button to actually submit the form anymore.

37
00:02:28,320 --> 00:02:31,140
So rather than attempting to have it submit the form.

38
00:02:31,140 --> 00:02:32,350
All right Susan you know it.

39
00:02:32,490 --> 00:02:34,410
I take that back this way my sake.

40
00:02:34,410 --> 00:02:36,760
Let's leave Tiflis summit on here right now.

41
00:02:36,840 --> 00:02:39,200
We'll come back to that in just a little bit.

42
00:02:39,240 --> 00:02:41,410
What I meant to say we'll just forget that.

43
00:02:41,490 --> 00:02:45,780
What I meant to say was we went out on a class name with a couple of different class names to kind of

44
00:02:45,780 --> 00:02:47,610
make this thing little bit nicer.

45
00:02:47,610 --> 00:02:54,590
So we're going to say teal between flat right and white text like so.

46
00:02:55,410 --> 00:03:00,600
So these will make the button appear teal style it as a flat button.

47
00:03:00,600 --> 00:03:05,490
It'll pull the button to the right side of the screen and then cause the text inside of the button tag

48
00:03:05,490 --> 00:03:07,050
to appear white.

49
00:03:07,050 --> 00:03:11,220
Now the other thing I would like to do is maybe add on just a little icon immediately after the text

50
00:03:11,520 --> 00:03:15,140
just kind of give our users the idea of what this thing does.

51
00:03:15,180 --> 00:03:17,700
So we're going to do an icon mirror how we do those.

52
00:03:17,700 --> 00:03:24,960
We place an eye tag with the class name of material icons and then we're also going to add on a class

53
00:03:24,960 --> 00:03:28,940
name of right to get the button or the icon to appear on the right hand side.

54
00:03:31,010 --> 00:03:36,760
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.

55
00:03:36,830 --> 00:03:39,170
And for us I think done now.

56
00:03:39,180 --> 00:03:43,190
Yeah we're seeing that when the user clicks this button there's still going to go to the review screen.

57
00:03:43,370 --> 00:03:48,290
So Don isn't super accurate but you know what it's going to work out for us.

58
00:03:48,290 --> 00:03:50,580
You'll see what the icon actually looks like.

59
00:03:51,250 --> 00:03:53,000
So going back to the browser.

60
00:03:53,470 --> 00:03:53,770
OK.

61
00:03:53,780 --> 00:03:54,970
So that looks pretty good.

62
00:03:54,980 --> 00:03:56,750
Much more reasonable.

63
00:03:57,320 --> 00:04:00,060
Now the text of Samit still has a little bit misleading.

64
00:04:00,320 --> 00:04:04,000
A user is still going to be able to review this thing before it gets sent out.

65
00:04:04,010 --> 00:04:08,760
So rather than submit let's put the text of next in there just to make sure that's clear.

66
00:04:08,780 --> 00:04:12,540
Hey there's one more step that you have to go through before you attempt to actually submit this thing

67
00:04:14,570 --> 00:04:16,480
so full makeover.

68
00:04:16,570 --> 00:04:19,060
That's looking pretty good.

69
00:04:19,120 --> 00:04:23,200
Now the next thing I'd like to take care of is the button that a user can click to cancel out of this

70
00:04:23,200 --> 00:04:26,050
entire survey creation flow.

71
00:04:26,260 --> 00:04:29,980
So it kind of cancel button to go back to probably the dashboard.

72
00:04:30,040 --> 00:04:31,660
So we'll see if the user clicks this one right here.

73
00:04:31,660 --> 00:04:36,210
We want to send the user back to the dashboard.

74
00:04:36,240 --> 00:04:39,910
OK so here's the button we just added.

75
00:04:39,910 --> 00:04:44,670
Remember that to show or see me to navigate a user around our application.

76
00:04:44,680 --> 00:04:49,780
In this case presumably back to the dashboard component that is bringing in the use of re-act router

77
00:04:49,840 --> 00:04:54,080
in our application and to navigate a user around inside of our application.

78
00:04:54,130 --> 00:04:57,740
We use the link tag that is provided by re-act router Don.

79
00:04:58,180 --> 00:05:06,330
So at the very top of the file we will import the link tag from re-act router.

80
00:05:06,410 --> 00:05:14,760
Dom and then back down inside the render function right above the existing button will add the link

81
00:05:14,760 --> 00:05:23,140
tag with the text of cancell will make sure that whenever the user clicks it we navigate them back to

82
00:05:23,140 --> 00:05:28,900
the slash surveys route in our application which is really our dashboard.

83
00:05:28,900 --> 00:05:32,230
And then we're going to give this thing a class name just to silent a little bit.

84
00:05:32,230 --> 00:05:38,590
So it's going to be read between flat and again white text like so.

85
00:05:39,370 --> 00:05:39,630
OK.

86
00:05:39,640 --> 00:05:42,040
So let's see how we're doing now.

87
00:05:42,160 --> 00:05:43,960
There's the refresh.

88
00:05:43,960 --> 00:05:46,360
All right we've got the cancel button and we click it.

89
00:05:46,360 --> 00:05:47,830
We go back to our dashboard.

90
00:05:47,950 --> 00:05:52,280
And of course we can always go back to the form.

91
00:05:52,380 --> 00:05:54,910
It is looking pretty good again.

92
00:05:54,920 --> 00:05:57,550
You'll notice that little icon I have flying around right there.

93
00:05:57,560 --> 00:05:58,370
Can't say enough.

94
00:05:58,370 --> 00:06:02,500
It is the password manager I use so it's a custom chrome add on that I have.

95
00:06:02,630 --> 00:06:04,570
You probably do not have this like on here.

96
00:06:04,580 --> 00:06:06,950
And if you don't that's totally fine.

97
00:06:06,950 --> 00:06:08,630
All right so Ford is looking pretty good.

98
00:06:08,660 --> 00:06:16,370
Were able to take all this text click the next button and somehow read it or at least say yeah we are

99
00:06:16,370 --> 00:06:20,950
successfully recording this stuff but we still have a little bit of work to do here.

100
00:06:20,990 --> 00:06:27,680
For example remember that recipient list right here is supposed to be a list of e-mails that a user

101
00:06:27,680 --> 00:06:32,480
should enter that will use to send off to you know all these different users right.

102
00:06:32,480 --> 00:06:38,630
So presumably this needs to be like a well formatted list of e-mails because if a user just starts going

103
00:06:38,630 --> 00:06:44,030
like blah blah blah blah dot com and then like a space and then the next one.

104
00:06:44,310 --> 00:06:49,670
Well that might not work out for us like maybe we want to really make sure that the user formats the

105
00:06:49,730 --> 00:06:53,010
e-mails that they put in here in a very special fashion.

106
00:06:53,030 --> 00:06:58,580
In addition we probably want to make sure that the user enters in a subject line and email body and

107
00:06:58,580 --> 00:07:00,020
a survey title.

108
00:07:00,020 --> 00:07:06,080
So I think that we still need to add in maybe type of validation step in here to kind of validate the

109
00:07:06,080 --> 00:07:10,760
inputs that the user has added before allowing them to go to the next review screen.

110
00:07:11,060 --> 00:07:15,650
So take a quick break and when we come back we're going to start talking about how we handle validation

111
00:07:15,740 --> 00:07:17,110
with redux forum.

112
00:07:17,150 --> 00:07:18,500
So Kazia in just a second.