Cleanup selector (#5971)

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() }
       </Form>
     );
   }
 
-  renderIdentitySelector () {
-    const { accounts, selectedAddress } = this.state;
-
-    if (!accounts) {
-      return null;
-    }
-
-    return (
-      <RadioButtons
-        className={ styles.selector }
-        name='identitySelector'
-        onChange={ this.onChangeIdentity }
-        value={ selectedAddress }
-        values={
-          Object.keys(accounts).map((address) => {
-            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
-                  className={ styles.identity }
+                  className={
+                    [
+                      styles.identity,
+                      selectedAddress === address
+                        ? styles.selected
+                        : styles.unselected
+                    ].join(' ')
+                  }
                   key={ address }
-                  onTouchTap={ this.onChangeIdentity }
+                  onTouchTap={ _onSelect }
                 >
                   <IdentityIcon
                     address={ address }

js/src/views/Accounts/CreateAccount/createAccount.css

@@ -79,21 +79,26 @@
   }
 }
 
-.identities,
-.selector>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 {