AsideRowAccount component WIP

src/js/components/wallet/aside/AccountSelection.js

@@ -10,6 +10,7 @@ import * as stateUtils from 'reducers/utils';
 import Loader from 'components/common/LoaderCircle';
 import Tooltip from 'rc-tooltip';
 
+import AsideRowAccount from './AsideRowAccount';
 import AsideSection from './AsideSection';
 
 import type { TrezorDevice, Accounts } from 'flowtype';
@@ -52,10 +53,16 @@ const AccountSelection = (props: Props): ?React$Element<string> => {
         }
 
         return (
-            <NavLink key={i} activeClassName="selected" className="account" to={url}>
-                { `Account #${(account.index + 1)}` }
-                <span>{ account.loaded ? balance : 'Loading...' }</span>
-            </NavLink>
+            <AsideRowAccount
+                accountIndex={account.index}
+                balance={balance}
+                url={url}
+            />
+
+            // <NavLink key={i} activeClassName="selected" className="account" to={url}>
+            //     { `Account #${(account.index + 1)}` }
+            //     <span>{ account.loaded ? balance : 'Loading...' }</span>
+            // </NavLink>
         );
     });
 
@@ -63,10 +70,15 @@ const AccountSelection = (props: Props): ?React$Element<string> => {
         if (selected.connected) {
             const url: string = location.pathname.replace(/account+\/([0-9]*)/, 'account/0');
             selectedAccounts = (
-                <NavLink activeClassName="selected" className="account" to={url}>
-                    Account #1
-                    <span>Loading...</span>
-                </NavLink>
+                <AsideRowAccount
+                    accountIndex={0}
+                    url={url}
+                />
+
+                // <NavLink activeClassName="selected" className="account" to={url}>
+                //     Account #1
+                //     <span>Loading...</span>
+                // </NavLink>
             );
         }
     }
@@ -131,7 +143,7 @@ const AccountSelection = (props: Props): ?React$Element<string> => {
 
     return (
         <AsideSection>
-            { backButton }
+            {/* { backButton } */}
             <div>
                 { selectedAccounts }
             </div>

src/js/components/wallet/aside/AsideRowAccount.js

@@ -0,0 +1,64 @@
+import styled, { css } from 'styled-components';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavLink } from 'react-router-dom';
+
+import AsideRow from './AsideRow';
+
+import colors from 'config/colors';
+import { FONT_SIZE, BORDER_WIDTH } from 'config/variables';
+
+const Wrapper = styled.div`
+    height: 64px;
+    font-size: ${FONT_SIZE.SMALL};
+
+    border-top: 1px solid ${colors.DIVIDER};
+    span {
+        font-size: ${FONT_SIZE.SMALLER};
+        color: ${colors.TEXT_SECONDARY};
+    }
+
+    ${props => props.selected && css`
+        border-left: ${BORDER_WIDTH.SELECTED} solid ${colors.GREEN_PRIMARY};
+        background: ${colors.WHITE};
+
+        &:hover {
+            background-color: ${colors.WHITE};
+        }
+
+        &:last-child {
+            border-bottom: 1px solid ${colors.DIVIDER};
+        }
+    `}
+`;
+
+const AsideRowAccount = ({ accountIndex, balance, url, selected }) => (
+    <NavLink to={url}>
+        <Wrapper
+            to={url}
+            selected={selected}
+        >
+            <AsideRow column>
+                Account #{accountIndex + 1}
+                {balance ? (
+                    <span>{balance}</span>
+                ) : (
+                    <span>Loading...</span>
+                )}
+            </AsideRow>
+        </Wrapper>
+    </NavLink>
+);
+
+AsideRowAccount.propTypes = {
+    accountIndex: PropTypes.number.isRequired,
+    balance: PropTypes.string,
+    url: PropTypes.string.isRequired,
+    selected: PropTypes.bool,
+};
+
+AsideRowAccount.defaultProps = {
+    selected: true,
+};
+
+export default AsideRowAccount;

src/js/config/variables.js

@@ -11,3 +11,7 @@ export const TRANSITION_TIME = {
 export const ICON_SIZE = {
     BASE: '20px',
 }
+
+export const BORDER_WIDTH = {
+    SELECTED: '3px',
+};

src/styles/aside.less

@@ -281,17 +281,17 @@ aside {
         // }
 
         &.account {
-            height: 64px;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-evenly;
-            font-size: 14px;
-            border-top: 1px solid @color_divider;
-            span {
-                display: block;
-                font-size: 12px;
-                color: @color_text_secondary;
-            }
+            // height: 64px;
+            // display: flex;
+            // flex-direction: column;
+            // justify-content: space-evenly;
+            // font-size: 14px;
+            // border-top: 1px solid @color_divider;
+            // span {
+            //     display: block;
+            //     font-size: 12px;
+            //     color: @color_text_secondary;
+            // }
 
             &:before {
                 content: '';