diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js index 53fc615b..9099248d 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js @@ -9,7 +9,6 @@ import { FONT_SIZE } from 'config/variables'; const Wrapper = styled.div` padding: 0px 24px 8px 19px; - border-bottom: 1px solid ${colors.DIVIDER}; background: ${colors.WHITE}; `; diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js index 9cdc96be..9c251a71 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js @@ -3,6 +3,10 @@ import React, { PureComponent } from 'react'; import styled from 'styled-components'; import TrezorConnect from 'trezor-connect'; import type { TrezorDevice } from 'flowtype'; + +import COLORS from 'config/colors'; +import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; + import Button from 'components/Button'; import * as deviceUtils from 'utils/device'; import MenuItems from './components/MenuItems'; @@ -10,11 +14,16 @@ import DeviceList from './components/DeviceList'; import type { Props } from '../common'; -import AsideDivider from '../Divider'; +import Divider from '../Divider'; + +const Wrapper = styled.div` + border-bottom: 1px solid #E3E3E3; + background: white; + box-shadow: 0 3px 8px rgba(0,0,0,0.06); +`; -const Wrapper = styled.div``; const ButtonWrapper = styled.div` - margin-top: 10px; + margin: 10px 0; padding: 0 10px; display: flex; `; @@ -22,6 +31,14 @@ const StyledButton = styled(Button)` flex: 1; `; +const StyledDivider = styled(Divider)` + background: #fff; + color: ${COLORS.TEXT_PRIMARY}; + font-weight: ${FONT_WEIGHT.MEDIUM}; + font-size: ${FONT_SIZE.BASE}; + border: none; +`; + type DeviceMenuItem = { type: string; label: string; @@ -104,18 +121,18 @@ class DeviceMenu extends PureComponent { return ( {this.showMenuItems() && } - {this.showDivider() && } + {this.showDivider() && } - - {deviceUtils.isWebUSB(transport) && ( + {deviceUtils.isWebUSB(transport) && ( + Check for devices - )} - + + )} ); } diff --git a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js index 8f29337e..0a46446f 100644 --- a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js +++ b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js @@ -19,10 +19,11 @@ const Wrapper = styled.div` `; const Divider = ({ - textLeft, textRight, hasBorder = false, + textLeft, textRight, hasBorder = false, className, }) => (

{textLeft}

{textRight}

@@ -30,6 +31,7 @@ const Divider = ({ ); Divider.propTypes = { + className: PropTypes.string, textLeft: PropTypes.string, textRight: PropTypes.string, hasBorder: PropTypes.bool, diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index cca5eab1..5b4801ce 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -132,14 +132,17 @@ class LeftNavigation extends React.PureComponent { const deviceReady = selectedDevice && selectedDevice.features && selectedDevice.mode === 'normal'; if (dropdownOpened) { this.setState({ shouldRenderDeviceSelection: true }); - } else if (hasNetwork) { + } else { + this.setState({ shouldRenderDeviceSelection: false }); + } + if (hasNetwork) { this.setState({ - shouldRenderDeviceSelection: false, + // shouldRenderDeviceSelection: false, animationType: 'slide-left', }); } else { this.setState({ - shouldRenderDeviceSelection: false, + // shouldRenderDeviceSelection: false, animationType: deviceReady ? 'slide-right' : null, }); } @@ -152,7 +155,6 @@ class LeftNavigation extends React.PureComponent { && location && location.state && location.state.network - && !this.state.shouldRenderDeviceSelection && this.state.animationType === 'slide-left'; } @@ -162,7 +164,7 @@ class LeftNavigation extends React.PureComponent { } shouldRenderCoins() { - return !this.state.shouldRenderDeviceSelection && this.state.animationType !== 'slide-left'; + return this.state.animationType !== 'slide-left'; } render() {