merge master

src/components/Button/index.js

@@ -37,6 +37,11 @@ const Wrapper = styled.button`
         background: ${colors.GREEN_TERTIARY};
     }
 
+    &:focus {
+        border-color: ${colors.INPUT_FOCUSED_BORDER};
+        box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW};
+    }
+
     ${props => props.isDisabled && css`
         pointer-events: none;
         color: ${colors.TEXT_SECONDARY};
@@ -48,6 +53,10 @@ const Wrapper = styled.button`
         color: ${colors.TEXT_SECONDARY};
         border: 1px solid ${colors.DIVIDER};
 
+        &:focus {
+            border-color: ${colors.INPUT_FOCUSED_BORDER};
+        }
+
         &:hover {
             color: ${colors.TEXT_PRIMARY};
             background: ${colors.DIVIDER};
@@ -64,6 +73,11 @@ const Wrapper = styled.button`
         border: 0px;
         color: ${colors.TEXT_SECONDARY};
 
+        &:focus {
+            color: ${colors.TEXT_PRIMARY};
+            box-shadow: none;
+        }
+
         &:hover,
         &:active {
             color: ${colors.TEXT_PRIMARY};

src/components/DeviceHeader/index.js

@@ -15,6 +15,7 @@ const Wrapper = styled.div`
     position: relative;
     height: 70px;
     width: 320px;
+    z-index: 10;
     display: flex;
     align-items: center;
     background: ${props => (props.disabled ? colors.GRAY_LIGHT : 'transparent')};

src/components/Select/index.js

@@ -11,17 +11,16 @@ const styles = isSearchable => ({
         width: '100%',
         color: colors.TEXT_SECONDARY,
     }),
-    control: (base, { isDisabled }) => ({
+    control: (base, { isDisabled, isFocused }) => ({
         ...base,
         minHeight: 'initial',
         height: '40px',
         borderRadius: '2px',
-        borderColor: colors.DIVIDER,
+        borderColor: isFocused ? colors.INPUT_FOCUSED_BORDER : colors.DIVIDER,
-        boxShadow: 'none',
+        boxShadow: isFocused ? `0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}` : 'none',
         background: isDisabled ? colors.LANDING : colors.WHITE,
         '&:hover': {
             cursor: isSearchable ? 'text' : 'pointer',
-            borderColor: colors.DIVIDER,
         },
     }),
     indicatorSeparator: () => ({

src/components/Textarea/index.js

@@ -67,6 +67,11 @@ const StyledTextarea = styled(Textarea)`
         color: ${colors.TEXT_SECONDARY};
     }
 
+    &:focus {
+        border-color: ${colors.INPUT_FOCUSED_BORDER};
+        box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW};
+    }
+
     &:disabled {
         pointer-events: none;
         background: ${colors.GRAY_LIGHT};

src/components/inputs/Input/index.js

@@ -59,6 +59,11 @@ const StyledInput = styled.input`
     background-color: ${colors.WHITE};
     transition: ${TRANSITION.HOVER};
 
+    &:focus {
+        border-color: ${colors.INPUT_FOCUSED_BORDER};
+        box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW};
+    }
+
     &:disabled {
         pointer-events: none;
         background: ${colors.GRAY_LIGHT};

src/config/animations.js

@@ -71,4 +71,13 @@ export const FADE_IN = keyframes`
     100% {
         opacity: 1;
     }
+`;
+
+export const SLIDE_DOWN = keyframes`
+    0% {
+        transform: translateY(-100%);
+    }
+    100% {
+        transform: translateY(0%);
+    }
 `;

src/config/colors.js

@@ -34,4 +34,7 @@ export default {
 
     LABEL_COLOR: '#A9A9A9',
     TOOLTIP_BACKGROUND: '#333333',
+
+    INPUT_FOCUSED_BORDER: '#A9A9A9',
+    INPUT_FOCUSED_SHADOW: '#d6d7d7',
 };

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

@@ -8,18 +8,21 @@ import colors from 'config/colors';
 import { FONT_SIZE } from 'config/variables';
 
 const Wrapper = styled.div`
-    padding: 0px 24px 8px 19px;
-    box-shadow: 0 3px 8px rgba(0,0,0,0.06);
     background: ${colors.WHITE};
+    box-shadow: 0 3px 8px rgba(0,0,0,0.06);
 `;
 
 const Item = styled.div`
-    padding: 4px 2px;
+    padding: 6px 24px;
     display: flex;
     align-items: center;
     font-size: ${FONT_SIZE.BASE};
     cursor: pointer;
-    color: ${colors.TEXT_SECONDARY};    
+    color: ${colors.TEXT_SECONDARY};
+
+    &:hover {
+        background: ${colors.GRAY_LIGHT};
+    }
 `;
 
 const Label = styled.div`

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

@@ -3,6 +3,11 @@ 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 { SLIDE_DOWN } from 'config/animations';
+
 import Button from 'components/Button';
 import * as deviceUtils from 'utils/device';
 import MenuItems from './components/MenuItems';
@@ -12,9 +17,18 @@ import type { Props } from '../common';
 
 import Divider from '../Divider';
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
+    position: absolute;
+    width: 100%;
+    padding-bottom: 8px; 
+    border-bottom: 1px solid #E3E3E3;
+    background: white;
+    box-shadow: 0 3px 8px rgba(0,0,0,0.06);
+    animation: ${SLIDE_DOWN} 0.25s cubic-bezier(0.17, 0.04, 0.03, 0.94) forwards;
+`;
+
 const ButtonWrapper = styled.div`
-    margin-top: 10px;
+    margin: 10px 0;
     padding: 0 10px;
     display: flex;
 `;
@@ -22,6 +36,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;
@@ -32,6 +54,7 @@ class DeviceMenu extends PureComponent<Props> {
         super(props);
         this.mouseDownHandler = this.mouseDownHandler.bind(this);
         this.blurHandler = this.blurHandler.bind(this);
+        this.myRef = React.createRef();
     }
 
     componentDidMount(): void {
@@ -63,6 +86,10 @@ class DeviceMenu extends PureComponent<Props> {
         }
     }
 
+    getMenuHeight(): number {
+        return this.myRef.current ? this.myRef.current.getBoundingClientRect().height : 0;
+    }
+
     blurHandler(): void {
         this.props.toggleDeviceDropdown(false);
     }
@@ -96,26 +123,28 @@ class DeviceMenu extends PureComponent<Props> {
         return deviceUtils.isDeviceAccessible(this.props.wallet.selectedDevice);
     }
 
+    myRef: { current: ?HTMLDivElement }
+
     render() {
         const { devices, onSelectDevice, forgetDevice } = this.props;
         const { transport } = this.props.connect;
         const { selectedDevice } = this.props.wallet;
 
         return (
-            <Wrapper>
+            <Wrapper ref={this.myRef}>
                 {this.showMenuItems() && <MenuItems device={selectedDevice} {...this.props} />}
-                {this.showDivider() && <Divider hasBorder 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

@@ -23,10 +23,11 @@ const TextLeft = styled.p`
 `;
 
 const Divider = ({
-    textLeft, textRight, hasBorder = false,
+    textLeft, textRight, hasBorder = false, className,
 }) => (
     <Wrapper
         hasBorder={hasBorder}
+        className={className}
     >
         <TextLeft>{textLeft}</TextLeft>
         <p>{textRight}</p>
@@ -34,6 +35,7 @@ const Divider = ({
 );
 
 Divider.propTypes = {
+    className: PropTypes.string,
     textLeft: PropTypes.string,
     textRight: PropTypes.string,
     hasBorder: PropTypes.bool,

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

@@ -57,6 +57,7 @@ const Footer = styled.div.attrs(props => ({
 
 const Body = styled.div`
     width: 320px;
+    min-height: ${props => (props.minHeight ? `${props.minHeight}px` : '0px')};
 `;
 
 const Help = styled.div`
@@ -110,42 +111,48 @@ const TransitionMenu = (props: TransitionMenuProps): React$Element<TransitionGro
 
 type State = {
     animationType: ?string;
-    shouldRenderDeviceSelection: boolean;
     clicked: boolean;
+    bodyMinHeight: number;
 }
 
 class LeftNavigation extends React.PureComponent<Props, State> {
     constructor(props: Props) {
         super(props);
+        this.deviceMenuRef = React.createRef();
         const { location } = this.props.router;
         const hasNetwork = location && location.state && location.state.network;
         this.state = {
             animationType: hasNetwork ? 'slide-left' : null,
-            shouldRenderDeviceSelection: false,
             clicked: false,
+            bodyMinHeight: 0,
         };
     }
 
+    componentDidMount() {
+        this.recalculateBodyMinHeight();
+    }
+
     componentWillReceiveProps(nextProps: Props) {
-        const { dropdownOpened, selectedDevice } = nextProps.wallet;
+        const { selectedDevice } = nextProps.wallet;
         const { location } = nextProps.router;
         const hasNetwork = location && location.state.network;
         const deviceReady = selectedDevice && selectedDevice.features && selectedDevice.mode === 'normal';
-        if (dropdownOpened) {
+
-            this.setState({ shouldRenderDeviceSelection: true });
+        if (hasNetwork) {
-        } else if (hasNetwork) {
             this.setState({
-                shouldRenderDeviceSelection: false,
                 animationType: 'slide-left',
             });
         } else {
             this.setState({
-                shouldRenderDeviceSelection: false,
                 animationType: deviceReady ? 'slide-right' : null,
             });
         }
     }
 
+    componentDidUpdate() {
+        this.recalculateBodyMinHeight();
+    }
+
     shouldRenderAccounts() {
         const { selectedDevice } = this.props.wallet;
         const { location } = this.props.router;
@@ -153,7 +160,6 @@ class LeftNavigation extends React.PureComponent<Props, State> {
             && location
             && location.state
             && location.state.network
-            && !this.state.shouldRenderDeviceSelection
             && this.state.animationType === 'slide-left';
     }
 
@@ -163,9 +169,19 @@ class LeftNavigation extends React.PureComponent<Props, State> {
     }
 
     shouldRenderCoins() {
-        return !this.state.shouldRenderDeviceSelection && this.state.animationType !== 'slide-left';
+        return this.state.animationType !== 'slide-left';
     }
 
+    recalculateBodyMinHeight() {
+        if (this.deviceMenuRef.current) {
+            this.setState({
+                bodyMinHeight: this.deviceMenuRef.current.getMenuHeight(),
+            });
+        }
+    }
+
+    deviceMenuRef: { current: any };
+
     render() {
         const { props } = this;
         let menu;
@@ -183,7 +199,7 @@ class LeftNavigation extends React.PureComponent<Props, State> {
             );
         }
 
-        const { selectedDevice } = props.wallet;
+        const { selectedDevice, dropdownOpened } = props.wallet;
         const isDeviceAccessible = deviceUtils.isDeviceAccessible(selectedDevice);
         return (
             <StickyContainer
@@ -218,8 +234,8 @@ class LeftNavigation extends React.PureComponent<Props, State> {
                     )}
                     {...this.props}
                 />
-                <Body>
+                <Body minHeight={this.state.bodyMinHeight}>
-                    {this.state.shouldRenderDeviceSelection && <DeviceMenu {...this.props} />}
+                    {dropdownOpened && <DeviceMenu ref={this.deviceMenuRef} {...this.props} />}
                     {isDeviceAccessible && menu}
                 </Body>
                 <Footer key="sticky-footer">