From 5291ce32b16430e5475bdeccf393bedf9b0033f8 Mon Sep 17 00:00:00 2001
From: Szymon Lesisz <sz.lesisz@gmail.com>
Date: Tue, 9 Oct 2018 10:12:10 +0200
Subject: [PATCH] add tooltip and texts to wallettype modal

---
 .../device/{Type => WalletType}/index.js      | 50 +++++++++++++++++--
 src/components/modals/index.js                | 12 ++---
 src/support/styles/Tooltip.js                 |  2 +-
 3 files changed, 52 insertions(+), 12 deletions(-)
 rename src/components/modals/device/{Type => WalletType}/index.js (68%)

diff --git a/src/components/modals/device/Type/index.js b/src/components/modals/device/WalletType/index.js
similarity index 68%
rename from src/components/modals/device/Type/index.js
rename to src/components/modals/device/WalletType/index.js
index 43114f61..260196c3 100644
--- a/src/components/modals/device/Type/index.js
+++ b/src/components/modals/device/WalletType/index.js
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 import { H3 } from 'components/Heading';
 import P from 'components/Paragraph';
 import Button from 'components/Button';
+import Tooltip from 'components/Tooltip';
 import Icon from 'components/Icon';
 import Link from 'components/Link';
 import colors from 'config/colors';
@@ -28,12 +29,39 @@ const StyledButton = styled(Button)`
     margin: 0 0 10px 0;
 `;
 
+const StyledTooltip = styled(Tooltip)`
+    position: absolute;
+    right: 0px;
+    top: 1px;
+`;
+
+const StyledIcon = styled(Icon)`
+    position: relative;
+    top: -1px;
+    &:hover {
+        cursor: pointer;
+    }
+`;
+
 const Row = styled.div`
     display: flex;
     flex-direction: column;
     padding: 10px 0;
 `;
 
+const Span = styled.div`
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    justify-content: center;
+`;
+
+const Divider = styled.div`
+    margin: 20px 0;
+    border-top: 1px solid ${colors.DIVIDER};
+`;
+
 class WalletType extends Component<Props> {
     constructor(props: Props) {
         super(props);
@@ -77,17 +105,29 @@ class WalletType extends Component<Props> {
                 )}
                 <H3>RequestWalletType for { device.instanceLabel }?</H3>
                 <Row>
-                    <span>
+                    <Span>
                         <WalletTypeIcon type="standard" size={24} color={colors.TEXT_SECONDARY} />
                         Standard Wallet
-                    </span>
+                    </Span>
                     <P isSmaller>Continue to access your standard wallet.</P>
                     <StyledButton onClick={() => this.changeType(false)}>Go to your standard wallet</StyledButton>
-                    <Icon size={20} color={colors.TEXT_SECONDARY} icon={icons.HELP} />
-                    <span>
+                    <Divider />
+                    <Span>
                         <WalletTypeIcon type="hidden" size={24} color={colors.TEXT_SECONDARY} />
                         Hidden Wallet
-                    </span>
+                        <StyledTooltip
+                            maxWidth={285}
+                            placement="top"
+                            content="Passphrase is an optional feature of the Trezor device that is recommended for advanced users only. It is a word or a sentence of your choice. Its main purpose is to access a hidden wallet."
+                            readMoreLink="https://wiki.trezor.io/Passphrase"
+                        >
+                            <StyledIcon
+                                icon={icons.HELP}
+                                color={colors.TEXT_SECONDARY}
+                                size={24}
+                            />
+                        </StyledTooltip>
+                    </Span>
                     <P isSmaller>You will be asked to enter your passphrase to unlock your hidden wallet.</P>
                     <StyledButton isWhite onClick={() => this.changeType(true)}>Go to your hidden wallet</StyledButton>
                 </Row>
diff --git a/src/components/modals/index.js b/src/components/modals/index.js
index c78f7b3f..312613eb 100644
--- a/src/components/modals/index.js
+++ b/src/components/modals/index.js
@@ -1,5 +1,5 @@
 /* @flow */
-import React, { Component } from 'react';
+import * as React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
@@ -29,7 +29,7 @@ import ConfirmUnverifiedAddress from 'components/modals/confirm/UnverifiedAddres
 import ForgetDevice from 'components/modals/device/Forget';
 import RememberDevice from 'components/modals/device/Remember';
 import DuplicateDevice from 'components/modals/device/Duplicate';
-import RequestWalletType from 'components/modals/device/Type';
+import WalletType from 'components/modals/device/WalletType';
 
 type OwnProps = { }
 
@@ -52,13 +52,13 @@ type DispatchProps = {
 
 export type Props = StateProps & DispatchProps;
 
-const Fade = ({ children, ...props }) => (
+const Fade = (props: { children: React.Node}) => (
     <CSSTransition
         {...props}
         timeout={1000}
         classNames="fade"
     >
-        { children }
+        { props.children }
     </CSSTransition>
 );
 
@@ -85,7 +85,7 @@ const ModalWindow = styled.div`
     text-align: center;
 `;
 
-class Modal extends Component<Props> {
+class Modal extends React.Component<Props> {
     render() {
         if (!this.props.modal.opened) return null;
 
@@ -125,7 +125,7 @@ class Modal extends Component<Props> {
                 break;
 
             case CONNECT.REQUEST_WALLET_TYPE:
-                component = (<RequestWalletType {...this.props} />);
+                component = (<WalletType {...this.props} />);
                 break;
 
             default:
diff --git a/src/support/styles/Tooltip.js b/src/support/styles/Tooltip.js
index 10a7761b..34a602e8 100644
--- a/src/support/styles/Tooltip.js
+++ b/src/support/styles/Tooltip.js
@@ -4,7 +4,7 @@ import colors from 'config/colors';
 const tooltipStyles = css`
     .rc-tooltip {
         position: absolute;
-        z-index: 1070;
+        z-index: 10070;
         visibility: visible;
         border: none;
         border-radius: 3px;