Removed dot from image

src/js/components/DeviceHeader/index.js

@@ -19,7 +19,7 @@ const Wrapper = styled.div`
 const ClickWrapper = styled.div`
     width: 100%;
     display: flex;
-    padding-left: 22px;
+    padding-left: 25px;
     height: 100%;
     align-items: center;
     cursor: pointer;
@@ -66,6 +66,22 @@ const IconWrapper = styled.div`
     display: flex;
 `;
 
+const ImageWrapper = styled.div`
+    position: relative;
+`;
+
+const Dot = styled.div`
+    border: 2px solid ${colors.WHITE};
+    border-radius: 50%;
+    position: absolute;
+    z-index: 10;
+    background: ${props => props.color};
+    top: -4px;
+    right: -3px;
+    width: 10px;
+    height: 10px;
+`;
+
 const StyledIcon = styled(Icon)`
     transform: rotate(180deg);
 `;
@@ -81,10 +97,13 @@ const DeviceHeader = ({
 }) => (
     <Wrapper>
         <ClickWrapper onClick={!disabled ? handleOpen : null}>
+            <ImageWrapper>
+                <Dot color={getStatusColor(status)} />
                 <TrezorImage
                     status={status}
                     model={trezorModel}
                 />
+            </ImageWrapper>
             <LabelWrapper>
                 <Name>{label}</Name>
                 <Status>{getStatusName(status)}</Status>

src/js/components/TrezorImage/index.js

@@ -1,36 +1,16 @@
 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`
+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, status }) => (
+const TrezorImage = ({ model }) => (
     <Wrapper>
-        {status && <Dot color={getStatusColor(status)} />}
+        <Img model={model} src={model === 'T' ? './images/trezor-T.png' : './images/trezor-1.png'} />
-        <Img
-            model={model}
-            src={model === 'T' ? './images/trezor-T.png' : './images/trezor-1.png'}
-        />
     </Wrapper>
 );
 

src/js/utils/device.js

@@ -1,6 +1,6 @@
 import colors from 'js/config/colors';
 
-const getDeviceSelectStatus = (device) => {
+const getStatus = (device) => {
     let status = 'connected';
     if (!device.connected) {
         status = 'disconnected';
@@ -18,7 +18,6 @@ const getDeviceSelectStatus = (device) => {
 };
 
 const getStatusName = (deviceStatus) => {
-    const unknownStatusName = 'Status unknown';
     let statusName;
     switch (deviceStatus) {
         case 'used-in-other-window':
@@ -34,9 +33,8 @@ const getStatusName = (deviceStatus) => {
             statusName = 'Unavailable';
             break;
         default:
-            statusName = unknownStatusName;
+            statusName = 'Status unknown';
     }
-
     return statusName;
 };
 
@@ -45,7 +43,7 @@ const isWebUSB = transport => !!((transport && transport.version.indexOf('webusb
 const isDisabled = (selectedDevice, devices, transport) => (devices.length < 1 && !isWebUSB(transport)) || (devices.length === 1 && !selectedDevice.features && !isWebUSB(transport));
 
 const getVersion = (device) => {
-    let version = null;
+    let version;
     if (device.features && device.features.major_version > 1) {
         version = 'T';
     } else {
@@ -55,8 +53,7 @@ const getVersion = (device) => {
 };
 
 const getStatusColor = (deviceStatus) => {
-    let color = null;
+    let color;
-
     switch (deviceStatus) {
         case 'used-in-other-window':
             color = colors.WARNING_PRIMARY;
@@ -71,16 +68,13 @@ const getStatusColor = (deviceStatus) => {
             color = colors.ERROR_PRIMARY;
             break;
         default:
-            color = colors.ERROR_PRIMARY;
+            color = colors.TEXT_PRIMARY;
     }
-
-    console.log('color', color);
-
     return color;
 };
 
 export {
-    getDeviceSelectStatus,
+    getStatus,
     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 { getDeviceSelectStatus, getVersion } from 'utils/device';
+import { getStatus, 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={getDeviceSelectStatus(selected)}
+                status={getStatus(selected)}
                 deviceCount={deviceCount}
                 isOpen={props.deviceDropdownOpened}
                 trezorModel={getVersion(selected)}