Error styles

app/components/flow/PollVoting.js

@@ -95,7 +95,7 @@ class PollVoting extends Component {
     const balance = fromWei(balances[0].tokenBalance, "ether");
     const cantVote = balance == 0 || !poll._canVote;
     const availableCredits = parseInt(balance, 10) - votes.reduce((prev, curr) => prev + curr * curr, 0);
-    const disableVote = cantVote || availableCredits == parseInt(balance, 10);
+    const disableVote = cantVote || availableCredits == parseInt(balance, 10) || arraysEqual(votes, originalVotes.slice(0, votes.length));
 
     // Votes calculation
     const originalVotesQty = originalVotes.reduce((x,y) => x+y, 0);

app/components/flow/Results.js

@@ -42,7 +42,7 @@ class Results extends Component {
 
   render(){
     const {polls} = this.props;
-    const {isError, poll} = this.state;
+    let {isError, poll} = this.state;
 
     const title = polls[0].content.title;
     const ballots = polls[0].content.ballots;
@@ -52,11 +52,12 @@ class Results extends Component {
     }
 
     return <div className="section">
-      { isError && <div>
+      { isError && <div className="errorTrx">
+        <div className="image"><img src="images/sad-face.svg" width="24" /></div>
         <Typography variant="headline">Transaction failed</Typography>
         <Typography variant="body1">Copy with apologies and invitation to try again</Typography>
         <Link to="/review">
-          <Button color="primary">Try again</Button>
+          <Button color="primary" variant="contained">Try again</Button>
         </Link>
       </div> }
       { !isError && <div>

app/css/styles.css

@@ -290,4 +290,22 @@
 button:disabled,
 button[disabled]{
     opacity: .5;
-}
+}
+
+.errorTrx {
+    text-align: center;
+    padding-top: 100px;
+}
+
+.errorTrx div.image {
+    padding: 20px 11px 7px 11px;
+    border-radius: 50%;
+    background: #ffe8ec;
+    display: inline;
+}
+
+.errorTrx h1,
+.errorTrx p {
+    margin-bottom: 15px;
+}
+

app/images/sad-face.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.991 3C16.968 3 21 7.032 21 12C21 16.968 16.968 21 11.991 21C7.023 21 3 16.968 3 12C3 7.032 7.023 3 11.991 3ZM12 19.2C15.978 19.2 19.2 15.978 19.2 12C19.2 8.02205 15.978 4.80005 12 4.80005C8.02205 4.80005 4.80005 8.02205 4.80005 12C4.80005 15.978 8.02205 19.2 12 19.2ZM15.15 11.1C14.403 11.1 13.8 10.497 13.8 9.75002C13.8 9.00302 14.403 8.40002 15.15 8.40002C15.897 8.40002 16.5 9.00302 16.5 9.75002C16.5 10.497 15.897 11.1 15.15 11.1ZM8.85 11.1C8.103 11.1 7.5 10.497 7.5 9.75002C7.5 9.00302 8.103 8.40002 8.85 8.40002C9.597 8.40002 10.2 9.00302 10.2 9.75002C10.2 10.497 9.597 11.1 8.85 11.1Z" fill="#FF2D55"/>
+<path d="M11.9947 13C10.031 13 8.52584 15.147 8.52584 15.147C7.90165 15.8591 8.16405 16.4364 9.10417 16.4364L14.8851 16.4364C15.8287 16.4364 16.0978 15.8378 15.4635 15.147C15.4635 15.147 13.9583 13 11.9947 13Z" fill="#FF2D55"/>
+</svg>