diff --git a/src/components/modals/device/Forget/index.js b/src/components/modals/device/Forget/index.js index 7388d047..1b17f037 100644 --- a/src/components/modals/device/Forget/index.js +++ b/src/components/modals/device/Forget/index.js @@ -10,7 +10,7 @@ const Wrapper = styled.div` `; const StyledP = styled(P)` - padding: 14px 0px; + padding: 7px 0px; `; const StyledButton = styled(Button)` diff --git a/src/components/modals/device/WalletType/index.js b/src/components/modals/device/WalletType/index.js index 86fbdb1a..8ee7dc0c 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,52 @@ 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; + + color: ${colors.TEXT_PRIMARY}; +`; + +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` + padding-top: 40px; + border-bottom: 1px solid ${colors.DIVIDER}; + `} `; class WalletType extends Component { @@ -100,37 +102,46 @@ class WalletType extends Component { { device.state && ( - + )} -

RequestWalletType for { device.instanceLabel }?

- - - + Change wallet type for { device.instanceLabel } + +
+ Standard Wallet - +

Continue to access your standard wallet.

- this.changeType(false, device.state)}>Go to 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, device.state)}>Go to your hidden wallet -
+
); } diff --git a/src/components/modals/index.js b/src/components/modals/index.js index 312613eb..1daf6f67 100644 --- a/src/components/modals/index.js +++ b/src/components/modals/index.js @@ -90,7 +90,6 @@ class Modal extends React.Component { if (!this.props.modal.opened) return null; const { opened, windowType } = this.props.modal; - let component = null; switch (windowType) { case UI.REQUEST_PIN: