arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-29 17:31:00 +00:00
Code Issues Releases Wiki Activity

Styled sign and verify section

Browse Source
This commit is contained in:
Vladimir Volek 2018-10-16 12:49:05 +02:00
parent 8753a043a7
commit 778d08a898
6 changed files with 65 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -56,6 +56,7 @@
"react-router-redux": "next",
"react-scale-text": "^1.2.2",
"react-select": "2.0.0",
"react-textarea-autosize": "^7.0.4",
"react-transition-group": "^2.4.0",
"redbox-react": "^1.6.0",
"redux": "4.0.0",

13
src/components/Textarea/index.js
View File

@ -1,4 +1,5 @@
import React from 'react';
import Textarea from 'react-textarea-autosize';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import colors from 'config/colors';
@ -13,11 +14,11 @@ const Wrapper = styled.div`
const disabledColor = colors.TEXT_PRIMARY;
const StyledTextarea = styled.textarea`
const StyledTextarea = styled(Textarea)`
width: 100%;
min-height: 85px;
margin-bottom: 10px;
padding: 6px 12px;
padding: 10px 12px;
box-sizing: border-box;
border: 1px solid ${props => (props.borderColor ? props.borderColor : colors.DIVIDER)};
border-radius: 2px;
@ -27,7 +28,7 @@ const StyledTextarea = styled.textarea`
color: ${colors.TEXT_PRIMARY};
background: ${colors.WHITE};
font-weight: ${FONT_WEIGHT.BASE};
font-size: ${FONT_SIZE.BASE};
font-size: ${FONT_SIZE.SMALL};
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
@ -105,7 +106,7 @@ const getColor = (inputState) => {
return color;
};
const Textarea = ({
const TextArea = ({
className,
placeholder = '',
value,
@ -145,7 +146,7 @@ const Textarea = ({
</Wrapper>
);
Textarea.propTypes = {
TextArea.propTypes = {
className: PropTypes.string,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
@ -159,4 +160,4 @@ Textarea.propTypes = {
bottomText: PropTypes.string,
};
export default Textarea;
export default TextArea;

2
src/components/inputs/Input/index.js
View File

@ -34,7 +34,7 @@ const TopLabel = styled.span`
const StyledInput = styled.input`
width: 100%;
height: 40px;
height: ${props => (props.height ? `${props.height}px` : '40px')};
padding: 5px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px;
line-height: 1.42857143;

2
src/views/Wallet/components/TopNavigationAccount/index.js
View File

@ -59,7 +59,7 @@ const TopNavigationAccount = (props: Props) => {
<StyledNavLink exact to={`${basePath}`}>Summary</StyledNavLink>
<StyledNavLink to={`${basePath}/receive`}>Receive</StyledNavLink>
<StyledNavLink to={`${basePath}/send`}>Send</StyledNavLink>
{/* <StyledNavLink to={`${basePath}/signverify`}>Sign & Verify</StyledNavLink> */}
<StyledNavLink to={`${basePath}/signverify`}>Sign & Verify</StyledNavLink>
<Indicator pathname={pathname} />
</Wrapper>
);

67
src/views/Wallet/views/Account/SignVerify/index.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import styled from 'styled-components';
import Input from 'components/inputs/Input';
import Textarea from 'components/Textarea';
import Button from 'components/Button';
import Content from 'views/Wallet/components/Content';
import { H2 } from 'components/Heading';
@ -14,8 +15,19 @@ const Wrapper = styled.div`
background: ${colors.WHITE};
`;
const StyledH2 = styled(H2)`
padding-bottom: 10px;
const Row = styled.div`
padding: 10px 0 10px 0;
`;
const RowButtons = styled(Row)`
display: flex;
align-items: center;
justify-content: flex-end;
`;
const StyledButton = styled(Button)`
margin-left: 10px;
width: 110px;
`;
const Column = styled.div`
@ -31,30 +43,49 @@ const Verify = styled(Column)`
`;
const Label = styled.div`
color: ${colors.LABEL};
padding: 5px 0px;
color: ${colors.TEXT_SECONDARY};
padding: 5px 0px 10px 0;
`;
const AccountSignVerify = () => (
<Content>
<H2>Sign & Verify</H2>
<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" />
<Row>
<Label>Address</Label>
<Input height={50} type="text" disabled />
</Row>
<Row>
<Label>Message</Label>
<Textarea rows="2" maxLength="255" />
</Row>
<Row>
<Label>Signature</Label>
<Textarea rows="2" maxLength="255" disabled />
</Row>
<RowButtons>
<Button isWhite>Clear</Button>
<StyledButton>Sign</StyledButton>
</RowButtons>
</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" />
<Row>
<Label>Address</Label>
<Input type="text" />
</Row>
<Row>
<Label>Message</Label>
<Textarea rows="4" maxLength="255" />
</Row>
<Row>
<Label>Signature</Label>
<Textarea rows="4" maxLength="255" />
</Row>
<RowButtons>
<Button isWhite>Clear</Button>
<StyledButton>Verify</StyledButton>
</RowButtons>
</Verify>
</Wrapper>
</Content>

6
yarn.lock
View File

@ -8449,6 +8449,12 @@ react-select@2.0.0:
react-input-autosize "^2.2.1"
react-transition-group "^2.2.1"
react-textarea-autosize@^7.0.4:
version "7.0.4"
resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-7.0.4.tgz#4e4be649b544a88713e7b5043f76950f35d3d503"
dependencies:
prop-types "^15.6.0"
react-transition-group@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"