diff --git a/src/components/modals/device/WalletType/index.js b/src/components/modals/device/WalletType/index.js index 260196c3..fead7453 100644 --- a/src/components/modals/device/WalletType/index.js +++ b/src/components/modals/device/WalletType/index.js @@ -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,49 @@ import type { Props } from 'components/modals/index'; const Wrapper = styled.div` 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)` position: absolute; right: 15px; - top: 15px; + top: 10px; `; const StyledButton = styled(Button)` - margin: 0 0 10px 0; -`; - -const StyledTooltip = styled(Tooltip)` - position: absolute; - right: 0px; - top: 1px; + margin: 10px 0 10px 0; `; const StyledIcon = styled(Icon)` - position: relative; - top: -1px; + position: absolute; + top: 10px; + right: 15px; + &:hover { cursor: pointer; } `; -const Row = styled.div` - display: flex; - flex-direction: column; - padding: 10px 0; -`; - -const Span = styled.div` +const Content = styled.div` + padding: 55px 48px 40px 48px; position: relative; display: flex; - align-items: center; - flex-direction: row; + flex-direction: column; justify-content: center; -`; + align-items: center; -const Divider = styled.div` - margin: 20px 0; - border-top: 1px solid ${colors.DIVIDER}; + ${props => props.isTop && css` + border-bottom: 1px solid ${colors.DIVIDER}; + `} `; class WalletType extends Component { @@ -103,34 +102,39 @@ class WalletType extends Component { )} -

RequestWalletType for { device.instanceLabel }?

- - + Change wallet type 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 -
+ ); }