@ -1,7 +1,7 @@
/* @flow */
import React , { Component } from 'react' ;
import styled from 'styled-components' ;
import styled , { css } from 'styled-components' ;
import { H3 } from 'components/Heading' ;
import P from 'components/Paragraph' ;
import Button from 'components/Button' ;
@ -16,50 +16,52 @@ import type { Props } from 'components/modals/index';
const Wrapper = styled . div `
width : 360 px ;
padding : 24 px 48 px ;
` ;
const Header = styled . div `
display : flex ;
justify - content : center ;
align - items : center ;
color : $ { colors . TEXT _PRIMARY } ;
` ;
const StyledHeading = styled ( H3 ) `
padding - top : 30 px ;
` ;
const StyledLink = styled ( Link ) `
position : absolute ;
right : 15 px ;
top : 15 px ;
top : 1 0 px ;
` ;
const StyledButton = styled ( Button ) `
margin : 0 0 10 px 0 ;
margin : 1 0px 0 10 px 0 ;
` ;
const Styled Tooltip = styled ( Tooltip ) `
const Styled Icon = styled ( Icon ) `
position : absolute ;
right : 0 px ;
top : 1 px ;
` ;
top : 10 px ;
right : 15 px ;
const StyledIcon = styled ( Icon ) `
position : relative ;
top : - 1 px ;
& : hover {
cursor : pointer ;
}
` ;
const Row = styled . div `
display : flex ;
flex - direction : column ;
padding : 10 px 0 ;
` ;
const Span = styled . div `
const Content = styled . div `
padding : 55 px 48 px 40 px 48 px ;
position : relative ;
display : flex ;
align - items : center ;
flex - direction : row ;
flex - direction : column ;
justify - content : center ;
` ;
align - items : center ;
const Divider = styled . div `
margin : 20 px 0 ;
border - top : 1 px solid $ { colors . DIVIDER } ;
$ { props => props . isTop && css `
padding - top : 40 px ;
border - bottom : 1 px solid $ { colors . DIVIDER } ;
` }
` ;
class WalletType extends Component < Props > {
@ -100,37 +102,46 @@ class WalletType extends Component<Props> {
< Wrapper >
{ device . state && (
< StyledLink onClick = { onCancel } >
< Icon size = { 20 } color = { colors . TEXT _SECONDARY } icon = { icons . CLOSE } / >
< Icon
size = { 20 }
color = { colors . TEXT _SECONDARY }
icon = { icons . CLOSE }
/ >
< / S t y l e d L i n k >
) }
< H3 > RequestWalletType for { device . instanceLabel } ? < / H 3 >
< Row >
< Span >
< WalletTypeIcon type = "standard" size = { 24 } color = { colors . TEXT _ SECOND ARY} / >
< StyledHeading> Change wallet type for { device . instanceLabel } < / S t y l e d H e a d i n g >
< Content isTop >
< Header >
< WalletTypeIcon type = "standard" size = { 3 2} color = { colors . TEXT _ PRIM ARY} / >
Standard Wallet
< / Sp a n >
< / He a d e r >
< P isSmaller > Continue to access your standard wallet . < / P >
< StyledButton onClick = { ( ) => this . changeType ( false , device . state ) } > Go to your standard wallet < / S t y l e d B u t t o n >
< Divider / >
< Span >
< WalletTypeIcon type = "hidden" size = { 24 } color = { colors . TEXT _SECONDARY } / >
< StyledButton onClick = { ( ) => this . changeType ( false ) } > Go to your standard wallet < / S t y l e d B u t t o n >
< / C o n t e n t >
< Content >
< 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 }
/ >
< / T o o l t i p >
< Header >
< WalletTypeIcon
type = "hidden"
size = { 32 }
color = { colors . TEXT _PRIMARY }
/ >
Hidden Wallet
< 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 }
/ >
< / S t y l e d T o o l t i p >
< / S p a n >
< / H e a d e r >
< 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 < / S t y l e d B u t t o n >
< / R o w >
< / C o n t e n t >
< / W r a p p e r >
) ;
}