fix device header ux

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};
 `;
 

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<Props> {
         return (
             <Wrapper>
                 {this.showMenuItems() && <MenuItems device={selectedDevice} {...this.props} />}
-                {this.showDivider() && <AsideDivider textLeft="Other devices" />}
+                {this.showDivider() && <StyledDivider hasBorder textLeft="Other devices" />}
                 <DeviceList
                     devices={devices}
                     selectedDevice={selectedDevice}
                     onSelectDevice={onSelectDevice}
                     forgetDevice={forgetDevice}
                 />
-                <ButtonWrapper>
-                    {deviceUtils.isWebUSB(transport) && (
+                {deviceUtils.isWebUSB(transport) && (
+                    <ButtonWrapper>
                         <StyledButton isWebUsb>Check for devices</StyledButton>
-                    )}
-                </ButtonWrapper>
+                    </ButtonWrapper>
+                )}
             </Wrapper>
         );
     }

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,
 }) => (
     <Wrapper
         hasBorder={hasBorder}
+        className={className}
     >
         <p>{textLeft}</p>
         <p>{textRight}</p>
@@ -30,6 +31,7 @@ const Divider = ({
 );
 
 Divider.propTypes = {
+    className: PropTypes.string,
     textLeft: PropTypes.string,
     textRight: PropTypes.string,
     hasBorder: PropTypes.bool,

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

@@ -132,14 +132,17 @@ class LeftNavigation extends React.PureComponent<Props, State> {
         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<Props, State> {
             && location
             && location.state
             && location.state.network
-            && !this.state.shouldRenderDeviceSelection
             && this.state.animationType === 'slide-left';
     }
 
@@ -162,7 +164,7 @@ class LeftNavigation extends React.PureComponent<Props, State> {
     }
 
     shouldRenderCoins() {
-        return !this.state.shouldRenderDeviceSelection && this.state.animationType !== 'slide-left';
+        return this.state.animationType !== 'slide-left';
     }
 
     render() {