Added landing page styling and stats

app/components/flow/LandingPage.js

@@ -49,7 +49,25 @@ class LandingPage extends Component {
 
     render(){
         const { openPoll, closedPoll } = this.state;
-        
+
+        if(openPoll){
+            openPoll._tokenSum = 0;
+            openPoll._votesSum = 0;
+            for(let i = 0; i < openPoll._numBallots; i++){
+                openPoll._tokenSum += parseInt(web3.utils.fromWei(openPoll._tokenTotal[i], "ether"), 10);
+                openPoll._votesSum += parseInt(web3.utils.fromWei(openPoll._quadraticVotes[i], "ether"), 10);
+            }
+        }
+
+        if(closedPoll){
+            closedPoll._tokenSum = 0;
+            closedPoll._votesSum = 0;
+            for(let i = 0; i < closedPoll._numBallots; i++){
+                closedPoll._tokenSum += parseInt(web3.utils.fromWei(closedPoll._tokenTotal[i], "ether"), 10);
+                closedPoll._votesSum += parseInt(closedPoll._quadraticVotes[i], 10);
+            }
+        }
+
         return <Fragment>
         <div>
             <div className="section" style={{marginBottom: 0}}>
@@ -59,35 +77,43 @@ class LandingPage extends Component {
             </div>
 
             { openPoll && openPoll.content &&
-                <div className="section" style={{paddingTop: 0}}> 
+                <div className="section" style={{paddingTop: 0, marginBottom: "15px"}}> 
                     <h2 className="pollTypeTitle">Open Polls</h2>
                     <Card className="card poll">
                     <CardContent>
                         <Typography gutterBottom component="h2">{openPoll.content.title}</Typography>
-                        <p>
-                        [Closes: 12/12/2018]
-                        Voters: 300
-                        Total SNT: 50.000
+                        <span className="pollClosingDate">Closes: 00/00/0000</span>
+                        <p className="stats">
+                        Voters: {openPoll._voters}<br />
+                        Total votes: {openPoll._votesSum}<br />
+                        Total SNT: {openPoll._tokenSum}<br />
                         </p>
                         <Link to={"/titleScreen/" + openPoll.idPoll} className="arrowRightLink">VOTE NOW</Link>
                     </CardContent>
                     </Card>
-                    <p>More Open Polls</p>
+                    <div style={{textAlign: "center", marginTop: "35px"}}>
+                        <Link to={"/otherPolls/open"} className="landingPageButton">More open polls</Link>
+                    </div>
                 </div>
                 }
             
             { closedPoll && closedPoll.content &&
-                <div>
-                    <h2>Closed Polls</h2>
-                    <div>
-                        <h3>{closedPoll.content.title}</h3>
-                        [Closes: 12/12/2018]
-                        Voters: 300
-                        Total SNT: 50.000
-                        {closedPoll._description}
-                        Vote Now
+                <div className="section" style={{paddingTop: 0}}> 
+                    <h2 className="pollTypeTitle">Closed Polls</h2>
+                    <Card className="card poll">
+                    <CardContent>
+                        <Typography gutterBottom component="h2">{openPoll.content.title}</Typography>
+                        <p className="stats">
+                        Voters: {openPoll._voters}<br />
+                        Total votes: {openPoll._votesSum}<br />
+                        Total SNT: {openPoll._tokenSum}<br />
+                        </p>
+                        <Link to={"/results/" + openPoll.idPoll} className="arrowRightLink">See results</Link>
+                    </CardContent>
+                    </Card>
+                    <div style={{textAlign: "center", marginTop: "35px"}}>
+                        <Link to={"/otherPolls/closed"} className="landingPageButton">More closed polls</Link>
                     </div>
-                    <p>More Closed Polls</p>
                 </div>
                 }
         </div>

app/components/flow/OtherPolls.js

@@ -24,8 +24,6 @@ class OtherPolls extends Component {
         }
     }
 
-
-
     render() {
         let {pollType, polls} = this.props;
         if(!polls){
@@ -39,7 +37,7 @@ class OtherPolls extends Component {
             if(pollType == 'open'){
                 polls = polls.filter(x => !x._cancelled && x._endTime > (new Date()).getTime() / 1000);
             } else {
-                polls = polls.filter(x => x._cancelled || x._endTime < (new Date()).getTime() / 1000);
+                polls = polls.filter(x => !x._cancelled || x._endTime < (new Date()).getTime() / 1000);
             }
         }
 
@@ -48,21 +46,31 @@ class OtherPolls extends Component {
                 <Typography variant="headline" className="otherPollsTitle">{pollType == 'open' ? 'Open polls' : 'Closed polls'} <small>({polls.length})</small></Typography>               
                {
                     polls.map((p, i) => {
+                        p._tokenSum = 0;
+                        p._votesSum = 0;
+                        for(let i = 0; i < p._numBallots; i++){
+                            p._tokenSum += parseInt(web3.utils.fromWei(p._tokenTotal[i], "ether"), 10);
+                            p._votesSum += parseInt(p._quadraticVotes[i], 10);
+                        }
                         if(p.content){
                             return <Card className="card poll" key={i}>
                             <CardContent>
                                 <Typography gutterBottom component="h2">{p.content.title}</Typography>
                                 <Typography component="p" dangerouslySetInnerHTML={{__html: p.content.description}}></Typography>
-                           <p> [Closes: 12/12/2018]
-                                Voters: 300
-                                Total SNT: 50.000</p>
-                                { pollType == 'open' && <Link to={"/titleScreen/" + p.idPoll} className="arrowRightLink upperCase">Vote now</Link> }
+                                {pollType == "open" && <span className="pollClosingDate">Closes: 00/00/0000</span> }
+                                <p className="stats">
+                                Voters: {p._voters}<br />
+                                Total votes: {p._votesSum}<br />
+                                Total SNT: {p._tokenSum}</p>
+                                { pollType == 'open' && <Link to={"/titleScreen/" + p.idPoll} className="arrowRightLink">VOTE NOW</Link> }
+                                { pollType != 'open' && <Link to={"/results/" + p.idPoll} className="arrowRightLink">See results</Link> }
+
                             </CardContent>
                         </Card>
                         } else {
                             return <Card className="card" key={i}>
                             <CardContent>
-                                Loading
+                                <img src="images/loadIndicator.gif" />
                             </CardContent>
                             </Card>
                         }

app/css/styles.css

@@ -635,8 +635,42 @@ button[disabled]{
       color: #939BA1;
   }
 
+  div.card.poll .stats {
+    font-size: .85rem;
+    margin-top: 5px;
+  }
+
   .otherPollsTitle small {
       font-size: .85rem;
       color: #939BA1;
       font-weight: normal;
   }
+
+  .landingPageButton {
+      text-align: center;
+      color:#4360DF;
+      font-weight: normal;
+      background: #ECEFFC;
+      border: none;
+      text-decoration: none;
+      padding: 10px 30px;
+      font-size: .8rem;
+      border-radius: 5px;
+  }
+
+  .landingPageButton:hover {
+    background: rgb(212, 216, 233);
+  }
+
+  div.poll span.pollClosingDate {
+    background: #ECEFFC;
+    text-transform: uppercase;
+    font-size: .7rem;
+    font-weight: normal;
+    padding: 5px 7px;
+    border-radius: 15px;
+    margin: 10px 0px;
+    width: 150px;
+    display: block;
+    text-align: center;
+  }