Styled help

src/js/config/icons.js

@@ -1,4 +1,5 @@
 export default {
+    CHAT: 'M580.992 256h-137.984c-103.296 0-187.008 85.952-187.008 192 0 96.608 69.536 176.32 160 189.792v130.208l128-128h36.992c103.296 0 187.008-85.952 187.008-192s-83.712-192-187.008-192z',
     SKIP: 'M512 256c-141.376 0-256 114.656-256 256 0 141.408 114.624 256 256 256s256-114.592 256-256c0-141.344-114.624-256-256-256zM529.056 631.456v-68.256c-102.4-34.144-136.544 0-170.656 68.256 0-170.656 102.4-204.8 170.656-204.8v-68.256l136.544 136.544-136.544 136.512z',
     WARNING: 'M795.616 735.008l-264.896-465.44c-10.272-18.080-27.168-18.080-37.504 0l-264.864 465.44c-10.272 18.176-1.696 32.992 19.040 32.992h529.184c20.8 0 29.376-14.816 19.040-32.992zM549.76 673.12c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-37.952c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v37.952zM549.76 559.264c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-113.856c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v113.856z',
 };

src/js/reducers/SelectedAccountReducer.js

@@ -38,7 +38,6 @@ export default (state: State = initialState, action: Action): State => {
     switch (action.type) {
         case ACCOUNT.UPDATE_SELECTED_ACCOUNT:
             return action.payload;
-
         default:
             return state;
     }

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

@@ -1,10 +1,13 @@
-/* @flow */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import colors from 'config/colors';
+import Icon from 'components/Icon';
+import icons from 'config/icons';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import styled from 'styled-components';
-import { AccountMenu, CoinMenu, DeviceSelect, DeviceDropdown } from './NavigationMenu';
+import {
+    AccountMenu, CoinMenu, DeviceSelect, DeviceDropdown,
+} from './NavigationMenu';
 import StickyContainer from './StickyContainer';
 
 const TransitionGroupWrapper = styled(TransitionGroup)`
@@ -26,7 +29,30 @@ const StickyBottom = styled.div`
 
 const MenuWrapper = styled.div``;
 
-const Help = styled.div``;
+const Help = styled.div`
+    text-align: center;
+    width: 319px;
+    padding: 8px 0px;
+    border-top: 1px solid ${colors.DIVIDER};
+
+    &.fixed {
+        position: fixed;
+        bottom: 0px;
+    }
+`;
+
+const A = styled.a`
+    color: ${colors.TEXT_SECONDARY};
+    font-size: 12px;
+    display: inline-block;
+    padding: 8px;
+    height: auto;
+
+    &:hover {
+        background: transparent;
+        color: ${colors.TEXT_PRIMARY};
+    }
+`;
 
 class LeftNavigation extends Component {
     constructor(props) {
@@ -41,7 +67,7 @@ class LeftNavigation extends Component {
         this.setState({
             animationType: null,
             shouldRenderDeviceSelection: false,
-        })
+        });
     }
 
     componentWillReceiveProps() {
@@ -89,11 +115,11 @@ class LeftNavigation extends Component {
 
     shouldRenderAccounts() {
         const { selectedDevice } = this.props.wallet;
-        return selectedDevice 
+        return selectedDevice
-            && this.props.location 
+            && this.props.location
-            && this.props.location.state 
+            && this.props.location.state
-            && this.props.location.state.network 
+            && this.props.location.state.network
-            && !this.state.shouldRenderDeviceSelection 
+            && !this.state.shouldRenderDeviceSelection
             && this.state.animationType === 'slide-left';
     }
 
@@ -114,8 +140,14 @@ class LeftNavigation extends Component {
                     {this.shouldRenderCoins() && <CoinMenu {...this.props} />}
                 </MenuWrapper>
                 <StickyBottom>
-                    <Help className="help">
+                    <Help>
-                        <a href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Need help?</a>
+                        <A
+                            href="https://trezor.io/support/"
+                            target="_blank"
+                            rel="noreferrer noopener"
+                        >
+                            <StyledIcon size={25} icon={icons.CHAT} color={colors.TEXT_SECONDARY} />Need help?
+                        </A>
                     </Help>
                 </StickyBottom>
             </StickyContainer>