(add) vote progress bar component

src/assets/stylesheets/application/_vote-scale.scss

@@ -1,78 +1,65 @@
 .vote-scale {
-  background-color: #f0f0f0;
-  border-radius: 5px;
-  clear: left;
-  height: 10px;
-  margin-top: 34px;
-  overflow: hidden;
-
-  &-not-finalized {
-    background-color: #ffffff;
-  }
-
-  &--fill {
-    height: 100%;
-    border-radius: 3px;
-
-    &_no {
-      background-color: $poa-danger-color;
-      .sokol & {
-        background-color: $sokol-danger-color;
-      }
+    background-color: #f0f0f0;
+    border-radius: 5px;
+    clear: left;
+    height: 10px;
+    margin-top: 34px;
+    overflow: hidden;
+    &-not-finalized {
+        background-color: #fff;
     }
-
-    &_yes {
-      background-color: $poa-green-color;
-      .sokol & {
-        background-color: $sokol-cyan;
-      }
+    &--fill {
+        height: 100%;
+        border-radius: 3px;
+        &_no {
+            background-color: $poa-danger-color;
+            .sokol & {
+                background-color: $sokol-danger-color;
+            }
+        }
+        &_yes {
+            background-color: $poa-green-color;
+            .sokol & {
+                background-color: $sokol-cyan;
+            }
+        }
+        &_send {
+            background-color: $poa-green-color;
+            .sokol & {
+                background-color: $sokol-cyan;
+            }
+        }
+        &_burn {
+            background-color: $poa-danger-color;
+            .sokol & {
+                background-color: $sokol-danger-color;
+            }
+        }
+        &_freeze {
+            background-color: $poa-freeze-color;
+            .sokol & {
+                background-color: $sokol-freeze-color;
+            }
+        }
     }
-
-    &_send {
-      background-color: $poa-green-color;
-      .sokol & {
-        background-color: $sokol-cyan;
-      }
+    &--container {
+        width: 100%;
     }
-
-    &_burn {
-      background-color: $poa-danger-color;
-      .sokol & {
-        background-color: $sokol-danger-color;
-      }
+    &--value {
+        float: left;
+        font-size: 12px;
     }
-
-    &_freeze {
-      background-color: $poa-freeze-color;
-      .sokol & {
-        background-color: $sokol-freeze-color;
-      }
+    &--votes,
+    &--percentage {
+        float: right;
+        font-size: 13px;
     }
-
-  }
-
-  &--container {
-    width: 100%;
-  }
-
-  &--value {
-    float: left;
-    font-size: 12px;
-  }
-
-  &--votes,
-  &--percentage {
-    float: right;
-    font-size: 13px;
-  }
-
-  &--votes {
-    color: $gray-text-color;
-    margin-left: 10px;
-  }
-
-  &--percentage {
-    color: #000;
-    font-weight: 700;
-  }
-}
+    &--votes {
+        color: $gray-text-color;
+        margin-left: 10px;
+    }
+    &--percentage {
+        color: #000;
+        font-weight: 700;
+    }
+}

src/assets/stylesheets/components/_ButtonVoting.scss

@@ -0,0 +1,120 @@
+.vt-ButtonVoting {
+    border-radius: 5px;
+    border: 0;
+    box-sizing: border-box;
+    color: #fff;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 42px;
+    margin-right: 20px;
+    outline: none;
+    padding: 0 15px;
+    text-decoration: none;
+    text-transform: uppercase;
+    transition: 0.15s background-color linear;
+    width: 55px;
+
+    &#{ & }-sm {
+        width: 55px;
+    }
+
+    &#{ & }-md {
+        width: 78px;
+    }
+
+    @media (min-width: $breakpoint-xl) {
+        &#{ & }-left {
+            margin-left: 0;
+            margin-right: 20px;
+        }
+
+        &#{ & }-right {
+            margin-left: 20px;
+            margin-right: 0;
+        }
+    }
+
+    &#{ & }-negative#{ & }-core {
+        background-color: $voting-negative-poa;
+        box-shadow: 0 5px 10px 0 rgba($voting-negative-poa, 0.3);
+
+        &:hover {
+            background-color: darkenb($voting-negative-poa, 10%);
+        }
+    }
+
+    &#{ & }-neutral#{ & }-core {
+        background-color: $voting-neutral-poa;
+        box-shadow: 0 5px 10px 0 rgba($voting-neutral-poa, 0.3);
+
+        &:hover {
+            background-color: darkenb($voting-neutral-poa, 10%);
+        }
+    }
+
+    &#{ & }-positive#{ & }-core {
+        background-color: $voting-positive-poa;
+        box-shadow: 0 5px 10px 0 rgba($voting-positive-poa, 0.3);
+
+        &:hover {
+            background-color: darkenb($voting-positive-poa, 10%);
+        }
+    }
+
+    &#{ & }-negative#{ & }-sokol {
+        background-color: $voting-negative-sokol;
+        box-shadow: 0 5px 10px 0 rgba($voting-negative-sokol, 0.3);
+
+        &:hover {
+            background-color: darkenb($voting-negative-sokol, 10%);
+        }
+    }
+
+    &#{ & }-neutral#{ & }-sokol {
+        background-color: $voting-neutral-sokol;
+        box-shadow: 0 5px 10px 0 rgba($voting-neutral-sokol, 0.3);
+
+        &:hover {
+            background-color: darkenb($voting-neutral-sokol, 10%);
+        }
+    }
+
+    &#{ & }-positive#{ & }-sokol {
+        background-color: $voting-positive-sokol;
+        box-shadow: 0 5px 10px 0 rgba($voting-positive-sokol, 0.3);
+
+        &:hover {
+            background-color: darkenb($voting-positive-sokol, 10%);
+        }
+    }
+
+    &#{ & }-negative#{ & }-dai {
+        background-color: $voting-negative-dai;
+        box-shadow: 0 5px 10px 0 rgba($voting-negative-dai, 0.3);
+
+        &:hover {
+            background-color: darkenb($voting-negative-dai, 10%);
+        }
+    }
+
+    &#{ & }-neutral#{ & }-dai {
+        background-color: $voting-neutral-dai;
+        box-shadow: 0 5px 10px 0 rgba($voting-neutral-dai, 0.3);
+
+        &:hover {
+            background-color: darkenb($voting-neutral-dai, 10%);
+        }
+    }
+
+    &#{ & }-positive#{ & }-dai {
+        background-color: $voting-positive-dai;
+        box-shadow: 0 5px 10px 0 rgba($voting-positive-dai, 0.3);
+
+        &:hover {
+            background-color: darkenb($voting-positive-dai, 10%);
+        }
+    }
+
+}

src/assets/stylesheets/components/_VoteProgressBar.scss

@@ -0,0 +1,66 @@
+.vt-VoteProgressBar {
+    width: 100%;
+}
+
+.vt-VoteProgressBar_Scale {
+    background-color: #f0f0f0;
+    border-radius: 5px;
+    clear: left;
+    height: 10px;
+    margin-top: 34px;
+    overflow: hidden;
+}
+
+.vt-VoteProgressBar_Progress {
+    height: 100%;
+
+    &#{ & }-negative#{ & }-core {
+        background-color: $voting-negative-poa;
+    }
+
+    &#{ & }-neutral#{ & }-core {
+        background-color: $voting-neutral-poa;
+    }
+
+    &#{ & }-positive#{ & }-core {
+        background-color: $voting-positive-poa;
+    }
+
+    &#{ & }-negative#{ & }-sokol {
+        background-color: $voting-negative-sokol;
+    }
+
+    &#{ & }-neutral#{ & }-sokol {
+        background-color: $voting-neutral-sokol;
+    }
+
+    &#{ & }-positive#{ & }-sokol {
+        background-color: $voting-positive-sokol;
+    }
+
+    &#{ & }-negative#{ & }-dai {
+        background-color: $voting-negative-dai;
+    }
+
+    &#{ & }-neutral#{ & }-dai {
+        background-color: $voting-neutral-dai;
+    }
+
+    &#{ & }-positive#{ & }-dai {
+        background-color: $voting-positive-dai;
+    }
+}
+
+.vt-VoteProgressBar_Votes {
+    color: $gray-text-color;
+    float: right;
+    font-size: 13px;
+    margin-left: 10px;
+}
+
+.vt-VoteProgressBar_Percentage {
+    color: #000;
+    float: right;
+    font-size: 14px;
+    font-weight: 700;
+}

src/assets/stylesheets/components/_index.scss

@@ -9,6 +9,7 @@
 @import "ButtonFinalize";
 @import "ButtonLoadMore";
 @import "ButtonNewBallot";
+@import "ButtonVoting";
 @import "Footer";
 @import "Header";
 @import "IconActive";
@@ -31,4 +32,5 @@
 @import "MobileMenuLinks";
 @import "NavigationLinks";
 @import "SearchBar";
-@import "SocialIcons";
+@import "SocialIcons";
+@import "VoteProgressBar";

src/assets/stylesheets/helpers/_variables.scss

@@ -71,3 +71,15 @@ $mobile-indent: 10px;
 $input-height: 40px;
 $input-color: #202d3c;
 
+// voting colors
+$voting-negative-poa: #f21b57;
+$voting-neutral-poa: #50bbda;
+$voting-positive-poa: #60db97;
+
+$voting-negative-sokol: #f24c67;
+$voting-neutral-sokol: #50bbda;
+$voting-positive-sokol: #6ac9b9;
+
+$voting-negative-dai: #f21b57;
+$voting-neutral-dai: #50bbda;
+$voting-positive-dai: #60db97;

src/components/BallotCard/index.js

@@ -4,6 +4,8 @@ import swal from 'sweetalert2'
 import { BallotDataPair } from '../BallotDataPair'
 import { BallotFooter } from '../BallotFooter'
 import { BallotInfoContainer } from '../BallotInfoContainer'
+import { ButtonVoting } from '../ButtonVoting'
+import { VoteProgressBar } from '../VoteProgressBar'
 import { getNetworkBranch } from '../../utils/utils'
 import { inject, observer } from 'mobx-react'
 import { messages } from '../../utils/messages'
@@ -651,7 +653,6 @@ export class BallotCard extends React.Component {
 
   render() {
     let { contractsStore, votingType, children } = this.props
-    let voteScaleClass = 'vote-scale'
     let votingScale
 
     const threshold = this.getThreshold(contractsStore, votingType)
@@ -661,61 +662,49 @@ export class BallotCard extends React.Component {
       votingScale = (
         <div className="sw-BallotCard_Scale">
           <div className="sw-BallotCard_ScaleColumn sw-BallotCard_ScaleColumn-3">
-            <button
-              type="button"
+            <ButtonVoting
+              networkBranch={networkBranch}
               onClick={e => this.vote({ choice: BURN })}
-              className="btn btn-danger sw-BallotCard_VoteButton xl m-r-20"
-            >
-              Burn
-            </button>
-            <div className="vote-scale--container">
-              <p className="vote-scale--votes">{this.votesBurnNumber} Votes</p>
-              <p className="vote-scale--percentage">{this.votesBurnPercents}%</p>
-              <div className={voteScaleClass}>
-                <div
-                  className="vote-scale--fill vote-scale--fill_burn"
-                  style={{ width: `${this.votesBurnPercents}%` }}
-                />
-              </div>
-            </div>
+              size="md"
+              text="Burn"
+              type="negative"
+            />
+            <VoteProgressBar
+              networkBranch={networkBranch}
+              type="negative"
+              votesAmount={this.votesBurnNumber}
+              votesPercentage={this.votesBurnPercents}
+            />
           </div>
           <div className="sw-BallotCard_ScaleColumn sw-BallotCard_ScaleColumn-3">
-            <button
-              type="button"
+            <ButtonVoting
+              networkBranch={networkBranch}
               onClick={e => this.vote({ choice: FREEZE })}
-              className="btn btn-freeze sw-BallotCard_VoteButton xl m-r-20"
-            >
-              Freeze
-            </button>
-            <div className="vote-scale--container">
-              <p className="vote-scale--votes">{this.votesFreezeNumber} Votes</p>
-              <p className="vote-scale--percentage">{this.votesFreezePercents}%</p>
-              <div className={voteScaleClass}>
-                <div
-                  className="vote-scale--fill vote-scale--fill_freeze"
-                  style={{ width: `${this.votesFreezePercents}%` }}
-                />
-              </div>
-            </div>
+              size="md"
+              text="Freeze"
+              type="neutral"
+            />
+            <VoteProgressBar
+              networkBranch={networkBranch}
+              type="neutral"
+              votesAmount={this.votesFreezeNumber}
+              votesPercentage={this.votesFreezePercents}
+            />
           </div>
           <div className="sw-BallotCard_ScaleColumn sw-BallotCard_ScaleColumn-3">
-            <button
-              className="btn btn-success sw-BallotCard_VoteButton xl m-r-20"
+            <ButtonVoting
+              networkBranch={networkBranch}
               onClick={e => this.vote({ choice: SEND })}
-              type="button"
-            >
-              Send
-            </button>
-            <div className="vote-scale--container">
-              <p className="vote-scale--votes">{this.votesSendNumber} Votes</p>
-              <p className="vote-scale--percentage">{this.votesSendPercents}%</p>
-              <div className={voteScaleClass}>
-                <div
-                  className="vote-scale--fill vote-scale--fill_send"
-                  style={{ width: `${this.votesSendPercents}%` }}
-                />
-              </div>
-            </div>
+              size="md"
+              text="Send"
+              type="positive"
+            />
+            <VoteProgressBar
+              networkBranch={networkBranch}
+              type="positive"
+              votesAmount={this.votesSendNumber}
+              votesPercentage={this.votesSendPercents}
+            />
           </div>
         </div>
       )
@@ -723,39 +712,33 @@ export class BallotCard extends React.Component {
       votingScale = (
         <div className="sw-BallotCard_Scale">
           <div className="sw-BallotCard_ScaleColumn">
-            <button
-              type="button"
+            <ButtonVoting
+              networkBranch={networkBranch}
               onClick={e => this.vote({ choice: REJECT })}
-              className="btn btn-danger sw-BallotCard_VoteButton m-r-20"
-            >
-              No
-            </button>
-            <div className="vote-scale--container">
-              <p className="vote-scale--votes">{this.votesAgainstNumber} Votes</p>
-              <p className="vote-scale--percentage">{this.votesAgainstPercents}%</p>
-              <div className={voteScaleClass}>
-                <div
-                  className="vote-scale--fill vote-scale--fill_no"
-                  style={{ width: `${this.votesAgainstPercents}%` }}
-                />
-              </div>
-            </div>
+              text="No"
+              type="negative"
+            />
+            <VoteProgressBar
+              networkBranch={networkBranch}
+              type="negative"
+              votesAmount={this.votesAgainstNumber}
+              votesPercentage={this.votesAgainstPercents}
+            />
           </div>
           <div className="sw-BallotCard_ScaleColumn reverse-responsive">
-            <div className="vote-scale--container">
-              <p className="vote-scale--votes">{this.votesForNumber} Votes</p>
-              <p className="vote-scale--percentage">{this.votesForPercents}%</p>
-              <div className={voteScaleClass}>
-                <div className="vote-scale--fill vote-scale--fill_yes" style={{ width: `${this.votesForPercents}%` }} />
-              </div>
-            </div>
-            <button
-              className="btn btn-success sw-BallotCard_VoteButton m-l-20"
+            <VoteProgressBar
+              networkBranch={networkBranch}
+              type="positive"
+              votesAmount={this.votesForNumber}
+              votesPercentage={this.votesForPercents}
+            />
+            <ButtonVoting
+              networkBranch={networkBranch}
               onClick={e => this.vote({ choice: ACCEPT })}
-              type="button"
-            >
-              Yes
-            </button>
+              side="right"
+              text="Yes"
+              type="positive"
+            />
           </div>
         </div>
       )

src/components/ButtonVoting/index.js

@@ -0,0 +1,36 @@
+import React from 'react'
+
+export const ButtonVoting = ({
+  extraClassName = '',
+  networkBranch,
+  onClick,
+  side = 'left',
+  size = 'sm',
+  text = '',
+  type = 'positive'
+}) => {
+  let buttonSize = ''
+
+  switch (size) {
+    case 'md' || 'medium':
+      buttonSize = 'vt-ButtonVoting-md'
+      break
+    case 'lg' || 'large':
+      buttonSize = 'vt-ButtonVoting-lg'
+      break
+    case 'sm' || 'small':
+    default:
+      buttonSize = 'vt-ButtonVoting-sm'
+      break
+  }
+
+  return (
+    <button
+      className={`vt-ButtonVoting ${extraClassName} vt-ButtonVoting-${networkBranch} ${buttonSize} vt-ButtonVoting-${type} vt-ButtonVoting-${side}`}
+      onClick={onClick}
+      type="button"
+    >
+      {text}
+    </button>
+  )
+}

src/components/VoteProgressBar/index.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+export const VoteProgressBar = ({
+  extraClassName = '',
+  networkBranch,
+  votesAmount = '',
+  votesPercentage = '',
+  type = 'positive'
+}) => {
+  return (
+    <div className={`vt-VoteProgressBar ${extraClassName} vt-VoteProgressBar-${networkBranch}`}>
+      <p className="vt-VoteProgressBar_Votes">{votesAmount} Votes</p>
+      <p className="vt-VoteProgressBar_Percentage">{votesPercentage}%</p>
+      <div className="vt-VoteProgressBar_Scale">
+        <div
+          className={`vt-VoteProgressBar_Progress vt-VoteProgressBar_Progress-${networkBranch} vt-VoteProgressBar_Progress-${type}`}
+          style={{ width: `${votesPercentage}%` }}
+        />
+      </div>
+    </div>
+  )
+}