arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-24 09:18:09 +00:00
Code Issues Releases Wiki Activity

Finished modal refactor

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-31 22:35:21 +02:00
parent 4ec97ad003
commit 7430d61254
5 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Loader/index.js
View File

@ -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,

2
src/components/modals/confirm/SignTx/index.js
View File

@ -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>

6
src/components/modals/confirm/UnverifiedAddress/index.js
View File

@ -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>

1
src/components/modals/device/Remember/index.js
View File

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

4
src/components/modals/index.js
View File

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