mirror of
https://github.com/trezor/trezor-wallet
synced 2024-12-28 18:08:08 +00:00
Sign and verify migrated to styled components
This commit is contained in:
parent
a591c5ea8f
commit
b7e5dba3d0
@ -1,29 +1,66 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { H2 } from '~/js/components/common/Heading';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
import colors from '~/js/config/colors';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
background: ${colors.WHITE};
|
||||
padding: 50px;
|
||||
`;
|
||||
|
||||
const StyledH2 = styled(H2)`
|
||||
padding-bottom: 10px;
|
||||
`;
|
||||
|
||||
const Column = styled.div`
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const Sign = styled(Column)``;
|
||||
|
||||
const Verify = styled(Column)`
|
||||
padding-left: 20px;
|
||||
`;
|
||||
|
||||
const Label = styled.div`
|
||||
color: ${colors.LABEL};
|
||||
padding: 5px 0px;
|
||||
`;
|
||||
|
||||
const Textarea = styled.textarea`
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Input = styled.input``;
|
||||
|
||||
const SignVerify = () => (
|
||||
<section className="signverify">
|
||||
<div className="sign">
|
||||
<H2>Sign message</H2>
|
||||
<label>Message</label>
|
||||
<textarea rows="4" maxLength="255" />
|
||||
<label>Address</label>
|
||||
<input type="text" />
|
||||
<label>Signature</label>
|
||||
<textarea rows="4" maxLength="255" readOnly="readonly" />
|
||||
</div>
|
||||
<div className="verify">
|
||||
<H2>Verify message</H2>
|
||||
<label>Message</label>
|
||||
<textarea rows="4" maxLength="255" />
|
||||
<label>Address</label>
|
||||
<input type="text" />
|
||||
<label>Signature</label>
|
||||
<textarea rows="4" maxLength="255" />
|
||||
</div>
|
||||
</section>
|
||||
<Wrapper>
|
||||
<Sign>
|
||||
<StyledH2>Sign message</StyledH2>
|
||||
<Label>Message</Label>
|
||||
<Textarea rows="4" maxLength="255" />
|
||||
<Label>Address</Label>
|
||||
<Input type="text" />
|
||||
<Label>Signature</Label>
|
||||
<Textarea rows="4" maxLength="255" readOnly="readonly" />
|
||||
</Sign>
|
||||
<Verify>
|
||||
<StyledH2>Verify message</StyledH2>
|
||||
<Label>Message</Label>
|
||||
<Textarea rows="4" maxLength="255" />
|
||||
<Label>Address</Label>
|
||||
<Input type="text" />
|
||||
<Label>Signature</Label>
|
||||
<Textarea rows="4" maxLength="255" />
|
||||
</Verify>
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
export default connect(null, null)(SignVerify);
|
||||
export default SignVerify;
|
@ -27,4 +27,6 @@ export default {
|
||||
|
||||
ERROR_PRIMARY: '#ED1212',
|
||||
ERROR_SECONDARY: '#FFE9E9',
|
||||
|
||||
LABEL_COLOR: '#A9A9A9',
|
||||
};
|
@ -16,7 +16,6 @@
|
||||
@import './send.less';
|
||||
@import './receive.less';
|
||||
@import './summary.less';
|
||||
@import './signverify.less';
|
||||
@import './deviceSettings.less';
|
||||
|
||||
@import './landingPage.less';
|
||||
|
@ -1,36 +0,0 @@
|
||||
.signverify {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: @color_white;
|
||||
|
||||
h2 {
|
||||
line-height: 74px;
|
||||
}
|
||||
|
||||
.sign,
|
||||
.verify {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 50px;
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// textarea[readonly] {
|
||||
// background: #A9A9A9;
|
||||
// }
|
||||
}
|
||||
|
||||
label {
|
||||
color: #A9A9A9;
|
||||
padding: 5px 0px;
|
||||
}
|
||||
|
||||
.verify {
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user