Refactor device header

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

@@ -38,13 +38,16 @@ const RowAccountWrapper = styled.div`
     font-size: ${FONT_SIZE.SMALL};
     color: ${colors.TEXT_PRIMARY};
     border-left: ${BORDER_WIDTH.SELECTED} solid transparent;
-    ${props => props.borderTop && css`
-        border-top: 1px solid ${colors.DIVIDER};
-    `}
     border-bottom: 1px solid ${colors.DIVIDER};
+
     &:hover {
         background-color: ${colors.GRAY_LIGHT};
     }
+
+    ${props => props.borderTop && css`
+        border-top: 1px solid ${colors.DIVIDER};
+    `}
+
     ${props => props.isSelected && css`
         border-left: ${BORDER_WIDTH.SELECTED} solid ${colors.GREEN_PRIMARY};
         background: ${colors.WHITE};

src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceHeader/index.js

@@ -3,9 +3,14 @@ import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import Icon from 'components/Icon';
 import icons from 'config/icons';
-import { getStatusColor, getStatusName } from 'utils/device';
+import {
+    getStatusColor,
+    getStatusName,
+    isDisabled,
+    getStatus,
+    getVersion,
+} from 'utils/device';
 import TrezorImage from 'components/TrezorImage';
-
 import colors from 'config/colors';
 
 const Wrapper = styled.div`
@@ -21,6 +26,12 @@ const Wrapper = styled.div`
     ${props => props.isOpen && css`
         box-shadow: none;
     `}
+
+    ${props => props.isHoverable && css`
+        &:hover {
+            background: ${colors.GRAY_LIGHT};
+        }
+    `}
 `;
 
 const ClickWrapper = styled.div`
@@ -101,6 +112,10 @@ class DeviceHeader extends Component {
         };
     }
 
+    isDisabled(device, devices, transport) {
+        return isDisabled(device, devices, transport);
+    }
+
     handleClickWrapper() {
         this.setState({ clicked: true });
         if (!this.props.disabled) {
@@ -110,17 +125,21 @@ class DeviceHeader extends Component {
 
     render() {
         const {
-            status, label, deviceCount, isOpen, trezorModel, disabled, icon,
+            isOpen, icon, device, devices, transport, isHoverable,
         } = this.props;
+        const status = getStatus(device);
+        const disabled = isDisabled(device, devices, transport);
+        const deviceCount = devices.length;
+
         return (
-            <Wrapper isOpen={isOpen}>
+            <Wrapper isOpen={isOpen} isHoverable={isHoverable}>
                 <ClickWrapper disabled={disabled} onClick={() => this.handleClickWrapper()}>
                     <ImageWrapper>
                         <Dot color={getStatusColor(status)} />
-                        <TrezorImage model={trezorModel} />
+                        <TrezorImage model={getVersion(device)} />
                     </ImageWrapper>
                     <LabelWrapper>
-                        <Name>{label}</Name>
+                        <Name>{device.instanceLabel}</Name>
                         <Status>{getStatusName(status)}</Status>
                     </LabelWrapper>
                     <IconWrapper>

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

@@ -6,7 +6,6 @@ import colors from 'config/colors';
 import Icon from 'components/Icon';
 import TrezorConnect from 'trezor-connect';
 import type { TrezorDevice } from 'flowtype';
-import { getStatus, getVersion, isDisabled } from 'utils/device';
 
 import DeviceHeader from './components/DeviceHeader';
 
@@ -19,11 +18,6 @@ const Wrapper = styled.div``;
 const IconClick = styled.div``;
 
 export const DeviceSelect = (props: Props) => {
-    const { devices } = props;
-    const { transport } = props.connect;
-    const { selectedDevice } = props.wallet;
-    const disabled = isDisabled(selectedDevice, devices, transport);
-
     const handleOpen = () => {
         props.toggleDeviceDropdown(!props.deviceDropdownOpened);
     };
@@ -31,12 +25,10 @@ export const DeviceSelect = (props: Props) => {
     return (
         <DeviceHeader
             onClickWrapper={handleOpen}
-            disabled={disabled}
-            label={selectedDevice.instanceLabel}
-            status={getStatus(selectedDevice)}
-            deviceCount={devices.length}
+            device={props.wallet.selectedDevice}
+            transport={props.connect.transport}
+            devices={props.devices.length}
             isOpen={props.deviceDropdownOpened}
-            trezorModel={getVersion(selectedDevice)}
         />
     );
 };
@@ -152,7 +144,7 @@ export class DeviceDropdown extends Component<Props> {
         };
 
         const deviceList = devices.sort(sortByInstance)
-            .map((dev, index) => {
+            .map((dev) => {
                 if (dev === selected) return null;
                 return (
                     <DeviceHeader
@@ -173,9 +165,9 @@ export class DeviceDropdown extends Component<Props> {
                                 />
                             </IconClick>
                         )}
-                        label={dev.instanceLabel}
-                        status={getStatus(dev)}
-                        trezorModel={getVersion(dev)}
+                        device={dev}
+                        devices={devices}
+                        isHoverable
                     />
                 );
             });