diff --git a/src/js/components/DeviceHeader/index.js b/src/js/components/DeviceHeader/index.js index ed55a8b9..3d7757d8 100644 --- a/src/js/components/DeviceHeader/index.js +++ b/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 = ({ }) => ( - + + + + {label} {getStatusName(status)} diff --git a/src/js/components/TrezorImage/index.js b/src/js/components/TrezorImage/index.js index f4fcfd02..ed83f81a 100644 --- a/src/js/components/TrezorImage/index.js +++ b/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` - 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 Wrapper = styled.div``; const Img = styled.img` width: ${props => (props.model === 'T' ? '17px' : '13px')}; `; -const TrezorImage = ({ model, status }) => ( +const TrezorImage = ({ model }) => ( - {status && } - + ); diff --git a/src/js/utils/device.js b/src/js/utils/device.js index 04cb9a43..9dfaa05a 100644 --- a/src/js/utils/device.js +++ b/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, diff --git a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index 6b4c6527..4fd6045d 100644 --- a/src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/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) => {