Merge pull request #147 from trezor/fix-wallet-modals

Fix wallet modals

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)`

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<Props> {
@@ -100,22 +102,24 @@ 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}
+                        />
                     </StyledLink>
                 )}
-                <H3>RequestWalletType for { device.instanceLabel }?</H3>
-                <Row>
-                    <Span>
-                        <WalletTypeIcon type="standard" size={24} color={colors.TEXT_SECONDARY} />
+                <StyledHeading>Change wallet type for { device.instanceLabel }</StyledHeading>
+                <Content isTop>
+                    <Header>
+                        <WalletTypeIcon type="standard" size={32} color={colors.TEXT_PRIMARY} />
                         Standard Wallet
-                    </Span>
+                    </Header>
                     <P isSmaller>Continue to access your standard wallet.</P>
-                    <StyledButton onClick={() => this.changeType(false, device.state)}>Go to your standard wallet</StyledButton>
-                    <Divider />
-                    <Span>
-                        <WalletTypeIcon type="hidden" size={24} color={colors.TEXT_SECONDARY} />
-                        Hidden Wallet
-                        <StyledTooltip
+                    <StyledButton onClick={() => this.changeType(false)}>Go to your standard wallet</StyledButton>
+                </Content>
+                <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."
@@ -124,13 +128,20 @@ class WalletType extends Component<Props> {
                         <StyledIcon
                             icon={icons.HELP}
                             color={colors.TEXT_SECONDARY}
-                                size={24}
+                            size={26}
                         />
-                        </StyledTooltip>
-                    </Span>
+                    </Tooltip>
+                    <Header>
+                        <WalletTypeIcon
+                            type="hidden"
+                            size={32}
+                            color={colors.TEXT_PRIMARY}
+                        />
+                        Hidden Wallet
+                    </Header>
                     <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</StyledButton>
-                </Row>
+                </Content>
             </Wrapper>
         );
     }

src/components/modals/index.js

@@ -90,7 +90,6 @@ class Modal extends React.Component<Props> {
         if (!this.props.modal.opened) return null;
 
         const { opened, windowType } = this.props.modal;
-
         let component = null;
         switch (windowType) {
             case UI.REQUEST_PIN: