(add) add ballot button component
This commit is contained in:
parent
7dd0aa92a4
commit
be14025553
|
@ -0,0 +1,45 @@
|
||||||
|
$sw-ButtonAddBallot-height: 36px;
|
||||||
|
|
||||||
|
.sw-ButtonAddBallot {
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
height: $sw-ButtonAddBallot-height;
|
||||||
|
line-height: $sw-ButtonAddBallot-height;
|
||||||
|
opacity: 1;
|
||||||
|
outline: none;
|
||||||
|
padding: 0 15px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: 0.15s background-color;
|
||||||
|
|
||||||
|
&#{ & }-core {
|
||||||
|
background-color: $poa-purple;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: darken($poa-purple, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&#{ & }-sokol {
|
||||||
|
background-color: $sokol-cyan;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: darken($sokol-cyan, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&#{ & }-dai {
|
||||||
|
background-color: $xdai-orange;
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: lighten($xdai-orange, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,19 +1,33 @@
|
||||||
|
@mixin path-colors($parent-class: '', $fill-core: #fff, $fill-sokol: #fff, $fill-dai: #fff) {
|
||||||
|
|
||||||
|
#{ $parent-class } &#{ & }-core {
|
||||||
|
fill: $fill-core;
|
||||||
|
}
|
||||||
|
|
||||||
|
#{ $parent-class } &#{ & }-sokol {
|
||||||
|
fill: $fill-sokol;
|
||||||
|
}
|
||||||
|
|
||||||
|
#{ $parent-class } &#{ & }-dai {
|
||||||
|
fill: $fill-dai;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.sw-IconAdd {
|
.sw-IconAdd {
|
||||||
.sw-ButtonNewBallot & {
|
.sw-ButtonNewBallot & {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sw-ButtonAddBallot & {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sw-IconAdd_Path {
|
.sw-IconAdd_Path {
|
||||||
&#{ & }-core {
|
|
||||||
fill: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&#{ & }-sokol {
|
@include path-colors('.sw-ButtonNewBallot', #fff, $sokol-cyan, #fff);
|
||||||
fill: $sokol-cyan;;
|
|
||||||
}
|
@include path-colors('.sw-ButtonAddBallot');
|
||||||
|
|
||||||
&#{ & }-dai {
|
|
||||||
fill: #fff;
|
|
||||||
}
|
|
||||||
}
|
}
|
|
@ -6,6 +6,7 @@
|
||||||
@import "BallotInfoContainer";
|
@import "BallotInfoContainer";
|
||||||
@import "Ballots";
|
@import "Ballots";
|
||||||
@import "BaseLoader";
|
@import "BaseLoader";
|
||||||
|
@import "ButtonAddBallot";
|
||||||
@import "ButtonFinalize";
|
@import "ButtonFinalize";
|
||||||
@import "ButtonLoadMore";
|
@import "ButtonLoadMore";
|
||||||
@import "ButtonNewBallot";
|
@import "ButtonNewBallot";
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -5,10 +5,10 @@
|
||||||
@import 'pages/index';
|
@import 'pages/index';
|
||||||
@import 'components/index';
|
@import 'components/index';
|
||||||
|
|
||||||
@import 'application/base';
|
// @import 'application/base';
|
||||||
@import 'application/buttons';
|
// @import 'application/buttons';
|
||||||
@import 'application/controls';
|
@import 'application/controls';
|
||||||
@import 'application/info';
|
// @import 'application/info';
|
||||||
@import 'application/new';
|
@import 'application/new';
|
||||||
|
|
||||||
@import 'application/ballot-types';
|
@import 'application/ballot-types';
|
||||||
|
|
|
@ -0,0 +1,14 @@
|
||||||
|
import React from 'react'
|
||||||
|
import { IconAdd } from '../IconAdd'
|
||||||
|
|
||||||
|
export const ButtonAddBallot = ({ extraClassName = '', networkBranch, onClick }) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
className={`sw-ButtonAddBallot ${extraClassName} sw-ButtonAddBallot-${networkBranch}`}
|
||||||
|
onClick={onClick}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
Add Ballot <IconAdd networkBranch={networkBranch} />
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
|
@ -5,6 +5,7 @@ import { BallotEmissionFundsMetadata } from '../BallotEmissionFundsMetadata'
|
||||||
import { BallotKeysMetadata } from '../BallotKeysMetadata'
|
import { BallotKeysMetadata } from '../BallotKeysMetadata'
|
||||||
import { BallotMinThresholdMetadata } from '../BallotMinThresholdMetadata'
|
import { BallotMinThresholdMetadata } from '../BallotMinThresholdMetadata'
|
||||||
import { BallotProxyMetadata } from '../BallotProxyMetadata'
|
import { BallotProxyMetadata } from '../BallotProxyMetadata'
|
||||||
|
import { ButtonAddBallot } from '../ButtonAddBallot'
|
||||||
import { KeysTypes } from '../KeysTypes'
|
import { KeysTypes } from '../KeysTypes'
|
||||||
import { NewBallotMenu } from '../NewBallotMenu'
|
import { NewBallotMenu } from '../NewBallotMenu'
|
||||||
import { NewBallotMenuInfo } from '../NewBallotMenuInfo'
|
import { NewBallotMenuInfo } from '../NewBallotMenuInfo'
|
||||||
|
@ -247,6 +248,7 @@ export class NewBallot extends React.Component {
|
||||||
onClick = async () => {
|
onClick = async () => {
|
||||||
const { commonStore, contractsStore, ballotStore, ballotsStore } = this.props
|
const { commonStore, contractsStore, ballotStore, ballotsStore } = this.props
|
||||||
const { push } = this.props.routing
|
const { push } = this.props.routing
|
||||||
|
|
||||||
if (!contractsStore.votingKey) {
|
if (!contractsStore.votingKey) {
|
||||||
swal('Warning!', messages.NO_METAMASK_MSG, 'warning')
|
swal('Warning!', messages.NO_METAMASK_MSG, 'warning')
|
||||||
return
|
return
|
||||||
|
@ -254,8 +256,11 @@ export class NewBallot extends React.Component {
|
||||||
swal('Warning!', messages.invalidVotingKeyMsg(contractsStore.votingKey), 'warning')
|
swal('Warning!', messages.invalidVotingKeyMsg(contractsStore.votingKey), 'warning')
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
commonStore.showLoading()
|
commonStore.showLoading()
|
||||||
|
|
||||||
const isFormValid = this.checkValidation()
|
const isFormValid = this.checkValidation()
|
||||||
|
|
||||||
if (isFormValid) {
|
if (isFormValid) {
|
||||||
if (ballotStore.ballotType === ballotStore.BallotType.keys) {
|
if (ballotStore.ballotType === ballotStore.BallotType.keys) {
|
||||||
const inputToAreBallotParamsValid = {
|
const inputToAreBallotParamsValid = {
|
||||||
|
@ -414,8 +419,6 @@ export class NewBallot extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const { contractsStore, ballotStore } = this.props
|
const { contractsStore, ballotStore } = this.props
|
||||||
const networkBranch = this.getVotingNetworkBranch()
|
const networkBranch = this.getVotingNetworkBranch()
|
||||||
let validator = ballotStore.isNewValidatorPersonalData ? <Validator /> : ''
|
|
||||||
let keysTypes = ballotStore.isBallotForKey ? <KeysTypes /> : ''
|
|
||||||
let metadata
|
let metadata
|
||||||
let minThreshold = 0
|
let minThreshold = 0
|
||||||
|
|
||||||
|
@ -461,12 +464,10 @@ export class NewBallot extends React.Component {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr />
|
<hr />
|
||||||
{keysTypes}
|
{ballotStore.isBallotForKey ? <KeysTypes /> : null}
|
||||||
{validator}
|
{ballotStore.isNewValidatorPersonalData ? <Validator /> : null}
|
||||||
{metadata}
|
{metadata}
|
||||||
<button type="button" className="btn btn-primary btn-new text-capitalize" onClick={e => this.onClick(e)}>
|
<ButtonAddBallot onClick={e => this.onClick(e)} networkBranch={networkBranch} />
|
||||||
Add ballot
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
|
|
Loading…
Reference in New Issue