mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-13 20:08:56 +00:00
Finished modal refactor
This commit is contained in:
parent
4ec97ad003
commit
7430d61254
@ -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,
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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()}
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user