diff --git a/packages/app-accounts/src/Vanity/index.tsx b/packages/app-accounts/src/Vanity/index.tsx index 742d2a5d0b06..4c55988f428f 100644 --- a/packages/app-accounts/src/Vanity/index.tsx +++ b/packages/app-accounts/src/Vanity/index.tsx @@ -237,7 +237,7 @@ class VanityApp extends TxComponent { return; } - setTimeout((): void => { + setImmediate((): void => { if (this._isActive) { if (this.results.length === 25) { this.checkMatches(); @@ -257,7 +257,7 @@ class VanityApp extends TxComponent { this.executeGeneration(); } - }, 0); + }); } private onCreateToggle = (createSeed: string): void => { diff --git a/packages/app-council/src/Overview/Vote.tsx b/packages/app-council/src/Overview/Vote.tsx index f6916a41092d..6be0be43f6af 100644 --- a/packages/app-council/src/Overview/Vote.tsx +++ b/packages/app-council/src/Overview/Vote.tsx @@ -13,12 +13,14 @@ import React from 'react'; import styled from 'styled-components'; import { createType } from '@polkadot/types'; import { withCalls, withMulti } from '@polkadot/react-api'; -import { AddressRow, Button, Toggle } from '@polkadot/react-components'; +import { AddressMini, Button, Toggle } from '@polkadot/react-components'; import TxModal, { TxModalState, TxModalProps } from '@polkadot/react-components/TxModal'; import translate from '../translate'; import VoteValue from './VoteValue'; +type VoteType = 'member' | 'runnerup' | 'candidate'; + interface Props extends ApiProps, ComponentProps, TxModalProps { voterPositions?: DerivedVoterPositions; } @@ -46,37 +48,47 @@ interface State extends TxModalState { const Candidates = styled.div` display: flex; flex-wrap: wrap; -`; + justify-content: center; + + .candidate { + border: 1px solid #eee; + border-radius: 0.25rem; + margin: 0.25rem; + padding-bottom: 0.25rem; + padding-right: 0.5rem; + position: relative; + + &::after { + content: ''; + position: absolute; + top: 0; + right: 0; + border-color: transparent; + border-style: solid; + border-radius: 0.25em; + border-width: 0.25em; + } -const Candidate = styled.div` - cursor: pointer; - width: 25rem; - min-width: calc(50% - 1rem); - border-radius: 0.5rem; - border: 1px solid #eee; - padding: 0.75rem 0.5rem 0.25rem; - margin: 0.25rem; - transition: all 0.2s; - - b { - min-width: 5rem; - } + &.isAye { + background: #fff; + border-color: #ccc; + } - &.aye { - background-color: rgba(0, 255, 0, 0.05); + &.member::after { + border-color: green; + } - b { - color: green; + &.runnerup::after { + border-color: steelblue; } - } - &.nay { - background-color: rgba(0, 0, 0, 0.05); - } + .ui--AddressMini-icon { + z-index: 1; + } - .ui--Row-children { - text-align: right; - width: 100%; + .candidate-right { + text-align: right; + } } `; @@ -164,11 +176,11 @@ class Vote extends TxModal { protected renderContent = (): React.ReactNode => { const { api, electionsInfo: { candidates, members, runnersUp }, t } = this.props; const { accountId, votes } = this.state; - const _candidates = candidates.map((accountId): [AccountId, boolean] => [accountId, false]); + const _candidates = candidates.map((accountId): [AccountId, VoteType] => [accountId, 'candidate']); const available = api.tx.electionsPhragmen ? members - .map(([accountId]): [AccountId, boolean] => [accountId, true]) - .concat(runnersUp.map(([accountId]): [AccountId, boolean] => [accountId, false])) + .map(([accountId]): [AccountId, VoteType] => [accountId, 'member']) + .concat(runnersUp.map(([accountId]): [AccountId, VoteType] => [accountId, 'runnerup'])) .concat(_candidates) : _candidates; @@ -200,21 +212,17 @@ class Vote extends TxModal { )} */} - {available.map(([accountId, isMember]): React.ReactNode => { + {available.map(([accountId, type]): React.ReactNode => { const key = accountId.toString(); const isAye = votes[key] || false; return ( - - +
{ onChange={this.onChangeVote(key)} value={isAye} /> - - +
+ ); })}
diff --git a/packages/react-api/src/with/call.tsx b/packages/react-api/src/with/call.tsx index bd7ac1a4ba1c..cc7ecba90e24 100644 --- a/packages/react-api/src/with/call.tsx +++ b/packages/react-api/src/with/call.tsx @@ -98,12 +98,12 @@ export default function withCall

(endpoint: string, { // The attachment takes time when a lot is available, set a timeout // to first handle the current queue before subscribing - setTimeout((): void => { + setImmediate((): void => { this .subscribe(this.getParams(this.props)) .then(NOOP) .catch(NOOP); - }, 0); + }); } public componentWillUnmount (): void {