Adding sections for voting credits, voting and reviewing votes

app/components/Voting.js

@@ -13,6 +13,9 @@ import LearnAboutBallots from './flow/LearnAboutBallots';
 import HowVotingWorks from './flow/HowVotingWorks';
 import ConnectYourWallet from './flow/ConnectYourWallet';
 import OtherWallets from './flow/OtherWallets';
+import VotingCredits from './flow/VotingCredits';
+import PollVoting from './flow/PollVoting';
+import ReviewVotes from './flow/ReviewVotes';
 
 
 class Voting extends PureComponent {
@@ -39,6 +42,9 @@ class Voting extends PureComponent {
                 <Route path="/votingHelp" render={HowVotingWorks} />
                 <Route path="/wallet" render={ConnectYourWallet} />
                 <Route path="/otherWallets" render={OtherWallets} />
+                <Route path="/votingCredits" render={() => <VotingCredits polls={rawPolls} />} />
+                <Route path="/voting" render={() => <PollVoting polls={rawPolls} />} />
+                <Route path="/review" render={() => <ReviewVotes polls={rawPolls} />} />
               </Switch>
             </div>
           </div>

app/components/flow/ConnectYourWallet.js

@@ -7,7 +7,9 @@ const ConnectYourWallet = (props) => <div className="section center">
   <Typography variant="headline">Connect your wallet</Typography>
   <Typography variant="body1">To start voting, connect to a wallet where you hold your SNT assets.</Typography>
   <div className="action">
-    <Button color="primary" variant="contained">CONNECT USING STATUS</Button>
+    <Link to="/votingCredits">
+      <Button color="primary" variant="contained">CONNECT USING STATUS</Button>
+    </Link>
   </div>
   <div className="action">
     <Link to="/otherWallets">

app/components/flow/LearnAboutBallots.js

@@ -39,7 +39,7 @@ class LearnAboutBallots extends Component {
     }
 
     return (
-    <div class="section">
+    <div className="section">
         <Typography variant="headline">{title}</Typography>
         <BallotDialog
           title={this.state.dialogTitle}

app/components/flow/PollVoting.js

@@ -0,0 +1,30 @@
+import {Link} from "react-router-dom";
+import Button from '@material-ui/core/Button';
+import React, {Component} from 'react';
+import Typography from '@material-ui/core/Typography'
+
+class PollVoting extends Component {
+
+  render(){
+    const {polls} = this.props;
+
+    let title;
+
+    if(polls && polls.length){
+      title = polls[0].content.title;
+      description = polls[0].content.description;
+    }
+    
+    return (polls ? <div>
+      <div className="section">
+        <Typography variant="headline">{title}</Typography>
+      </div>
+      
+        <Link to="/review"><Button variant="text">Review vote</Button></Link>
+
+
+    </div> : null);
+  }
+}
+
+export default PollVoting;

app/components/flow/ReviewVotes.js

@@ -0,0 +1,28 @@
+import {Link} from "react-router-dom";
+import Button from '@material-ui/core/Button';
+import React, {Component} from 'react';
+import Typography from '@material-ui/core/Typography'
+
+class ReviewVotes extends Component {
+
+  render(){
+    const {polls} = this.props;
+
+    if(polls && polls.length){
+      title = polls[0].content.title;
+      description = polls[0].content.description;
+    }
+    
+    return (polls ? <div>
+      <div className="section">
+        <Typography variant="headline">Review your vote</Typography>
+      </div>
+      
+        <Link to="/review"><Button variant="text">Review vote</Button></Link>
+
+
+    </div> : null);
+  }
+}
+
+export default ReviewVotes;

app/components/flow/VotingCredits.js

@@ -0,0 +1,42 @@
+import {Link} from "react-router-dom";
+import Button from '@material-ui/core/Button';
+import React, {Component} from 'react';
+import Typography from '@material-ui/core/Typography'
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+
+class VotingCredits extends Component {
+
+  render(){
+    const {polls} = this.props;
+
+    let title, description;
+
+    if(polls && polls.length){
+      title = polls[0].content.title;
+      description = polls[0].content.description;
+    }
+    
+    return (polls ? <div>
+      <div className="section">
+        <Typography variant="headline">{title}</Typography>
+        <Typography variant="body1" component="div" dangerouslySetInnerHTML={{__html: description}}></Typography>
+      </div>
+      <Card className="card">
+        <CardContent>
+            <Typography component="p">
+                Voting Credits 300
+            </Typography>
+            <Typography component="p">
+                You get one credit for each SNT held in your wallet <b>at the time of poll was created</b>. They are usable only in this poll.
+            </Typography>
+        </CardContent>
+    </Card>
+    <Link to="/voting"><Button variant="text">Vote</Button></Link>
+
+
+    </div> : null);
+  }
+}
+
+export default VotingCredits;