mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-30 19:00:53 +00:00
Added children for button not text, refactored remember device
This commit is contained in:
Vladimir Volek
parent
847f981767
commit
64d5db3e6a
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user