AccountCard uses Container

js/src/ui/AccountCard/accountCard.css

@@ -17,7 +17,6 @@
 
 .account {
   align-items: stretch;
-  background-color: rgba(0, 0, 0, 0.8);
   display: flex;
   flex-direction: row;
   height: 100%;
@@ -32,7 +31,6 @@
 
   &:focus {
     transform: scale(0.99);
-    background-color: rgba(0, 0, 0, 0.6);
   }
 
   &:first-child {
@@ -45,7 +43,6 @@
 
   &:hover {
     cursor: pointer;
-    background-color: rgba(0, 0, 0, 0.4);
   }
 }
 

js/src/ui/AccountCard/accountCard.js

@@ -19,6 +19,7 @@ import ReactDOM from 'react-dom';
 import keycode from 'keycode';
 
 import Balance from '~/ui/Balance';
+import Container from '~/ui/Container';
 import IdentityIcon from '~/ui/IdentityIcon';
 import IdentityName from '~/ui/IdentityName';
 import Tags from '~/ui/Tags';
@@ -60,7 +61,7 @@ export default class AccountCard extends Component {
       : {};
 
     return (
-      <div
+      <Container
         key={ address }
         className={ classes.join(' ') }
         onClick={ this.onClick }
@@ -108,7 +109,7 @@ export default class AccountCard extends Component {
           ) : null
         }
 
-      </div>
+      </Container>
     );
   }
 

js/src/ui/Container/container.js

@@ -35,13 +35,14 @@ export default class Container extends Component {
     light: PropTypes.bool,
     link: PropTypes.string,
     onClick: PropTypes.func,
+    onFocus: PropTypes.func,
     style: PropTypes.object,
     tabIndex: PropTypes.number,
     title: nodeOrStringProptype()
   }
 
   render () {
-    const { children, className, compact, light, link, onClick, style, tabIndex } = this.props;
+    const { children, className, compact, light, link, onClick, onFocus, style, tabIndex } = this.props;
     const props = {};
 
     if (Number.isInteger(tabIndex)) {
@@ -56,6 +57,7 @@ export default class Container extends Component {
             : styles.padded
         }
         onClick={ onClick }
+        onFocus={ onFocus }
       >
         { this.renderTitle() }
         { children }