Finalized status dot

src/js/components/DeviceHeader/index.js

@@ -16,16 +16,6 @@ const Wrapper = styled.div`
     align-items: center;
 `;
 
-const ImageWrapper = styled.div`
-`;
-
-const Dot = styled.div`
-    border: 2px solid @color_white;
-    border-radius: 50%;
-    position: absolute;
-    background: red;
-`;
-
 const ClickWrapper = styled.div`
     width: 100%;
     display: flex;
@@ -91,13 +81,13 @@ const DeviceHeader = ({
 }) => (
     <Wrapper>
         <ClickWrapper onClick={!disabled ? handleOpen : null}>
-            <ImageWrapper>
+            <TrezorImage
-                <Dot color={getStatusColor(status)} />
+                status={status}
-                <TrezorImage model={trezorModel} />
+                model={trezorModel}
-            </ImageWrapper>
+            />
             <LabelWrapper>
-                <Name>{getStatusName(status)}</Name>
+                <Name>{label}</Name>
-                <Status>{status}</Status>
+                <Status>{getStatusName(status)}</Status>
             </LabelWrapper>
             <IconWrapper>
                 {deviceCount > 1 ? <Counter>{deviceCount}</Counter> : null}

src/js/components/TrezorImage/index.js

@@ -1,17 +1,32 @@
 import React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
+import colors from 'config/colors';
+import { getStatusColor } from 'utils/device';
 
 const Wrapper = styled.div`
     width: 20px;
+    position: relative;
+`;
+
+const Dot = styled.div`
+    border: 2px solid ${colors.WHITE};
+    border-radius: 50%;
+    position: absolute;
+    background: ${props => props.color};
+    top: -5px;
+    right: 0px;
+    width: 10px;
+    height: 10px;
 `;
 
 const Img = styled.img`
     width: ${props => (props.model === 'T' ? '17px' : '13px')};
 `;
 
-const TrezorImage = ({ model }) => (
+const TrezorImage = ({ model, status }) => (
     <Wrapper>
+        {status && <Dot color={getStatusColor(status)} />}
         <Img
             model={model}
             src={model === 'T' ? './images/trezor-T.png' : './images/trezor-1.png'}
@@ -21,6 +36,7 @@ const TrezorImage = ({ model }) => (
 
 TrezorImage.propTypes = {
     model: PropTypes.string,
+    status: PropTypes.string,
 };
 
 export default TrezorImage;

src/js/utils/device.js

@@ -1,22 +1,23 @@
 import colors from 'js/config/colors';
 
-const getStatus = (device) => {
+const getDeviceSelectStatus = (device) => {
-    let deviceStatus = '';
+    let status = 'connected';
-    if (device.type === 'unacquired' || (device.features && device.status === 'occupied')) {
+    if (!device.connected) {
-        deviceStatus = 'used-in-other-window';
+        status = 'disconnected';
-    } else if (device.type === 'unreadable') {
-        deviceStatus = 'connected';
-    } else if (!device.connected) {
-        deviceStatus = 'disconnected';
     } else if (!device.available) {
-        deviceStatus = 'unavailable';
+        status = 'unavailable';
+    } else if (device.type === 'acquired') {
+        if (device.status === 'occupied') {
+            status = 'used-in-other-window';
+        }
+    } else if (device.type === 'unacquired') {
+        status = 'unacquired';
     }
 
-    return deviceStatus;
+    return status;
 };
 
-const getStatusName = (device) => {
+const getStatusName = (deviceStatus) => {
-    const deviceStatus = getStatus(device);
     const unknownStatusName = 'Status unknown';
     let statusName;
     switch (deviceStatus) {
@@ -41,7 +42,7 @@ const getStatusName = (device) => {
 
 const isWebUSB = transport => !!((transport && transport.version.indexOf('webusb') >= 0));
 
-const isDisabled = (devices, transport) => (devices.length < 1 && !isWebUSB(transport)) || (devices.length === 1 && !selected.features && !webusb);
+const isDisabled = (selectedDevice, devices, transport) => (devices.length < 1 && !isWebUSB(transport)) || (devices.length === 1 && !selectedDevice.features && !isWebUSB(transport));
 
 const getVersion = (device) => {
     let version = null;
@@ -53,8 +54,7 @@ const getVersion = (device) => {
     return version;
 };
 
-const getStatusColor = (device) => {
+const getStatusColor = (deviceStatus) => {
-    const deviceStatus = getStatus(device);
     let color = null;
 
     switch (deviceStatus) {
@@ -74,10 +74,13 @@ const getStatusColor = (device) => {
             color = colors.ERROR_PRIMARY;
     }
 
+    console.log('color', color);
+
     return color;
 };
 
 export {
+    getDeviceSelectStatus,
     isDisabled,
     getStatusName,
     getVersion,

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

@@ -4,7 +4,7 @@ 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 { getDeviceSelectStatus, getVersion } from 'utils/device';
 
 // import DeviceList from './components/DeviceList';
 import type { Props } from '../common';
@@ -63,7 +63,7 @@ export const DeviceSelect = (props: Props) => {
             <DeviceHeader
                 handleOpen={handleOpen}
                 label={selected.instanceLabel}
-                status={getStatus(selected)}
+                status={getDeviceSelectStatus(selected)}
                 deviceCount={deviceCount}
                 isOpen={props.deviceDropdownOpened}
                 trezorModel={getVersion(selected)}