Unverified address modal refacotred

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`

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<Props> {
     keyboardHandler: (event: KeyboardEvent) => void;
 
@@ -67,13 +98,17 @@ class ConfirmUnverifiedAddress extends Component<Props> {
         }
 
         return (
-            <div className="confirm-address-unverified">
+            <Wrapper>
-                <button className="close-modal transparent" onClick={onCancel} />
+                <StyledLink onClick={onCancel}>
-                <h3>{ deviceStatus }</h3>
+                    <Icon size={20} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
-                <p>To prevent phishing attacks, you should verify the address on your TREZOR first. { claim } to continue with the verification process.</p>
+                </StyledLink>
-                <button onClick={event => this.verifyAddress()}>Try again</button>
+                <H3>{ deviceStatus }</H3>
-                <button className="white" onClick={event => this.showUnverifiedAddress()}>Show unverified address</button>
+                <P>To prevent phishing attacks, you should verify the address on your TREZOR first. { claim } to continue with the verification process.</P>
-            </div>
+                <Row>
+                    <StyledButton onClick={() => this.verifyAddress()}>Try again</StyledButton>
+                    <StyledButton isWhite onClick={() => this.showUnverifiedAddress()}>Show unverified address</StyledButton>
+                </Row>
+            </Wrapper>
         );
     }
 }

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;
 }