From 7430d61254b74e41f25c162a6a43b7950d8f0453 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Fri, 31 Aug 2018 22:35:21 +0200
Subject: [PATCH] Finished modal refactor

---
 src/components/Loader/index.js                           | 7 +++++--
 src/components/modals/confirm/SignTx/index.js            | 2 +-
 src/components/modals/confirm/UnverifiedAddress/index.js | 6 +++---
 src/components/modals/device/Remember/index.js           | 1 +
 src/components/modals/index.js                           | 4 +---
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js
index 5a582df3..d4f8f4c4 100644
--- a/src/components/Loader/index.js
+++ b/src/components/Loader/index.js
@@ -2,6 +2,7 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import Paragraph from 'components/Paragraph';
+import { FONT_SIZE } from 'config/variables';
 import { DASH, GREEN_COLOR } from 'config/animations';
 import colors from 'config/colors';
 
@@ -36,14 +37,15 @@ const CircleWrapper = styled.circle`
 `;
 
 const StyledParagraph = styled(Paragraph)`
+    font-size: ${props => (props.isSmallText ? FONT_SIZE.SMALLER : FONT_SIZE.BASE)};
     color: ${props => (props.isWhiteText ? colors.WHITE : colors.TEXT_PRIMARY)};
 `;
 
 const Loader = ({
-    className, text, isWhiteText = false, size = 100,
+    className, text, isWhiteText = false, isSmallText, size = 100,
 }) => (
     <Wrapper className={className} size={size}>
-        <StyledParagraph isWhiteText={isWhiteText}>{text}</StyledParagraph>
+        <StyledParagraph isSmallText={isSmallText} isWhiteText={isWhiteText}>{text}</StyledParagraph>
         <SvgWrapper viewBox="25 25 50 50">
             <CircleWrapper
                 cx="50"
@@ -70,6 +72,7 @@ const Loader = ({
 
 Loader.propTypes = {
     isWhiteText: PropTypes.bool,
+    isSmallText: PropTypes.bool,
     className: PropTypes.string,
     text: PropTypes.string,
     size: PropTypes.number,
diff --git a/src/components/modals/confirm/SignTx/index.js b/src/components/modals/confirm/SignTx/index.js
index ba550845..351d0345 100644
--- a/src/components/modals/confirm/SignTx/index.js
+++ b/src/components/modals/confirm/SignTx/index.js
@@ -43,7 +43,7 @@ const ConfirmSignTx = (props) => {
             <Header>
                 <Icon icon={icons.T1} size={60} color={colors.TEXT_SECONDARY} />
                 <H3>Confirm transaction on { device.label } device</H3>
-                <P>Details are shown on display</P>
+                <P isSmaller>Details are shown on display</P>
             </Header>
             <Content>
                 <Label>Send</Label>
diff --git a/src/components/modals/confirm/UnverifiedAddress/index.js b/src/components/modals/confirm/UnverifiedAddress/index.js
index 12c8672f..b84a4ce3 100644
--- a/src/components/modals/confirm/UnverifiedAddress/index.js
+++ b/src/components/modals/confirm/UnverifiedAddress/index.js
@@ -1,6 +1,6 @@
 /* @flow */
 import React, { Component } from 'react';
-import { H3 } from 'components/Heading';
+import { H2 } from 'components/Heading';
 import P from 'components/Paragraph';
 import styled from 'styled-components';
 import Icon from 'components/Icon';
@@ -102,8 +102,8 @@ class ConfirmUnverifiedAddress extends Component<Props> {
                 <StyledLink onClick={onCancel}>
                     <Icon size={20} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
                 </StyledLink>
-                <H3>{ deviceStatus }</H3>
-                <P>To prevent phishing attacks, you should verify the address on your TREZOR first. { claim } to continue with the verification process.</P>
+                <H2>{ deviceStatus }</H2>
+                <StyledP isSmaller>To prevent phishing attacks, you should verify the address on your TREZOR first. { claim } to continue with the verification process.</StyledP>
                 <Row>
                     <StyledButton onClick={() => this.verifyAddress()}>Try again</StyledButton>
                     <StyledButton isWhite onClick={() => this.showUnverifiedAddress()}>Show unverified address</StyledButton>
diff --git a/src/components/modals/device/Remember/index.js b/src/components/modals/device/Remember/index.js
index 6d5589ec..efb10db6 100644
--- a/src/components/modals/device/Remember/index.js
+++ b/src/components/modals/device/Remember/index.js
@@ -130,6 +130,7 @@ export default class RememberDevice extends Component<Props, State> {
                         <ButtonContent>
                             <Text>Forget</Text>
                             <StyledLoader
+                                isSmallText
                                 isWhiteText
                                 size={28}
                                 text={this.state.countdown.toString()}
diff --git a/src/components/modals/index.js b/src/components/modals/index.js
index 4ad88240..e62094b7 100644
--- a/src/components/modals/index.js
+++ b/src/components/modals/index.js
@@ -90,9 +90,7 @@ class Modal extends Component<Props> {
     render() {
         if (!this.props.modal.opened) return null;
 
-        const { opened } = this.props.modal;
-
-        const windowType = UI.REQUEST_PIN;
+        const { opened, windowType } = this.props.modal;
 
         let component = null;
         switch (windowType) {