diff --git a/js/src/views/Accounts/CreateAccount/NewAccount/newAccount.js b/js/src/views/Accounts/CreateAccount/NewAccount/newAccount.js index 38885220c..50c16a53f 100644 --- a/js/src/views/Accounts/CreateAccount/NewAccount/newAccount.js +++ b/js/src/views/Accounts/CreateAccount/NewAccount/newAccount.js @@ -18,7 +18,7 @@ import { observer } from 'mobx-react'; import React, { Component, PropTypes } from 'react'; import { FormattedMessage } from 'react-intl'; -import { Button, Form, Input, IdentityIcon, Loading, RadioButtons } from '@parity/ui'; +import { Button, Form, Input, IdentityIcon, Loading } from '@parity/ui'; import PasswordStrength from '@parity/ui/Form/PasswordStrength'; import { RefreshIcon } from '@parity/ui/Icons'; @@ -127,39 +127,13 @@ export default class CreateAccount extends Component { createStore={ this.props.createStore } vaultStore={ this.props.vaultStore } /> - { this.renderIdentitySelector() } { this.renderIdentities() } ); } - renderIdentitySelector () { - const { accounts, selectedAddress } = this.state; - - if (!accounts) { - return null; - } - - return ( - { - return { - key: address, - label: address - }; - }) - } - /> - ); - } - renderIdentities () { - const { accounts } = this.state; + const { accounts, selectedAddress } = this.state; if (!accounts) { return ( @@ -173,11 +147,20 @@ export default class CreateAccount extends Component { Object .keys(accounts) .map((address) => { + const _onSelect = (event) => this.onChangeIdentity(event, address); + return (
div { +.identities { display: flex; -} -.selector>div { - margin-top: 1.5em; -} + .identity { + border: 1px solid transparent; + cursor: pointer; + flex: 0 1 12.5%; + padding: 0.75em 0; + text-align: center; + width: 12.5% !important; -.identities .identity, -.selector>div>div { - flex: 0 1 12.5%; - width: 12.5% !important; - text-align: center; - cursor: pointer; + &.selected { + border-color: #2185D0; + border-radius: 8px; + background: rgba(200, 200, 225, 0.5); + } + + &.unselected { + } + } } .refresh {