(add) vote progress bar component
This commit is contained in:
parent
444137da4b
commit
c8bf1d515b
|
@ -1,78 +1,65 @@
|
||||||
.vote-scale {
|
.vote-scale {
|
||||||
background-color: #f0f0f0;
|
background-color: #f0f0f0;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
clear: left;
|
clear: left;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
margin-top: 34px;
|
margin-top: 34px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
&-not-finalized {
|
||||||
&-not-finalized {
|
background-color: #fff;
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--fill {
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 3px;
|
|
||||||
|
|
||||||
&_no {
|
|
||||||
background-color: $poa-danger-color;
|
|
||||||
.sokol & {
|
|
||||||
background-color: $sokol-danger-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
&--fill {
|
||||||
&_yes {
|
height: 100%;
|
||||||
background-color: $poa-green-color;
|
border-radius: 3px;
|
||||||
.sokol & {
|
&_no {
|
||||||
background-color: $sokol-cyan;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
&--container {
|
||||||
&_send {
|
width: 100%;
|
||||||
background-color: $poa-green-color;
|
|
||||||
.sokol & {
|
|
||||||
background-color: $sokol-cyan;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
&--value {
|
||||||
&_burn {
|
float: left;
|
||||||
background-color: $poa-danger-color;
|
font-size: 12px;
|
||||||
.sokol & {
|
|
||||||
background-color: $sokol-danger-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
&--votes,
|
||||||
&_freeze {
|
&--percentage {
|
||||||
background-color: $poa-freeze-color;
|
float: right;
|
||||||
.sokol & {
|
font-size: 13px;
|
||||||
background-color: $sokol-freeze-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
&--votes {
|
||||||
}
|
color: $gray-text-color;
|
||||||
|
margin-left: 10px;
|
||||||
&--container {
|
}
|
||||||
width: 100%;
|
&--percentage {
|
||||||
}
|
color: #000;
|
||||||
|
font-weight: 700;
|
||||||
&--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;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
|
@ -9,6 +9,7 @@
|
||||||
@import "ButtonFinalize";
|
@import "ButtonFinalize";
|
||||||
@import "ButtonLoadMore";
|
@import "ButtonLoadMore";
|
||||||
@import "ButtonNewBallot";
|
@import "ButtonNewBallot";
|
||||||
|
@import "ButtonVoting";
|
||||||
@import "Footer";
|
@import "Footer";
|
||||||
@import "Header";
|
@import "Header";
|
||||||
@import "IconActive";
|
@import "IconActive";
|
||||||
|
@ -31,4 +32,5 @@
|
||||||
@import "MobileMenuLinks";
|
@import "MobileMenuLinks";
|
||||||
@import "NavigationLinks";
|
@import "NavigationLinks";
|
||||||
@import "SearchBar";
|
@import "SearchBar";
|
||||||
@import "SocialIcons";
|
@import "SocialIcons";
|
||||||
|
@import "VoteProgressBar";
|
|
@ -71,3 +71,15 @@ $mobile-indent: 10px;
|
||||||
$input-height: 40px;
|
$input-height: 40px;
|
||||||
$input-color: #202d3c;
|
$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;
|
File diff suppressed because one or more lines are too long
|
@ -4,6 +4,8 @@ import swal from 'sweetalert2'
|
||||||
import { BallotDataPair } from '../BallotDataPair'
|
import { BallotDataPair } from '../BallotDataPair'
|
||||||
import { BallotFooter } from '../BallotFooter'
|
import { BallotFooter } from '../BallotFooter'
|
||||||
import { BallotInfoContainer } from '../BallotInfoContainer'
|
import { BallotInfoContainer } from '../BallotInfoContainer'
|
||||||
|
import { ButtonVoting } from '../ButtonVoting'
|
||||||
|
import { VoteProgressBar } from '../VoteProgressBar'
|
||||||
import { getNetworkBranch } from '../../utils/utils'
|
import { getNetworkBranch } from '../../utils/utils'
|
||||||
import { inject, observer } from 'mobx-react'
|
import { inject, observer } from 'mobx-react'
|
||||||
import { messages } from '../../utils/messages'
|
import { messages } from '../../utils/messages'
|
||||||
|
@ -651,7 +653,6 @@ export class BallotCard extends React.Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let { contractsStore, votingType, children } = this.props
|
let { contractsStore, votingType, children } = this.props
|
||||||
let voteScaleClass = 'vote-scale'
|
|
||||||
let votingScale
|
let votingScale
|
||||||
|
|
||||||
const threshold = this.getThreshold(contractsStore, votingType)
|
const threshold = this.getThreshold(contractsStore, votingType)
|
||||||
|
@ -661,61 +662,49 @@ export class BallotCard extends React.Component {
|
||||||
votingScale = (
|
votingScale = (
|
||||||
<div className="sw-BallotCard_Scale">
|
<div className="sw-BallotCard_Scale">
|
||||||
<div className="sw-BallotCard_ScaleColumn sw-BallotCard_ScaleColumn-3">
|
<div className="sw-BallotCard_ScaleColumn sw-BallotCard_ScaleColumn-3">
|
||||||
<button
|
<ButtonVoting
|
||||||
type="button"
|
networkBranch={networkBranch}
|
||||||
onClick={e => this.vote({ choice: BURN })}
|
onClick={e => this.vote({ choice: BURN })}
|
||||||
className="btn btn-danger sw-BallotCard_VoteButton xl m-r-20"
|
size="md"
|
||||||
>
|
text="Burn"
|
||||||
Burn
|
type="negative"
|
||||||
</button>
|
/>
|
||||||
<div className="vote-scale--container">
|
<VoteProgressBar
|
||||||
<p className="vote-scale--votes">{this.votesBurnNumber} Votes</p>
|
networkBranch={networkBranch}
|
||||||
<p className="vote-scale--percentage">{this.votesBurnPercents}%</p>
|
type="negative"
|
||||||
<div className={voteScaleClass}>
|
votesAmount={this.votesBurnNumber}
|
||||||
<div
|
votesPercentage={this.votesBurnPercents}
|
||||||
className="vote-scale--fill vote-scale--fill_burn"
|
/>
|
||||||
style={{ width: `${this.votesBurnPercents}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="sw-BallotCard_ScaleColumn sw-BallotCard_ScaleColumn-3">
|
<div className="sw-BallotCard_ScaleColumn sw-BallotCard_ScaleColumn-3">
|
||||||
<button
|
<ButtonVoting
|
||||||
type="button"
|
networkBranch={networkBranch}
|
||||||
onClick={e => this.vote({ choice: FREEZE })}
|
onClick={e => this.vote({ choice: FREEZE })}
|
||||||
className="btn btn-freeze sw-BallotCard_VoteButton xl m-r-20"
|
size="md"
|
||||||
>
|
text="Freeze"
|
||||||
Freeze
|
type="neutral"
|
||||||
</button>
|
/>
|
||||||
<div className="vote-scale--container">
|
<VoteProgressBar
|
||||||
<p className="vote-scale--votes">{this.votesFreezeNumber} Votes</p>
|
networkBranch={networkBranch}
|
||||||
<p className="vote-scale--percentage">{this.votesFreezePercents}%</p>
|
type="neutral"
|
||||||
<div className={voteScaleClass}>
|
votesAmount={this.votesFreezeNumber}
|
||||||
<div
|
votesPercentage={this.votesFreezePercents}
|
||||||
className="vote-scale--fill vote-scale--fill_freeze"
|
/>
|
||||||
style={{ width: `${this.votesFreezePercents}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="sw-BallotCard_ScaleColumn sw-BallotCard_ScaleColumn-3">
|
<div className="sw-BallotCard_ScaleColumn sw-BallotCard_ScaleColumn-3">
|
||||||
<button
|
<ButtonVoting
|
||||||
className="btn btn-success sw-BallotCard_VoteButton xl m-r-20"
|
networkBranch={networkBranch}
|
||||||
onClick={e => this.vote({ choice: SEND })}
|
onClick={e => this.vote({ choice: SEND })}
|
||||||
type="button"
|
size="md"
|
||||||
>
|
text="Send"
|
||||||
Send
|
type="positive"
|
||||||
</button>
|
/>
|
||||||
<div className="vote-scale--container">
|
<VoteProgressBar
|
||||||
<p className="vote-scale--votes">{this.votesSendNumber} Votes</p>
|
networkBranch={networkBranch}
|
||||||
<p className="vote-scale--percentage">{this.votesSendPercents}%</p>
|
type="positive"
|
||||||
<div className={voteScaleClass}>
|
votesAmount={this.votesSendNumber}
|
||||||
<div
|
votesPercentage={this.votesSendPercents}
|
||||||
className="vote-scale--fill vote-scale--fill_send"
|
/>
|
||||||
style={{ width: `${this.votesSendPercents}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -723,39 +712,33 @@ export class BallotCard extends React.Component {
|
||||||
votingScale = (
|
votingScale = (
|
||||||
<div className="sw-BallotCard_Scale">
|
<div className="sw-BallotCard_Scale">
|
||||||
<div className="sw-BallotCard_ScaleColumn">
|
<div className="sw-BallotCard_ScaleColumn">
|
||||||
<button
|
<ButtonVoting
|
||||||
type="button"
|
networkBranch={networkBranch}
|
||||||
onClick={e => this.vote({ choice: REJECT })}
|
onClick={e => this.vote({ choice: REJECT })}
|
||||||
className="btn btn-danger sw-BallotCard_VoteButton m-r-20"
|
text="No"
|
||||||
>
|
type="negative"
|
||||||
No
|
/>
|
||||||
</button>
|
<VoteProgressBar
|
||||||
<div className="vote-scale--container">
|
networkBranch={networkBranch}
|
||||||
<p className="vote-scale--votes">{this.votesAgainstNumber} Votes</p>
|
type="negative"
|
||||||
<p className="vote-scale--percentage">{this.votesAgainstPercents}%</p>
|
votesAmount={this.votesAgainstNumber}
|
||||||
<div className={voteScaleClass}>
|
votesPercentage={this.votesAgainstPercents}
|
||||||
<div
|
/>
|
||||||
className="vote-scale--fill vote-scale--fill_no"
|
|
||||||
style={{ width: `${this.votesAgainstPercents}%` }}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="sw-BallotCard_ScaleColumn reverse-responsive">
|
<div className="sw-BallotCard_ScaleColumn reverse-responsive">
|
||||||
<div className="vote-scale--container">
|
<VoteProgressBar
|
||||||
<p className="vote-scale--votes">{this.votesForNumber} Votes</p>
|
networkBranch={networkBranch}
|
||||||
<p className="vote-scale--percentage">{this.votesForPercents}%</p>
|
type="positive"
|
||||||
<div className={voteScaleClass}>
|
votesAmount={this.votesForNumber}
|
||||||
<div className="vote-scale--fill vote-scale--fill_yes" style={{ width: `${this.votesForPercents}%` }} />
|
votesPercentage={this.votesForPercents}
|
||||||
</div>
|
/>
|
||||||
</div>
|
<ButtonVoting
|
||||||
<button
|
networkBranch={networkBranch}
|
||||||
className="btn btn-success sw-BallotCard_VoteButton m-l-20"
|
|
||||||
onClick={e => this.vote({ choice: ACCEPT })}
|
onClick={e => this.vote({ choice: ACCEPT })}
|
||||||
type="button"
|
side="right"
|
||||||
>
|
text="Yes"
|
||||||
Yes
|
type="positive"
|
||||||
</button>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue