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 { constructor(props: Props) { super(props); @@ -77,17 +105,29 @@ class WalletType extends Component { )}

RequestWalletType for { device.instanceLabel }?

- + Standard Wallet - +

Continue to access your standard wallet.

this.changeType(false)}>Go to your standard wallet - - + + Hidden Wallet - + + + +

You will be asked to enter your passphrase to unlock your hidden wallet.

this.changeType(true)}>Go to your hidden wallet
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}) => ( - { children } + { props.children } ); @@ -85,7 +85,7 @@ const ModalWindow = styled.div` text-align: center; `; -class Modal extends Component { +class Modal extends React.Component { render() { if (!this.props.modal.opened) return null; @@ -125,7 +125,7 @@ class Modal extends Component { break; case CONNECT.REQUEST_WALLET_TYPE: - component = (); + component = (); 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;