mirror of https://github.com/trezor/trezor-wallet
Vladimir Volek
6 years ago
parent
8f9a26caaa
commit
ec1b25d760
@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import PropTypes from 'prop-types';
|
||||
import colors from 'config/colors';
|
||||
|
||||
const Wrapper = styled.button`
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin-top: 15px;
|
||||
margin-left: 10px;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
color: ${colors.TEXT_PRIMARY};
|
||||
border: 1px solid ${colors.DIVIDER};
|
||||
background: ${colors.WHITE};
|
||||
transition: all 0.3s;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: ${colors.TEXT_PRIMARY};
|
||||
background-color: ${colors.WHITE};
|
||||
border-color: ${colors.TEXT_SECONDARY};
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: ${colors.TEXT_PRIMARY};
|
||||
background: ${colors.DIVIDER};
|
||||
border-color: ${colors.DIVIDER};
|
||||
}
|
||||
`;
|
||||
|
||||
const PinButton = ({
|
||||
children, className, onClick,
|
||||
}) => (
|
||||
<Wrapper
|
||||
className={className}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
PinButton.propTypes = {
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.string.isRequired,
|
||||
onClick: PropTypes.func,
|
||||
};
|
||||
|
||||
export default PinButton;
|
||||
@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled, { css } from 'styled-components';
|
||||
import colors from 'config/colors';
|
||||
import Icon from 'components/Icon';
|
||||
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
|
||||
import icons from 'config/icons';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const StyledInput = styled.input`
|
||||
letter-spacing: 7px;
|
||||
font-weight: ${FONT_WEIGHT.BIGGER};
|
||||
font-size: ${FONT_SIZE.BIGGER};
|
||||
padding: 5px 31px 10px 20px;
|
||||
color: ${colors.TEXT_PRIMARY};
|
||||
background: transparent;
|
||||
`;
|
||||
|
||||
const StyledIcon = styled(Icon)`
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const Input = ({
|
||||
onChange,
|
||||
onDeleteClick,
|
||||
value,
|
||||
}) => (
|
||||
<Wrapper>
|
||||
<StyledInput
|
||||
disabled
|
||||
type="password"
|
||||
maxLength="9"
|
||||
autoComplete="off"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<StyledIcon onClick={() => onDeleteClick()} color={colors.TEXT_PRIMARY} icon={icons.BACK} />
|
||||
</Wrapper>
|
||||
);
|
||||
|
||||
Input.propTypes = {
|
||||
onDeleteClick: PropTypes.func.isRequired,
|
||||
value: PropTypes.string.isRequired,
|
||||
onChange: PropTypes.func,
|
||||
};
|
||||
|
||||
export default Input;
|
||||
Loading…
Reference in new issue