Style RowAccount & add selection

src/js/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js

@@ -1,5 +1,5 @@
 /* @flow */
-import React, { components } from 'react';
+import React, { Component } from 'react';
 import BigNumber from 'bignumber.js';
 import colors from 'config/colors';
 import Loader from 'components/LoaderCircle';
@@ -26,12 +26,13 @@ const Text = styled.span`
 
 const RowAccountWrapper = styled.div`
     height: 64px;
-
+    padding: 16px 0 16px 24px;
     font-size: ${FONT_SIZE.SMALL};
     color: ${colors.TEXT_PRIMARY};
-
     border-top: 1px solid ${colors.DIVIDER};
-
+    &:hover {
+        background-color: ${colors.GRAY_LIGHT};
+    }
     ${props => props.isSelected && css`
         border-left: ${BORDER_WIDTH.SELECTED} solid ${colors.GREEN_PRIMARY};
         background: ${colors.WHITE};
@@ -47,27 +48,24 @@ const RowAccountWrapper = styled.div`
 `;
 
 const RowAccount = ({
-    accountIndex, balance, url, isSelected = false,
+    accountIndex, balance, isSelected = false,
 }) => (
-    <NavLink to={url}>
-        <RowAccountWrapper
-            to={url}
-            isSelected={isSelected}
-        >
-            <Row column>
-                Account #{accountIndex + 1}
-                {balance ? (
-                    <Text>{balance}</Text>
-                ) : (
-                    <Text>Loading...</Text>
-                )}
-            </Row>
-        </RowAccountWrapper>
-    </NavLink>
+    <RowAccountWrapper
+        isSelected={isSelected}
+    >
+        <Row column>
+            Account #{accountIndex + 1}
+            {balance ? (
+                <Text>{balance}</Text>
+            ) : (
+                <Text>Loading...</Text>
+            )}
+        </Row>
+    </RowAccountWrapper>
 );
+
 RowAccount.propTypes = {
     accountIndex: PropTypes.number.isRequired,
-    url: PropTypes.string.isRequired,
     balance: PropTypes.string,
     isSelected: PropTypes.bool,
 };
@@ -104,18 +102,19 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
             }
         }
 
+        const urlAccountIndex = parseInt(props.location.state.account);
         return (
-            <RowAccount
+            <NavLink
+                to={url}
                 key={account.index}
-                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>
+            >
+                <RowAccount
+                    accountIndex={account.index}
+                    url={url}
+                    balance={balance}
+                    isSelected={urlAccountIndex === account.index}
+                />
+            </NavLink>
         );
     });
 
@@ -123,15 +122,15 @@ const AccountMenu = (props: Props): ?React$Element<string> => {
         if (selected.connected) {
             const url: string = location.pathname.replace(/account+\/([0-9]*)/, 'account/0');
             selectedAccounts = (
-                <RowAccount
-                    accountIndex={0}
-                    url={url}
-                />
-
-                // <NavLink activeClassName="selected" className="account" to={url}>
-                //     Account #1
-                //     <span>Loading...</span>
-                // </NavLink>
+                <NavLink
+                    to={url}
+                >
+                    <RowAccount
+                        accountIndex={0}
+                        url={url}
+                        isSelected
+                    />
+                </NavLink>
             );
         }
     }

src/styles/aside.less

@@ -376,37 +376,37 @@ aside {
         //     }
         // }
 
-        &.back {
-            padding-left: 80px;
+        // &.back {
+        //     padding-left: 80px;
 
-            &:before {
-                content: '';
-                position: absolute;
-                display: block;
-                width: 20px;
-                height: 20px;
-                left: 56px;
-                top: 0px;
-                bottom: 0px;
-                margin: auto 0;
-                background-repeat: no-repeat;
-                background-position: center;
-                background-size: auto 20px;
-            }
+        //     &:before {
+        //         content: '';
+        //         position: absolute;
+        //         display: block;
+        //         width: 20px;
+        //         height: 20px;
+        //         left: 56px;
+        //         top: 0px;
+        //         bottom: 0px;
+        //         margin: auto 0;
+        //         background-repeat: no-repeat;
+        //         background-position: center;
+        //         background-size: auto 20px;
+        //     }
 
-            &:after {
-                .icomoon-arrow-left;
-                position: absolute;
-                display: block;
-                width: 20px;
-                height: 20px;
-                left: 24px;
-                top: 0px;
-                bottom: 0px;
-                margin: auto 0;
-                font-size: 20px;
-            }
-        }
+        //     &:after {
+        //         .icomoon-arrow-left;
+        //         position: absolute;
+        //         display: block;
+        //         width: 20px;
+        //         height: 20px;
+        //         left: 24px;
+        //         top: 0px;
+        //         bottom: 0px;
+        //         margin: auto 0;
+        //         font-size: 20px;
+        //     }
+        // }
 
         // &.ethereum:before,
         // &.ethereum-classic:before,
@@ -465,15 +465,15 @@ aside {
     //     }
     // }
 
-    .device-divider {
-        font-size: 12px;
-        display: flex;
-        justify-content: space-between;
-        color: @color_text_secondary;
-        background: @color_gray_light;
-        padding: 8px 28px 8px 24px;
-        border-bottom: 1px solid @color_divider;
-    }
+    // .device-divider {
+    //     font-size: 12px;
+    //     display: flex;
+    //     justify-content: space-between;
+    //     color: @color_text_secondary;
+    //     background: @color_gray_light;
+    //     padding: 8px 28px 8px 24px;
+    //     border-bottom: 1px solid @color_divider;
+    // }
 
     .help {
         width: 319px; // - 1px border-roght; 320px;