(feat) Send / Burn / Freeze buttons.
This commit is contained in:
parent
fd71035a52
commit
4b2a45d6fd
File diff suppressed because one or more lines are too long
|
@ -48,11 +48,13 @@ textarea {
|
|||
@include make-themed-btn('btn-primary', $primary-color, (92, 52, 162, 0.3));
|
||||
@include make-themed-btn('btn-success', $success-color, (96, 219, 151, 0.3));
|
||||
@include make-themed-btn('btn-danger', $danger-color, (242, 27, 87, 0.3));
|
||||
@include make-themed-btn('btn-freeze', $freeze-color, (80, 187, 218, 0.3));
|
||||
|
||||
.sokol & {
|
||||
@include make-themed-btn('btn-primary', $primary-color-sokol, (106, 201, 185, 0.3));
|
||||
@include make-themed-btn('btn-success', $success-color-sokol, (96, 219, 151, 0.3));
|
||||
@include make-themed-btn('btn-danger', $danger-color-sokol, (242, 76, 103, 0.33));
|
||||
@include make-themed-btn('btn-freeze', $freeze-color-sokol, (80, 187, 218, 0.3));
|
||||
}
|
||||
|
||||
&.btn-new {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
.vote-scale {
|
||||
background-color: fade-out(#e5eef9, 0.5);
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 5px;
|
||||
clear: left;
|
||||
height: 10px;
|
||||
|
@ -27,16 +27,32 @@
|
|||
background-color: $success-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
&_send {
|
||||
background-color: $success-color;
|
||||
.sokol & {
|
||||
background-color: $success-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
&_burn {
|
||||
background-color: $danger-color;
|
||||
.sokol & {
|
||||
background-color: $danger-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
&_freeze {
|
||||
background-color: $freeze-color;
|
||||
.sokol & {
|
||||
background-color: $freeze-color-sokol;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&--container {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
float: right;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&--value {
|
||||
|
|
|
@ -19,7 +19,6 @@
|
|||
&-scale {
|
||||
border-top: 1px solid $base-border-color;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 30px;
|
||||
padding: 30px 0 0 0;
|
||||
|
@ -34,18 +33,27 @@
|
|||
}
|
||||
&-column {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
width: 47.5%;
|
||||
margin-right: 40px;
|
||||
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
margin-bottom: 30px;
|
||||
margin-right: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.reverse-responsive {
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
flex-direction: row-reverse;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&--name {
|
||||
|
@ -75,10 +83,21 @@
|
|||
line-height: 44px;
|
||||
min-width: 55px;
|
||||
text-transform: capitalize;
|
||||
&.xl {
|
||||
min-width: 78px;
|
||||
}
|
||||
&.m-r-20 {
|
||||
margin-right: 20px;
|
||||
}
|
||||
&.m-l-20 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
@media screen and (max-width: $tablet-width) {
|
||||
float: left;
|
||||
&.m-r-20,
|
||||
&.m-l-20 {
|
||||
margin-left: 0;
|
||||
margin-right: 15px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,6 +6,8 @@ $primary-color-darker: #45277a;
|
|||
$primary-color-sokol: #6ac9b9;
|
||||
$primary-color-darker-sokol: #41b19e;
|
||||
$danger-color: #f21b57;
|
||||
$freeze-color: #50bbda;
|
||||
$freeze-color-sokol: #50bbda;
|
||||
$danger-color-sokol: #f24c67;
|
||||
$success-color: #60db97;
|
||||
$success-color-sokol: #6ac9b9;
|
||||
|
|
|
@ -441,12 +441,73 @@ export class BallotCard extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Send / Burn / Freeze */}
|
||||
<div className="ballots-i-scale">
|
||||
<div className="ballots-i-scale-column ballots-i-scale-column-3">
|
||||
<button
|
||||
className="btn btn-success ballots-i--vote_btn xl m-r-20"
|
||||
onClick={e => this.vote({ choice: ACCEPT })}
|
||||
type="button"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
<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_send"
|
||||
style={{ width: `${this.votesForPercents}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ballots-i-scale-column ballots-i-scale-column-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => this.vote({ choice: REJECT })}
|
||||
className="btn btn-danger ballots-i--vote_btn xl m-r-20"
|
||||
>
|
||||
Burn
|
||||
</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_burn"
|
||||
style={{ width: `${this.votesAgainstPercents}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ballots-i-scale-column ballots-i-scale-column-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => this.vote({ choice: REJECT })}
|
||||
className="btn btn-freeze ballots-i--vote_btn xl m-r-20"
|
||||
>
|
||||
Freeze
|
||||
</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_freeze"
|
||||
style={{ width: `${this.votesAgainstPercents}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* No / yes */}
|
||||
{/* <div className="ballots-i-scale">
|
||||
<div className="ballots-i-scale-column">
|
||||
<button
|
||||
type="button"
|
||||
onClick={e => this.vote({ choice: REJECT })}
|
||||
className="btn btn-danger ballots-i--vote_no ballots-i--vote_btn"
|
||||
className="btn btn-danger ballots-i--vote_btn m-r-20"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
|
@ -461,7 +522,7 @@ export class BallotCard extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ballots-i-scale-column">
|
||||
<div className="ballots-i-scale-column reverse-responsive">
|
||||
<div className="vote-scale--container">
|
||||
<p className="vote-scale--votes">{this.votesForNumber} Votes</p>
|
||||
<p className="vote-scale--percentage">{this.votesForPercents}%</p>
|
||||
|
@ -470,14 +531,14 @@ export class BallotCard extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-success ballots-i--vote_yes ballots-i--vote_btn"
|
||||
className="btn btn-success ballots-i--vote_btn m-l-20"
|
||||
onClick={e => this.vote({ choice: ACCEPT })}
|
||||
type="button"
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="info-container">
|
||||
<div className="info info-minimum">
|
||||
Minimum {threshold} from {contractsStore.validatorsLength} validators are required to pass the proposal
|
||||
|
|
Loading…
Reference in New Issue