arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-29 02:18:06 +00:00
Code Issues Releases Wiki Activity

Sign and verify migrated to styled components

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-10 16:01:12 +02:00
parent a591c5ea8f
commit b7e5dba3d0
4 changed files with 62 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/js/components/wallet/account/sign/SignVerify.js
View File

@ -1,29 +1,66 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components';
import { H2 } from '~/js/components/common/Heading'; import { H2 } from '~/js/components/common/Heading';
import { bindActionCreators } from 'redux'; import colors from '~/js/config/colors';
import { connect } from 'react-redux';
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 = () => ( const SignVerify = () => (
<section className="signverify"> <Wrapper>
<div className="sign"> <Sign>
<H2>Sign message</H2> <StyledH2>Sign message</StyledH2>
<label>Message</label> <Label>Message</Label>
<textarea rows="4" maxLength="255" /> <Textarea rows="4" maxLength="255" />
<label>Address</label> <Label>Address</Label>
<input type="text" /> <Input type="text" />
<label>Signature</label> <Label>Signature</Label>
<textarea rows="4" maxLength="255" readOnly="readonly" /> <Textarea rows="4" maxLength="255" readOnly="readonly" />
</div> </Sign>
<div className="verify"> <Verify>
<H2>Verify message</H2> <StyledH2>Verify message</StyledH2>
<label>Message</label> <Label>Message</Label>
<textarea rows="4" maxLength="255" /> <Textarea rows="4" maxLength="255" />
<label>Address</label> <Label>Address</Label>
<input type="text" /> <Input type="text" />
<label>Signature</label> <Label>Signature</Label>
<textarea rows="4" maxLength="255" /> <Textarea rows="4" maxLength="255" />
</div> </Verify>
</section> </Wrapper>
); );
export default connect(null, null)(SignVerify); export default SignVerify;

2
src/js/config/colors.js
View File

@ -27,4 +27,6 @@ export default {
ERROR_PRIMARY: '#ED1212', ERROR_PRIMARY: '#ED1212',
ERROR_SECONDARY: '#FFE9E9', ERROR_SECONDARY: '#FFE9E9',
LABEL_COLOR: '#A9A9A9',
}; };

1
src/styles/index.less
View File

@ -16,7 +16,6 @@
@import './send.less'; @import './send.less';
@import './receive.less'; @import './receive.less';
@import './summary.less'; @import './summary.less';
@import './signverify.less';
@import './deviceSettings.less'; @import './deviceSettings.less';
@import './landingPage.less'; @import './landingPage.less';

36
src/styles/signverify.less
View File

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