arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

Merge pull request #147 from trezor/fix-wallet-modals

Browse Source 
Fix wallet modals
This commit is contained in:
Szymon Lesisz 2018-10-09 14:10:08 +02:00 committed by GitHub
commit 514b31296c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/modals/device/Forget/index.js
View File

@ -10,7 +10,7 @@ const Wrapper = styled.div`
`; `;
const StyledP = styled(P)` const StyledP = styled(P)`
padding: 14px 0px; padding: 7px 0px;
`; `;
const StyledButton = styled(Button)` const StyledButton = styled(Button)`

109
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,52 @@ 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;
color: ${colors.TEXT_PRIMARY};
`;
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; padding-top: 40px;
border-top: 1px solid ${colors.DIVIDER}; border-bottom: 1px solid ${colors.DIVIDER};
`}
`; `;
class WalletType extends Component<Props> { class WalletType extends Component<Props> {
@ -100,37 +102,46 @@ class WalletType extends Component<Props> {
<Wrapper> <Wrapper>
{ device.state && ( { device.state && (
<StyledLink onClick={onCancel}> <StyledLink onClick={onCancel}>
<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={32} color={colors.TEXT_PRIMARY} />
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, device.state)}>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
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={26}
/>
</Tooltip>
<Header>
<WalletTypeIcon
type="hidden"
size={32}
color={colors.TEXT_PRIMARY}
/>
Hidden Wallet Hidden Wallet
<StyledTooltip </Header>
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> <P isSmaller>You will be asked to enter your passphrase to unlock your hidden wallet.</P>
<StyledButton isWhite onClick={() => this.changeType(true, device.state)}>Go to your hidden wallet</StyledButton> <StyledButton isWhite onClick={() => this.changeType(true, device.state)}>Go to your hidden wallet</StyledButton>
</Row> </Content>
</Wrapper> </Wrapper>
); );
} }

1
src/components/modals/index.js
View File

@ -90,7 +90,6 @@ class Modal extends React.Component<Props> {
if (!this.props.modal.opened) return null; if (!this.props.modal.opened) return null;
const { opened, windowType } = this.props.modal; const { opened, windowType } = this.props.modal;
let component = null; let component = null;
switch (windowType) { switch (windowType) {
case UI.REQUEST_PIN: case UI.REQUEST_PIN: