diff --git a/src/components/modals/confirm/Address/index.js b/src/components/modals/confirm/Address/index.js index 42904c22..ce626394 100644 --- a/src/components/modals/confirm/Address/index.js +++ b/src/components/modals/confirm/Address/index.js @@ -1,10 +1,11 @@ /* @flow */ - import React, { Component } from 'react'; + import { findAccount } from 'reducers/AccountsReducer'; const Wrapper = styled.div` - width: 390px; + width: 370px; + padding: 24px 48px; `; const Header = styled.div` diff --git a/src/components/modals/confirm/UnverifiedAddress/index.js b/src/components/modals/confirm/UnverifiedAddress/index.js index 862dd42d..12c8672f 100644 --- a/src/components/modals/confirm/UnverifiedAddress/index.js +++ b/src/components/modals/confirm/UnverifiedAddress/index.js @@ -1,11 +1,42 @@ /* @flow */ - - import React, { Component } from 'react'; +import { H3 } from 'components/Heading'; +import P from 'components/Paragraph'; +import styled from 'styled-components'; +import Icon from 'components/Icon'; +import colors from 'config/colors'; +import icons from 'config/icons'; +import Button from 'components/buttons/Button'; +import Link from 'components/Link'; import { findAccount } from 'reducers/AccountsReducer'; import type { Props } from './index'; +const StyledLink = styled(Link)` + position: absolute; + right: 15px; + top: 15px; +`; + +const Wrapper = styled.div` + width: 370px; + padding: 24px 48px; +`; + +const StyledP = styled(P)` + padding: 10px 0px; +`; + +const Row = styled.div` + display: flex; + flex-direction: column; + padding: 10px 0; +`; + +const StyledButton = styled(Button)` + margin: 0 0 10px 0; +`; + class ConfirmUnverifiedAddress extends Component { keyboardHandler: (event: KeyboardEvent) => void; @@ -67,13 +98,17 @@ class ConfirmUnverifiedAddress extends Component { } return ( -
- - -
+ + + + +

{ deviceStatus }

+

To prevent phishing attacks, you should verify the address on your TREZOR first. { claim } to continue with the verification process.

+ + this.verifyAddress()}>Try again + this.showUnverifiedAddress()}>Show unverified address + +
); } } diff --git a/src/styles/modal.less b/src/styles/modal.less index 7d19a3b5..a157b540 100644 --- a/src/styles/modal.less +++ b/src/styles/modal.less @@ -44,20 +44,6 @@ } } - .confirm-address-unverified { - width: 370px; - padding: 24px 48px; - - h3 { - word-break: break-all; - } - - button:not(.close-modal) { - width: 100%; - margin-top: 12px; - } - } - .close-modal { position: absolute; top: 0; @@ -179,22 +165,4 @@ margin-top: 24px; margin-bottom: 14px; } -} - -.fade-enter { - opacity: 0.01; -} - -.fade-enter.fade-enter-active { - opacity: 1; - transition: opacity 1000ms ease-in; -} - -.fade-exit { - opacity: 1; -} - -.fade-exit.fade-exit-active { - opacity: 0.01; - transition: opacity 800ms ease-in; } \ No newline at end of file