Removed old selected device

src/js/components/Icon/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { keyframes } from 'styled-components';
 
+// TODO: make animation of icons better
 const rotate180up = keyframes`
     from {
         transform: rotate(0deg);

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

@@ -14,6 +14,19 @@ const Wrapper = styled.div`
     width: 320px;
     display: flex;
     align-items: center;
+    background: ${colors.WHITE};
+    border-bottom: 1px solid ${colors.DIVIDER};
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
+    cursor: pointer;
+
+    ${props => props.isOpen && css`
+        border-bottom: 1px solid ${colors.WHITE};
+        box-shadow: none;
+    `}
+
+    ${props => props.disabled && css`
+        cursor: initial;
+    `}
 `;
 
 const ClickWrapper = styled.div`
@@ -23,6 +36,10 @@ const ClickWrapper = styled.div`
     height: 100%;
     align-items: center;
     cursor: pointer;
+
+    ${props => props.disabled && css`
+        cursor: initial;
+    `}
 `;
 
 const LabelWrapper = styled.div`
@@ -98,13 +115,12 @@ class DeviceHeader extends Component {
     }
 
     render() {
-        console.log('cananitem', this.state.clicked);
         const {
-            status, label, deviceCount, isOpen, trezorModel,
+            status, label, deviceCount, isOpen, trezorModel, disabled,
         } = this.props;
         return (
-            <Wrapper>
+            <Wrapper isOpen={isOpen} disabled={disabled}>
-                <ClickWrapper onClick={() => this.handleClick()}>
+                <ClickWrapper disabled={disabled} onClick={() => this.handleClick()}>
                     <ImageWrapper>
                         <Dot color={getStatusColor(status)} />
                         <TrezorImage status={status} model={trezorModel} />
@@ -115,14 +131,16 @@ class DeviceHeader extends Component {
                     </LabelWrapper>
                     <IconWrapper>
                         {deviceCount > 1 && <Counter>{deviceCount}</Counter>}
+                        {!disabled && (
                             <Icon
                                 canAnimate={this.state.clicked === true}
                                 isActive={isOpen}
                                 size={25}
                                 color={colors.TEXT_SECONDARY}
                                 icon={icons.ARROW_DOWN}
-                            rotateOnActive
                             />
+                        )
+                        }
                     </IconWrapper>
                 </ClickWrapper>
             </Wrapper>

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

@@ -3,9 +3,10 @@ import React, { Component } from 'react';
 import styled from 'styled-components';
 import TrezorConnect from 'trezor-connect';
 import type { TrezorDevice } from 'flowtype';
-import DeviceHeader from 'components/DeviceHeader';
 import { getStatus, getVersion } from 'utils/device';
 
+import DeviceHeader from './components/DeviceHeader';
+
 // import DeviceList from './components/DeviceList';
 import type { Props } from '../common';
 
@@ -17,66 +18,24 @@ const Wrapper = styled.div``;
 export const DeviceSelect = (props: Props) => {
     const { devices } = props;
     const { transport } = props.connect;
-
+    const { selectedDevice } = props.wallet;
-    const selected: ?TrezorDevice = props.wallet.selectedDevice;
-    if (!selected) return null;
-
-    let deviceStatus: string = 'Connected';
-    let css: string = 'device-select device';
-    if (props.deviceDropdownOpened) css += ' opened';
-
-    if (!selected.connected) {
-        css += ' disconnected';
-        deviceStatus = 'Disconnected';
-    } else if (!selected.available) {
-        css += ' unavailable';
-        deviceStatus = 'Unavailable';
-    } else if (selected.type === 'acquired') {
-        if (selected.status === 'occupied') {
-            css += ' used-elsewhere';
-            deviceStatus = 'Used in other window';
-        } else if (selected.status === 'used') {
-            css += ' reload-features';
-        }
-    } else if (selected.type === 'unacquired') {
-        css += ' unacquired';
-        deviceStatus = 'Used in other window';
-    }
-
-    if (selected.features && selected.features.major_version > 1) {
-        css += ' trezor-t';
-    }
-
-    const deviceCount = devices.length;
     const webusb: boolean = !!((transport && transport.version.indexOf('webusb') >= 0));
-    const disabled: boolean = (devices.length < 1 && !webusb) || (devices.length === 1 && !selected.features && !webusb);
+    const disabled: boolean = (devices.length < 1 && !webusb) || (devices.length === 1 && !selectedDevice.features && !webusb);
-    if (disabled) {
-        css += ' disabled';
-    }
 
     const handleOpen = () => {
         props.toggleDeviceDropdown(!props.deviceDropdownOpened);
     };
 
     return (
-        <div>
         <DeviceHeader
             handleOpen={handleOpen}
-                label={selected.instanceLabel}
+            disabled={disabled}
-                status={getStatus(selected)}
+            label={selectedDevice.instanceLabel}
+            status={getStatus(selectedDevice)}
             deviceCount={devices.length}
             isOpen={props.deviceDropdownOpened}
-                trezorModel={getVersion(selected)}
+            trezorModel={getVersion(selectedDevice)}
         />
-            <div className={css} onClick={!disabled ? handleOpen : null}>
-                <div className="label-container">
-                    <span className="label">{selected.instanceLabel}</span>
-                    <span className="status">{deviceStatus}</span>
-                </div>
-                {deviceCount > 1 ? <div className="counter">{deviceCount}</div> : null}
-                <div className="arrow" />
-            </div>
-        </div>
     );
 };
 

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

@@ -144,12 +144,13 @@ class LeftNavigation extends Component {
     }
 
     render() {
+        const { selectedDevice } = this.props.wallet;
         return (
             <StickyContainer
                 location={this.props.location.pathname}
                 deviceSelection={this.props.deviceDropdownOpened}
             >
-                <DeviceSelect {...this.props} />
+                {selectedDevice && <DeviceSelect {...this.props} />}
                 <MenuWrapper>
                     {this.state.shouldRenderDeviceSelection && <DeviceDropdown {...this.props} />}
                     {this.shouldRenderAccounts() && this.getMenuTransition(<AccountMenu {...this.props} />)}