From 3fb9c65be84b1f21a30e01833beae97eb4cca44a Mon Sep 17 00:00:00 2001
From: Vladimir Volek <volek.vladimir@gmail.com>
Date: Thu, 16 Aug 2018 22:55:42 +0200
Subject: [PATCH] Styled help

---
 src/js/config/icons.js                        |  1 +
 src/js/reducers/SelectedAccountReducer.js     |  1 -
 .../Wallet/components/LeftNavigation/index.js | 54 +++++++++++++++----
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/js/config/icons.js b/src/js/config/icons.js
index 1a4cd725..88dbab47 100644
--- a/src/js/config/icons.js
+++ b/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',
 };
diff --git a/src/js/reducers/SelectedAccountReducer.js b/src/js/reducers/SelectedAccountReducer.js
index d2a0cbea..a83b2dca 100644
--- a/src/js/reducers/SelectedAccountReducer.js
+++ b/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;
     }
diff --git a/src/js/views/Wallet/components/LeftNavigation/index.js b/src/js/views/Wallet/components/LeftNavigation/index.js
index 46578383..6d84e879 100644
--- a/src/js/views/Wallet/components/LeftNavigation/index.js
+++ b/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 
-            && this.props.location 
-            && this.props.location.state 
-            && this.props.location.state.network 
-            && !this.state.shouldRenderDeviceSelection 
+        return selectedDevice
+            && this.props.location
+            && this.props.location.state
+            && this.props.location.state.network
+            && !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">
-                        <a href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Need help?</a>
+                    <Help>
+                        <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>