mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-25 16:38:08 +00:00
add tooltip and texts to wallettype modal
This commit is contained in:
parent
c1a1e89ff3
commit
5291ce32b1
@ -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>
|
@ -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:
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user