Finished modal refactor

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,

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>

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>

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()}

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