DeviceHeader customization with right icon

src/js/config/icons.js

@@ -1,4 +1,7 @@
 export default {
+    EJECT: [
+        'M276 768h471.968c11.072 0 20.032-9.76 20.032-21.824v-75.968c0-12.064-8.96-21.824-20-21.824h-472c-11.040 0-20 9.76-20 21.824v75.968c0 12.064 8.96 21.824 20 21.824zM503.552 260.192l-231.232 288.128c-6.368 7.904-1.184 20.32 8.448 20.32h462.496c9.664 0 14.816-12.384 8.448-20.32l-231.232-288.128c-4.512-5.6-12.448-5.6-16.928 0z',
+    ],
     CLOSE: [
         'M754.816 689.92c17.6 17.6 17.6 46.72 0 64.64-8.96 8.64-20.48 13.44-32.64 13.44s-23.68-4.8-32.32-13.44l-177.888-177.92-177.888 177.92c-16.32 16.96-47.040 17.6-64.64 0-17.92-17.92-17.92-47.040 0-64.64l178.208-177.92-178.208-177.92c-17.92-17.92-17.92-46.72 0-64.64 17.28-17.28 47.36-17.28 64.64 0l177.888 177.92 177.888-177.92c17.92-17.92 47.040-17.92 64.96 0 17.6 17.92 17.6 46.72 0 64.64l-178.24 177.92 178.24 177.92z',
     ],

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

@@ -101,20 +101,20 @@ class DeviceHeader extends Component {
         };
     }
 
-    handleClick() {
+    handleClickWrapper() {
         this.setState({ clicked: true });
         if (!this.props.disabled) {
-            this.props.handleOpen();
+            this.props.onClickWrapper();
         }
     }
 
     render() {
         const {
-            status, label, deviceCount, isOpen, trezorModel, disabled,
+            status, label, deviceCount, isOpen, trezorModel, disabled, icon,
         } = this.props;
         return (
             <Wrapper isOpen={isOpen}>
-                <ClickWrapper disabled={disabled} onClick={() => this.handleClick()}>
+                <ClickWrapper disabled={disabled} onClick={() => this.handleClickWrapper()}>
                     <ImageWrapper>
                         <Dot color={getStatusColor(status)} />
                         <TrezorImage model={trezorModel} />
@@ -124,8 +124,9 @@ class DeviceHeader extends Component {
                         <Status>{getStatusName(status)}</Status>
                     </LabelWrapper>
                     <IconWrapper>
-                        {deviceCount > 1 && <Counter>{deviceCount}</Counter>}
+                        {icon && icon}
-                        {!disabled && (
+                        {!icon && deviceCount > 1 && <Counter>{deviceCount}</Counter>}
+                        {!icon && !disabled && (
                             <Icon
                                 canAnimate={this.state.clicked === true}
                                 isActive={isOpen}
@@ -148,7 +149,7 @@ DeviceHeader.propTypes = {
     disabled: PropTypes.bool,
     isOpen: PropTypes.bool,
     trezorModel: PropTypes.string.isRequired,
-    handleOpen: PropTypes.func.isRequired,
+    onClickWrapper: PropTypes.func.isRequired,
     status: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
 };

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

@@ -1,6 +1,9 @@
 /* @flow */
 import React, { Component } from 'react';
 import styled from 'styled-components';
+import icons from 'config/icons';
+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';
@@ -13,6 +16,7 @@ import type { Props } from '../common';
 import AsideDivider from '../Divider';
 
 const Wrapper = styled.div``;
+const IconClick = styled.div``;
 
 export const DeviceSelect = (props: Props) => {
     const { devices } = props;
@@ -26,7 +30,7 @@ export const DeviceSelect = (props: Props) => {
 
     return (
         <DeviceHeader
-            handleOpen={handleOpen}
+            onClickWrapper={handleOpen}
             disabled={disabled}
             label={selectedDevice.instanceLabel}
             status={getStatus(selectedDevice)}
@@ -170,20 +174,27 @@ export class DeviceDropdown extends Component<Props> {
             }
 
             return (
-                <div key={index} className={css} onClick={() => this.props.onSelectDevice(dev)}>
+                <DeviceHeader
-                    <div className="label-container">
+                    onClickWrapper={() => this.props.onSelectDevice(dev)}
-                        <span className="label">{dev.instanceLabel}</span>
+                    onClickIcon={() => this.onDeviceMenuClick({ type: 'forget', label: '' }, dev)}
-                        <span className="status">{deviceStatus}</span>
+                    icon={(
-                    </div>
+                        <IconClick onClick={(event) => {
-                    <div
-                        className="forget-button"
-                        onClick={(event) => {
                             event.stopPropagation();
                             event.preventDefault();
                             this.onDeviceMenuClick({ type: 'forget', label: '' }, dev);
                         }}
-                    />
+                        >
-                </div>
+                            <Icon
+                                icon={icons.EJECT}
+                                size={25}
+                                color={colors.TEXT_SECONDARY}
+                            />
+                        </IconClick>
+                    )}
+                    label={dev.instanceLabel}
+                    status={getStatus(dev)}
+                    trezorModel={getVersion(dev)}
+                />
             );
         });