(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-ButtonNewBallot & {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.sw-ButtonAddBallot & {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.sw-IconAdd_Path {
|
||||
&#{ & }-core {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
&#{ & }-sokol {
|
||||
fill: $sokol-cyan;;
|
||||
}
|
||||
@include path-colors('.sw-ButtonNewBallot', #fff, $sokol-cyan, #fff);
|
||||
|
||||
@include path-colors('.sw-ButtonAddBallot');
|
||||
|
||||
&#{ & }-dai {
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
|
@ -6,6 +6,7 @@
|
|||
@import "BallotInfoContainer";
|
||||
@import "Ballots";
|
||||
@import "BaseLoader";
|
||||
@import "ButtonAddBallot";
|
||||
@import "ButtonFinalize";
|
||||
@import "ButtonLoadMore";
|
||||
@import "ButtonNewBallot";
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -5,10 +5,10 @@
|
|||
@import 'pages/index';
|
||||
@import 'components/index';
|
||||
|
||||
@import 'application/base';
|
||||
@import 'application/buttons';
|
||||
// @import 'application/base';
|
||||
// @import 'application/buttons';
|
||||
@import 'application/controls';
|
||||
@import 'application/info';
|
||||
// @import 'application/info';
|
||||
@import 'application/new';
|
||||
|
||||
@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 { BallotMinThresholdMetadata } from '../BallotMinThresholdMetadata'
|
||||
import { BallotProxyMetadata } from '../BallotProxyMetadata'
|
||||
import { ButtonAddBallot } from '../ButtonAddBallot'
|
||||
import { KeysTypes } from '../KeysTypes'
|
||||
import { NewBallotMenu } from '../NewBallotMenu'
|
||||
import { NewBallotMenuInfo } from '../NewBallotMenuInfo'
|
||||
|
@ -247,6 +248,7 @@ export class NewBallot extends React.Component {
|
|||
onClick = async () => {
|
||||
const { commonStore, contractsStore, ballotStore, ballotsStore } = this.props
|
||||
const { push } = this.props.routing
|
||||
|
||||
if (!contractsStore.votingKey) {
|
||||
swal('Warning!', messages.NO_METAMASK_MSG, 'warning')
|
||||
return
|
||||
|
@ -254,8 +256,11 @@ export class NewBallot extends React.Component {
|
|||
swal('Warning!', messages.invalidVotingKeyMsg(contractsStore.votingKey), 'warning')
|
||||
return
|
||||
}
|
||||
|
||||
commonStore.showLoading()
|
||||
|
||||
const isFormValid = this.checkValidation()
|
||||
|
||||
if (isFormValid) {
|
||||
if (ballotStore.ballotType === ballotStore.BallotType.keys) {
|
||||
const inputToAreBallotParamsValid = {
|
||||
|
@ -414,8 +419,6 @@ export class NewBallot extends React.Component {
|
|||
render() {
|
||||
const { contractsStore, ballotStore } = this.props
|
||||
const networkBranch = this.getVotingNetworkBranch()
|
||||
let validator = ballotStore.isNewValidatorPersonalData ? <Validator /> : ''
|
||||
let keysTypes = ballotStore.isBallotForKey ? <KeysTypes /> : ''
|
||||
let metadata
|
||||
let minThreshold = 0
|
||||
|
||||
|
@ -461,12 +464,10 @@ export class NewBallot extends React.Component {
|
|||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
{keysTypes}
|
||||
{validator}
|
||||
{ballotStore.isBallotForKey ? <KeysTypes /> : null}
|
||||
{ballotStore.isNewValidatorPersonalData ? <Validator /> : null}
|
||||
{metadata}
|
||||
<button type="button" className="btn btn-primary btn-new text-capitalize" onClick={e => this.onClick(e)}>
|
||||
Add ballot
|
||||
</button>
|
||||
<ButtonAddBallot onClick={e => this.onClick(e)} networkBranch={networkBranch} />
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
|
Loading…
Reference in New Issue