1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-29 02:18:06 +00:00

Added children for button not text, refactored remember device

This commit is contained in:
Vladimir Volek 2018-08-30 14:16:43 +02:00
parent 847f981767
commit 64d5db3e6a
6 changed files with 104 additions and 50 deletions

View File

@ -35,11 +35,15 @@ const CircleWrapper = styled.circle`
`};
`;
const StyledParagraph = styled(Paragraph)`
color: ${props => (props.isWhiteText ? colors.WHITE : colors.TEXT_PRIMARY)};
`;
const Loader = ({
className, text, size = 100,
className, text, isWhiteText = false, size = 100,
}) => (
<Wrapper className={className} size={size}>
<Paragraph>{text}</Paragraph>
<StyledParagraph isWhiteText={isWhiteText}>{text}</StyledParagraph>
<SvgWrapper viewBox="25 25 50 50">
<CircleWrapper
cx="50"
@ -65,6 +69,7 @@ const Loader = ({
);
Loader.propTypes = {
isWhiteText: PropTypes.bool,
className: PropTypes.string,
text: PropTypes.string,
size: PropTypes.number,

View File

@ -36,7 +36,6 @@ const Wrapper = styled.button`
&:hover {
color: ${colors.TEXT_PRIMARY};
border-color: ${colors.TEXT_PRIMARY};
background: ${colors.DIVIDER};
}
@ -113,7 +112,7 @@ const IconWrapper = styled.span`
`;
const Button = ({
className, text, icon, onClick = () => { }, disabled, isWhite = false, isWebUsb = false, isTransparent = false,
children, className, text, icon, onClick = () => { }, disabled, isWhite = false, isWebUsb = false, isTransparent = false,
}) => (
<Wrapper
className={className}
@ -133,11 +132,12 @@ const Button = ({
/>
</IconWrapper>
)}
{text}
{children}
</Wrapper>
);
Button.propTypes = {
children: PropTypes.element.isRequired,
className: PropTypes.string,
onClick: PropTypes.func,
disabled: PropTypes.bool,

View File

@ -4,7 +4,7 @@ import { H3 } from 'components/Heading';
import P from 'components/Paragraph';
import Button from 'components/buttons/Button';
const Remember = styled.div`
const Wrapper = styled.div`
width: 360px;
padding: 24px 48px;
`;
@ -51,14 +51,14 @@ class ForgetDevice extends Component {
const { device } = this.props.modal;
const { onCancel } = this.props.modalActions;
return (
<Remember>
<H3>Forget { device.instanceLabel } ?</H3>
<Wrapper>
<H3>Forget { device.instanceLabel }?</H3>
<StyledP isSmaller>Forgetting only removes the device from the list on the left, your coins are still safe and you can access them by reconnecting your TREZOR again.</StyledP>
<Row>
<StyledButton onClick={() => this.forget()} text="Forget" />
<StyledButton isWhite onClick={onCancel} text="Don't forget" />
</Row>
</Remember>
</Wrapper>
);
}
}

View File

@ -1,8 +1,10 @@
/* @flow */
import React, { Component } from 'react';
import styled from 'styled-components';
import { H3 } from 'components/Heading';
import P from 'components/Paragraph';
import Loader from 'components/Loader';
import Button from 'components/buttons/Button';
import type { Props } from './index';
@ -11,6 +13,40 @@ type State = {
ticker?: number;
}
const ButtonContent = styled.div`
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
`;
const StyledP = styled(P)`
padding: 10px 0;
`;
const Wrapper = styled.div`
width: 360px;
padding: 24px 48px;
`;
const Text = styled.div`
padding-right: 10px;
`;
const Column = styled.div`
display: flex;
flex-direction: column;
`;
const StyledButton = styled(Button)`
margin: 5px 0;
`;
const StyledLoader = styled(Loader)`
position: absolute;
left: 200px;
`;
export default class RememberDevice extends Component<Props, State> {
keyboardHandler: (event: KeyboardEvent) => void;
@ -86,12 +122,27 @@ export default class RememberDevice extends Component<Props, State> {
});
}
return (
<div className="remember">
<h3>Forget {label}?</h3>
<p>Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?</p>
<button onClick={event => this.forget()}><span>Forget <Loader size={28} text={this.state.countdown.toString()} /></span></button>
<button className="white" onClick={event => onRememberDevice(device)}>Remember</button>
</div>
<Wrapper>
<H3>Forget {label}?</H3>
<StyledP isSmaller>Would you like TREZOR Wallet to forget your { devicePlural }, so that it is still visible even while disconnected?</StyledP>
<Column>
<StyledButton onClick={() => this.forget()}>
<ButtonContent>
<Text>Forget</Text>
<StyledLoader
isWhiteText
size={28}
text={this.state.countdown.toString()}
/>
</ButtonContent>
</StyledButton>
<StyledButton
isWhite
onClick={event => onRememberDevice(device)}
>Remember
</StyledButton>
</Column>
</Wrapper>
);
}
}

View File

@ -1,10 +1,10 @@
/* @flow */
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import styled from 'styled-components';
import colors from 'config/colors';
import { CSSTransition, Transition } from 'react-transition-group';
@ -65,12 +65,35 @@ const Fade = ({ children, ...props }) => (
</CSSTransition>
);
const ModalContainer = styled.div`
position: fixed;
z-index: 10000;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
align-items: center;
overflow: auto;
padding: 20px;
`;
const ModalWindow = styled.div`
margin: auto;
position: relative;
border-radius: 4px;
background-color: ${colors.WHITE};
text-align: center;
`;
class Modal extends Component<Props> {
render() {
if (!this.props.modal.opened) return null;
const { opened, windowType } = this.props.modal;
const { opened } = this.props.modal;
const windowType = CONNECT.REMEMBER_REQUEST;
let component = null;
switch (windowType) {
case UI.REQUEST_PIN:
@ -86,8 +109,6 @@ class Modal extends Component<Props> {
component = (<ConfirmSignTx {...this.props} />);
break;
// case "ButtonRequest_Address" :
// component = (<ConfirmAddress { ...this.props } />)
// break;
case 'ButtonRequest_PassphraseType':
component = (<PassphraseType {...this.props} />);
break;
@ -114,11 +135,11 @@ class Modal extends Component<Props> {
if (opened) {
ch = (
<Fade key="1">
<div className="modal-container">
<div className="modal-window">
<ModalContainer className="modal-container">
<ModalWindow>
{ component }
</div>
</div>
</ModalWindow>
</ModalContainer>
</Fade>
);
}

View File

@ -1,27 +1,4 @@
.modal-container {
position: fixed;
z-index: 10000;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.35);
display: flex;
flex-direction: column;
align-items: center;
overflow: auto;
padding: 20px;
.modal-window {
margin: auto;
// padding: 24px 48px;
position: relative;
border-radius: 4px;
background-color: @color_white;
text-align: center;
// overflow: hidden;
}
h3 {
color: @color_text_primary;
font-size: 16px;