arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-28 03:08:30 +00:00
Code Issues Releases Wiki Activity

Fixed wallet type styles

Browse Source
This commit is contained in:
Vladimir Volek 2018-10-09 13:50:25 +02:00
parent 5291ce32b1
commit 3a01dc50f3
1 changed files with 50 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/modals/device/WalletType/index.js
View File

@ -1,7 +1,7 @@
/* @flow */ /* @flow */
import React, { Component } from 'react'; import React, { Component } from 'react';
import styled from 'styled-components'; import styled, { css } from 'styled-components';
import { H3 } from 'components/Heading'; import { H3 } from 'components/Heading';
import P from 'components/Paragraph'; import P from 'components/Paragraph';
import Button from 'components/Button'; import Button from 'components/Button';
@ -16,50 +16,49 @@ import type { Props } from 'components/modals/index';
const Wrapper = styled.div` const Wrapper = styled.div`
width: 360px; width: 360px;
padding: 24px 48px; `;
const Header = styled.div`
display: flex;
justify-content: center;
align-items: center;
`;
const StyledHeading = styled(H3)`
padding-top: 30px;
`; `;
const StyledLink = styled(Link)` const StyledLink = styled(Link)`
position: absolute; position: absolute;
right: 15px; right: 15px;
top: 15px; top: 10px;
`; `;
const StyledButton = styled(Button)` const StyledButton = styled(Button)`
margin: 0 0 10px 0; margin: 10px 0 10px 0;
`;
const StyledTooltip = styled(Tooltip)`
position: absolute;
right: 0px;
top: 1px;
`; `;
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
position: relative; position: absolute;
top: -1px; top: 10px;
right: 15px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
`; `;
const Row = styled.div` const Content = styled.div`
display: flex; padding: 55px 48px 40px 48px;
flex-direction: column;
padding: 10px 0;
`;
const Span = styled.div`
position: relative; position: relative;
display: flex; display: flex;
align-items: center; flex-direction: column;
flex-direction: row;
justify-content: center; justify-content: center;
`; align-items: center;
const Divider = styled.div` ${props => props.isTop && css`
margin: 20px 0; border-bottom: 1px solid ${colors.DIVIDER};
border-top: 1px solid ${colors.DIVIDER}; `}
`; `;
class WalletType extends Component<Props> { class WalletType extends Component<Props> {
@ -103,19 +102,17 @@ class WalletType extends Component<Props> {
<Icon size={20} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={20} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
)} )}
<H3>RequestWalletType for { device.instanceLabel }?</H3> <StyledHeading>Change wallet type for { device.instanceLabel }</StyledHeading>
<Row> <Content isTop>
<Span> <Header>
<WalletTypeIcon type="standard" size={24} color={colors.TEXT_SECONDARY} /> <WalletTypeIcon type="standard" size={24} color={colors.TEXT_SECONDARY} />
Standard Wallet Standard Wallet
</Span> </Header>
<P isSmaller>Continue to access your standard wallet.</P> <P isSmaller>Continue to access your standard wallet.</P>
<StyledButton onClick={() => this.changeType(false)}>Go to your standard wallet</StyledButton> <StyledButton onClick={() => this.changeType(false)}>Go to your standard wallet</StyledButton>
<Divider /> </Content>
<Span> <Content>
<WalletTypeIcon type="hidden" size={24} color={colors.TEXT_SECONDARY} /> <Tooltip
Hidden Wallet
<StyledTooltip
maxWidth={285} maxWidth={285}
placement="top" 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." 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."
@ -126,11 +123,18 @@ class WalletType extends Component<Props> {
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
size={24} size={24}
/> />
</StyledTooltip> </Tooltip>
</Span> <Header>
<WalletTypeIcon
type="hidden"
size={24}
color={colors.TEXT_SECONDARY}
/>
Hidden Wallet
</Header>
<P isSmaller>You will be asked to enter your passphrase to unlock your hidden wallet.</P> <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> <StyledButton isWhite onClick={() => this.changeType(true)}>Go to your hidden wallet</StyledButton>
</Row> </Content>
</Wrapper> </Wrapper>
); );
} }